{"version":3,"sources":["webpack:///./src/components/global/RitualButton.js","webpack:///./src/components/product/MobileBannerBottom.js","webpack:///./src/components/product/MobileBannerTop.js","webpack:///./src/components/product/ProductCtaBar.js","webpack:///./src/components/global/StickyProductNav.js","webpack:///./src/utils/order.js","webpack:///./src/components/ingredients/IngredientInfo.js","webpack:///./src/components/ingredients/EvidenceBased.js","webpack:///./src/components/ingredients/Benefits.js","webpack:///./src/components/ingredients/IngredientInteractions.js","webpack:///./src/components/ingredients/Studies.js","webpack:///./src/templates/ingredientsPage.js","webpack:///./src/components/seo/Page.js","webpack:///./src/components/ScrollMagicController.js","webpack:///./src/components/product/ProductCategoryCards.js","webpack:///./src/components/home/Circle.js"],"names":["StyledButton","styled","MagicLink","Color","ritualBlue","responsive","sm","ritualYellow","white","rgba","StyledTextWrapper","div","StyledText","span","Font","circular","rem","md","AppendText","MagicButton","render","this","props","to","state","href","children","className","target","title","append","onClick","ariaLabel","id","disabled","settings","React","Component","Wrapper","attrs","MobileBannerBottom","checkoutButtonProps","Container","Row","CheckoutButton","Banner","p","messageBannerHeight","ProductTitle","h1","dutch","MobileBannerTop","isScrollingDown","messageBannerPresent","offsetFromBanner","lastScrollTop","componentDidMount","$","window","on","setIsScrollingDown","bind","context","height","setState","componentWillUnmount","off","st","pageYOffset","document","documentElement","scrollTop","bannerText","yieldedContent","linkNode","dangerouslySetInnerHTML","__html","KustomerIcon","createGlobalStyle","raised","BarWrapper","media","mobile","BarContainer","tablet","linkWidth","Column","ProductName","h2","YieldedLinkContainer","ProductLinks","MobileBannerContainer","ProductCtaBar","buttonCta","mainText","productName","hasActiveLink","product","showTopBar","scrollOffset","useState","showProductCtaBar","setShowProductCtaBar","atLeastTablet","setAtLeastTablet","productNameHtml","NameMap","html","useEffect","atLeast","handleScroll","throttle","header","getElementsByTagName","footer","position","headerHeight","offsetHeight","footerHeight","footerPosition","offsetTop","isBelowFooter","isAboveHero","handleResize","addEventListener","removeEventListener","buttonLocation","buttonText","appendText","stockStatus","trackCTAClick","linkAnchor","linkText","linkHref","ProductLink","StickyProductNav","contentfulProducts","intl","cf","data","allContentfulProduct","nodes","trackProductCTAClick","location","e","event","nonInteraction","metrics","track","productSku","sku","ctaLocation","showLearnMore","contentfulProduct","find","ctaText","t","amount","formatCurrency","price","round","name","Text","defaultMessage","query","orderArray","array","order","property","sort","a","b","aIndex","indexOf","bIndex","MainWrapper","notDesktop","BackLink","Ingredient","lg","PropertyRow","Label","Value","InterviewLink","InfoWrapper","ImageWrapper","IngredientImage","Img","IngredientInfo","controller","ingredient","image","form","foundIn","source","supplier","manufacturingLocation","manufacturerInterview","style","overflow","zIndex","ArrowLeft","Circle","fluid","loading","fadeIn","alt","userSelect","userDrag","pointerEvents","touchCallout","ScrollMagicController","ref","r","EvidenceContainer","Header","HeaderEmphasis","em","Blurb","Articles","ArticleContainer","StudyIconWrapper","Article","article","ArticleRow","StudyName","StudyInstitution","EvidenceBased","studies","studyData","studiesLink","studyCount","studySubject","JSON","parse","childMarkdownRemark","rawMarkdownBody","map","study","i","f","key","Study","institution","BenefitsContainer","BenefitsDiv","BenefitsHeader","BenefitItem","BenefitIcon","DescriptionWrapper","Description","Benefits","description","icons","iconData","icon","iconName","url","replace","BenefitsIconElement","BenefitsIcons","capitalize","InteractionsContainer","CircleContainer","CircleImage","IngredientInteractions","interactions","interactionsDescription","slug","interaction","left","top","width","StudiesContainer","SeperatorContainer","Separator","StudyHeader","StudyLink","StudyText","Studies","values","link","borderBottomWidth","ProductCategoryCardsWrapper","IngredientsPageTemplate","pageDescription","contentfulIngredientsPage","contentfulIngredient","seo","pagePath","share","src","updatePageData","label","updateLayoutState","navColor","banner","Page","Helmet","bodyAttributes","class","ProductCategoryCards","PageSEO","ScrollMagic","Controller","section","CategoryCardsContainer","scrollable","Slide","GridSlide","ImageContainer","RibbonStyle","css","OrderedCardShortNames","categories","allContentfulProductCategory","orderedCategoryNodes","_getOrderedCategories","handleClick","allCategoryNodes","renderSlides","slides","SlideComponent","slide","img","backgroundColor","altText","imgStyle","objectPosition","flag","contentStyle","bundleImage","bundleImages","discountData","getDiscountData","node","shortName","shopLandingReference","cardImage","push","titleCopy","bleedLeft","bleedRight","ProductCategoryCardsQuery","componentQuery","CircleElement","elementTop","scene","element","offset","initializeAnimation","isLeft","includes","resizeAnimation","destroy","Scene","triggerElement","setClassToggle","setTween","circleTween","reverse","addTo","gsap","fromTo","generateTweenOptions","opacity","start","duration","elementWidth","value","scrollFactor"],"mappings":"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","file":"component---src-templates-ingredients-page-js-08bc0ab16bce653190f5.js","sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\n\n// Utils\nimport { Font, Color, rem, rgba, responsive } from \"../../utils/style\";\n\n// Components\nimport MagicLink from \"../MagicLink\";\n\n// Styled Elements\nconst StyledButton = styled(MagicLink)`\n  box-sizing: border-box;\n  padding: 0 24px;\n  border-radius: 26px;\n  height: 50px;\n  cursor: pointer;\n  background-color: ${Color.ritualBlue};\n  border: 2px solid ${Color.ritualBlue};\n  margin: 0;\n  transition: all 0.2s;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  position: relative;\n\n  ${responsive.sm`\n    padding: 0 30px;\n  `};\n\n  * {\n    font-weight: 500;\n  }\n\n  &.bordered {\n    background-color: transparent;\n  }\n\n  &.short {\n    height: 40px;\n  }\n\n  &.fullwidth {\n    width: 100%;\n  }\n\n  &.long-text {\n    padding: 0 20px;\n\n    ${responsive.sm`\n      padding: 0 20px;\n    `}\n  }\n\n  &:hover {\n    border-color: ${Color.ritualYellow} !important;\n    background-color: ${Color.ritualYellow} !important;\n\n    span {\n      color: ${Color.ritualBlue} !important;\n\n      &:before {\n        background-color: ${Color.ritualBlue} !important;\n      }\n    }\n  }\n\n  &.alt-hover {\n    &:hover {\n      border-color: ${Color.white} !important;\n      background-color: ${Color.white} !important;\n\n      span {\n        color: ${Color.ritualBlue} !important;\n\n        &:before {\n          background-color: ${Color.ritualBlue} !important;\n        }\n      }\n    }\n  }\n\n  &.primary-cta {\n    background-color: white !important;\n    border: none !important;\n    color: ${Color.ritualBlue} !important;\n    &:hover {\n      color: white !important;\n      background-color: ${Color.ritualBlue} !important;\n\n      span {\n        color: white !important;\n      }\n    }\n\n    span {\n      color: ${Color.ritualBlue} !important;\n    }\n  }\n\n  &.yellow-cta {\n    background-color: ${Color.ritualYellow} !important;\n    border: none !important;\n    color: ${Color.ritualBlue} !important;\n\n    span {\n      color: ${Color.ritualBlue} !important;\n\n      &:before {\n        background-color: ${Color.ritualBlue} !important;\n      }\n    }\n\n    &:hover {\n      color: white !important;\n      background-color: ${Color.ritualBlue} !important;\n\n      span {\n        color: ${Color.white} !important;\n\n        &:before {\n          background-color: ${Color.white} !important;\n        }\n      }\n    }\n\n    &.disabled {\n      background-color: ${Color.ritualBlue} !important;\n\n      span {\n        color: ${Color.white} !important;\n\n        &:before {\n          background-color: ${Color.white} !important;\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    opacity: 0.24;\n    cursor: default;\n    pointer-events: none;\n\n    &:hover {\n      background-color: ${Color.ritualBlue} !important;\n      border: 2px solid ${Color.ritualBlue} !important;\n\n      span {\n        color: white !important;\n\n        &:before {\n          background-color: white !important;\n        }\n      }\n    }\n  }\n\n  &.outlined {\n    background-color: white;\n    border: 1px solid ${rgba(Color.ritualBlue, 0.16)} !important;\n\n    span {\n      color: ${Color.ritualBlue};\n    }\n\n    &:hover {\n      background-color: ${Color.ritualBlue} !important;\n\n      span {\n        color: white !important;\n      }\n\n      &:before {\n        background-color: ${Color.ritualBlue} !important;\n      }\n    }\n  }\n`;\n\nconst StyledTextWrapper = styled.div`\n  white-space: nowrap;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst StyledText = styled.span`\n  ${Font.circular}\n  font-size: ${rem(16)};\n  line-height: ${rem(26)};\n  font-weight: 500;\n  color: ${Color.white};\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  align-content: center;\n\n  &.short {\n    font-size: ${rem(14)};\n    line-height: ${rem(24)};\n  }\n\n  .isvg {\n    height: auto;\n    display: flex;\n  }\n\n  &.outlined {\n    font-size: ${rem(14)};\n    line-height: ${rem(24)};\n\n    ${responsive.md`\n      font-size: ${rem(16)};\n      line-height: ${rem(26)};\n    `}\n  }\n\n  &.bordered {\n    color: ${Color.ritualBlue};\n\n    span {\n      color: ${Color.ritualBlue};\n\n      &:before {\n        background-color: ${Color.ritualBlue};\n      }\n    }\n  }\n`;\n\nconst AppendText = styled.span`\n  position: relative;\n  ${Font.circular}\n  font-size: ${rem(16)};\n  line-height: ${rem(26)};\n  font-weight: 500;\n  color: ${Color.white};\n  transition: all 0.2s;\n  padding-left: 10px;\n  margin-left: 8px;\n\n  &.short {\n    font-size: ${rem(14)};\n    line-height: ${rem(24)};\n\n    &:before {\n      height: 16px;\n    }\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    top: 50%;\n    transform: translateY(-50%);\n    height: 24px;\n    left: 0;\n    width: 1px;\n    background-color: ${Color.white};\n    transition: all 0.2s;\n    opacity: 0.56;\n  }\n`;\n\nexport default class MagicButton extends React.Component {\n  render() {\n    let {\n      to,\n      state,\n      href,\n      children,\n      className,\n      target,\n      title,\n      append,\n      onClick,\n      ariaLabel,\n      id,\n      disabled,\n    } = this.props;\n\n    if (disabled) {\n      className = `${className || \"\"} disabled`;\n    }\n\n    let settings = {\n      to,\n      state,\n      href,\n      title,\n      target,\n      className,\n      ariaLabel,\n      id,\n    };\n\n    if (onClick) {\n      settings.onClick = disabled ? null : onClick;\n    }\n\n    return (\n      <StyledButton id={id} {...settings}>\n        <StyledTextWrapper>\n          <StyledText className={className}>{children}</StyledText>\n          {append && <AppendText className={className}>{append}</AppendText>}\n        </StyledTextWrapper>\n      </StyledButton>\n    );\n  }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Color } from \"../../utils/style\";\nimport Container from \"../Container\";\nimport Row from \"../Row\";\nimport CheckoutButton from \"./CheckoutButton\";\n\nconst Wrapper = styled.div.attrs({\n  className: \"mobile-banner-bottom\",\n})`\n  position: fixed;\n  bottom: 0;\n  width: 100%;\n  z-index: 999;\n\n  .mobile-banner-bottom-btn-container {\n    background-color: ${Color.white};\n    border-top: 1px solid #ccc;\n    padding-bottom: 12px;\n    width: 100%;\n    z-index: 399;\n\n    .row {\n      align-items: center;\n      height: 100%;\n\n      a {\n        width: 100%;\n      }\n    }\n\n    padding-top: 12px;\n    padding-bottom: max(env(safe-area-inset-bottom), 12px);\n  }\n`;\n\nexport default class MobileBannerBottom extends React.Component {\n  render() {\n    const { checkoutButtonProps, id } = this.props;\n\n    return (\n      <Wrapper id={id}>\n        <Container\n          id={`${id}_container`}\n          className=\"mobile-banner-bottom-btn-container\"\n        >\n          <Row className=\"px-3--5\" id={`${id}_container_row`}>\n            <CheckoutButton {...checkoutButtonProps} />\n          </Row>\n        </Container>\n      </Wrapper>\n    );\n  }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Font, Color, rem } from \"../../utils/style\";\nimport MagicLink from \"../MagicLink\";\nimport $ from \"jquery\";\n\nconst Banner = styled.div`\n  ${Font.circular}\n  background-color: ${Color.white};\n  font-size: ${rem(18)};\n\n  width: 100%;\n  height: 52px;\n\n  position: fixed;\n  top: ${p => p.messageBannerHeight};\n  left: 0;\n  z-index: 999;\n\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  border-bottom: 1px solid rgba(0, 0, 0, 0.16);\n  padding: 0 15px;\n\n  display: none;\n  &.compacted {\n    display: flex;\n  }\n`;\n\nconst ProductTitle = styled.h1`\n  ${Font.circular}\n  background-color: ${Color.white};\n  font-size: ${rem(18)};\n  display: flex;\n  margin: 0;\n\n  > p {\n    margin: 0;\n  }\n  em {\n    ${Font.dutch}\n    font-style: italic;\n  }\n`;\n\nexport default class MobileBannerTop extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      isScrollingDown: true,\n      messageBannerPresent: false,\n      messageBannerHeight: props.offsetFromBanner || 0,\n    };\n    this.lastScrollTop = 0;\n  }\n\n  componentDidMount() {\n    $(window).on(\"scroll.banner\", this.setIsScrollingDown.bind(this));\n\n    $(window).on(\"messageBanner.open\", (context, height) => {\n      this.setState({\n        messageBannerPresent: true,\n        messageBannerHeight: height,\n      });\n    });\n\n    $(window).on(\"messageBanner.close\", () => {\n      this.setState({\n        messageBannerPresent: false,\n        messageBannerHeight: 0,\n      });\n    });\n  }\n\n  componentWillUnmount() {\n    $(window).off(\"scroll.banner\");\n  }\n\n  setIsScrollingDown() {\n    let st = window.pageYOffset || document.documentElement.scrollTop; // Credits: \"https://github.com/qeremy/so/blob/master/so.dom.js#L426\"\n\n    this.setState({\n      isScrollingDown: st > this.lastScrollTop,\n    });\n    this.lastScrollTop = st <= 0 ? 0 : st;\n  }\n\n  render() {\n    const { bannerText, yieldedContent, id } = this.props;\n\n    const { isScrollingDown, messageBannerHeight } = this.state;\n    const linkNode = yieldedContent ? yieldedContent.props.to : null;\n\n    return (\n      <Banner\n        id={id}\n        className={isScrollingDown ? \"compacted\" : \"\"}\n        messageBannerHeight={messageBannerHeight}\n      >\n        {linkNode ? (\n          <MagicLink id={`${id}_link`} to={linkNode}>\n            <ProductTitle dangerouslySetInnerHTML={{ __html: bannerText }} />\n          </MagicLink>\n        ) : (\n          <ProductTitle\n            id={`${id}_title`}\n            dangerouslySetInnerHTML={{ __html: bannerText }}\n          />\n        )}\n        {yieldedContent}\n      </Banner>\n    );\n  }\n}\n","import React, { useEffect, useState } from \"react\";\nimport styled, { createGlobalStyle } from \"styled-components\";\nimport throttle from \"lodash/throttle\";\n\n// Utils\nimport {\n  Font,\n  Color,\n  rem,\n  media,\n  atLeast,\n  responsive,\n} from \"../../utils/style\";\nimport NameMap from \"../../utils/nameMap\";\n\n// Components\nimport Container from \"../Container\";\nimport Row from \"../Row\";\nimport CheckoutButton from \"./CheckoutButton\";\nimport MobileBannerBottom from \"./MobileBannerBottom\";\nimport MobileBannerTop from \"./MobileBannerTop\";\n\n// Styled Elements\nconst KustomerIcon = createGlobalStyle`\n  ${p => {\n    if (p.raised) {\n      return `\n        .kustomer-app-icon {\n          bottom: 75px !important;\n          margin-bottom: env(safe-area-inset-bottom) !important;\n        }\n      `;\n    }\n  }}\n`;\n\nconst BarWrapper = styled.div.attrs({\n  id: \"product-cta-bar-desktop\",\n  className: \"product-banner\",\n})`\n  position: fixed;\n  top: 64px;\n  right: 0;\n  left: 0;\n  z-index: 106;\n  background-color: ${Color.white};\n  border-bottom: 1px solid #ccc;\n  transform: translateY(-200%);\n  transition: transform 320ms ease-in-out, opacity 200ms ease-out;\n  opacity: 0;\n\n  &.active {\n    top: initial;\n\n    ${responsive.sm`\n      transform: translateY(0);\n      top: ${p => {\n        const headerHeight = 52;\n        return p.offsetFromBanner\n          ? p.offsetFromBanner + headerHeight\n          : headerHeight;\n      }}px;\n      opacity: 1;\n    `}\n\n    ${responsive.md`\n      top: ${p => (p.offsetFromBanner ? p.offsetFromBanner + 64 : 64)}px;\n    `}\n  }\n\n  ${media.mobile`\n    top: initial;\n    bottom: 0;\n    transform: translateY(100%);\n    border-top: 1px solid #ccc;\n    border-bottom: 0;\n  `};\n`;\n\nconst BarContainer = styled(Container).attrs({\n  id: \"product-cta-bar-desktop_container\",\n})`\n  ${media.tablet`\n    padding-left: max(15px, env(safe-area-inset-left));\n    padding-right: max(15px, env(safe-area-inset-right));\n  `} a {\n    width: ${p => (p.linkWidth ? p.linkWidth + \"px\" : \"auto\")};\n  }\n\n  ${media.mobile`\n    padding-bottom: env(safe-area-inset-bottom);\n\n    a {\n      width: 100% !important;\n      margin: 0 auto;\n    }\n  `};\n`;\n\nconst Column = styled.div.attrs({\n  className: \"col-12\",\n})`\n  padding: 0 !important;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 64px;\n\n  ${media.tablet`\n    width: 100%;\n  `};\n`;\n\nconst ProductName = styled.h2.attrs({\n  id: \"product-cta-bar-desktop_container_column_product-name\",\n})`\n  ${Font.circular}\n  color: ${Color.ritualBlue};\n  font-size: ${rem(22)};\n  line-height: ${rem(32)};\n  font-weight: 500;\n  text-align: left;\n  letter-spacing: -0.2px;\n  margin: 0;\n\n  em {\n    ${Font.dutch}\n    font-style: italic;\n  }\n\n  ${media.tablet`\n    font-size: ${rem(18)};\n    line-height: ${rem(28)};\n    letter-spacing: 0;\n  `}\n\n  ${media.mobile`\n    display: none !important;\n  `}\n`;\n\nconst YieldedLinkContainer = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: 32px;\n\n  &.active {\n    display: none;\n  }\n\n  & > * {\n    margin: 0;\n  }\n`;\n\nconst ProductLinks = styled.div.attrs({\n  id: \"product-cta-bar-desktop_container_column_links\",\n})`\n  display: flex;\n`;\n\nconst MobileBannerContainer = styled.div`\n  width: 100%;\n  z-index: 999;\n  opacity: 0;\n  visibility: hidden;\n\n  &.active {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport default function ProductCtaBar({\n  buttonCta,\n  mainText,\n  productName,\n  hasActiveLink,\n  onClick,\n  linkWidth,\n  offsetFromBanner,\n  children,\n  product,\n  showTopBar = true,\n  scrollOffset = 700,\n}) {\n  const [showProductCtaBar, setShowProductCtaBar] = useState(false);\n  const [atLeastTablet, setAtLeastTablet] = useState(false);\n  const productNameHtml = NameMap(productName).html;\n\n  useEffect(() => {\n    setAtLeastTablet(atLeast.tablet());\n  }, []);\n\n  useEffect(() => {\n    const handleScroll = throttle(() => {\n      let header = document.getElementsByTagName(\"header\")[0];\n      let footer = document.getElementsByTagName(\"footer\")[0];\n      let position = window.pageYOffset;\n\n      let headerHeight = header.offsetHeight;\n      let footerHeight = footer.offsetHeight;\n      let footerPosition = footer.offsetTop;\n\n      let isBelowHeroAndAboveFooter =\n        position >= scrollOffset - headerHeight &&\n        position < footerPosition - headerHeight - footerHeight / 2 &&\n        !showProductCtaBar;\n\n      let isBelowFooter =\n        position >= footerPosition - headerHeight - footerHeight / 2 &&\n        showProductCtaBar;\n\n      let isAboveHero =\n        position < scrollOffset - headerHeight && showProductCtaBar;\n\n      if (isBelowHeroAndAboveFooter) {\n        setShowProductCtaBar(true);\n      } else if (isBelowFooter) {\n        setShowProductCtaBar(false);\n      } else if (isAboveHero) {\n        setShowProductCtaBar(false);\n      }\n    }, 200);\n\n    const handleResize = throttle(\n      () => setAtLeastTablet(atLeast.tablet()),\n      400,\n    );\n\n    window.addEventListener(\"scroll\", handleScroll);\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => {\n      window.removeEventListener(\"scroll\", handleScroll);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [showProductCtaBar]);\n\n  let checkoutButtonProps = {\n    buttonLocation: \"Sticky Nav\",\n    buttonText: mainText,\n    appendText: buttonCta,\n    stockStatus: product.stockStatus,\n    trackCTAClick: onClick,\n    product,\n    className: \"ProductCtaButton\",\n  };\n\n  return atLeastTablet ? (\n    <BarWrapper\n      className={showProductCtaBar ? \"active\" : \"\"}\n      offsetFromBanner={offsetFromBanner}\n    >\n      <BarContainer linkWidth={linkWidth}>\n        <Row id=\"product-cta-bar-desktop_container_row\">\n          <Column id=\"product-cta-bar-desktop_container_column\">\n            <ProductName\n              dangerouslySetInnerHTML={{ __html: productNameHtml }}\n            />\n            <ProductLinks>\n              {children && (\n                <YieldedLinkContainer>{children}</YieldedLinkContainer>\n              )}\n              <CheckoutButton {...checkoutButtonProps} />\n            </ProductLinks>\n          </Column>\n        </Row>\n      </BarContainer>\n    </BarWrapper>\n  ) : (\n    <MobileBannerContainer\n      id=\"product-cta-bar-mobile\"\n      className={showProductCtaBar ? \"active\" : \"\"}\n    >\n      <KustomerIcon raised={showProductCtaBar} />\n      {showTopBar && (\n        <MobileBannerTop\n          id=\"product-cta-bar-mobile_top\"\n          bannerText={productNameHtml}\n          hasActiveLink={hasActiveLink}\n          offsetFromBanner={offsetFromBanner}\n          linkAnchor=\"#reviews\"\n          linkText=\"Read Reviews\"\n          linkHref=\"#reviews\"\n          yieldedContent={children}\n        />\n      )}\n      <MobileBannerBottom\n        id=\"product-cta-bar-mobile_bottom\"\n        checkoutButtonProps={checkoutButtonProps}\n      />\n    </MobileBannerContainer>\n  );\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { StaticQuery, graphql } from \"gatsby\";\n\nimport ProductCtaBar from \"../product/ProductCtaBar\";\nimport MagicLink from \"../MagicLink\";\nimport Text from \"../Text\";\n\nimport { rem, Font, Color } from \"../../utils/style\";\nimport metrics from \"../../utils/metrics\";\n\n// Services\nimport intl from \"../../services/intl\";\n\nconst ProductLink = styled(MagicLink)`\n  ${Font.circular};\n  font-size: ${rem(14)} !important;\n  line-height: ${rem(24)} !important;\n  border-bottom: 2px solid ${Color.ritualBlue};\n`;\n\nconst componentQuery = graphql`\n  query stickyProductNavQuery {\n    allContentfulProduct {\n      nodes {\n        node_locale\n        __typename\n        name {\n          name\n        }\n        sku\n        slug\n        price\n        socialImage {\n          file {\n            url\n          }\n        }\n        stockStatus\n      }\n    }\n  }\n`;\n\nclass StickyProductNav extends React.Component {\n  constructor(props) {\n    super(props);\n    this.contentfulProducts = intl.cf(props.data.allContentfulProduct.nodes);\n  }\n\n  trackProductCTAClick(title, location, e) {\n    let event = {\n      title: title,\n      nonInteraction: false,\n      location: location,\n    };\n    metrics.track(\"CTA Clicked\", event);\n  }\n\n  render() {\n    const productSku = this.props.sku;\n\n    const {\n      ctaLocation,\n      scrollOffset,\n      showLearnMore,\n      showTopBar,\n      offsetFromBanner,\n    } = this.props;\n\n    const contentfulProduct = this.contentfulProducts.find(product => {\n      return productSku === product.sku;\n    });\n\n    const ctaText = intl.t(\"general.button-add-cart\", \"Add to Cart\");\n\n    return (\n      <ProductCtaBar\n        onClick={this.trackProductCTAClick.bind(this, ctaText, ctaLocation)}\n        mainText={intl.t(\"product.hero.button-price\", \"{amount} per month\", {\n          amount: intl.formatCurrency(contentfulProduct.price, { round: true }),\n        })}\n        buttonCta={ctaText}\n        product={contentfulProduct}\n        productName={contentfulProduct.name}\n        hasActiveLink={showLearnMore}\n        showTopBar={showTopBar}\n        offsetFromBanner={offsetFromBanner}\n        scrollOffset={scrollOffset}\n      >\n        {showLearnMore && (\n          <ProductLink to={contentfulProduct} className=\"-underline\">\n            <Text id=\"general.learn-more\" defaultMessage=\"Learn More\" />\n          </ProductLink>\n        )}\n      </ProductCtaBar>\n    );\n  }\n}\n\nexport default function(props) {\n  return (\n    <StaticQuery\n      query={componentQuery}\n      render={data => <StickyProductNav {...props} data={data} />}\n    />\n  );\n}\n","export function orderArray(array, order, property) {\n  // Make a copy to ensure we're not modifying the original data.\n  array = [...array];\n\n  return array.sort((a, b) => {\n    const aIndex = order.indexOf(a[property]);\n    const bIndex = order.indexOf(b[property]);\n\n    if (aIndex < 0 && bIndex < 0) return 0;\n    if (aIndex < 0) return 1;\n    if (bIndex < 0) return -1;\n\n    return aIndex - bIndex;\n  });\n}\n","import React from \"react\";\nimport Img from \"gatsby-image\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../../utils/svg\";\nimport { media, responsive } from \"../../utils/style\";\nimport MagicLink from \"../MagicLink\";\nimport Container from \"../Container\";\nimport { rem, Color, Font } from \"../../utils/style\";\nimport ScrollMagicController from \"../ScrollMagicController\";\nimport Circle from \"../home/Circle\";\nimport Text from \"../Text\";\n\nconst MainWrapper = styled.div.attrs({\n  className: \"\",\n})`\n  position: relative;\n\n  ${media.notDesktop`\n    margin-top: ${rem(24)};\n  `};\n`;\n\nconst BackLink = styled(MagicLink).attrs({\n  className: \"d-inline-block\",\n})`\n  color: ${Color.ritualBlue};\n  font-size: ${rem(16)};\n  ${Font.circular} font-weight: 500;\n  text-align: left;\n  letter-spacing: 0;\n  line-height: ${rem(26)};\n  vertical-align: text-bottom;\n  margin-bottom: 24px;\n\n  ${responsive.md`\n    margin-bottom: 0;\n  `}\n\n  p {\n    margin: 0;\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  i {\n    height: ${rem(16)};\n    width: ${rem(32)};\n    position: relative;\n    display: inline-block;\n    vertical-align: middle;\n\n    svg {\n      position: absolute;\n      transform: translateY(-50%);\n      width: 100%;\n      top: 50%;\n      left: ${rem(-3)};\n      right: 0;\n      bottom: 0;\n    }\n  }\n`;\n\nconst Ingredient = styled.h1`\n  ${Font.circular}\n  color: ${Color.ritualBlue};\n  font-size: ${rem(34)};\n  line-height: ${rem(40)};\n  font-weight: 500;\n  letter-spacing: -0.5px;\n  border-bottom: 2px solid ${Color.ritualBlue};\n  margin-top: ${rem(24)};\n  margin-bottom: 24px;\n  padding-bottom: ${rem(24)};\n\n  ${responsive.sm`\n    margin-top: 0;\n    font-size: ${rem(34)};\n  `}\n\n  ${responsive.md`\n    font-size: ${rem(48)};\n    line-height: ${rem(54)};\n    letter-spacing: -1.4px;\n    padding-bottom: ${rem(40)};\n\n  `}\n\n  ${responsive.lg`\n    font-size: ${rem(66)};\n    line-height: ${rem(72)};\n    letter-spacing: ${rem(-2)};\n  `}\n`;\n\nconst PropertyRow = styled.div.attrs({\n  className: \"row\",\n})`\n  &:last-of-type {\n    margin-bottom: 0;\n\n    span:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n\n  ${responsive.sm`\n    margin-left: 0px;\n    margin-right: 0px;\n\n    span {\n      padding-left: 0px;\n      padding-right: 0px;\n    }\n  `}\n\n  ${responsive.md`\n    margin-bottom: 10px;\n    margin-left: 0px;\n    margin-right: 0px;\n\n    span:last-of-type {\n      padding-left: 10px;\n    }\n  `}\n`;\n\nconst Label = styled.span.attrs({\n  className: \"col-12 col-md-4\",\n})`\n  line-height: ${rem(22)};\n  color: rgba(20, 43, 111, 0.56);\n  font-size: ${rem(16)};\n  ${Font.circular} font-weight: 300;\n\n  ${media.tablet`\n  display: block;\n  width: 100%;\n  margin-bottom: ${rem(4)};\n`};\n`;\n\nconst Value = styled.span.attrs({\n  className: \"col-12 col-md-8\",\n})`\n  color: ${Color.ritualBlue};\n  line-height: ${rem(22)};\n  font-size: ${rem(16)};\n  ${Font.circular} font-weight: 500;\n\n  ${media.tablet`\n    display: block;\n    width: 100%;\n    margin-bottom: ${rem(16)};\n  `};\n`;\n\nconst InterviewLink = styled(MagicLink)`\n  display: inline-block;\n  color: ${Color.ritualBlue};\n  font-size: ${rem(14)} !important;\n  line-height: ${rem(24)} !important;\n  margin-top: 24px;\n  ${Font.circular} font-weight: 500;\n  text-align: left;\n  letter-spacing: 0;\n  border-bottom: 2px solid ${Color.ritualBlue};\n\n  ${responsive.md`\n    font-size: ${rem(16)};\n    line-height: ${rem(24)};\n    margin-top: 40px;\n  `}\n`;\n\nconst InfoWrapper = styled.div.attrs({\n  className: \"flush-left col-12 col-sm-5 order-2 order-md-1\",\n})`\n  margin-top: 0;\n`;\n\nconst ImageWrapper = styled.div.attrs({\n  className:\n    \"flush-right col-12 col-sm-6 offset-sm-1 order-1 order-sm-2 align-self-start\",\n})`\n  overflow: visible;\n  position: relative;\n`;\n\nconst IngredientImage = styled(Img)`\n  width: ${rem(570)};\n  background-color: rgba(233,238,241,0.56);\n\n  ${media.notDesktop`\n    width: ${rem(454)};\n  `}\n\n  ${media.tablet`\n    width: ${rem(340)};\n  `}\n\n  ${media.mobile`\n    width: 100%;\n  `}\n\n  @media (min-width: 450px) and (max-width: 749px) {\n    max-height: ${rem(375)};\n  }\n`;\n\nexport default class IngredientInfo extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      controller: null,\n    };\n  }\n\n  componentDidMount() {\n    this.setState({\n      controller: this.controller,\n    });\n  }\n\n  render() {\n    const { controller } = this.state;\n    const {\n      name,\n      image,\n      form,\n      foundIn,\n      source,\n      supplier,\n      manufacturingLocation,\n      manufacturerInterview,\n    } = this.props.ingredient;\n\n    const { productSku } = this.props;\n\n    return (\n      <Container style={{ position: \"relative\", overflow: \"visible\" }}>\n        <MainWrapper>\n          <div className=\"row align-items-center\" style={{ zIndex: 2 }}>\n            <div className=\"flush-left col-12 col-sm-6\" style={{ zIndex: 2 }}>\n              <BackLink\n                to=\"/ingredients\"\n                state={productSku ? { productSku } : {}}\n                ariaLabel=\"Back to Ingredients\"\n              >\n                <i>\n                  <Icons.ArrowLeft />\n                </i>\n                <p>\n                  <Text\n                    id=\"ingredients.info.back\"\n                    defaultMessage=\"Back to Ingredients\"\n                  />\n                </p>\n              </BackLink>\n            </div>\n          </div>\n          <div className=\"row align-items-md-center\" style={{ zIndex: 1 }}>\n            <InfoWrapper>\n              <Ingredient>{name}</Ingredient>\n              <PropertyRow>\n                <Label>\n                  <Text\n                    id=\"ingredients.info.found-in\"\n                    defaultMessage=\"Found In\"\n                  />\n                </Label>\n                <Value>{foundIn}</Value>\n              </PropertyRow>\n              <PropertyRow>\n                <Label>\n                  <Text id=\"ingredients.info.form\" defaultMessage=\"Form\" />\n                </Label>\n                <Value>{form}</Value>\n              </PropertyRow>\n              <PropertyRow>\n                <Label>\n                  <Text id=\"ingredients.info.source\" defaultMessage=\"Source\" />\n                </Label>\n                <Value>{source}</Value>\n              </PropertyRow>\n              <PropertyRow>\n                <Label>\n                  <Text\n                    id=\"ingredients.info.supplier\"\n                    defaultMessage=\"Supplier\"\n                  />\n                </Label>\n                <Value>{supplier}</Value>\n              </PropertyRow>\n              <PropertyRow>\n                <Label>\n                  <Text\n                    id=\"ingredients.info.final-location\"\n                    defaultMessage=\"Final Location of Manufacturing\"\n                  />\n                </Label>\n                <Value>{manufacturingLocation}</Value>\n              </PropertyRow>\n              {manufacturerInterview && (\n                <InterviewLink\n                  className=\"-underline\"\n                  to={manufacturerInterview}\n                  title={manufacturerInterview.title}\n                >\n                  <Text\n                    id=\"ingredients.info.supplier-info\"\n                    defaultMessage=\"Get to Know Our Supplier\"\n                  />\n                </InterviewLink>\n              )}\n            </InfoWrapper>\n            <ImageWrapper>\n              {controller && (\n                <Circle controller={controller} className=\"right centerY\" />\n              )}\n              <IngredientImage\n                fluid={image.fluid}\n                loading=\"eager\"\n                fadeIn={false}\n                alt={image.title}\n                style={{\n                  zIndex: 1,\n                  userSelect: \"none\",\n                  userDrag: \"none\",\n                  pointerEvents: \"none\",\n                  touchCallout: \"none\",\n                }}\n              />\n            </ImageWrapper>\n          </div>\n        </MainWrapper>\n\n        <ScrollMagicController\n          ref={r => {\n            r && (this.controller = r.controller);\n          }}\n        />\n      </Container>\n    );\n  }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Container from \"../Container\";\nimport { media, rem, Color, Font, responsive } from \"../../utils/style\";\nimport { Icons } from \"../../utils/svg\";\nimport NameMap from \"../../utils/nameMap\";\n\nimport Text from \"../Text\";\n\nconst EvidenceContainer = styled(Container)`\n  margin: ${rem(120)} auto;\n\n  ${media.tablet`\n    margin: ${rem(80)} auto;\n  `};\n`;\n\nconst Header = styled.h2`\n  color: ${Color.ritualBlue};\n  ${Font.circular}\n  font-size: ${rem(48)};\n  text-align: center;\n  letter-spacing: -1.4px;\n  line-height: ${rem(54)};\n  margin-bottom: ${rem(24)};\n\n  ${media.tablet`\n    line-height: ${rem(36)};\n    font-size: ${rem(30)};\n    margin-bottom: ${rem(16)};\n    letter-spacing: -0.4px;\n  `}\n\n  ${media.mobile`\n    line-height: ${rem(36)};\n    font-size: ${rem(30)};\n    margin-bottom: ${rem(16)};\n    letter-spacing: -0.4px;\n  `}\n`;\n\nconst HeaderEmphasis = styled.em`\n  ${Font.dutch};\n`;\n\nconst Blurb = styled.p`\n  color: ${Color.ritualBlue};\n  font-size: ${rem(18)};\n  ${Font.dutch} font-weight: normal;\n  text-align: center;\n  line-height: ${rem(28)};\n\n  ${media.mobile`\n    font-size: ${rem(16)};\n    line-height: ${rem(26)};\n  `};\n`;\n\nconst StudyHeader = styled.p`\n  color: ${Color.ritualBlue};\n  font-size: 22px;\n  ${Font.circular} font-weight: 500;\n  text-align: center;\n  letter-spacing: -0.2px;\n  line-height: 32px;\n\n  ${media.mobile`\n    margin-top: ${rem(24)};\n  `};\n`;\n\nconst StudyLink = styled.a.attrs({\n  className: \"-underline\",\n})``;\n\nconst Articles = styled.div`\n  margin-top: ${rem(56)};\n  border-top: 1px solid rgba(0, 0, 0, 0.16);\n  display: flex;\n  flex-direction: column;\n\n  ${media.mobile`\n    margin-top: ${rem(24)};\n  `};\n`;\n\nconst ArticleContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst StudyIconWrapper = styled.div`\n  align-self: flex-start;\n  padding-top: 5px;\n  padding-right: ${rem(16)};\n`;\n\nconst Article = styled.article`\n  border-bottom: 1px solid rgba(0, 0, 0, 0.16);\n  padding: ${rem(24)};\n  width: 100%;\n  padding-left: 0 !important;\n\n  ${media.mobile`\n    padding-right: 0 !important;\n  `};\n`;\n\nconst ArticleRow = styled.div.attrs({\n  className: \"row\",\n})`\n  width: 100%;\n  margin-left: 0 !important;\n  ${media.mobile`\n    margin-left: 0 !important;\n    margin-right: 0 !important;\n  `};\n`;\n\nconst StudyName = styled.h2`\n  color: ${Color.ritualBlue};\n  ${Font.circular} font-weight: 500;\n  text-align: left;\n  font-size: ${rem(16)};\n  line-height: ${rem(26)};\n  margin-bottom: ${rem(16)};\n  margin-right: ${rem(30)};\n\n  ${responsive.sm`\n    margin-right: 0;\n  `}\n\n  ${responsive.md`\n    font-size: ${rem(18)};\n    line-height: ${rem(28)};\n    margin: 0;\n  `}\n`;\n\nconst StudyInstitution = styled.p`\n  color: ${Color.ritualBlue};\n  font-size: ${rem(14)};\n  ${Font.circular} font-weight: 300;\n  text-align: left;\n  line-height: ${rem(26)};\n  margin: 0;\n`;\n\n/* eslint-disable react/prefer-stateless-function, react/prop-types */\nexport default class EvidenceBased extends React.Component {\n  render() {\n    const {\n      studies,\n      studiesLink,\n      studyCount,\n      studySubject,\n    } = this.props.ingredient;\n    let studyData = JSON.parse(studies.childMarkdownRemark.rawMarkdownBody);\n\n    return (\n      <EvidenceContainer>\n        <div className=\"row align-items-center\">\n          <div className=\"col-12 offset-0 col-sm-8 offset-sm-2\">\n            <Header className=\"text-center\">\n              <HeaderEmphasis>\n                <Text\n                  id=\"ingredients.evidence.header-emphasis\"\n                  defaultMessage=\"Evidence-Based\"\n                />\n              </HeaderEmphasis>{\" \"}\n              <span>\n                <Text\n                  id=\"ingredients.evidence.header\"\n                  defaultMessage=\"or Bust\"\n                />\n              </span>\n            </Header>\n            <Blurb>\n              <Text\n                id=\"ingredients.evidence.blurb\"\n                defaultMessage={`We use nutrients backed by a significant body of research that is\n                  growing every day. Of the thousands of unaffiliated studies our\n                  in-house scientists sorted through to guide our choices, the\n                  titles below are some relevant MVPs.`}\n              />\n            </Blurb>\n            <Articles>\n              {studyData.map((study, i) => {\n                return (\n                  <Article\n                    className=\"col-12\"\n                    ref={f => f}\n                    key={`evidence-${i}`}\n                  >\n                    <ArticleContainer>\n                      <StudyIconWrapper>\n                        <Icons.Study />\n                      </StudyIconWrapper>\n                      <ArticleRow>\n                        <div className=\"col-12 col-md-9 pl-0\">\n                          <StudyName>{study.name}</StudyName>\n                        </div>\n                        <div className=\"col-12 col-md-3 pl-0\">\n                          <StudyInstitution>\n                            {study.institution}\n                          </StudyInstitution>\n                        </div>\n                      </ArticleRow>\n                    </ArticleContainer>\n                  </Article>\n                );\n              })}\n            </Articles>\n          </div>\n        </div>\n      </EvidenceContainer>\n    );\n  }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Container from \"../Container\";\nimport {\n  responsive,\n  media,\n  rem,\n  Color,\n  Font,\n  capitalize,\n} from \"../../utils/style\";\nimport { BenefitsIcons } from \"../../utils/svg\";\nimport Text from \"../Text\";\n\nconst BenefitsContainer = styled(Container)`\n  margin-top: 80px;\n\n  ${responsive.md`\n    margin-top: 120px;\n\n  `}\n`;\n\nconst BenefitsDiv = styled.div.attrs({})`\n  background-color: #f1f5f7;\n  padding: ${rem(40)} ${rem(56)} !important;\n  margin-bottom: 30px;\n\n  ${media.notDesktop`\n    padding: ${rem(40)} ${rem(24)} !important;\n    margin-bottom: 0;\n  `};\n`;\n\nconst BenefitsHeader = styled.p`\n  color: ${Color.ritualBlue};\n  font-size: ${rem(18)};\n  ${Font.circular} font-weight: 500;\n  letter-spacing: 0;\n  line-height: ${rem(28)};\n  border-bottom: 1px solid rgba(0, 0, 0, 0.16);\n  padding-bottom: 8px;\n  margin-bottom: ${rem(26)};\n`;\n\nconst BenefitItem = styled.div.attrs({\n  className: \"d-flex align-items-center\",\n})`\n  margin-bottom: ${rem(26)};\n  ${Font.circular}\n  font-size: ${rem(16)};\n  font-weight: 300;\n  display: flex;\n\n  &:last-child {\n    margin: 0;\n  }\n\n  p {\n    margin: 0;\n    margin-left: ${rem(8)};\n  }\n`;\n\nconst BenefitIcon = styled.span`\n  width: ${rem(28)};\n  height: ${rem(28)};\n  margin-right: ${rem(12)};\n  vertical-align: text-bottom;\n  position: relative;\n\n  svg {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n`;\n\nconst DescriptionWrapper = styled.div.attrs({\n  className:\n    \"col-12 col-sm-6 col-md-5 offset-0 offset-sm-1 offset-md-2 d-flex align-items-center\",\n})``;\n\nconst Description = styled.p`\n  color: ${Color.ritualBlue};\n  font-size: ${rem(22)};\n  ${Font.circular} font-weight: 500;\n  text-align: left;\n  letter-spacing: -0.2px;\n  line-height: ${rem(32)};\n  position: relative;\n  padding-top: ${rem(34)};\n\n  ${media.mobile`\n    margin-top: ${rem(80)};\n  `} &:before {\n    content: \"\";\n    width: ${rem(32)};\n    height: ${rem(4)};\n    background-color: ${Color.ritualBlue};\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n`;\n\n/* eslint-disable react/prefer-stateless-function, react/prop-types */\nexport default class Benefits extends React.Component {\n  render() {\n    const { description, icons } = this.props.ingredient;\n    const iconData = JSON.parse(icons.childMarkdownRemark.rawMarkdownBody);\n    return (\n      <BenefitsContainer>\n        <div className=\"row\">\n          <div className=\"flush-left col-12 col-sm-5 col-md-4 offset-0\">\n            <BenefitsDiv>\n              <BenefitsHeader>\n                <Text\n                  id=\"ingredients.benefits.title\"\n                  defaultMessage=\"Benefits\"\n                />\n              </BenefitsHeader>\n              {iconData.map((icon, i) => {\n                // TODO: Change svg url in Contentful\n                let iconName = icon.url\n                  .replace(/\\/svg\\/icon-/gi, \"\")\n                  .replace(/.svg/gi, \"\")\n                  .replace(/-/gi, \"\");\n                let BenefitsIconElement = BenefitsIcons[capitalize(iconName)];\n                return (\n                  <BenefitItem key={`icon-${i}`}>\n                    <BenefitIcon>\n                      <BenefitsIconElement />\n                    </BenefitIcon>\n                    <p>{icon.name}</p>\n                  </BenefitItem>\n                );\n              })}\n            </BenefitsDiv>\n          </div>\n\n          <DescriptionWrapper>\n            <Description>{description}</Description>\n          </DescriptionWrapper>\n        </div>\n      </BenefitsContainer>\n    );\n  }\n}\n","import React from \"react\";\nimport Img from \"gatsby-image\";\nimport styled from \"styled-components\";\nimport Container from \"../Container\";\nimport { responsive, media, rem, Font, Color } from \"../../utils/style\";\n\nconst InteractionsContainer = styled.div`\n  margin-top: 80px;\n\n  ${responsive.md`\n    margin-top: 120px;\n  `}\n`;\n\nconst Description = styled.p`\n  color: ${Color.ritualBlue};\n  font-size: ${rem(22)};\n  ${Font.circular} text-align: left;\n  font-weight: 500;\n  line-height: ${rem(32)};\n  position: relative;\n  padding-top: ${rem(34)};\n  margin: 0;\n\n  ${media.mobile`\n    font-size: ${rem(22)};\n    margin-top: ${rem(40)};\n  `} &:before {\n    content: \"\";\n    width: ${rem(32)};\n    height: ${rem(4)};\n    background-color: ${Color.ritualBlue};\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n`;\n\nconst CircleContainer = styled.div`\n  display: flex;\n  flex-direction: row-reverse;\n  position: relative;\n  left: ${rem(10)};\n`;\n\nconst CircleImage = styled(Img)`\n  background-color: #f1f5f7;\n`;\n\nconst Circle = styled.div`\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  position: relative;\n  overflow: hidden;\n  margin-left: ${rem(-10)};\n\n  &:before {\n    content: \"\";\n    display: block;\n    padding-top: 100%; /* ratio of 1:1*/\n  }\n\n  &:first-child {\n    margin-right: ${rem(10)}\n  }\n\n  &:first-child {\n    &:nth-last-child(3) { /* Targets first child that is also 3 from the end */\n      color: white;\n      background-color: ${Color.ritualBlue};\n    }\n    &:nth-last-child(2) { /* Targets first child that is also 2 from the end */\n      color: ${Color.ritualBlue};\n      background-color: ${Color.ritualYellow};\n    }\n  }\n\n  &:nth-child(2) {\n    &:not(:last-child) {\n      color: ${Color.ritualBlue};\n      background-color: ${Color.ritualYellow};\n    }\n  }\n\n  &:last-child {\n    background-color: transparent;\n  }\n\n  & > p {\n    margin: 0;\n    padding: ${rem(8)};\n    list-style: none;\n    ${Font.circular}\n    font-size: ${rem(22)};\n    font-weight: 700;\n    line-height: ${rem(26)};\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n\n    ${media.tablet`\n      font-size: ${rem(16)};\n      line-height: ${rem(20)};\n    `}\n\n    ${media.mobile`\n      font-size: ${rem(14)};\n      line-height: ${rem(18)};\n    `}\n\n    @media (min-width: 450px) and (max-width: 749px) {\n      font-size: ${rem(20)};\n      line-height: ${rem(24)};\n    }\n\n    span {\n      display: block;\n      font-size: ${rem(32)};\n      line-height: 1;\n\n      ${media.tablet`\n        font-size: ${rem(24)};\n      `}\n\n      ${media.mobile`\n        font-size: ${rem(16)};\n      `}\n\n      @media (min-width: 450px) and (max-width: 749px) {\n        font-size: ${rem(24)};\n      }\n    }\n  }\n`;\n\n/* eslint-disable react/prefer-stateless-function */\nexport default class IngredientInteractions extends React.Component {\n  render() {\n    const { ingredient } = this.props;\n    const { interactions, interactionsDescription, image, slug } = ingredient;\n\n    if (!interactions || !interactionsDescription) return null;\n\n    return (\n      <Container>\n        <InteractionsContainer>\n          <div className=\"row\">\n            <div className=\"flush-left col-12 col-sm-6 col-md-5 order-1 order-sm-0 d-flex align-items-center\">\n              <Description>{interactionsDescription}</Description>\n            </div>\n\n            <div className=\"col-12 col-sm-6 offset-md-1 order-0 order-sm-1\">\n              <CircleContainer>\n                {interactions.map((interaction, i) => {\n                  return (\n                    <Circle key={slug + \"-interaction-\" + i}>\n                      <p>\n                        <span>+</span>\n                        {interaction}\n                      </p>\n                    </Circle>\n                  );\n                })}\n                <Circle>\n                  <CircleImage\n                    fluid={image.fluid}\n                    loading=\"eager\"\n                    fadeIn={false}\n                    alt={image.title}\n                    style={{\n                      position: \"absolute\",\n                      left: 0,\n                      top: 0,\n                      width: \"100%\",\n                      height: \"100%\",\n                      userSelect: \"none\",\n                      userDrag: \"none\",\n                      pointerEvents: \"none\",\n                      touchCallout: \"none\",\n                    }}\n                  />\n                </Circle>\n              </CircleContainer>\n            </div>\n          </div>\n        </InteractionsContainer>\n      </Container>\n    );\n  }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Container from \"../Container\";\nimport { responsive, rem, Color, Font, media } from \"../../utils/style\";\nimport Text from \"../Text\";\n\nconst StudiesContainer = styled(Container)`\n  margin: 80px auto;\n\n  ${responsive.md`\n    margin: 120px auto;\n  `}\n`;\n\nconst SeperatorContainer = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n`;\n\nconst Separator = styled.div`\n  width: 32px;\n  height: 4px;\n  background-color: ${Color.ritualBlue};\n  margin-bottom: 30px;\n`;\n\nconst StudyHeader = styled.p`\n  color: ${Color.ritualBlue};\n  font-size: 22px;\n  ${Font.circular} font-weight: 500;\n  text-align: center;\n  letter-spacing: -0.2px;\n  line-height: 32px;\n`;\n\nconst StudyLink = styled.a.attrs({\n  className: \"-underline\",\n})``;\n\nconst StudyText = styled.p`\n  color: ${Color.ritualBlue};\n  font-size: 18px;\n  ${Font.dutch} font-weight: normal;\n  text-align: center;\n  letter-spacing: 0;\n  line-height: 28px;\n`;\n\n/* eslint-disable react/prefer-stateless-function */\nexport default class Studies extends React.Component {\n  render() {\n    const { studyCount, studySubject, studiesLink } = this.props.ingredient;\n\n    return (\n      <StudiesContainer>\n        <div className=\"row align-items-center\">\n          <div className=\"col-12 col-sm-10 col-lg-8 offset-0 offset-sm-1 offset-lg-2\">\n            <div className=\"text-align-center\">\n              <SeperatorContainer>\n                <Separator />\n              </SeperatorContainer>\n            </div>\n            <StudyHeader className=\"subtitle\">\n              <Text\n                id=\"ingredients.studies.subtitle\"\n                defaultMessage=\"There are {link} on {studySubject} and counting\"\n                values={{\n                  link: (\n                    <StudyLink target=\"_blank\" href={studiesLink}>\n                      <Text\n                        id=\"ingredients.studies.study-count\"\n                        defaultMessage=\"{studyCount} studies\"\n                        values={{ studyCount }}\n                      />\n                    </StudyLink>\n                  ),\n                  studySubject,\n                }}\n              />\n            </StudyHeader>\n            <StudyText>\n              <Text\n                id=\"ingredients.studies.text\"\n                defaultMessage={`Substantiation is a living, breathing thing. We are constantly\n              reviewing new research. Have a study you think we should take a\n              look at? Send it our way: `}\n              />\n              <a\n                href=\"mailto:research@ritual.com\"\n                className=\"-underline\"\n                style={{ borderBottomWidth: \"1px\" }}\n              >\n                research@ritual.com\n              </a>\n            </StudyText>\n          </div>\n        </div>\n      </StudiesContainer>\n    );\n  }\n}\n","import React from \"react\";\nimport Helmet from \"react-helmet\";\nimport styled from \"styled-components\";\nimport { graphql } from \"gatsby\";\n\n// Utils\nimport { responsive, rem } from \"../utils/style\";\n\n// Components\nimport PageSEO from \"../components/seo/Page\";\nimport StickyProductNav from \"../components/global/StickyProductNav\";\nimport Text from \"../components/Text\";\n\nimport ProductCategoryCards from \"../components/product/ProductCategoryCards\";\n\nimport IngredientInfo from \"../components/ingredients/IngredientInfo\";\nimport EvidenceBased from \"../components/ingredients/EvidenceBased\";\nimport Benefits from \"../components/ingredients/Benefits\";\nimport IngredientInteractions from \"../components/ingredients/IngredientInteractions\";\nimport Studies from \"../components/ingredients/Studies\";\n\nconst Wrapper = styled.div`\n  margin-top: 52px;\n  overflow: hidden;\n\n  ${responsive.md`\n    margin-top: 64px;\n    padding-top: 56px;\n  `}\n`;\n\nconst ProductCategoryCardsWrapper = styled.div`\n  h3 {\n    font-size: ${rem(24)};\n    letter-spacing: -0.28px;\n    line-height: ${rem(34)};\n    text-align: center;\n    margin-bottom: 24px;\n\n    ${responsive.md`\n      font-size: ${rem(40)};\n      letter-spacing: -1.17px;\n      line-height: ${rem(54)};\n      margin-bottom:  56px;\n    `}\n  }\n`;\n\n/* eslint-disable react/prefer-stateless-function, react/prop-types */\nexport default class IngredientsPageTemplate extends React.Component {\n  constructor(props) {\n    super(props);\n    const { pageDescription } = props.data.contentfulIngredientsPage;\n    const { name, slug, image } = props.data.contentfulIngredient;\n\n    this.state = {\n      seo: {\n        pagePath: `ingredients/${slug}`,\n        title: `${name}: What is ${name}? Uses, Benefits, Research - Ritual`,\n        description: pageDescription,\n        image: {\n          url: image.share.src,\n          width: image.share.width,\n          height: image.share.height,\n        },\n      },\n    };\n  }\n\n  componentDidMount() {\n    this.props.updatePageData({\n      label: \"Ingredient Detail\",\n    });\n\n    this.props.updateLayoutState({\n      navColor: \"#FFFFFF\",\n      banner: false,\n    });\n  }\n\n  render() {\n    const { data, location } = this.props;\n    const productSku = location.state ? location.state.productSku : \"\";\n\n    const { contentfulIngredient } = data;\n\n    return (\n      <>\n        {productSku && (\n          <StickyProductNav\n            sku={productSku}\n            ctaLocation={\"Ingredient Product Cta\"}\n            scrollOffset={150}\n            showLearnMore={true}\n            showTopBar={true}\n          />\n        )}\n        <div style={{ overflow: \"hidden\" }}>\n          <PageSEO {...this.state.seo} />\n          <Wrapper>\n            <Helmet bodyAttributes={{ class: \"template\" }} />\n            <IngredientInfo ingredient={contentfulIngredient} />\n            <Benefits ingredient={contentfulIngredient} />\n            <IngredientInteractions ingredient={contentfulIngredient} />\n            <EvidenceBased ingredient={contentfulIngredient} />\n            <Studies ingredient={contentfulIngredient} />\n            <ProductCategoryCardsWrapper>\n              <h3>\n                <Text\n                  id=\"category-card.section.heading\"\n                  defaultMessage=\"Find Your Ritual\"\n                />\n              </h3>\n              <ProductCategoryCards className=\"mb-7 mb-md-9\" />\n            </ProductCategoryCardsWrapper>\n          </Wrapper>\n        </div>\n      </>\n    );\n  }\n}\n\nexport const pageQuery = graphql`\n  query IngredientsPageQuery($locale: String!, $slug: String!) {\n    contentfulIngredientsPage(node_locale: { eq: $locale }) {\n      pageDescription\n    }\n    contentfulIngredient(node_locale: { eq: $locale }, slug: { eq: $slug }) {\n      name\n      image {\n        title\n        fluid(maxWidth: 570, quality: 90) {\n          ...GatsbyContentfulFluid_withWebp_noBase64\n        }\n        share: resize(width: 1200, height: 630, quality: 100) {\n          src\n          width\n          height\n        }\n        description\n      }\n      slug\n      productDosages {\n        childMarkdownRemark {\n          rawMarkdownBody\n        }\n      }\n      description\n      form\n      source\n      supplier\n      foundIn\n      manufacturingLocation\n      manufacturerInterview {\n        __typename\n        title\n        slug\n      }\n      studyCount\n      studySubject\n      studiesLink\n      studies {\n        childMarkdownRemark {\n          rawMarkdownBody\n        }\n      }\n      icons {\n        childMarkdownRemark {\n          rawMarkdownBody\n        }\n      }\n      interactionsDescription\n      interactions\n      products {\n        __typename\n        slug\n        name {\n          name\n          childMarkdownRemark {\n            html\n          }\n        }\n        summary\n        shortDescription\n        cardImage {\n          title\n          file {\n            url\n          }\n          fluid(maxWidth: 570, quality: 80) {\n            ...GatsbyContentfulFluid_withWebp_noBase64\n          }\n          description\n        }\n        cardBackgroundColor\n      }\n    }\n  }\n`;\n","import React, { Component } from \"react\";\n\nimport GeneralTags from \"./GeneralTags\";\n\nclass PageSEO extends Component {\n  render() {\n    const { pagePath, title, description, image } = this.props;\n\n    return (\n      <div>\n        <GeneralTags\n          pagePath={pagePath}\n          title={title}\n          description={description}\n          image={image}\n        />\n      </div>\n    );\n  }\n}\n\nexport default PageSEO;\n","import React from \"react\";\nimport ScrollMagic from \"scrollmagic\";\n\nexport default class ScrollMagicController extends React.Component {\n  constructor(props) {\n    super(props);\n    this.controller = null;\n  }\n  componentDidMount() {\n    this.controller = new ScrollMagic.Controller();\n  }\n  render() {\n    return null;\n  }\n}\n","import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { graphql, StaticQuery } from \"gatsby\";\n\n// Services\nimport intl from \"../../services/intl\";\n\n// Utils\nimport { Font, Color, media, rem, responsive } from \"../../utils/style\";\nimport metrics from \"../../utils/metrics\";\nimport { getDiscountData } from \"../../utils/bundle\";\nimport { orderArray } from \"../../utils/order\";\n\n// Components\nimport Container from \"../Container\";\nimport Img from \"gatsby-image\";\nimport Ribbon from \"../global/Ribbon\";\nimport ScrollableOverflow from \"../ScrollableOverflow\";\nimport MagicLink from \"../MagicLink\";\n\nconst Wrapper = styled.section``;\n\nconst CategoryCardsContainer = styled(Container)`\n  padding: 0 20px;\n\n  display: flex;\n  flex-direction: row;\n  flex-wrap: ${p => (p.scrollable ? \"nowrap\" : \"wrap\")};\n\n  ${responsive.sm`\n    padding: 0px;\n  `}\n`;\n\nconst Slide = styled(MagicLink)`\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  width: calc(100vw * (84/320));\n  margin-right: calc(100vw * (8/320));\n  background-color: rgba(242, 241, 245, 0.56);\n\n  :last-of-type {\n    margin-right: 0;\n  }\n\n  p {\n    ${Font.circular};\n    color: ${Color.ritualBlue};\n    font-size: ${rem(14)};\n    line-height: ${rem(20)};\n    font-weight: 300;\n    letter-spacing: 0px;\n    text-align: center;\n    margin: 0;\n    padding: 6px 0;\n  }\n\n  ${responsive.sm`\n    width: 160px;\n    margin-right: 20px;\n\n    p:before {\n      content: \"Shop \";\n    }\n\n    img {\n      transition: transform 0.2s ease-in !important;\n    }\n\n    &:hover {\n      img {\n        transform: scale(1.1);\n      }\n    }\n  `}\n\n  ${responsive.md`\n    width: 214px;\n    margin-right: 26px;\n\n    p {\n      font-size: ${rem(18)};\n      line-height: ${rem(24)};\n      padding: 12px 0;\n    }\n  `}\n\n  ${responsive.lg`\n    width: 270px;\n    margin-right: 30px;\n  `}\n`;\n\nconst GridSlide = styled(Slide)`\n  ${media.mobile`\n    width: calc(50% - 7px);\n    margin-right: 14px;\n    margin-bottom: 16px;\n\n    &:nth-of-type(2n) {\n      margin-right: 0;\n    }\n\n    &:nth-last-of-type(2):nth-of-type(odd),\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  `}\n`;\n\nconst ImageContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  img {\n    background-color: ${Color.ritualYellow};\n    height: 52px;\n  }\n\n  span {\n    position: absolute;\n    bottom: 4px;\n    left: 4px;\n  }\n\n\n  ${responsive.sm`\n    height: 82px;\n\n    span {\n      bottom: 8px;\n      left: 8px;\n    }\n  `}\n\n  ${responsive.md`\n    height: 110px;\n\n    span {\n      bottom: 12px;\n      left: 12px;\n    }\n  `}\n\n  ${responsive.lg`\n    height: 140px;\n  `}\n`;\n\nconst RibbonStyle = css`\n  height: 20px;\n  padding: 0px 8px;\n  font-size: ${rem(8)};\n  line-height: ${rem(16)};\n  letter-spacing: 0.53px;\n\n  &::before,\n  &::after {\n    border-width: 10px 4px;\n  }\n\n  ${responsive.md`\n    height: 30px;\n    padding: 0 14px;\n    font-size: ${rem(10)};\n    letter-spacing: 0.67px;\n\n    &::before,\n    &::after {\n      border-width: 15px 8px;\n    }\n  `}\n`;\n\nconst OrderedCardShortNames = [\n  \"44TmdusDzEH95uGu0URjIr\", // Women\n  \"71526baqpQqVsScHBZpIEl\", // Men\n  \"16dqMm2vfVsgy539guPkkE\", // Kids & Teens\n];\n\nexport class ProductCategoryCards extends React.Component {\n  constructor(props) {\n    super(props);\n\n    const categories = intl.cf(props.data.allContentfulProductCategory.nodes);\n    this.orderedCategoryNodes = this._getOrderedCategories(categories);\n  }\n\n  handleClick(name) {\n    metrics.track(\"CTA Clicked\", {\n      title: name,\n      location: \"Product Category Card\",\n      nonInteraction: false,\n    });\n  }\n\n  _getOrderedCategories(allCategoryNodes) {\n    return orderArray(allCategoryNodes, OrderedCardShortNames, \"contentful_id\");\n  }\n\n  renderSlides(slides, scrollable) {\n    const SlideComponent = scrollable ? Slide : GridSlide;\n\n    return (\n      <>\n        {slides.map((slide, i) => {\n          return (\n            <SlideComponent\n              to={slide.url}\n              onClick={this.handleClick.bind(this, slide.title)}\n              key={i}\n            >\n              <ImageContainer>\n                <Img\n                  fluid={slide.img.fluid}\n                  loading=\"eager\"\n                  backgroundColor={Color.ritualYellow}\n                  alt={slide.altText}\n                  style={{\n                    userSelect: \"none\",\n                    userDrag: \"none\",\n                    pointerEvents: \"none\",\n                    touchCallout: \"none\",\n                  }}\n                  imgStyle={{\n                    objectPosition: \"top center\",\n                  }}\n                />\n                {slide.flag && (\n                  <Ribbon contentStyle={RibbonStyle} white={true}>\n                    {slide.flag}\n                  </Ribbon>\n                )}\n              </ImageContainer>\n              <p>{slide.title}</p>\n            </SlideComponent>\n          );\n        })}\n      </>\n    );\n  }\n\n  render() {\n    const { data, className, scrollable = false } = this.props;\n\n    const bundleImage = intl.cf(data.bundleImages.nodes, true);\n    const discountData = getDiscountData();\n\n    const slides = this.orderedCategoryNodes.map(node => {\n      const flag = node.shortName === \"Kids\" ? \"New\" : \"\";\n      return {\n        title: node.shortName,\n        url: `/${node.shopLandingReference.slug}`,\n        altText: `Shop ${node.shortName}`,\n        img: node.cardImage,\n        flag,\n      };\n    });\n\n    slides.push({\n      title: intl.t(\"product.category-cards.slide-bundles\", \"Bundles\"),\n      url: \"/shop-bundles\",\n      altText: \"Shop Bundles\",\n      img: bundleImage,\n      flag: discountData.titleCopy,\n    });\n\n    return (\n      <Wrapper className={className}>\n        <CategoryCardsContainer scrollable={scrollable}>\n          {scrollable && (\n            <ScrollableOverflow bleedLeft={true} bleedRight={true}>\n              {this.renderSlides(slides, scrollable)}\n            </ScrollableOverflow>\n          )}\n          {!scrollable && <>{this.renderSlides(slides, scrollable)}</>}\n        </CategoryCardsContainer>\n      </Wrapper>\n    );\n  }\n}\n\nexport const ProductCategoryCardsQuery = props => (\n  <StaticQuery\n    query={componentQuery}\n    render={data => <ProductCategoryCards {...props} data={data} />}\n  />\n);\n\nexport default ProductCategoryCardsQuery;\n\nconst componentQuery = graphql`\n  query ProductCategoryCardsQuery {\n    bundleImages: allContentfulAsset(\n      filter: { contentful_id: { eq: \"2RQ7pdzdW9JmLk0z0shhzM\" } }\n    ) {\n      nodes {\n        node_locale\n        title\n        description\n        fluid(maxWidth: 580, quality: 90) {\n          ...GatsbyContentfulFluid_withWebp_noBase64\n        }\n      }\n    }\n    allContentfulProductCategory {\n      nodes {\n        node_locale\n        shortName\n        contentful_id\n        cardImage {\n          title\n          description\n          fluid(maxWidth: 580, quality: 90) {\n            ...GatsbyContentfulFluid_withWebp_noBase64\n          }\n        }\n        backgroundColor\n        shopLandingReference {\n          slug\n          header {\n            childMarkdownRemark {\n              rawMarkdownBody\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n","import React from \"react\";\nimport $ from \"jquery\";\nimport styled from \"styled-components\";\nimport { media, Color } from \"../../utils/style\";\n\n// Animations\nimport ScrollMagic from \"scrollmagic\";\nimport gsap from \"gsap\";\n\nconst CircleElement = styled.div.attrs({ className: \"ajs_circle\" })`\n    position: absolute;\n    width: 770px;\n    height: 770px;\n    background-color: ${Color.ritualYellow};\n    border-radius: 50%;\n    opacity: 0;\n    z-index: 1;\n    transition: left 2s, right 2s, opacity 2s;\n\n    &.obscured {\n      background-color: #f1de80;\n    }\n\n    &.left {\n      left: -1540px;\n      opacity: 0;\n    }\n\n    &.right {\n      right: -1540px;\n      opacity: 0;\n    }\n\n    &.top {\n      top: -385px;\n      opacity: 0;\n    }\n\n    &.topTimeline {\n      top: -100px;\n      opacity: 0;\n    }\n\n    &.featuredArticles {\n      opacity: 0;\n      z-index: 1;\n    }\n\n    &.experts {\n      opacity: 0.56 !important;\n      z-index: 0;\n    }\n\n    &.bottom {\n      bottom: -385px;\n      opacity: 0;\n    }\n\n    &.centerY {\n      top: calc(50% - 385px);\n      opacity: 0;\n    }\n\n    &.active {\n      &.left {\n        left: -385px;\n        opacity: 1;\n      }\n\n      &.right {\n        right: -385px;\n        opacity: 1;\n      }\n\n      &.experts {\n        opacity: 0.56 !important;\n      }\n    }\n\n    ${media.notDesktop`\n      width: 614px;\n      height: 614px;\n\n      &.left {\n        left: -614px;\n      }\n\n      &.right {\n        right: -614px;\n      }\n\n      &.top {\n        top: -307px;\n      }\n\n      &.bottom {\n        bottom: -307px;\n      }\n\n      &.centerY {\n        top: calc(50% - 307px);\n      }\n\n    &.active {\n      &.left {\n        left: -307px;\n        opacity: 1;\n      }\n\n      &.right {\n        right: -307px;\n        opacity: 1;\n      }\n\n      &.experts {\n        opacity: 0.56;\n      }\n    }\n    `}\n\n    ${media.tablet`\n      width: 460px;\n      height: 460px;\n\n      &.left {\n        left: -460px;\n      }\n\n      &.right {\n        right: -460px;\n      }\n\n      &.top {\n        top: -230px;\n      }\n\n      &.bottom {\n        bottom: -230px;\n      }\n\n      &.centerY {\n        top: calc(50% - 230px);\n      }\n      &.active {\n        &.left {\n          left: -230px;\n          opacity: 1;\n        }\n\n        &.right {\n          right: -230px;\n          opacity: 1;\n        }\n\n        &.experts {\n          opacity: 0.56 !important;\n        }\n      }\n    `}\n\n    ${media.mobile`\n      width: 280px;\n      height: 280px;\n\n      &.left {\n        left: -280px;\n      }\n\n      &.right {\n        right: -280px;\n      }\n\n      &.top {\n        top: -140px;\n      }\n\n      &.topTimeline {\n        top: -140px;\n        z-index: 0;\n      }\n\n      &.bottom {\n        bottom: -140px;\n      }\n\n      &.centerY {\n        top: -140px;\n      }\n\n      &.active {\n          &.left {\n            left: -140px;\n            opacity: 1;\n          }\n\n          &.right {\n            right: -140px;\n            opacity: 1;\n          }\n\n          &.experts {\n            opacity: 0.56 !important;\n          }\n        }\n    `}\n  `;\n\nexport default class Circle extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      elementTop: 0,\n    };\n    this.scene = null;\n  }\n\n  componentDidMount() {\n    if (this.element) {\n      this.setState({\n        elementTop: $(this.element).offset().top,\n      });\n      this.initializeAnimation();\n    }\n  }\n\n  componentWillUnmount() {\n    $(window).off(\"resize.animationHandler\");\n  }\n\n  isLeft() {\n    let classes = this.props.className;\n    return classes.includes(\"left\");\n  }\n\n  initializeAnimation() {\n    this.resizeAnimation();\n    $(window).on(\"resize.animationHandler\", this.resizeAnimation.bind(this));\n  }\n\n  resizeAnimation() {\n    // If the scene already exists, destory it.\n    if (this.scene) {\n      this.scene.destroy(true);\n    }\n\n    this.scene = new ScrollMagic.Scene({\n      triggerElement: this.element,\n      offset: -50,\n    })\n      .setClassToggle(this.element, \"active\")\n      .setTween(this.circleTween())\n      .reverse(false)\n      .addTo(this.props.controller);\n  }\n\n  circleTween() {\n    let isLeft = this.isLeft();\n    return gsap.fromTo(\n      this.element,\n      this.generateTweenOptions(isLeft, 0, true),\n      this.generateTweenOptions(isLeft, 1, false, 1),\n    );\n  }\n\n  generateTweenOptions(isLeft, opacity, start, duration) {\n    let props = {\n      css: {\n        opacity: opacity,\n      },\n    };\n\n    let elementWidth = $(this.element).width();\n    let value = start\n      ? `-${elementWidth / 2 + 100}px`\n      : `-${elementWidth / 2}px`;\n    props.css[isLeft ? \"left\" : \"right\"] = value;\n\n    if (duration) {\n      props.duration = duration;\n    }\n\n    return props;\n  }\n\n  render() {\n    let { scrollTop, className } = this.props;\n\n    return (\n      <CircleElement\n        ref={r => (this.element = r)}\n        scrollTop={scrollTop}\n        scrollFactor={1}\n        className={className}\n      />\n    );\n  }\n}\n"],"sourceRoot":""}