{"version":3,"sources":["webpack:///./src/components/HomeInfographic.jsx"],"names":["_ref","name","styles","_ref2","_ref3","_ref4","_ref5","_ref6","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12","_ref13","_ref14","_ref15","HomeInfographic","___EmotionJSX","Container","css","mq","Row","Col","lg","href","target","rel","loading","src","arrowRight","alt","className","symptomsGraphic"],"mappings":"iNAO+D,IAAAA,EAAA,CAAAC,KAAA,UAAAC,OAAA,qBAAAC,EAAA,CAAAF,KAAA,UAAAC,OAAA,qFAAAE,EAAA,CAAAH,KAAA,UAAAC,OAAA,qFAAAG,EAAA,CAAAJ,KAAA,UAAAC,OAAA,qFAAAI,EAAA,CAAAL,KAAA,UAAAC,OAAA,mMAAAK,EAAA,CAAAN,KAAA,UAAAC,OAAA,2HAAAM,EAAA,CAAAP,KAAA,SAAAC,OAAA,mDAAAO,EAAA,CAAAR,KAAA,UAAAC,OAAA,6CAAAQ,EAAA,CAAAT,KAAA,UAAAC,OAAA,mDAAAS,EAAA,CAAAV,KAAA,SAAAC,OAAA,2FAAAU,EAAA,CAAAX,KAAA,UAAAC,OAAA,mBAAAW,EAAA,CAAAZ,KAAA,UAAAC,OAAA,wDAAAY,EAAA,CAAAb,KAAA,UAAAC,OAAA,mMAAAa,EAAA,CAAAd,KAAA,UAAAC,OAAA,2HAAAc,EAAA,CAAAf,KAAA,SAAAC,OAAA,mDA2ThDe,IA1TSA,IAEpBC,YAACC,IAAS,CACRC,IAAKA,YAAG,uGAYF,CAACC,IAAG,IAAG,8DAWbH,YAACI,IAAG,KACFJ,YAACK,IAAG,CACFC,GAAI,EACJJ,IAAKA,YAAG,iBAEF,CAACC,IAAG,IAAG,yBAKbH,YAAA,KAAGO,KAAK,SACNC,OAAO,QACPC,IAAI,uBAEJT,YAAA,MAAIE,IAAGpB,GAEA,8BAGPkB,YAAA,KACEE,IAAGjB,GAOJ,gIAC8He,YAAA,WAAK,MAEpIA,YAAA,KACEE,IAAGhB,GAOJ,4IAC0Ic,YAAA,WAAK,MAEhJA,YAAA,KACEE,IAAGf,GAOJ,iYAC+Xa,YAAA,WAAK,MAErYA,YAAA,OACEE,IAAKA,YAAG,gBAEM,CAACC,IAAG,IAAG,8BAIrBH,YAAA,KACEE,IAAGd,GAaC,cAENY,YAAA,OACEE,IAAGb,GAQHW,YAAA,OACEE,IAAGZ,EAKHoB,QAAQ,OAAOC,IAAKC,IAAYC,IAAI,yBAK9Cb,YAACK,IAAG,CACFC,GAAI,EACJJ,IAAKA,YAAG,KAGRF,YAAA,OAAKc,UAAU,YAAYZ,IAAGX,GA2B5BS,YAAA,OAAKc,UAAU,kBAAkBZ,IAAGV,GAyDlCQ,YAAA,OAAKc,UAAU,iBAAiBZ,IAAGT,GAYjCO,YAAA,MAAIE,IAAGR,GAAyB,0BAAuBM,YAAA,WAAM,wBAE7DA,YAAA,WACEE,IAAKA,YAAG,kCAGJ,CAACC,IAAG,IAAG,8EAQXH,YAAA,OACEU,QAAQ,OACRR,IAAKA,YAEL,CAACC,IAAG,IAAG,kJAWPU,IAAI,WACJF,IAAKI,MAEPf,YAAA,OACEE,IAAGP,GAMHK,YAAA,KAAGO,KAAK,SACNC,OAAO,SAGPR,YAAA,KACEE,IAAGN,GAaP,eAGAI,YAAA,OACEE,IAAGL,GAQHG,YAAA,OACEE,IAAGJ,EAKHY,QAAQ,OAAOC,IAAKC,IAAYC,IAAI","file":"02526696-26aa31efcd633d3f855e.js","sourcesContent":["import React from \"react\"\r\nimport { Container, Row, Col } from \"react-bootstrap\"\r\nimport { css } from \"@emotion/core\"\r\n\r\nimport { mq } from \"../utils/media-queries\"\r\n\r\nimport symptomsGraphic from \"../assets/images/symptoms.png\"\r\nimport arrowRight from '../assets/images/video-arrow-white.svg'\r\nconst HomeInfographic = () => {\r\n  return (\r\n    <Container\r\n      css={css`\r\n          h2 {\r\n            color: #69696a;\r\n            font-size: 30px;\r\n            font-weight: bold;\r\n            line-height: 34px;\r\n          }\r\n          a {\r\n            &:hover {\r\n              text-decoration: none;\r\n            }\r\n          }\r\n          ${[mq[2]]} {\r\n            margin-bottom: 80px;\r\n            h2 {\r\n              font-size: 20px;\r\n              line-height: 21px;\r\n            }\r\n          }\r\n          // margin-bottom: 150px;\r\n        `}\r\n    >\r\n\r\n      <Row>\r\n        <Col\r\n          lg={6}\r\n          css={css`\r\n              color: #646565;\r\n              ${[mq[2]]} {\r\n                text-align: center;\r\n              }\r\n            `}\r\n        >\r\n          <a href=\"/about\"\r\n            target=\"_self\"\r\n            rel=\"noopener noreferrer\"\r\n          >\r\n            <h2 css={css`\r\n                    padding-top: 60px;\r\n                `}>\r\n              HODGKIN LYMPHOMA TREATMENT\r\n            </h2>\r\n            <p\r\n              css={css`\r\n                  color: #646565;\r\n                  font-family: Arial;\r\n                  font-size: 18px;\r\n                  letter-spacing: 0;\r\n                  line-height: 24px;\r\n                `}\r\n            >\r\n              Hodgkin lymphoma is a cancer that starts in white blood cells called lymphocytes, which are part of the body's immune system.<sup>2</sup>\r\n            </p>\r\n            <p\r\n              css={css`\r\n                  color: #646565;\r\n                  font-family: Arial;\r\n                  font-size: 18px;\r\n                  letter-spacing: 0;\r\n                  line-height: 24px;\r\n                `}\r\n            >\r\n              Across all types, Hodgkin lymphoma has a 5-year relative survival rate of 89%. Treatment is dependent upon the stage of Hodgkin lymphoma.<sup>3</sup>\r\n            </p>\r\n            <p\r\n              css={css`\r\n                  color: #646565;\r\n                  font-family: Arial;\r\n                  font-size: 12px;\r\n                  letter-spacing: 0;\r\n                  line-height: 16px;\r\n                `}\r\n            >\r\n              5-year relative survival rate is the percentage of people with a type of cancer who are alive 5 years after treatment compared to the total US population. If the relative 5-year survival rate is 89% for all stages of Hodgkin lymphoma, that means patients diagnosed with Hodgkin lymphoma are 89% as likely as those without that cancer to still be alive 5 years after being diagnosed.<sup>3</sup>\r\n            </p>\r\n            <div\r\n              css={css`\r\n                          display: flex;\r\n                          ${[mq[2]]} {\r\n                            justify-content: center;\r\n                          }\r\n                        `}>\r\n              <p\r\n                css={css`\r\n                    color: #804095;\r\n                    margin-right: 10px;\r\n                    font-family: Arial;\r\n                    margin-top: 6px;\r\n                    margin-bottom: 90px;\r\n                    font-size: 16px;\r\n                    font-weight: bold;\r\n                    letter-spacing: 0;\r\n                    line-height: 22px;\r\n                    &:hover {\r\n                      border-bottom: 2px solid #804095;\r\n                    }\r\n                 `}>\r\n                LEARN MORE</p>\r\n              <div\r\n                css={css`\r\n                            background: linear-gradient(180deg, #7E3F97 0%, #AE58CF 100%);\r\n                            border-radius: 18px;\r\n                            height: 32px;\r\n                            width: 32px;\r\n                            text-align: center;\r\n                        `}\r\n              >\r\n                <img\r\n                  css={css`\r\n                            height: 15px;\r\n                            width: 11px;\r\n                            margin: 8px 8px 8px 10px;\r\n                         `}\r\n                  loading='lazy' src={arrowRight} alt='Learn More Arrow' />\r\n              </div>\r\n            </div>\r\n          </a>\r\n        </Col>\r\n        <Col\r\n          lg={6}\r\n          css={css`\r\n            `}\r\n        >\r\n          <div className=\"flip-card\" css={css`               \r\n                background-color: transparent;\r\n                width: 100%;\r\n                // height: 350px;\r\n                // perspective: 1000px;\r\n                // &:hover .flip-card-inner{\r\n                //   transform: rotateY(180deg);\r\n                // }\r\n                // .flip-card:hover .flip-card-inner {\r\n                //   transform: rotateY(180deg);\r\n                // }\r\n                }\r\n            `}>\r\n            {/* <p css={css`\r\n                  display: none;\r\n                  text-align: center;\r\n                  color: #01aef1;\r\n                  font-size: 18px;\r\n                  line-height: 21px;\r\n                  margin-bottom: 0;\r\n                  ${[mq[2]]} {\r\n                    display: block;\r\n                  }\r\n                `}\r\n            >\r\n              Click the card to learn more\r\n            </p> */}\r\n            <div className=\"flip-card-inner\" css={css`               \r\n              position: relative;\r\n              width: 100%;\r\n              // height: 100%;\r\n              text-align: center;\r\n              // transition: transform 0.8s;\r\n              // transform-style: preserve-3d;\r\n            `}>\r\n\r\n              {/* <div className=\"flip-card-front\" css={css`\r\n                position: absolute;\r\n                width: 100%;\r\n                height: 100%;\r\n                -webkit-backface-visibility: hidden; \r\n                backface-visibility: hidden;\r\n                display: flex;\r\n                background: linear-gradient(90deg,#7E3F97 56%,#AE58D0 91%);\r\n                margin-top: 40px;\r\n                h2 {\r\n                  color: #FFFFFF;\r\n                  font-family: Arial;\r\n                  font-size: 39px;\r\n                  margin-top: 95px;\r\n                  font-weight: 600;\r\n                  letter-spacing: 0;\r\n                  text-align: left;\r\n                  line-height: 40px;\r\n                }\r\n                @media only screen and (max-width: 1186px) {\r\n                  h2 {\r\n                    font-size: 30px;\r\n                  }\r\n                }\r\n                @media only screen and (max-width: 500px) {\r\n                  h2 {\r\n                    font-size: 25px;\r\n                  }\r\n                }\r\n            `}>\r\n\r\n                <img\r\n                  loading='lazy'\r\n                  css={css`\r\n                  margin: 35px 30px;\r\n                  width: 200px;\r\n                  ${[mq[2]]} {\r\n                    width: 200px;\r\n                  }\r\n                  @media only screen and (max-width: 500px) {\r\n                    margin: 10px;\r\n                  }\r\n                `}\r\n                  alt=\"symptoms\"\r\n                  src={patientGraphic}\r\n                />\r\n                <h2>WHAT ARE THE SYMPTOMS OF HODGKIN LYMPHOMA?</h2>\r\n              </div> */}\r\n              <div className=\"flip-card-back\" css={css`\r\n                // position: absolute;\r\n                width: 100%;\r\n                // height: 100%;\r\n                // -webkit-backface-visibility: hidden; \r\n                // backface-visibility: hidden;\r\n                background-color: #F0F0F1;\r\n                text-align: center;\r\n                margin-top: 40px;\r\n                padding-top: 30px;\r\n                // transform: rotateY(180deg);\r\n            `}>\r\n                <h2 css={css`padding: 0 1rem;`}>WHAT ARE SOME SYMPTOMS <br />OF HODGKIN LYMPHOMA?</h2>\r\n                {/* <p>SYMPTOMS INCLUDE</p> */}\r\n                <section\r\n                  css={css`\r\n                    display: block;\r\n                    padding-top: 10px;\r\n                    ${[mq[2]]} {\r\n                      display: flex;\r\n                      flex-direction: column;\r\n                      padding: 20px 0 0;\r\n                      align-items: center;\r\n                    }\r\n                  `}\r\n                >\r\n                  <img\r\n                    loading='lazy'\r\n                    css={css`\r\n                  \r\n                  ${[mq[2]]} {\r\n                    max-width: 100%;\r\n                  }\r\n                  @media only screen and (max-width: 1186px) {\r\n                    width: 375px;\r\n                  }\r\n                  @media only screen and (max-width: 500px) {\r\n                    width: 330px;\r\n                    margin-top: 10px;\r\n                  }\r\n                `}\r\n                    alt=\"symptoms\"\r\n                    src={symptomsGraphic}\r\n                  />\r\n                  <div\r\n                    css={css`\r\n                          display: flex;\r\n                          margin-top: 45px;\r\n                          justify-content: center;\r\n                        `}>\r\n\r\n                    <a href=\"/about\"\r\n                      target=\"_self\"\r\n                    // rel=\"noopener noreferrer\"\r\n                    >\r\n                      <p\r\n                        css={css`\r\n                    color: #804095;\r\n                    margin-right: 10px;\r\n                    font-family: Arial;\r\n                    margin-top: 6px;\r\n                    margin-bottom: 40px;\r\n                    font-size: 16px;\r\n                    font-weight: bold;\r\n                    letter-spacing: 0;\r\n                    line-height: 22px;\r\n                    &:hover {\r\n                      border-bottom: 2px solid #804095;\r\n                    }\r\n                 `}>\r\n                        LEARN MORE</p>\r\n                    </a>\r\n                    <div\r\n                      css={css`\r\n                            background: linear-gradient(180deg, #7E3F97 0%, #AE58CF 100%);\r\n                            border-radius: 18px;\r\n                            height: 32px;\r\n                            width: 32px;\r\n                            text-align: center;\r\n                        `}\r\n                    >\r\n                      <img\r\n                        css={css`\r\n                            height: 15px;\r\n                            width: 11px;\r\n                            margin: 8px 8px 8px 10px;\r\n                         `}\r\n                        loading='lazy' src={arrowRight} alt='Learn More Arrow' />\r\n                    </div>\r\n                  </div>\r\n                </section>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </Col>\r\n      </Row>\r\n    </Container>\r\n  )\r\n}\r\n\r\n// HomeInfographic.propTypes = {\r\n\r\n// }\r\n\r\nexport default HomeInfographic"],"sourceRoot":""}