{"version":3,"sources":["webpack:///./src/images/risk/doc-cross.svg","webpack:///./src/components/LogosGrid.tsx","webpack:///./src/components/Header/HomepageHeader.tsx","webpack:///./src/components/DotsAnimation/DotsAnimation.tsx","webpack:///./src/components/Empower/Empower.tsx","webpack:///./src/components/Courses/Courses.tsx","webpack:///./src/components/Risk/Risk.tsx","webpack:///./src/pages/index.tsx","webpack:///./src/images/risk/profile.png","webpack:///./src/images/risk/90-chart.svg"],"names":["module","exports","LogosGrid","isVisible","brandsCaptions","images","Container","MainGrid","VerticalPadding","SectionHeading","heading","center","maxwidth","Grid","nodes","slice","map","item","key","Mask","order","ImageContainer","delay","Math","random","fluid","organisational_stickers","logo","localFile","childImageSharp","alt","style","height","width","imgStyle","objectFit","styled","section","theme","grey","keylineDark","div","keyline","props","Img","HomepageHeader","title1","title2","subtitle","btnUrl1","btnTitle1","btnUrl2","btnTitle2","imagesCollection","useStaticQuery","mobImg","team","edges","node","src","boy","man","girl","woman","linesRight","crownCommercialSupplier","hmTreasury","linesLeft","circlesLeftNumber","border","top","left","circlesRightNumber","right","MobileImageContainer","MobileImage","CirclesContainerRightMob","circle","CircleSmall2","CirclesContainerLeftMob","CircleSmall1","Inner","TextWrapper","MainHeading","MainHeadingBlue","ButtonContainer","Button","href","appendUrlPartnerTracking","secondary","SubHeading","ImgWrapper","BigCircle","GirlWrapper","Girl","LineLeft4","CirclesContainerRight","BoyWrapper","Boy","LineLeft1","CirclesContainerLeft","background","hpHeader","h6","brand","blue","img","h1","DotsAnimation","withBobHeading","withBobText","withBobBody","withoutBobHeading","withoutBobText","withoutBobBody","removeCirclesWithBob","id","document","getElementById","querySelectorAll","forEach","n","remove","drawCirclesWithBob","circlesNumber","radius","animateDot1","animateDot2","animateDot3","parentdiv","totalOffset","parseInt","offsetWidth","i","childdiv","createElement","className","y","sin","PI","x","cos","toString","includes","animation","animationIterationCount","backgroundColor","toFixed","appendChild","OuterContainer","LargeGrid","noPaddingMobile","noPaddingTablet","Wrapper","Card","InnerWrapper","PTop","CircleBorder","CircleBorder2","CircleBorder3","CircleBorder4","CircleBorder5","CircleBorder6","CircleBorder7","CircleBorder8","CircleBorder9","PMain","Line","PSecondary","Vs","heylineDots","text","main","p","Empower","blueText","whiteText","image","lines","data","imgAlt","Lines","CircleSmall","BlueText","WhiteText","scroll","h4","white","second","blue20","Courses","cardsContent","bob","tablet","bobTable","music","bobMusic","redlines","bobRedLines","useState","showAllCards","toggleCards","cardsToShow","setCardsToShow","BobWrapper","topHeading","ImageWrapper","Tablet","Bob","Music","RedLines","body","BobExplanation","CardsWrapperMobile","card","Circle","circleMob","CircleDesktop","circleDesk","CardCol","title","CardTitle","CardBody","BtnContainer","onClick","InlineLink","margintop","margintopDesktop","CardsWrapper","courses","inputHover","baseContent","imgSrc","profile","Risk","circleColTitle","circleColBody","cyberBreachCard1","cyberBreachCard2","Outer","Col","align","CircleContainer","Percent","Subtitle","CircleColText","CircleColTitle","CircleColBody","Input","CardInput","QuestionMark","questionMark","LinesContainer","LineInput","HalfLineInput","Base","ProfileWrapper","Profile","ProfileBlueBorder","blueBorder","Title","Body","Output","Cross","cross","Text","HalfLine","span","h2","Index","wpPage","pageContext","allWpTestimonial","home","renderedBlocks","LazyBlocksFactory","lazy_data","allWpOrganisationSticker","console","log","process","GATSBY_AWS_BRANCH","Layout","partialVisibility","offset","subsubtitletitle","ctaText1","ctaText2","ctaUrl1","ctaUrl2","SolutionsCards","topHeadingMarginBottom","titleCaption","postTitle","withBobTitle","withBobDescription1","withBobDescription2","withoutBobTitle","withoutBobDescription1","withoutBobDescription2","splashCard1","splashCard2","meetBobSubtitle","meetBobTitle","meetBobSummary","meetBobCardTitle1","meetBobCardDescription1","meetBobCardTitle2","meetBobCardDescription2","meetBobCardTitle3","meetBobCardDescription3","cyberBreach1","cyberBreach2","CarouselDrag","v"],"mappings":"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","file":"component---src-pages-index-tsx-a7723857a262b6d81ad5.js","sourcesContent":["module.exports = \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGO3N0cm9rZTojMUQyNTNDO3N0cm9rZS13aWR0aDozO30KCS5zdDF7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojMUQyNTNDO30KPC9zdHlsZT4KPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CjxnIGlkPSJQYWdlLTEiPgoJPGcgaWQ9IkNyb3NzIj4KCQk8Y2lyY2xlIGlkPSJPdmFsIiBjbGFzcz0ic3QwIiBjeD0iMjAiIGN5PSIyMCIgcj0iMTguNSIvPgoJCTxwYXRoIGlkPSJQYXRoIiBjbGFzcz0ic3QxIiBkPSJNMjUuNSwxMi4xYy0wLjEtMC4xLTAuMy0wLjEtMC41LDBsLTQuOCw0LjhjLTAuMSwwLjEtMC4zLDAuMS0wLjUsMEwxNSwxMi4xCgkJCWMtMC4xLTAuMS0wLjMtMC4xLTAuNSwwbC0yLjQsMi40Yy0wLjEsMC4xLTAuMSwwLjMsMCwwLjVsNC44LDQuOGMwLjEsMC4xLDAuMSwwLjMsMCwwLjVMMTIuMSwyNWMtMC4xLDAuMS0wLjEsMC4zLDAsMC41bDIuNCwyLjQKCQkJYzAuMSwwLjEsMC4zLDAuMSwwLjUsMGw0LjgtNC44YzAuMS0wLjEsMC4zLTAuMSwwLjUsMGw0LjgsNC44YzAuMSwwLjEsMC4zLDAuMSwwLjUsMGwyLjQtMi40YzAuMS0wLjEsMC4xLTAuMywwLTAuNWwtNC44LTQuOAoJCQljLTAuMS0wLjEtMC4xLTAuMywwLTAuNWw0LjgtNC44YzAuMS0wLjEsMC4xLTAuMywwLTAuNUwyNS41LDEyLjF6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==\"","import React, { FunctionComponent } from 'react'\nimport styled from 'styled-components'\nimport MainGrid from './styling/MainGrid'\nimport VerticalPadding from './styling/VerticalPadding'\nimport SectionHeading from './shared/SectionHeading'\nimport Img from 'gatsby-image'\nimport theme from './styling/theme'\n\n\ninterface LogosGrid {\n  isVisible: boolean\n  brandsCaptions: any\n  images?:any\n}\nconst LogosGrid: FunctionComponent<LogosGrid> = ({\n  isVisible,\n  brandsCaptions,\n  images,\n}) => {\n\n  //const featureimage = brandsCaptions.organisational_stickers.logo.localFile.childImageSharp.fluid\n  return (\n    <Container>\n      <MainGrid>\n        <VerticalPadding>\n          <SectionHeading heading={brandsCaptions} center maxwidth={'75rem'} />\n          <Grid>\n            {images &&\n              images.nodes.slice(0, 6).map((item, key) => {\n               \n                return (\n                  <Mask key={key} order={key}>\n                    \n             \n                  <ImageContainer\n                   isVisible={isVisible}\n                      delay={Math.random() * 0.5 * key}>\n\n                    <Img\n                      fluid={item.organisational_stickers.logo.localFile.childImageSharp.fluid}\n                      alt={item.alt}\n                      // style={{ marginLeft: 'auto', display: 'block'}}\n                      //  imgStyle={{ width: 'auto', height: 75, maxHeight:80, margin: '0 auto'}}\n                      //isVisible={isVisible}\n                      //delay={Math.random() * 0.5 * key}\n                      style={{ height: \"100%\", width: \"100%\" }}\n                      imgStyle={{ objectFit: \"contain\" }}\n  \n                      />\n                    </ImageContainer>\n                  \n                  </Mask>\n                  \n                )\n\n              })}\n            \n          </Grid>\n        </VerticalPadding>\n      </MainGrid>\n    </Container>\n  )\n}\n\nexport default LogosGrid\n\nconst Container = styled.section`\n  border-top: 1px solid ${theme.grey.keylineDark};\n`\n\nconst Grid = styled.div`\n  display: grid;\n  align-items: center;\n  justify-content: space-between;\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: 115px 115px;\n  grid-column-gap: 1px;\n  grid-row-gap: 1px;\n  background: ${theme.grey.keyline};\n  margin: 0 auto;\n  @media (min-width: 1200px) {\n    grid-template-columns: repeat(3, 1fr);\n    grid-template-rows: 200px 200px;\n  }\n`\n\ninterface MaskProps {\n  order: number\n}\n\nconst Mask = styled.div<MaskProps>`\n  width: 100%;\n  height: 100%;\n  background: white;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 10px;\n  @media screen and (max-width: 767px) {\n    display: ${(props) =>\n      props.order === 4 || props.order === 5 ? 'none' : 'flex'};\n  }\n  @media screen and (min-width: 768px) {\n    padding: 5rem 10rem;\n  }\n`\n\ninterface ImgProps {\n  isVisible: boolean\n  delay: number\n}\nconst ImageContainer = styled.div<ImgProps>`\n  \n  width: 200px;\n  height: 100px;\n  align-content: center;\n  justify-items: center;\n   vertical-align:middle;\n  transform: ${(props) => (props.isVisible ? 'scale(1)' : 'scale(0.5)')};\n  transition: transform 1s ease;\n  transition-delay: ${(props) => props.delay && props.delay}s; \n  @media (max-width: 768px) {\n    width:100px;\n  }\n  @media (max-width: 1024px) {\n    width:150px;\n  }\n`\n\n\nconst IMG = styled(Img)`\nvertical-align: 'middle';\n\nheight:75px;\nobject-fit: contain;\n//margin: 0 auto;\n\n\n`","import React, { FunctionComponent } from 'react'\nimport styled from 'styled-components'\nimport Button from '../shared/Button/Button'\nimport theme from '../styling/theme'\n// import mobImg from '../../images/hp-header/team.png'\n// import boy from '../../images/hp-header/man.png'\n// import girl from '../../images/hp-header/woman.png'\n// import linesLeft from '../../images/hp-header/red-lines-left.png'\n// import linesRight from '../../images/hp-header/red-lines-right.png'\n// import img from '../../images/logo-banner/crown-commercial-supplier.png'\n// import img2 from '../../images/logo-banner/hm-treasury.png'\n\nimport MainGrid from '../styling/MainGrid'\nimport { appendUrlPartnerTracking } from '../../util/url'\nimport { graphql,useStaticQuery } from 'gatsby'\nimport TrustBox from './Trustpilot'\n\n\ninterface HomepageHeaderProps {\n  title1: string\n  title2: string\n  subtitle: string\n  isVisible: boolean\n  btnUrl1: string\n  btnTitle1: string\n  btnUrl2: string\n  btnTitle2: string\n}\nconst HomepageHeader: FunctionComponent<HomepageHeaderProps> = ({\n  isVisible,\n  title1,\n  title2,\n  subtitle,\n  btnUrl1,\n  btnTitle1,\n  btnUrl2,\n  btnTitle2,\n}) => {\n\n\nconst imagesCollection = useStaticQuery(graphql`\n  query img{\n    team: allFile(filter: {childrenImageSharp: {elemMatch: {fluid: {originalName: {eq: \"team.png\"}}}}}) {\n      edges {\n        node {\n          id\n          childImageSharp {\n            fluid(maxWidth: 660,toFormat: WEBP) {\n              ...GatsbyImageSharpFluid\n            }\n          }\n        }\n      }\n    },\n    man: allFile(filter: {childrenImageSharp: {elemMatch: {fluid: {originalName: {eq: \"man.png\"}}}}}) {\n      edges {\n        node {\n          id\n          childImageSharp {\n            fluid(maxWidth: 1080,toFormat: WEBP) {\n              ...GatsbyImageSharpFluid\n            }\n          }\n        }\n      }\n    }, \n    woman: allFile(filter: {childrenImageSharp: {elemMatch: {fluid: {originalName: {eq: \"woman.png\"}}}}}) {\n      edges {\n        node {\n          id\n          childImageSharp {\n            fluid(maxWidth: 1080,toFormat: WEBP) {\n              ...GatsbyImageSharpFluid\n            }\n          }\n        }\n      }\n    },   \n    crownCommercialSupplier: allFile(filter: {childrenImageSharp: {elemMatch: {fluid: {originalName: {eq: \"crown-commercial-supplier.png\"}}}}}) {\n      edges {\n        node {\n          id\n          childImageSharp {\n            fluid(maxWidth: 1080,toFormat: WEBP) {\n              ...GatsbyImageSharpFluid\n            }\n          }\n        }\n      }\n    },   \n    hmTreasury: allFile(filter: {childrenImageSharp: {elemMatch: {fluid: {originalName: {eq: \"hm-treasury.png\"}}}}}) {\n      edges {\n        node {\n          id\n          childImageSharp {\n            fluid(maxWidth: 1080,toFormat: WEBP) {\n              ...GatsbyImageSharpFluid\n            }\n          }\n        }\n      }\n    },\n    linesLeft: allFile(filter: {childrenImageSharp: {elemMatch: {fluid: {originalName: {eq: \"red-lines-left.png\"}}}}}) {\n      edges {\n        node {\n          id\n          childImageSharp {\n            fluid(maxWidth: 1080,toFormat: WEBP) {\n              ...GatsbyImageSharpFluid\n            }\n          }\n        }\n      }\n    },\n    linesRight: allFile(filter: {childrenImageSharp: {elemMatch: {fluid: {originalName: {eq: \"red-lines-right.png\"}}}}}) {\n      edges {\n        node {\n          id\n          childImageSharp {\n            fluid(maxWidth: 1080,toFormat: WEBP) {\n              ...GatsbyImageSharpFluid\n            }\n          }\n        }\n      }\n    }   \n  }\n`)\n\nconst mobImg = imagesCollection.team.edges[0].node.childImageSharp.fluid.src\nconst boy = imagesCollection.man.edges[0].node.childImageSharp.fluid.src\nconst girl = imagesCollection.woman.edges[0].node.childImageSharp.fluid.src\nconst img = imagesCollection.crownCommercialSupplier.edges[0].node.childImageSharp.fluid.src\nconst img2 = imagesCollection.hmTreasury.edges[0].node.childImageSharp.fluid.src\nconst linesRight = imagesCollection.linesRight.edges[0].node.childImageSharp.fluid.src\nconst linesLeft = imagesCollection.linesLeft.edges[0].node.childImageSharp.fluid.src\n\n\n  const circlesLeftNumber = [\n    {\n      width: 30,\n      border: 5,\n      top: 110,\n      left: -10,\n    },\n    {\n      width: 20,\n      border: 3,\n      top: 90,\n      left: 6,\n    },\n    {\n      width: 10,\n      border: 2,\n      top: 105,\n      left: 0,\n    },\n    {\n      width: 12,\n      border: 3,\n      top: 80,\n      left: 22,\n    },\n    {\n      width: 22,\n      border: 4,\n      top: 105,\n      left: -10,\n    },\n    {\n      width: 18,\n      border: 4,\n      top: 70,\n      left: 5,\n    },\n  ]\n\n  const circlesRightNumber = [\n    {\n      width: 28,\n      border: 5,\n      top: 100,\n      right: 0,\n    },\n    {\n      width: 14,\n      border: 3,\n      top: 90,\n      right: 5,\n    },\n    {\n      width: 10,\n      border: 2,\n      top: 80,\n      right: 8,\n    },\n    {\n      width: 12,\n      border: 3,\n      top: 70,\n      right: 12,\n    },\n    {\n      width: 22,\n      border: 4,\n      top: 90,\n      right: 6,\n    },\n    {\n      width: 18,\n      border: 4,\n      top: 92,\n      right: 0,\n    },\n  ]\n  const logos = [\n    {\n      imgSrc: img,\n      alt: 'Crown Commercial Service Supplier logo',\n    },\n    {\n      imgSrc: img2,\n      alt: 'HM Treasury logo',\n    },\n  ]\n\n  return (\n    <Container>\n      <MobileImageContainer>\n        <MobileImage src={mobImg} alt=\"man and woman with laptops\"/>\n      </MobileImageContainer>\n      <CirclesContainerRightMob>\n        {circlesRightNumber &&\n          circlesRightNumber.map((circle, key) => {\n            return (\n              <CircleSmall2\n                key={key}\n                isVisible={isVisible}\n                width={circle.width}\n                border={circle.border}\n                top={circle.top}\n                right={circle.right}\n                delay={key + 1}\n                left={0}\n              />\n            )\n          })}\n      </CirclesContainerRightMob>\n      <CirclesContainerLeftMob>\n        {circlesLeftNumber &&\n          circlesLeftNumber.map((circle, key) => {\n            return (\n              <CircleSmall1\n                key={key}\n                isVisible={isVisible}\n                width={circle.width}\n                border={circle.border}\n                top={circle.top}\n                left={circle.left}\n                delay={key + 1}\n                right={0}\n              />\n            )\n          })}\n      </CirclesContainerLeftMob>\n      {isVisible && (\n        <MainGrid>\n          <Inner>\n            <TextWrapper>\n              {title1 && (\n                <MainHeading>\n                  <span>{title1}</span>\n                </MainHeading>\n              )}\n              {title2 && (\n                <MainHeadingBlue>\n                  <span>{title2}</span>\n                </MainHeadingBlue>\n              )}\n              {btnUrl1 && (\n                <ButtonContainer>\n                \n                  <Button href={appendUrlPartnerTracking(btnUrl1)}>\n                    {btnTitle1}\n                  </Button>\n                  {btnUrl2 && (\n                    <Button\n                     \n                      secondary\n                      href={appendUrlPartnerTracking(btnUrl2)}\n                    >\n                      {btnTitle2}\n                    </Button>\n                  )}\n                </ButtonContainer>\n              )}\n              {subtitle && <SubHeading>{subtitle}</SubHeading>}\n              <Grid>\n                {/*logos &&\n                  logos.map((item, key) => {\n                    return <Img src={item.imgSrc} alt={item.alt} key={key} />\n                  })*/}\n                <TrustBox />\n              </Grid>\n            </TextWrapper>\n            <ImgWrapper>\n              <BigCircle isVisible={isVisible} />\n\n              <GirlWrapper>\n                <Girl src={girl} alt=\"Girl with laptop\" isVisible={isVisible} />\n                <LineLeft4 src={linesRight} isVisible={isVisible} />\n                <CirclesContainerRight>\n                  {circlesRightNumber &&\n                    circlesRightNumber.map((circle, key) => {\n                      return (\n                        <CircleSmall2\n                          key={key}\n                          isVisible={isVisible}\n                          width={circle.width}\n                          border={circle.border}\n                          top={circle.top}\n                          right={circle.right}\n                          delay={key + 1}\n                          left={0}\n                        />\n                      )\n                    })}\n                </CirclesContainerRight>\n              </GirlWrapper>\n              <BoyWrapper>\n                <Boy src={boy} alt=\"Boy with laptop\" isVisible={isVisible} />\n                <LineLeft1 src={linesLeft} isVisible={isVisible} />\n                <CirclesContainerLeft>\n                  {circlesLeftNumber &&\n                    circlesLeftNumber.map((circle, key) => {\n                      return (\n                        <CircleSmall1\n                          key={key}\n                          isVisible={isVisible}\n                          width={circle.width}\n                          border={circle.border}\n                          top={circle.top}\n                          left={circle.left}\n                          delay={key + 1}\n                          right={0}\n                        />\n                      )\n                    })}\n                </CirclesContainerLeft>\n              </BoyWrapper>\n            </ImgWrapper>\n          </Inner>\n        </MainGrid>\n      )}\n    </Container>\n  )\n}\n\nexport default HomepageHeader\n\nconst Container = styled.section`\n  background-color: ${theme.background.hpHeader};\n  height: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  padding: 10px 0 50px;\n  min-height: 260px;\n  @media screen and (min-width: 1024px) {\n    padding: 10rem 0 6.4rem;\n    flex-direction: row;\n  }\n`\n\nconst Inner = styled.div`\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column-reverse;\n  position: relative;\n  & h3,\n  h6 {\n  }\n\n  & h3 {\n    font-weight: bold;\n    margin-bottom: 14px;\n\n    @media screen and (min-width: 1500px) and (max-width: 3000px) {\n      font-size: 2.8vw;\n      line-height: 3.2vw;\n    }\n    @media screen and (min-width: 3000px) {\n      font-size: 84px;\n      line-height: 94px;\n    }\n  }\n\n  & h6 {\n    @media screen and (min-width: 1500px) and (max-width: 3000px) {\n      font-size: 0.9vw;\n      line-height: 1.4vw;\n    }\n    @media screen and (min-width: 3000px) {\n      font-size: 30px;\n      line-height: 40px;\n    }\n  }\n\n  @media (min-width: 1024px) {\n    flex-direction: row;\n  }\n`\nconst TextWrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  max-width: 465px;\n  position: relative;\n  margin-top: -35vw;\n  z-index: 8;\n  @media (min-width: 1024px) {\n    position: relative;\n    max-width: 35%;\n    min-height: 32vw;\n    margin-top: 0;\n    // padding-left: 4vw;\n  }\n`\n\nconst ButtonContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 420px;\n  margin-top: 15px;\n  & a:first-of-type {\n    margin-bottom: 10px;\n  }\n\n  @media (min-width: 768px) {\n    flex-direction: row;\n    margin-top: 45px;\n    & a:first-of-type {\n      margin-bottom: 0px;\n      margin-right: 20px;\n    }\n  }\n  @media (min-width: 1024px) {\n    max-width: 420px;\n    margin-top: 45px;\n  }\n\n  @media screen and (min-width: 1500px) {\n    max-width: 20vw;\n  }\n`\nconst SubHeading = styled.h6`\n  margin-top: 15px;\n\n  @media (min-width: 768px) {\n    margin-top: 30px;\n  }\n`\n\nconst ImgWrapper = styled.div`\n  width: 100%;\n  position: relative;\n  perspective: 1000px;\n  display: none;\n  @media (min-width: 1024px) {\n    display: flex;\n    justify-content: center;\n    max-width: 60%;\n    margin-bottom: 0;\n  }\n`\nconst BoyWrapper = styled.div`\n  width: 100%;\n  min-width: 250px;\n  height: 100%;\n  position: relative;\n  left: 20vw;\n  top: 40px;\n  max-width: 900px;\n  z-index: 8;\n  @media (min-width: 1024px) {\n    top: -60px;\n    position: absolute;\n    left: 12%;\n    // left: 0%;\n    width: 40vw;\n    animation: float 6s ease-in-out infinite 6s;\n  }\n  @media screen and (min-width: 1500px) {\n    left: 7%;\n  }\n`\nconst GirlWrapper = styled(BoyWrapper)`\n  margin-top: 20px;\n\n  left: -14vw;\n  @media screen and (min-width: 1024px) {\n    margin-top: 30px;\n    animation: floatF 8s ease infinite 3s;\n  }\n  @media screen and (min-width: 1024px) {\n    width: 38vw;\n    left: 33%;\n  }\n`\ninterface BigCircleProps {\n  isVisible: boolean\n}\nconst BigCircle = styled.div<BigCircleProps>`\n  width: 50vw;\n  height: 50vw;\n  border: 6vw solid ${theme.brand.blue};\n  opacity: 0.4;\n  border-radius: 50%;\n  transform: scale(0);\n  position: absolute;\n  top: 0;\n  transform-style: preserve-3d;\n  animation: ${(props) => (props.isVisible ? 'scaleInCircle' : 'none')} 1.8s\n    cubic-bezier(0.33, 1, 0.68, 1) forwards 0.2s;\n  @media screen and (min-width: 1024px) {\n    top: -90px;\n    max-height: 850px;\n    max-width: 850px;\n  }\n\n  @media screen and (min-width: 1024px) and (max-width: 3000px) {\n    width: 37vw;\n    height: 37vw;\n    border: 5vw solid ${theme.brand.blue};\n  }\n\n  @media (min-width: 3000px) {\n    width: 1200px;\n    height: 1200px;\n    border: 120px solid ${theme.brand.blue};\n  }\n`\n\ninterface GirlProps {\n  isVisible: boolean\n}\nconst Girl = styled.img<GirlProps>`\n  margin: 0 auto;\n  position: relative;\n\n  @media screen and (min-width: 1024px) {\n    // width: 100%;\n    width: auto;\n    max-height: 1000px;\n    margin-top: 18px;\n    transform: scale(0);\n    transform-style: preserve-3d;\n    transform-origin: center 40%;\n    animation: ${(props) =>\n      props.isVisible ? 'headerPopInF 1.8s forwards 1s' : 'none'};\n  }\n`\ninterface BoyProps {\n  isVisible: boolean\n}\nconst Boy = styled.img<BoyProps>`\n  position: relative;\n  z-index: 5;\n  transform-style: preserve-3d;\n  @media screen and (min-width: 1024px) {\n    width: auto;\n    max-height: 1000px;\n    transform: scale(0);\n    transform-origin: 20% 40%;\n    animation: ${(props) =>\n      props.isVisible ? 'headerPopInF 1.8s forwards 1.8s' : 'none'};\n  }\n`\nconst CirclesContainerRight = styled.div`\n  position: absolute;\n  width: 20%;\n  height: 20%;\n  top: 16%;\n  left: 56%;\n  transform-style: preserve-3d;\n  animation: floatF 8s ease infinite 3s;\n  @media (min-width: 1024px) and (max-width: 1300px) {\n    width: 20%;\n    height: 14%;\n    top: 14%;\n    left: 58%;\n  }\n  @media (min-width: 2000px) {\n    left: 40%;\n  }\n  @media (min-width: 3000px) {\n    height: 18%;\n    width: 24%;\n    left: 35%;\n  }\n`\nconst CirclesContainerLeft = styled(CirclesContainerRight)`\n  top: 20%;\n  left: 15%;\n  z-index: 5;\n  @media (min-width: 1024px) and (max-width: 1300px) {\n    top: 15%;\n    left: 12%;\n  }\n  @media (min-width: 3000px) {\n    left: 15%;\n  }\n`\n\ninterface CircleSmallProps {\n  top: number\n  left: number\n  right: number\n  isVisible: boolean\n  delay: number\n  width: number\n  border: number\n}\nconst CircleSmall1 = styled.div<CircleSmallProps>`\n  width: ${(props) => (props.width ? props.width : 30)}px;\n  height: ${(props) => (props.width ? props.width : 30)}px;\n  border: ${(props) => (props.border ? props.border : 8)}px solid\n    ${theme.brand.blue};\n  border-radius: 50%;\n  position: absolute;\n  transform: scale(0) perspective(200px) translateZ(50px);\n  transition: all ease;\n  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  top: ${(props) => (props.top ? props.top : 30)}%;\n  left: ${(props) => (props.left ? props.left : 30)}%;\n  animation: ${(props) =>\n    props.isVisible\n      ? ` floatCirclesLeftMob ${\n          props.delay + 2\n        }s cubic-bezier(0, 0.55, 0.45, 1) infinite ${props.delay + 3}s`\n      : 'none'};\n  z-index: 3;\n  @media (min-width: 1024px) {\n    animation: ${(props) =>\n      props.isVisible\n        ? ` floatCirclesLeft ${\n            props.delay + 4\n          }s cubic-bezier(0, 0.55, 0.45, 1) infinite ${props.delay + 3}s`\n        : 'none'};\n    transition: all cubic-bezier(0, 0.55, 0.45, 1);\n  }\n`\ninterface CircleSmall2Props {\n  right: number\n  isVisible: boolean\n  delay: number\n}\nconst CircleSmall2 = styled(CircleSmall1)<CircleSmall2Props>`\n  right: ${(props) => (props.right ? props.right : 30)}%;\n  animation: ${(props) =>\n    props.isVisible\n      ? ` floatCirclesRightMob ${props.delay + 2}s ease infinite ${\n          props.delay + 1.5\n        }s`\n      : 'none'};\n  left: auto;\n  @media (min-width: 1024px) {\n    animation: ${(props) =>\n      props.isVisible\n        ? ` floatCirclesRight ${\n            props.delay + 4\n          }s cubic-bezier(0, 0.55, 0.45, 1) infinite ${props.delay + 1.5}s`\n        : 'none'};\n  }\n`\ninterface LineLeft4Interface {\n  isVisible: boolean\n}\n\nconst LineLeft1 = styled.img<LineLeft4Interface>`\n  animation: ${(props) =>\n    props.isVisible ? 'linesSound1 2.5s ease infinite 3.5s' : 'none'};\n  transform-origin: bottom left;\n  transition: transform ease 0.2s;\n  width: 100%;\n  z-index: 5;\n  position: absolute;\n  left: 0;\n  transform: scale(0);\n  width: auto;\n  max-height: 1000px;\n`\nconst LineLeft2 = styled(LineLeft1)``\nconst LineLeft3 = styled(LineLeft1)``\n\nconst LineLeft4 = styled(LineLeft1)`\n  animation: ${(props) =>\n    props.isVisible ? 'linesSound1 2s ease infinite 3s' : 'none'};\n  transform-origin: bottom right;\n`\nconst LineLeft5 = styled(LineLeft4)``\nconst LineLeft6 = styled(LineLeft4)``\nconst MainHeading = styled.h1`\n  font-weight: bold;\n  letter-spacing: -1px;\n  text-transform: none;\n  font-size: 30px;\n  line-height: 40px;\n  @media screen and (min-width: 768px) {\n    font-size: 70px;\n    line-height: 93px;\n    letter-spacing: -2.7px;\n  }\n  @media screen and (min-width: 1024px) {\n    padding: 0;\n    background: none;\n    width: auto;\n    font-size: 70px;\n    line-height: 70px;\n  }\n\n  & span {\n    background: white;\n    box-decoration-break: clone;\n    display: inline;\n    padding: 0px 6px 0px 0;\n    font-family: 'Titillium Web';\n    @media screen and (min-width: 1024px) {\n      background: none;\n      padding: 0px;\n    }\n  }\n`\n\nconst MainHeadingBlue = styled(MainHeading)`\n  color: ${theme.brand.blue};\n  // margin-top: -3px;\n  @media screen and (min-width: 1024px) {\n    padding: 0;\n    margin-top: 0;\n  }\n  & span {\n    color: ${theme.brand.blue};\n  }\n`\nconst MobileImageContainer = styled.div`\n  height: auto;\n  min-height: 300px;\n  @media screen and (min-width: 1024px) {\n    display: none;\n  }\n`\n\nconst MobileImage = styled.img`\n  display: block;\n  margin: 0 auto;\n  @media screen and (min-width: 1024px) {\n    display: none;\n  }\n`\nconst CirclesContainerRightMob = styled(CirclesContainerRight)`\n  height: 12%;\n  width: 12%;\n  top: 40vw;\n  left: 67%;\n  @media (min-width: 768px) {\n    top: 32vw;\n  }\n  @media (min-width: 1024px) {\n    display: none;\n  }\n`\nconst CirclesContainerLeftMob = styled(CirclesContainerLeft)`\n  top: 40vw;\n  left: 15%;\n  height: 12%;\n  width: 12%;\n  @media (min-width: 768px) {\n    top: 32vw;\n  }\n  @media (min-width: 1024px) {\n    display: none;\n  }\n`\n\nconst Grid = styled.div`\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-top: 38px;\n  @media (min-width: 1024px) {\n    margin-top: 50px;\n  }\n`\nconst Img = styled.img`\n  margin-right: 18px;\n  height: 36px;\n  @media (min-width: 767px) {\n    margin-right: 23px;\n    height: 40px;\n  }\n`\n","import React, { FunctionComponent } from 'react'\nimport styled from 'styled-components'\nimport theme from '../styling/theme'\nimport '../shared/Animations/Animations.css'\nimport LargeGrid from '../styling/LargeGrid'\n\ninterface DotsAnimationProps {\n  isVisible: boolean\n  withBobHeading: string\n  withBobText: string\n  withBobBody: string\n  withoutBobHeading: string\n  withoutBobText: string\n  withoutBobBody: string\n}\n\nconst DotsAnimation: FunctionComponent<DotsAnimationProps> = ({\n  isVisible,\n  withBobHeading,\n  withBobText,\n  withBobBody,\n  withoutBobHeading,\n  withoutBobText,\n  withoutBobBody,\n}) => {\n  const removeCirclesWithBob = (id: string) => {\n    if (typeof document !== 'undefined') {\n      const node = document.getElementById(id)\n      if (node !== null) {\n        node.querySelectorAll('*').forEach((n) => n.remove())\n      }\n    }\n  }\n\n  const drawCirclesWithBob = (\n    id: string,\n    circlesNumber: number,\n    radius: number,\n    animateDot1: number,\n    animateDot2: number,\n    animateDot3: number\n  ) => {\n    const div = 360 / circlesNumber\n    const parentdiv = document.getElementById(id)\n    const offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2)\n    const offsetToChildCenter = 20\n    const totalOffset = offsetToParentCenter - offsetToChildCenter\n\n    for (let i = 1; i <= circlesNumber; i++) {\n      const childdiv = document.createElement('div')\n      childdiv.className = 'div2'\n      childdiv.id = i + 'div'\n\n      // calcs dot's position\n      const y = Math.sin(div * i * (Math.PI / 180)) * radius\n      const x = Math.cos(div * i * (Math.PI / 180)) * radius\n\n      childdiv.style.top = `${(y + totalOffset).toString()}px`\n      childdiv.style.left = `${(x + totalOffset).toString()}px`\n\n      if (id.includes('out')) {\n        if (i === animateDot1 || i === animateDot2 || i === animateDot3) {\n          childdiv.style.animation = `dotBackground 0.4s ease forwards  ${\n            i * 0.01 + Math.random()\n          }s`\n          childdiv.style.animationIterationCount = 1\n        }\n      } else if (i === animateDot1 || i === animateDot2 || i === animateDot3) {\n        childdiv.style.backgroundColor = '#e2e2e2'\n      } else {\n        childdiv.style.animation = `dotBackground 0.3s ease forwards ${(\n          i * 0.04 +\n          Math.random()\n        ).toFixed(2)}s`\n        childdiv.style.animationIterationCount = 1\n      }\n      parentdiv.appendChild(childdiv)\n    }\n  }\n\n  if (isVisible) {\n    drawCirclesWithBob('withBob1', 56, 153, 57, 57, 57)\n    drawCirclesWithBob('withBob2', 49, 134, 40, 30, 12)\n    drawCirclesWithBob('withBob3', 42, 115, 40, 30, 12)\n    drawCirclesWithBob('withBob4', 35, 96, 40, 30, 12)\n    drawCirclesWithBob('withBob5', 28, 77, 40, 30, 12)\n    drawCirclesWithBob('withBob6', 21, 58, 40, 30, 12)\n    drawCirclesWithBob('withBob7', 14, 39, 5, 6, 16)\n    drawCirclesWithBob('withBob8', 7, 20, 2, 5, 12)\n    drawCirclesWithBob('withBob9', 1, 1, 40, 30, 12)\n\n    // without Bob\n    drawCirclesWithBob('withoutBob1', 56, 153, 45, 8, 52)\n    drawCirclesWithBob('withoutBob2', 49, 134, 49, 26, 20)\n    drawCirclesWithBob('withoutBob3', 42, 115, 36, 9, 25)\n    drawCirclesWithBob('withoutBob4', 35, 96, 33, 4, 15)\n    drawCirclesWithBob('withoutBob5', 28, 77, 10, 20, 5)\n    drawCirclesWithBob('withoutBob6', 21, 58, 2, 14, 21)\n    drawCirclesWithBob('withoutBob7', 14, 39, 16, 15, 20)\n    drawCirclesWithBob('withoutBob8', 7, 20, 5, -15, -12)\n    drawCirclesWithBob('withoutBob9', 1, 1, 15, 10, 20)\n  } else {\n    for (let i = 0; i < 9; i++) {\n      removeCirclesWithBob(`withBob${i + 1}`)\n      removeCirclesWithBob(`withoutBob${i + 1}`)\n    }\n  }\n\n  return (\n    <OuterContainer>\n      <LargeGrid noPaddingMobile noPaddingTablet>\n        <Wrapper>\n          <Card background={theme.background.grey}>\n            <InnerWrapper>\n              <PTop>\n                <b>With</b> Bob’s Business\n              </PTop>\n              <Container>\n                <CircleBorder id=\"withBob1\" />\n                <CircleBorder2 id=\"withBob2\" />\n                <CircleBorder3 id=\"withBob3\" />\n                <CircleBorder4 id=\"withBob4\" />\n                <CircleBorder5 id=\"withBob5\" />\n                <CircleBorder6 id=\"withBob6\" />\n                <CircleBorder7 id=\"withBob7\" />\n                <CircleBorder8 id=\"withBob8\" />\n                <CircleBorder9 id=\"withBob9\" />\n              </Container>\n              {withBobHeading && <h4>{withBobHeading}</h4>}\n              {withBobText && <PMain>{withBobText}</PMain>}\n              <Line />\n\n              {withBobBody && <PSecondary>{withBobBody}</PSecondary>}\n            </InnerWrapper>\n            <Vs>VS</Vs>\n          </Card>\n          <Card background={theme.background.hpHeader}>\n            <InnerWrapper>\n              <PTop>\n                <b>Without</b> Bob’s Business\n              </PTop>\n\n              <Container>\n                <CircleBorder id=\"withoutBob1\" />\n                <CircleBorder2 id=\"withoutBob2\" />\n                <CircleBorder3 id=\"withoutBob3\" />\n                <CircleBorder4 id=\"withoutBob4\" />\n                <CircleBorder5 id=\"withoutBob5\" />\n                <CircleBorder6 id=\"withoutBob6\" />\n                <CircleBorder7 id=\"withoutBob7\" />\n                <CircleBorder8 id=\"withoutBob8\" />\n                <CircleBorder9 id=\"withoutBob9\" />\n              </Container>\n              {withoutBobHeading && <h4>{withoutBobHeading}</h4>}\n              {withoutBobText && <PMain>{withoutBobText}</PMain>}\n              <Line />\n\n              {withoutBobBody && <PSecondary>{withoutBobBody}</PSecondary>}\n            </InnerWrapper>\n          </Card>\n        </Wrapper>\n      </LargeGrid>\n    </OuterContainer>\n  )\n}\n\nexport default DotsAnimation\n\nconst OuterContainer = styled.section`\n  @media (min-width: 1024px) {\n    background: linear-gradient(\n      90deg,\n      ${theme.background.grey} 0%,\n      ${theme.background.grey} 50%,\n      ${theme.background.hpHeader} 51%,\n      ${theme.background.hpHeader} 100%\n    );\n  }\n`\n\nconst Wrapper = styled.div`\n  width: 100%;\n  max-width: 1440px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: relative;\n  @media screen and (min-width: 1024px) {\n    flex-direction: row;\n  }\n`\ninterface CardProps {\n  background: string\n}\nconst Card = styled.div<CardProps>`\n  width: 100%;\n  padding: 50px 0;\n  background: ${(props) => props.background && props.background};\n  position: relative;\n  &:first-of-type {\n    border-bottom: 1px solid ${theme.grey.heylineDots};\n  }\n  @media screen and (min-width: 1024px) {\n    width: 50%;\n    padding: 12rem 0 15rem;\n    &:first-of-type {\n      border-right: 1px solid ${theme.grey.heylineDots};\n      border-bottom: none;\n    }\n  }\n\n  & h4 {\n    font-weight: bold;\n    margin-bottom: 2rem;\n  }\n`\nconst InnerWrapper = styled.div`\n  width: 100%;\n  margin: 0 auto;\n  padding: 0 20px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: ${theme.text.main};\n  font-family: Montserrat;\n  @media screen and (min-width: 1024px) {\n    max-width: 46rem;\n    padding: 0;\n  }\n`\n\nconst PTop = styled.p`\n  margin-bottom: 3.6rem;\n`\n\nconst Container = styled.div`\n  width: 100%;\n  max-width: 280px;\n  height: 100%;\n  min-height: 350px;\n  position: relative;\n\n  @media screen and (max-width: 450px) {\n    transform: scale(0.8);\n    min-height: 300px;\n  }\n  @media screen and (min-width: 1024px) {\n    max-width: 350px;\n    margin-bottom: 14px;\n    min-height: 350px;\n  }\n`\nconst PMain = styled.p`\n  font-weight: 300;\n  margin-bottom: 4rem;\n`\nconst Line = styled.div`\n  width: 100%;\n  max-width: 208px;\n  height: 1px;\n  border-top: 1px solid #1d1e20;\n  margin-bottom: 27px;\n`\nconst PSecondary = styled(PMain)`\n  margin-bottom: 0;\n`\n\nconst CircleBorder = styled.div`\n  border: none;\n  position: absolute;\n  top: 50%;\n  left: 54%;\n  transform: translate(-50%, -50%);\n  width: 300px;\n  height: 300px;\n  border-radius: 100%;\n  margin: 0 auto;\n  & .div2 {\n    position: absolute;\n    width: 13px;\n    height: 13px;\n    border-radius: 50%;\n    background: #e2e2e2;\n  }\n`\nconst CircleBorder2 = styled(CircleBorder)`\n  width: 270px;\n  height: 270px;\n`\nconst CircleBorder3 = styled(CircleBorder)`\n  width: 250px;\n  height: 250px;\n`\nconst CircleBorder4 = styled(CircleBorder)`\n  width: 230px;\n  height: 230px;\n`\nconst CircleBorder5 = styled(CircleBorder)`\n  width: 210px;\n  height: 210px;\n`\nconst CircleBorder6 = styled(CircleBorder)`\n  width: 190px;\n  height: 190px;\n`\nconst CircleBorder7 = styled(CircleBorder)`\n  width: 170px;\n  height: 170px;\n`\nconst CircleBorder8 = styled(CircleBorder)`\n  width: 150px;\n  height: 150px;\n`\nconst CircleBorder9 = styled(CircleBorder)`\n  width: 130px;\n  height: 130px;\n`\nconst Vs = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: 1px solid ${theme.brand.blue};\n  position: absolute;\n  bottom: 0%;\n  left: 50%;\n  transform: translate(-50%, 50%);\n  background: white;\n  font-size: 14px;\n  line-height: 22px;\n  color: ${theme.brand.blue};\n  font-weight: bold;\n  z-index: 2;\n  font-family: Montserrat;\n  @media (min-width: 1024px) {\n    width: 63px;\n    height: 63px;\n    top: 60%;\n    left: 100%;\n    font-size: 24px;\n    line-height: 32px;\n  }\n`\n","import React, { FunctionComponent } from 'react'\nimport styled from 'styled-components'\n// import image from '../../images/empower.png'\n// import lines from '../../images/empower-lines.png'\nimport MainGrid from '../styling/MainGrid'\nimport theme from '../styling/theme'\n\nimport { graphql,useStaticQuery } from 'gatsby'\n\nconst circlesRightNumber = [\n  {\n    width: 28,\n    border: 5,\n    top: 100,\n    right: 0,\n  },\n  {\n    width: 14,\n    border: 3,\n    top: 90,\n    right: 5,\n  },\n  {\n    width: 10,\n    border: 2,\n    top: 80,\n    right: 8,\n  },\n  {\n    width: 12,\n    border: 3,\n    top: 70,\n    right: 12,\n  },\n  {\n    width: 22,\n    border: 4,\n    top: 90,\n    right: 6,\n  },\n  {\n    width: 18,\n    border: 4,\n    top: 92,\n    right: 0,\n  },\n]\n\n\n\ninterface EmpowerProps {\n  isVisible: boolean\n  blueText: string\n  whiteText: string\n}\nconst Empower: FunctionComponent<EmpowerProps> = ({\n  isVisible,\n  blueText,\n  whiteText,\n}) => {\n\n  const imagesCollection = useStaticQuery(graphql`\n\n    query img4 {\n      image: allFile(filter: {childrenImageSharp: {elemMatch: {fluid: {originalName: {eq: \"empower.png\"}}}}}) {\n        edges {\n          node {\n            id\n            childImageSharp {\n              fluid(maxWidth: 660,toFormat: WEBP) {\n                ...GatsbyImageSharpFluid\n              }\n            }\n          }\n        }\n      },\n      lines: allFile(filter: {childrenImageSharp: {elemMatch: {fluid: {originalName: {eq: \"empower-lines.png\"}}}}}) {\n        edges {\n          node {\n            id\n            childImageSharp {\n              fluid(maxWidth: 660,toFormat: WEBP) {\n                ...GatsbyImageSharpFluid\n              }\n            }\n          }\n        }\n      },\n    }\n  `)\n\n  const image = imagesCollection.image.edges[0].node.childImageSharp.fluid.src\n  const lines = imagesCollection.lines.edges[0].node.childImageSharp.fluid.src\n\n  const data = {\n    img: image,\n    imgAlt: 'Empower ..',\n  }\n\n  return (\n    <Container>\n      <MainGrid noPaddingMobile>\n        <InnerWrapper>\n          <ImgWrapper>\n            <Img src={data.img} alt={data.imgAlt} isVisible={isVisible} />\n            <Lines src={lines} alt={'Red lines'} isVisible={isVisible} />\n            <CirclesContainerRight>\n              {circlesRightNumber &&\n                circlesRightNumber.map((circle, key) => {\n                  return (\n                    <CircleSmall\n                      key={key}\n                      isVisible={isVisible}\n                      width={circle.width}\n                      left={0}\n                      border={circle.border}\n                      top={circle.top}\n                      right={circle.right}\n                      delay={key + 1}\n                    />\n                  )\n                })}\n            </CirclesContainerRight>\n          </ImgWrapper>\n          <TextWrapper>\n            <BlueText>{blueText}</BlueText>\n            <WhiteText>{whiteText}</WhiteText>\n          </TextWrapper>\n        </InnerWrapper>\n      </MainGrid>\n      <BigCircle isVisible={isVisible} />\n    </Container>\n  )\n}\n\nexport default Empower\n\nconst Container = styled.section`\n  background: ${theme.grey.scroll};\n  position: relative;\n  padding: 50px 0 0;\n  @media (min-width: 1024px) {\n    padding: 0;\n  }\n`\nconst InnerWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  @media (min-width: 768px) {\n    flex-direction: row-reverse;\n    padding: 8rem 20px 0;\n  }\n  @media (min-width: 1024px) {\n    padding: 10rem 0 0;\n  }\n`\n\nconst ImgWrapper = styled.div`\n  width: 70%;\n  margin: 0 auto;\n  display: flex;\n  align-items: flex-end;\n  position: relative;\n\n  @media (min-width: 768px) {\n    margin: 0 0 0 8rem;\n  }\n  @media (min-width: 1024px) {\n    margin: 0 0 0 10rem;\n    width: 50%;\n    background: ${theme.grey.scroll};\n    overflow: hidden;\n  }\n`\n\ninterface ImgProps {\n  isVisible: boolean\n}\nconst Img = styled.img<ImgProps>`\n  @media (min-width: 1200px) {\n    transform: translateX(-800px);\n    animation: ${(props) =>\n      props.isVisible ? 'moveLeftEmpower 1s ease forwards' : 'none'};\n  }\n`\n\ninterface LinesProps {\n  isVisible: boolean\n}\nconst Lines = styled.img<LinesProps>`\n  position: absolute;\n  bottom: 0;\n  transform: scale(0);\n  animation: ${(props) =>\n    props.isVisible ? 'linesSound1 2s ease infinite 2s' : 'none'};\n  transform-origin: bottom right;\n`\n\nconst TextWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  z-index: 2;\n  @media (min-width: 768px) {\n    width: 47%;\n    padding-bottom: 8rem;\n  }\n  @media (min-width: 1024px) {\n    padding-bottom: 20rem;\n    width: 43%;\n    padding-top: 5rem;\n  }\n`\n\nconst BlueText = styled.h4`\n  color: ${theme.text.white};\n  background: ${theme.brand.blue};\n  padding: 40px 35px 50px;\n  @media screen and (min-width: 1024px) {\n    padding: 54px 54px 60px;\n  }\n`\n\nconst WhiteText = styled.div`\n  color: ${theme.text.second};\n  background: ${theme.text.white};\n  padding: 43px 35px 50px;\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 24px;\n  @media screen and (min-width: 1024px) {\n    padding: 54px 54px 60px;\n    font-size: 16px;\n    line-height: 28px;\n  }\n`\n\ninterface BigCirlceProps {\n  isVisible: boolean\n}\nconst BigCircle = styled.div<BigCirlceProps>`\n  display: none;\n  width: 55rem;\n  height: 55rem;\n  border: 8rem solid ${theme.brand.blue20};\n  opacity: 0.4;\n  border-radius: 50%;\n  position: absolute;\n  transform-style: preserve-3d;\n  top: 100%;\n  transform: translate(-50%, -50%);\n  @media screen and (min-width: 768px) {\n    display: block;\n  }\n`\n\nconst CirclesContainerRight = styled.div`\n  position: absolute;\n  width: 20%;\n  height: 20%;\n  top: 30%;\n  left: 43%;\n  transform-style: preserve-3d;\n  animation: floatF 8s ease infinite 3s;\n  @media (min-width: 768px) {\n    top: 50%;\n  }\n  @media (min-width: 1024px) {\n    width: 20%;\n    height: 14%;\n    top: auto;\n    bottom: 37%;\n    left: 40%;\n  }\n  @media (min-width: 1200px) {\n    bottom: 45%;\n    left: 40%;\n  }\n`\n\ninterface CircleSmallInterface {\n  width: number\n  border: number\n  top: number\n  left: number\n  right: number\n  isVisible: boolean\n  delay: number\n}\n\nconst CircleSmall = styled.div<CircleSmallInterface>`\n  width: ${(props) => (props.width ? props.width : 30)}px;\n  height: ${(props) => (props.width ? props.width : 30)}px;\n  border: ${(props) => (props.border ? props.border : 8)}px solid\n    ${theme.brand.blue};\n  border-radius: 50%;\n  position: absolute;\n  transform: scale(0) perspective(200px) translateZ(50px);\n  transition: all ease;\n  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  top: ${(props) => (props.top ? props.top : 30)}%;\n  left: ${(props) => (props.left ? props.left : 30)}%;\n  animation: ${(props) =>\n    props.isVisible\n      ? ` floatCirclesRightMob ${\n          props.delay + 2\n        }s cubic-bezier(0, 0.55, 0.45, 1) infinite ${props.delay + 3}s`\n      : 'none'};\n  z-index: 3;\n  @media (min-width: 768px) {\n    top: 40%;\n  }\n  @media (min-width: 1024px) {\n    animation: ${(props) =>\n      props.isVisible\n        ? ` floatCirclesRight ${\n            props.delay + 4\n          }s cubic-bezier(0, 0.55, 0.45, 1) infinite ${props.delay + 3}s`\n        : 'none'};\n    transition: all cubic-bezier(0, 0.55, 0.45, 1);\n  }\n`\n","import React, { useState, FunctionComponent } from 'react'\nimport styled from 'styled-components'\nimport { Heading, TopHeading } from '../SolutionsCards/SolutionsCards'\nimport MainGrid from '../styling/MainGrid'\nimport theme from '../styling/theme'\n// import bob from '../../images/bob-animation/bob-character.png'\n// import tablet from '../../images/bob-animation/bob-tablet.png'\n// import music from '../../images/bob-animation/bob-music.png'\n// import redlines from '../../images/bob-animation/bob-redlines.png'\n\nimport InlineLink from '../shared/InlineLink'\nimport circleMob from '../../images/circle_m.svg'\nimport circleDesk from '../../images/circle_d.svg'\nimport Button from '../shared/Button/Button'\nimport { scrollTo } from '../../util/functions'\nimport { graphql,useStaticQuery } from 'gatsby'\n\ninterface DataProp {\n  topHeading?: string\n  heading: string\n  body: string\n}\n\ninterface Card {\n  title?: string\n  body?: string\n}\n\ninterface CoursesProps {\n  data: DataProp\n  cardsContent: Array<Card>\n  isVisible?: boolean\n  background?: string\n}\n\nconst Courses: FunctionComponent<CoursesProps> = ({\n  data,\n  cardsContent,\n  isVisible,\n  background,\n}) => {\n\n  const imagesCollection = useStaticQuery(graphql`\n    query img2{\n      bob: allFile(filter: {childrenImageSharp: {elemMatch: {fluid: {originalName: {eq: \"bob-character.png\"}}}}}) {\n        edges {\n          node {\n            id\n            childImageSharp {\n              fluid(maxWidth: 880,toFormat: WEBP) {\n                ...GatsbyImageSharpFluid\n              }\n            }\n          }\n        }\n      },\n      bobTable: allFile(filter: {childrenImageSharp: {elemMatch: {fluid: {originalName: {eq: \"bob-tablet.png\"}}}}}) {\n        edges {\n          node {\n            id\n            childImageSharp {\n              fluid(maxWidth: 880,toFormat: WEBP) {\n                ...GatsbyImageSharpFluid\n              }\n            }\n          }\n        }\n      },\n      bobMusic: allFile(filter: {childrenImageSharp: {elemMatch: {fluid: {originalName: {eq: \"bob-music.png\"}}}}}) {\n        edges {\n          node {\n            id\n            childImageSharp {\n              fluid(maxWidth: 880,toFormat: WEBP) {\n                ...GatsbyImageSharpFluid\n              }\n            }\n          }\n        }\n      },\n      bobRedLines: allFile(filter: {childrenImageSharp: {elemMatch: {fluid: {originalName: {eq: \"bob-redlines.png\"}}}}}) {\n        edges {\n          node {\n            id\n            childImageSharp {\n              fluid(maxWidth: 880,toFormat: WEBP) {\n                ...GatsbyImageSharpFluid\n              }\n            }\n          }\n        }\n      }\n    }\n  `)\n  \n  const bob = imagesCollection.bob.edges[0].node.childImageSharp.fluid.src\n  const tablet = imagesCollection.bobTable.edges[0].node.childImageSharp.fluid.src\n  const music = imagesCollection.bobMusic.edges[0].node.childImageSharp.fluid.src\n  const redlines = imagesCollection.bobRedLines.edges[0].node.childImageSharp.fluid.src\n\n\n  const [showAllCards, toggleCards] = useState(false)\n  const [cardsToShow, setCardsToShow] = useState(1)\n\n  function handleShowMore() {\n       if (showAllCards) {\n      setCardsToShow(cardsToShow -2)\n       }\n      else{\n        setCardsToShow(cardsToShow+2)\n        } \n    toggleCards(!showAllCards)\n  }\n  return (\n    <Container background={background}>\n      <MainGrid>\n        <Inner>\n          <BobWrapper>\n            {data && data.topHeading && (\n              <TopHeading className=\"small-p\">{data.topHeading}</TopHeading>\n            )}\n            {data && data.heading && <Heading>{data.heading}</Heading>}\n\n            <ImageWrapper>\n              <Tablet src={tablet} alt=\"Tablet\" />\n              <Mask>\n                <Bob src={bob} alt=\"Bob character\" isVisible={isVisible} />\n                <Music src={music} alt=\"Music notes\" isVisible={isVisible} />\n                <RedLines\n                  src={redlines}\n                  alt=\"Red lines around Bob character\"\n                  isVisible={isVisible}\n                />\n              </Mask>\n            </ImageWrapper>\n\n            {data && data.body && <BobExplanation>{data.body}</BobExplanation>}\n          </BobWrapper>\n          <CardsWrapperMobile id={'courses-container'}>\n            {cardsContent &&\n              cardsContent.slice(0,cardsToShow).map((card, key) => {\n                // if (key < 1 || showAllCards) {\n                  return (\n                    <Card key={key}>\n                      <Circle src={circleMob} alt=\"Circle\" />\n                      <CircleDesktop src={circleDesk} alt=\"Circle\" />\n                      <CardCol>\n                        {card.title && <CardTitle>{card.title}</CardTitle>}\n                        {card.body && <CardBody>{card.body}</CardBody>}\n                      </CardCol>\n                    </Card>\n                  )\n                // }\n              })}\n            <BtnContainer onClick={() => handleShowMore()}>\n              <Button >\n                {!showAllCards ? 'Show more' : 'Show less'}\n              </Button>\n            </BtnContainer>\n            <InlineLink\n              href={'/courses'}\n              text={'Learn more about our courses'}\n              margintop={'25px'}\n              margintopDesktop={'38px'}\n            />\n          </CardsWrapperMobile>\n          <CardsWrapper id={'courses-container'}>\n            {cardsContent &&\n              cardsContent.map((card, key) => {\n                return (\n                  <Card key={key}>\n                    <Circle src={circleMob} alt=\"Circle\" />\n                    <CircleDesktop src={circleDesk} alt=\"Circle\" />\n                    <CardCol>\n                      {card.title && <CardTitle>{card.title}</CardTitle>}\n                      {card.body && <CardBody>{card.body}</CardBody>}\n                    </CardCol>\n                  </Card>\n                )\n              })}\n            <InlineLink\n              href={'/courses'}\n              text={'Learn more about our courses'}\n              margintop={'25px'}\n              margintopDesktop={'38px'}\n            />\n          </CardsWrapper>\n        </Inner>\n      </MainGrid>\n    </Container>\n  )\n}\n\nexport default Courses\ninterface IContainer {\n  background?: string\n}\nconst Container = styled.section<IContainer>`\n  background: ${(props) =>\n    props.background ? props.background : theme.background.courses};\n  padding: 50px 0;\n  @media (min-width: 768px) {\n    padding: 10rem 0;\n    border-bottom: 1px solid ${theme.grey.keylineDark};\n  }\n`\nconst Inner = styled.div`\n  display: flex;\n  flex-direction: column;\n  @media (min-width: 768px) {\n    flex-direction: row;\n    align-items: center;\n  }\n`\n\nconst BobWrapper = styled.div`\n  width: 100%;\n  @media (min-width: 768px) {\n    width: 40%;\n    margin-right: 10rem;\n  }\n`\n\nconst ImageWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin-top: 6px;\n  padding: 32px 0 20px;\n  position: relative;\n`\nconst Mask = styled.div`\n  max-width: 40rem;\n  position: relative;\n  z-index: 2;\n  overflow: hidden;\n  clip-path: polygon(100% 0, 100% 75%, 30% 99%, 0 49%, 0 0);\n`\ninterface BobProps {\n  isVisible?: boolean\n}\nconst Bob = styled.img<BobProps>`\n  max-width: 30rem;\n  position: relative;\n  left: 20%;\n  z-index: 2;\n  transform: translateY(200px);\n  transition: transform 2s ease;\n  animation: ${(props) =>\n    props.isVisible\n      ? 'animateBob 1.5s forwards ease'\n      : 'animateBobReverse 1.5s forwards ease'};\n`\nconst Music = styled.img<BobProps>`\n  position: absolute;\n  left: 20%;\n  width: 100%;\n  max-width: 30rem;\n  transform: scale(0);\n  animation: ${(props) =>\n    props.isVisible ? 'animateBobLines 1.2s forwards ease 1.3s' : 'none'};\n`\nconst RedLines = styled(Music)`\n  transform: scale(0);\n  animation: ${(props) =>\n    props.isVisible ? 'animateBobLines 1.2s forwards ease 2.4s' : 'none'};\n  transform-origin: center center;\n`\n\nconst Tablet = styled.img`\n  max-width: 40rem;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n`\n\nconst BobExplanation = styled.p`\n  font-weight: 300;\n  margin-top: 40px;\n`\n\nconst CardsWrapper = styled.div`\n  width: 100%;\n  margin-top: 25px;\n  display: none;\n  @media (min-width: 768px) {\n    width: 55%;\n  }\n  @media (min-width: 768px) {\n    width: 60%;\n    display: block;\n  }\n`\nconst CardsWrapperMobile = styled.div`\n  display: block;\n  margin-top: 25px;\n  @media (min-width: 768px) {\n    display: none;\n  }\n`\nconst Card = styled.div`\n  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);\n  background: white;\n  padding: 27px 28px 32px;\n  margin-bottom: 10px;\n  display: flex;\n  flex-direction: column;\n  border-radius: 4px;\n  border: 1px solid ${theme.grey.keylineDark};\n\n  &:last-of-type {\n    margin-bottom: 35px;\n  }\n  @media (min-width: 768px) {\n    flex-direction: row;\n    padding: 32px 52px 32px 37px;\n  }\n`\nconst CardCol = styled.div`\n  @media (min-width: 768px) {\n    margin-left: 26px;\n  }\n`\n\nconst Circle = styled.img`\n  width: 20px;\n  height: 20px;\n  margin-bottom: 12px;\n\n  @media (min-width: 768px) {\n    display: none;\n  }\n`\nconst CircleDesktop = styled.img`\n  display: none;\n  @media (min-width: 768px) {\n    display: block;\n    width: 60px;\n    height: 60px;\n  }\n`\nconst CardTitle = styled.h6`\n  color: ${theme.grey.inputHover};\n  margin-bottom: 5px;\n`\n\nconst CardBody = styled.p`\n  color: ${theme.grey.inputHover};\n`\n\nconst BtnContainer = styled.div`\n  margin-top: 20px;\n`\n","import React, { FunctionComponent } from 'react'\nimport styled from 'styled-components'\nimport theme from '../styling/theme'\nimport circle from '../../images/risk/90-chart.svg'\nimport Button from '../shared/Button/Button'\nimport cross from '../../images/risk/doc-cross.svg'\nimport profile from '../../images/risk/profile.png'\nimport questionMark from '../../images/risk/question.svg'\nimport blueBorder from '../../images/spinner.svg'\nimport { appendUrlPartnerTracking } from '../../util/url'\n\nconst data = {\n  circleSubtitle: 'of breaches start with an employee mistake',\n  percent: '90',\n\n  btnTitle1: 'Get started',\n  btnUrl1: '/pricing',\n  btnUrl2: '/get-in-touch',\n  btnTitle2: 'Get in touch',\n}\n\nconst cardsContent = [\n  { text: 'Phishing attack' },\n  { text: 'Malware attack' },\n  { text: 'Ransomware' },\n  { text: 'Trojan horse' },\n  { text: 'Malware' },\n  { text: 'Spear phishing' },\n]\n\nconst baseContent = {\n  imgSrc: profile,\n  imgAlt: 'Profile image',\n}\n\ninterface RiskProps {\n  circleColTitle: string\n  circleColBody: string\n  cyberBreachCard1: string\n  cyberBreachCard2: string\n}\nconst Risk: FunctionComponent<RiskProps> = ({\n  circleColTitle,\n  circleColBody,\n  cyberBreachCard1,\n  cyberBreachCard2,\n}) => {\n  return (\n    <Outer>\n      <Container>\n        <Col>\n          <Inner align={'flex-start'}>\n            <CircleContainer>\n              <Percent>{data.percent}%</Percent>\n              <Subtitle>{data.circleSubtitle}</Subtitle>\n            </CircleContainer>\n            <CircleColText>\n              <CircleColTitle>{circleColTitle}</CircleColTitle>\n              <CircleColBody>{circleColBody}</CircleColBody>\n            </CircleColText>\n            <ButtonContainer>\n              <Button href={appendUrlPartnerTracking(data.btnUrl1)}>\n                {data.btnTitle1}\n              </Button>\n              {data.btnUrl2 && (\n                <Button href={appendUrlPartnerTracking(data.btnUrl2)} secondary>\n                  {data.btnTitle2}\n                </Button>\n              )}\n            </ButtonContainer>\n          </Inner>\n        </Col>\n        <Col>\n          <Inner align={'flex-end'}>\n            <Input>\n              {cardsContent.map((item, key) => {\n                return (\n                  <CardInput delay={key * 2} key={key}>\n                    <QuestionMark src={questionMark} alt=\"Question Mark\" />\n                    <LinesContainer>\n                      <LineInput />\n                      <LineInput />\n                      <LineInput />\n                      <HalfLineInput />\n                    </LinesContainer>\n                  </CardInput>\n                )\n              })}\n            </Input>\n            <Base>\n              <ProfileWrapper>\n                <Profile src={baseContent.imgSrc} alt={baseContent.imgAlt} />\n                <ProfileBlueBorder src={blueBorder} alt=\"blue border\" />\n              </ProfileWrapper>\n              {cyberBreachCard1 && <Title>{cyberBreachCard1}</Title>}\n              {cyberBreachCard2 && <Body>{cyberBreachCard2}</Body>}\n            </Base>\n            <Output>\n              {cardsContent.map((item, key) => {\n                return (\n                  <Card key={key} delay={key * 2} className=\"output-card\">\n                    <Cross src={cross} alt=\"Cross\" />\n                    <Text>{item.text}</Text>\n                    <LinesContainer>\n                      <Line />\n                      <Line />\n                      <Line />\n                      <HalfLine />\n                    </LinesContainer>\n                  </Card>\n                )\n              })}\n            </Output>\n          </Inner>\n        </Col>\n      </Container>\n    </Outer>\n  )\n}\n\nexport default Risk\n\nconst Outer = styled.section`\n  @media (min-width: 1024px) {\n    background: linear-gradient(\n      90deg,\n      ${theme.background.hpHeader} 0%,\n      ${theme.background.hpHeader} 50%,\n      rgba(255, 255, 255, 0) 51%,\n      rgba(255, 255, 255, 0) 100%\n    );\n  }\n`\n\nconst Container = styled.div`\n  // padding: 78px 0px 0px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  border-bottom: 1px solid ${theme.grey.keylineDark};\n  @media (min-width: 1024px) {\n    padding: 0;\n    border-bottom: none;\n    flex-direction: row;\n    align-items: center;\n    width: 100%;\n    max-width: 1400px;\n    margin: 0 auto;\n  }\n`\nconst Col = styled.div`\n  width: 100%;\n  text-align: center;\n\n  &:first-of-type {\n    background: ${theme.background.hpHeader};\n    padding: 78px 20px 0;\n  }\n  @media (min-width: 1024px) {\n    width: 50%;\n    padding: 0;\n  }\n`\ninterface InnerProps {\n  align: 'flex-end' | 'flex-start'\n}\n\nconst Inner = styled.div<InnerProps>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  @media (min-width: 1024px) {\n    width: 90%;\n    justify-content: ${(props) => props.align && props.align};\n    margin-left: ${(props) => (props.align === 'flex-end' ? 'auto' : '3rem')};\n  }\n  @media (min-width: 1200px) {\n    margin-left: ${(props) => (props.align === 'flex-end' ? 'auto' : '0')};\n  }\n`\n\nconst CircleContainer = styled.div`\n  position: relative;\n  background: url(${circle});\n  background-repeat: no-repeat;\n  width: 280px;\n  height: 280px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto 40px;\n  @media (min-width: 1024px) {\n    width: 310px;\n    height: 310px;\n    margin-bottom: 52px;\n  }\n`\nconst Percent = styled.span`\n  font-size: 80px;\n  font-weight: bold;\n  letter-spacing: -3px;\n  line-height: 97px;\n  text-align: center;\n  @media (min-width: 1024px) {\n    font-size: 90px;\n    line-height: 110px;\n  }\n`\n\nconst Subtitle = styled.p`\n  text-align: center;\n  width: 100%;\n  max-width: 65%;\n`\n\nconst CircleColText = styled.div`\n  width: 100%;\n  @media (min-width: 1024px) {\n    max-width: 400px;\n    margin: 0 auto;\n  }\n  @media (min-width: 1199px) {\n    max-width: 520px;\n  }\n`\n\nconst CircleColTitle = styled.h4`\n  margin-bottom: 12px;\n\n  @media (min-width: 1024px) {\n    margin-bottom: 24px;\n  }\n`\n\nconst CircleColBody = styled.p``\n\nconst ButtonContainer = styled.div`\n  & a:first-of-type {\n    margin-bottom: 20px;\n  }\n\n  & a {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  margin: 27px auto 65px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  @media (min-width: 1024px) {\n    max-width: 420px;\n    flex-direction: row;\n    justify-content: space-between;\n    margin: 37px auto 0;\n    & a:first-of-type {\n      margin-right: 20px;\n      margin-bottom: 0px;\n    }\n  }\n`\ninterface CardProps {\n  delay: number\n}\n\nconst Card = styled.div<CardProps>`\n  height: 148px;\n  width: 148px;\n  border: 1px solid ${theme.text.main};\n  border-radius: 4px;\n  background-color: white;\n  position: relative;\n  margin-bottom: 32px;\n  padding: 37px 20px 22px;\n  text-align: left;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  left: 50%;\n  transform: translate3D(-50%, -100%, 0);\n  justify-content: space-between;\n  animation: slideshow 12s linear infinite -${(props) => props.delay && props.delay}s;\n  transition: all 2s ease;\n  will-change: transform;\n  @keyframes slideshow {\n    0% {\n      transform: translate3D(-50%, -100%, 0);\n    }\n    100% {\n      transform: translate3D(-50%, 932px, 0);\n    }\n  }\n`\nconst CardInput = styled(Card)`\n  padding: 24px 20px 22px;\n  margin-bottom: 12px;\n`\n\nconst Cross = styled.img`\n  height: 40px;\n  width: 40px;\n  position: absolute;\n  top: -15px;\n  right: 10%;\n`\n\nconst QuestionMark = styled.img`\n  width: 39px;\n  height: 39px;\n`\n\nconst LinesContainer = styled.div``\n\nconst Line = styled.div`\n  width: 100%;\n  height: 6px;\n  background: ${theme.brand.blue};\n  margin-bottom: 4px;\n`\n\nconst HalfLine = styled(Line)`\n  width: 50%;\n  margin-bottom: 0px;\n`\nconst LineInput = styled(Line)`\n  background: #dadada;\n`\nconst HalfLineInput = styled(HalfLine)`\n  background: #dadada;\n`\n\nconst Text = styled.p`\n  font-size: 13px;\n  font-weight: bold;\n  letter-spacing: 0;\n  line-height: 16px;\n  color: ${theme.brand.blue};\n`\n\nconst Base = styled.div`\n  background-color: #ffffff;\n  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);\n  border-top: 6px solid ${theme.brand.blue};\n  padding: 47px 32px 58px;\n  width: 100%;\n  max-width: 305px;\n  position: relative;\n  z-index: 4;\n  @media (min-width: 1024px) {\n    padding: 33px 35px 41px;\n    max-width: 350px;\n  }\n  &::before {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: -12px;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    height: 8px;\n    width: 148px;\n    opacity: 0.3;\n    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000000 100%);\n  }\n`\nconst ProfileWrapper = styled.div`\n  position: relative;\n  width: 144px;\n  height: 144px;\n  margin: 0 auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 6px;\n`\n\nconst Profile = styled.div`\n  background: url(${profile});\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 130px;\n  height: 130px;\n`\nconst ProfileBlueBorder = styled.img`\n  position: absolute;\n  width: 144px;\n  height: 144px;\n  animation: animateBorder 1s linear infinite;\n`\n\nconst Title = styled.h2`\n  margin-bottom: 12px;\n`\n\nconst Body = styled.p`\n  font-size: 14px;\n  line-height: 22px;\n  color: ${theme.text.main};\n`\nconst Input = styled.div`\n  height: 333px;\n  width: 200px;\n  overflow: hidden;\n  z-index: 1;\n  position: relative;\n`\nconst Output = styled(Input)`\n  height: 370px;\n`\n","import React from 'react'\nimport { graphql } from 'gatsby'\nimport Layout from '../components/Layout'\nimport PromotionBanner from '../components/PromotionBanner'\nimport LogosGrid from '../components/LogosGrid'\nimport CarouselDrag from '../components/CarouselDrag'\nimport TrackVisibility from 'react-on-screen'\nimport HomepageHeader from '../components/Header/HomepageHeader'\nimport DotsAnimation from '../components/DotsAnimation/DotsAnimation'\nimport Empower from '../components/Empower/Empower'\nimport Courses from '../components/Courses/Courses'\nimport SolutionsCards from '../components/SolutionsCards/SolutionsCards'\nimport Risk from '../components/Risk/Risk'\n\nimport { LazyBlocksFactory } from '../components/LazyBlocksFactory/LazyBlocksFactory'\n\n\ninterface Props {\n  data: any\n  pageContext: any\n}\n\nconst Index = ({ data, pageContext }: Props) => {\n  const { wpPage } = data\n  const { allWpTestimonial } = data\n  const { home } = wpPage\n  const renderedBlocks = LazyBlocksFactory(wpPage.lazy_data, wpPage.title)\n\n  const { allWpOrganisationSticker } = data\n  console.log(process.env.GATSBY_AWS_BRANCH)\n  return (\n    <Layout>\n      <TrackVisibility partialVisibility offset={400}>\n        <HomepageHeader\n          title1={home.title1}\n          title2={home.title2}\n          subtitle={home.subsubtitletitle}\n          isVisible={true}\n          btnTitle1={home.ctaText1}\n          btnTitle2={home.ctaText2}\n          btnUrl1={home.ctaUrl1}\n          btnUrl2={home.ctaUrl2}\n        />\n      </TrackVisibility>\n\n      <SolutionsCards\n        topHeadingMarginBottom={'0'}\n        topHeading={home.titleCaption}\n        heading={home.postTitle}\n      />\n      <TrackVisibility partialVisibility offset={400}>\n        <DotsAnimation\n          withBobHeading={home.withBobTitle}\n          withBobText={home.withBobDescription1}\n          withBobBody={home.withBobDescription2}\n           withoutBobHeading={home.withoutBobTitle}\n          //withoutBobHeading=\"Cyber security with standard training courses\"\n          withoutBobText={home.withoutBobDescription1}\n          withoutBobBody={home.withoutBobDescription2}\n          isVisible={true}\n        />\n      </TrackVisibility>\n      <TrackVisibility partialVisibility>\n        <Empower\n          blueText={home.splashCard1}\n          whiteText={home.splashCard2}\n          isVisible={true}\n        />\n      </TrackVisibility>\n      <TrackVisibility partialVisibility offset={50}>\n        <Courses\n          data={{\n            topHeading: home.meetBobSubtitle,\n            heading: home.meetBobTitle,\n            body: home.meetBobSummary,\n          }}\n          cardsContent={[\n            {\n              title: home.meetBobCardTitle1,\n              body: home.meetBobCardDescription1,\n            },\n            {\n              title: home.meetBobCardTitle2,\n              body: home.meetBobCardDescription2,\n            },\n            {\n              title: home.meetBobCardTitle3,\n              body: home.meetBobCardDescription3,\n            },\n          ]}\n        />\n      </TrackVisibility>\n\n      <Risk\n        circleColTitle={home.cyberBreach1}\n        circleColBody={home.cyberBreach2}\n        cyberBreachCard1={home.cyberBreachCard1}\n        cyberBreachCard2={home.cyberBreachCard2}\n      />\n      <CarouselDrag\n        heading=\"What others are saying\"\n        data={allWpTestimonial.nodes}\n        id=\"carousel-drag-container\"\n      />\n      <TrackVisibility partialVisibility>\n        <LogosGrid brandsCaptions={home.brandsCaptions} images={allWpOrganisationSticker} isVisible={true} /> \n      </TrackVisibility>\n      \n      {renderedBlocks.map((v) => v)}\n    </Layout>\n  )\n}\n\nexport default Index\n\nexport const pageQuery = graphql`\n  query MyQuery {\n    wpPage(title: { eq: \"Home\" }) {\n      id\n      title\n      lazy_data\n      home {\n        brandsCaptions\n        ctaText1\n        ctaText2\n        ctaUrl1\n        ctaUrl2\n        cyberBreach1\n        cyberBreach2\n        cyberBreachCard1\n        cyberBreachCard2\n        meetBobCardDescription1\n        meetBobCardDescription2\n        meetBobCardDescription3\n        meetBobCardTitle1\n        meetBobCardTitle2\n        meetBobCardTitle3\n        meetBobSubtitle\n        meetBobTitle\n        meetBobSummary\n        postTitle\n        splashCard1\n        splashCard2\n        subsubtitletitle\n        title1\n        title2\n        titleCaption\n        withBobDescription1\n        withBobDescription2\n        withBobTitle\n        withoutBobDescription1\n        withoutBobDescription2\n        withoutBobTitle\n\n      }\n    }\n    allWpOrganisationSticker {\n      nodes {\n        organisational_stickers {\n          logo {\n            localFile {\n              childImageSharp {\n                fluid(maxWidth: 600, toFormat: WEBP) {\n                  ...GatsbyImageSharpFluid\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n \n    allWpTestimonial {\n      nodes {\n        title\n        slug\n        acfTestimonial {\n          description\n          initials\n          author\n          vertical\n          logo {\n            localFile {\n              childImageSharp {\n                fluid(maxWidth: 1080, toFormat: WEBP) {\n                  ...GatsbyImageSharpFluid\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`\n","module.exports = __webpack_public_path__ + \"static/profile-f119f95dc9dbc694a57e1ae2e1580dc1.png\";","module.exports = \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMDkgMzA5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDkgMzA5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6IzAwQTNDNzt9Cgkuc3Qxe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6IzFEMjUzQzt9Cjwvc3R5bGU+CjxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgo8cGF0aCBpZD0iU2hhcGUiIGNsYXNzPSJzdDAiIGQ9Ik0xNTUuMiwwQzkzLjIsMCwzOS43LDM2LjIsMTQuOCw4OC41bDUuNywzLjhjNy4xLTE1LjMsMTctMjkuNCwyOS4zLTQxLjgKCUM3Ny45LDIyLjMsMTE1LjMsNi44LDE1NS4yLDYuN1YweiIvPgo8cGF0aCBpZD0iU2hhcGVfMV8iIGNsYXNzPSJzdDEiIGQ9Ik0xNTQuNSwwdjYuN2MwLjQsMCwwLjksMCwxLjMsMGM4MC4xLDAuNywxNDUuOCw2Ni40LDE0Ni41LDE0Ni41YzAuMywzOS43LTE0LjksNzcuMS00Mi44LDEwNS4zCgljLTI4LDI4LjItNjUuMiw0My43LTEwNC45LDQzLjdjLTAuNCwwLTAuOSwwLTEuMywwQzczLjEsMzAxLjYsNy40LDIzNS45LDYuOCwxNTUuOGMtMC4yLTIyLjMsNC41LTQzLjksMTMuNy02My41bC01LjYtMy44CgljLTkuNiwyMC40LTE1LDQzLjItMTQuOCw2Ny4zQzAuNywyMzkuNyw2OS4zLDMwOC4zLDE1My4yLDMwOWMwLjUsMCwwLjksMCwxLjMsMGM4NS44LDAsMTU1LjItNjkuOSwxNTQuNS0xNTUuOAoJQzMwOC4zLDY5LjMsMjM5LjcsMC43LDE1NS44LDBDMTU1LjQsMCwxNTUsMCwxNTQuNSwweiIvPgo8L3N2Zz4K\""],"sourceRoot":""}