.menu-toggle-mob,
.side-menu-mob {
  display: none;
}

.flex-all {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

@media only screen and (min-width: 1921px) {
  .end-section > .content {
    max-width: 75vw;
  }
}

@media only screen and (max-width: 1860px) {
  .offset-content-cp-1 {
    margin-left: -55px;
  }

  .offset-content-cp-2 {
    max-width: 280pt;
  }

  .cls042 {
    max-width: 860pt;
  }

  .end-section > .content {
    max-width: 950pt;
  }
}

@media only screen and (max-width: 1750px) {
  .cls042 {
    max-width: 840pt;
    margin-left: 50px;
  }

  .end-section > .content {
    max-width: 900pt;
  }
}

@media only screen and (max-width: 1700px) {
  .end-section > .content {
    max-width: 850pt;
    margin-right: 110pt;
  }
}

@media only screen and (max-width: 1650px) {
  .cls042 {
    margin-left: 130px;
    max-width: 830pt;
  }
}

@media only screen and (max-width: 1600px) {
  .side-content {
    padding-left: 250px;
  }

  .side-content > * {
    margin-left: -150px;
  }

  .cls032 {
    margin-left: 200px;
    max-width: 830pt;
  }

  .cls042 {
    max-width: 830pt;
    margin-left: 200px;
  }

  .cls055 {
    max-width: 830pt;
    margin-left: 200px;
  }

  .cls063 {
    margin-left: 200px;
    padding-right: 200px;
  }

  .end-section > .content {
    max-width: 810pt;
    margin-right: 100pt;
  }

  .cls069 {
    margin-left: 90px;
    padding-left: 120px;
  }

  .introduction {
    padding-bottom: 60px;
  }
}

@media only screen and (max-width: 1550px) {
  .cls004 {
    font-size: 100px;
    line-height: 115px;
  }

  .cls005 {
    font-size: 45px;
  }

  .cls008 {
    font-size: 33px;
    line-height: 56px;
  }

  .cls063 {
    max-width: 830pt;
    margin-left: 300px;
    padding-right: 180px;
  }

  .cls087 {
    margin-left: 150pt;
  }

  .cls042 > div.d-center-c {
    padding-left: 0px;
  }
}

@media only screen and (max-width: 1500px) {
  .side-content {
    padding-left: 350px;
  }

  .cls032 {
    max-width: 690pt;
    margin-left: 200px;
  }

  .cls033 {
    height: 70pt;
  }

  .cls042 {
    max-width: 780pt;
    margin-left: 250px;
  }

  .cls055 {
    max-width: 780pt;
    margin-left: 250px;
  }

  .cls063 {
    max-width: 730pt;
    margin-left: 320px;
  }

  .cls065 {
    margin-left: 150px;
  }

  .end-section > .content {
    max-width: 740pt;
  }

  .patient-story-3-offset {
    padding-left: 30px;
  }
}

@media only screen and (max-width: 1450px) {
  .cls009 {
    max-width: 525pt;
  }

  .cls012 {
    max-width: 525pt;
  }

  .side-content {
    padding-left: 430px;
  }

  .cls029 {
    max-width: 690pt;
  }

  .cls013 {
    font-size: 70pt;
    line-height: 85pt;
  }

  .cls017 {
    margin-bottom: 60px;
  }

  .content-padding {
    padding-left: 115px;
    padding-right: 115px;
  }

  .content-padding-new {
    padding-left: 115pt;
    padding-right: 115pt;
  }
}

@media only screen and (max-width: 1400px) {
  .cls042 {
    max-width: 660pt;
    margin-left: 260px;
  }

  .patient-story-3-offset {
    margin-left: 30px;
  }

  .cls055 {
    max-width: 660pt;
    margin-left: 260px;
  }

  .cls063 {
    margin-left: 320px;
    padding-right: 50px;
  }

  .end-section > .content {
    max-width: 700pt;
  }

  .side-menu {
    height: 516px;
    left: 50pt;
    padding-right: 58px;
  }

  .cls062 {
    margin-top: 55pt;
    max-width: 463pt;
    margin-left: 113px;
  }

  .patient-story-3-offset {
    padding-left: 0px;
  }
}

@media only screen and (max-width: 1350px) {
  .cls044 {
    margin-bottom: 10px;
  }

  .cls045 {
    margin-top: 32pt;
  }

  .cls050 {
    height: 82pt;
  }

  .end-section > .content {
    max-width: 640pt;
  }
}

@media only screen and (max-width: 1300) {
  .cls032 {
    max-width: 470pt;
    margin-left: 240px;
  }

  .cls055 {
    max-width: 570pt;
    margin-left: 240px;
  }

  .cls056 {
    height: 82pt;
  }

  .chapter-4-offset-content {
    margin-left: 63px;
    padding-right: 23pt;
  }

  .cls060 {
    margin-top: 60pt;
  }

  .cls062 {
    margin-left: 93px;
    max-width: 423pt;
  }

  .end-section > .content {
    max-width: 620pt;
  }
}

@media only screen and (max-width: 1250px) {
  .cls013 {
    font-size: 50pt;
    line-height: 55pt;
  }

  .infographic_1 {
    max-width: 340pt;
  }

  .cls029 {
    max-width: 620pt;
  }

  .cls022 {
    height: 80pt;
  }

  .cls042 {
    max-width: 630pt;
    margin-left: 270px;
  }

  .cls063 {
    margin-left: 340px;
  }

  .end-section > .content {
    max-width: 580pt;
    margin-right: 70pt;
  }

  .cls069 {
    margin-left: 80px;
    padding-left: 70px;
  }

  .cls073 {
    margin-bottom: 20px;
  }

  .cls082 {
    max-width: 470pt;
  }

  .cls032 {
    max-width: 610pt;
    margin-left: 240px;
  }

  .cls023 {
    margin-bottom: 10px;
  }

  .cls056 {
    height: 42pt;
  }

  .cls043 {
    max-width: 450pt;
  }

  .cls065 {
    min-height: 516px;
  }

  .cls074 {
    margin-bottom: 50px;
  }

  .cls037 > .cls038:nth-child(2) {
    padding-left: 30px;
  }
}

@media only screen and (max-width: 1200px) {
  .cls004 {
    font-size: 80px;
    line-height: 95px;
  }

  .cls005 {
    font-size: 35px;
  }

  .cls008 {
    font-size: 26px;
    line-height: 46px;
  }

  .cls022 {
    height: 60pt;
  }

  .cls023 {
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 1150px) {
  /* Reset previous values set at higher breakpoints */

  .offset-content-cp-2 {
    max-width: unset;
    margin-left: unset;
  }

  .offset-content-cp-1 {
    margin-left: unset;
  }

  .side-content > * {
    margin-left: 0;
  }

  .cls032 {
    margin-left: unset;
  }

  .introduction {
    padding-bottom: 0px;
  }

  .cls038,
  .cls030,
  .cls053 {
    max-width: unset;
  }

  .cls053 {
    margin-bottom: 30px;
  }

  .cls042,
  .patient-story-3-offset,
  .cls055,
  .cls062 {
    margin-left: unset;
    max-width: unset;
  }

  .cls063 {
    margin-left: 0;
  }

  .chapter-4-offset-content {
    margin-left: 0px;
  }

  .cls061 {
    padding-right: 0px;
  }

  .cls065 {
    margin-left: 0px;
  }

  .end-section > .content {
    width: 100%;
    margin-right: 0;
  }

  .content-padding-new {
    padding-left: var(--pad-val);
    padding-right: var(--pad-val);
  }

  .chapter-5-content {
    min-height: unset;
  }

  .cls069 {
    margin-left: 0px;
    padding-left: 0px;
  }

  .side-content {
    padding-left: 0px;
  }

  .cls037 > .cls038:nth-child(2) {
    padding-left: 0px;
  }

  /* Continuation... */

  .side-menu {
    display: none;
  }

  .menu-toggle-mob,
  .side-menu-mob {
    display: block;
  }

  body {
    --pad-val: 30px;
    --pad-sub: 15px; /* some section have horizontal borders; this padding is applied for the borders and the paragraphs overall are applied this+(--pad-val - this) */
  }

  /* #general ==================================================== */
  .section-background {
    height: 100vh;
  }

  /* section paragraph 1 */
  .cls009 {
    max-width: unset;
    font-size: 18px;
    line-height: 28px;
  }

  /* section paragraph 2 */
  .cls043 {
    max-width: unset;
    font-size: 18px;
    line-height: 28px;
  }

  .cls018 {
    font-size: 18px;
    line-height: normal;
  }

  /* ###chapter--------------------------------- */
  /* chapter main title*/
  .cls013 {
    font-size: 47px;
    line-height: 80px;
    word-break: break-word;
  }

  /* chapter secondary title */
  .cls014 {
    font-size: 40px;
    line-height: normal;
    margin-top: 16px;
  }

  /* chapter elements */
  .cls015 .separator {
    margin-bottom: 54px;
  }

  /* chapter pages padding */
  .chapter-5.content-padding,
  .chapter-4.content-padding,
  .chapter-3.content-padding,
  .chapter-2.content-padding,
  .chapter-1.content-padding {
    padding-left: 0;
    padding-right: 0;
  }

  .footer .cls071,
  .cls068, /* end section author first quote */
  .cls019, /* chapter 5 quote */
  .cls058, /* chapter 2 paragraph */
  /* inner padding for paragraph */
  .chapter-3-content .cls052,
  .chapter-3-content .cls051,
  .chapter-5.content-padding .center.d-center.cls016,
  .chapter-4.content-padding .center.d-center.cls016,
  .chapter-3.content-padding .center.d-center.cls016,
  .chapter-2.content-padding .center.d-center.cls016,
  .chapter-1.content-padding .center.d-center.cls016 {
    padding-left: var(--pad-sub);
    padding-right: var(--pad-sub);
  }

  .end-section-content {
    padding-top: 57px;
    padding-bottom: 65px;
  }

  /* regulate the BOTTOM space below a top-nav */
  .introduction,
  .chapter-5-content,
  .chapter-4-content,
  .chapter-3-content,
  .chapter-2-content,
  .chapter-1-content {
    padding-bottom: 45px;
  }

  /* regulate the TOP space below a top-nav */
  .introduction,
  .chapter-5-content,
  .chapter-4-content,
  .chapter-3-content,
  .chapter-2-content,
  #introduction.introduction.d-center,
  .chapter-1-content .content.d-center-c {
    align-items: flex-start;
    padding-top: 0px;
  }

  /* paragraphs separated by border: */
  .chapter-5-content .cls043,
  .chapter-4-content .cls043,
  .chapter-3-content .cls043,
  .cls029, /* story chapter 4 */
  .chapter-1-content .cls009 {
    padding: 0 0;
  }

  .cls062, .cls063 {
    padding: 0 var(--pad-sub);
  }

  /* regulate the padding for a section with horizontal borders */
  .chapter-5-content .content.d-center-c,
  .chapter-4-content .content.d-center-c,
  .chapter-3-content .content.d-center-c,
  .chapter-1-content .content.d-center-c {
    padding-left: var(--pad-val);
    padding-right: var(--pad-val);
  }

  .chapter-5-content .content.cls065 {
    padding-left:var(--pad-val);
    padding-right:var(--pad-val);
  }

  video {
    display: none;
  }

  /*--------------------------------- */

  /* quote variant 2 */
  .cls045 {
    font-size: 24px;
    line-height: 40px;
    font-weight: normal;
  }

  /* quote author */
  .cls068 {
    font-size: 20px;
    line-height: normal;
  }

  /* underline 'Learn more at {n}' */
  .cls047 {
    font-size: 12px;
    line-height: normal;
  }

  /* ##STORY */
  /* 'story' suffix-ed tags */

  /* inner padding for contents */
  .cls029 {
    width: 100%;
  }

  .cls029 .container,
  .cls029 > .container:first-child img {
    width: 100%;
  }

  .cls029 .container {
    padding-bottom: 32px;
  }

  /* `${string} STORY` */
  .cls025 {
    font-size: 12px;
    line-height: normal;
    margin-bottom: 20px;
  }

  /* some of the story titles */
  .cls036,
  .cls026 {
    font-size: 30px;
    line-height: 38px;
    margin-bottom: 20px;
  }

  /* `VIEW PART ${n}` text */
  .cls027 {
    font-size: 18px;
    line-height: normal;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* the container below the image */
  .cls030 {
    margin-left: 0;
  }

  /* the arrow img  */
  .cls028 {
    margin-left: 35px;
  }

  /* story modal */
  .patient-story {
    top: 0 !important;
    position: fixed;
  }

  .patient-story > .d-center {
    display: flex;
    width: 100vw;
    flex-direction: column;
  }

  .patient-story > .d-center > .sticky-back {
    margin: 0;
    width: 100vw;
    height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .patient-story > .d-center > .custom-section-content {
    max-width: 100%;
    width: 100vw;
    height: calc(100vh - 68px);
    overflow-y: hidden;
  }

  .patient-story .sticky-back .cls085 {
    font-size: 18px;
    line-height: normal;
    justify-content: flex-start;
    padding-left: 30px;
  }

  .patient-story .custom-section-content [scroll-step] {
    background-position: left top;
    background-size: auto 100vh;
  }

  .patient-story .custom-section-content [scroll-step]:first-child {
    padding-top: 135px;
    padding-left: 61px;
    padding-right: 30px;
  }

  .patient-story .custom-section-content [scroll-step] > .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .patient-story .custom-section-content [scroll-step] > .content img {
    max-width: 100%;
  }

  .story-title-left {
    margin-bottom: 58px;
    margin-left: 0;
    text-align: center;
  }

  .patient-story .custom-section-content [scroll-step] .cls086 {
    font-size: 34px;
    line-height: 44px;
  }

  .patient-story
    .custom-section-content
    [scroll-step]
    .content.d-center.cls087 {
    padding: 0;
    margin: 0;
  }

  .patient-story .custom-section-content section {
    padding-top: 0;
    padding-left: var(--pad-val);
    padding-right: var(--pad-val);
  }

  .cls087 {
    margin-left: 0;
  }

  .cls088 {
    margin-top: 30pt;
  }

  .patient-story .custom-section-content [scroll-step]:last-child .content {
    align-items: center;
  }

  /* ###END STORY */

  .content-padding {
    padding-left: var(--pad-val);
    padding-right: var(--pad-val);
  }

  .side-menu-mob {
    /* display: none; */
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
    border-right: 1px solid transparent;
    height: 100%;
    flex-wrap: nowrap;
  }

  .side-menu-mob [menu-content-wrapper] > a:first-child {
    padding-top: 40px;
  }

  .menu-toggle-mob {
    font-family: Gotham;
    display: initial;
    font-size: 14px;
    line-height: 18px;
    display: flex;
    align-items: center;

    color: #3e3e40;

    height: 60px;
    width: 100%;
    overflow: hidden;
    position: relative;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  /* default inactive */
  .side-menu-mob [menu-content-wrapper] {
    max-height: 0px;
    overflow: hidden;
  }

  /* active toggle */
  .side-menu-mob.active [menu-content-wrapper] {
    max-height: 1500px;
    min-height: calc(100vh - 115px); /* 60 (TOGGLE) + 55 (PADDING) */
    /* Set position absolute */
    position: absolute;
    width: 100vw;
    left: 0px;
    top: 60px;
    height: 100vh;
    z-index: 101;
    overflow-y: auto;
    background: white;
    flex-wrap: nowrap;
  }

  .side-menu-mob.active [arrow] {
    transform: scaleY(-1);
  }

  .side-menu-mob .d-center-c > a:last-child {
    padding-bottom: 30px;
  }

  .side-menu-mob .d-center-c {
    max-width: unset;
    margin-bottom: 0;
    flex-direction: column;
    height: auto;
    justify-content: unset;
  }

  .inner-toggle {
    position: relative;
    height: 100%;

    /* width section ignores padding */
    width: calc(100% + calc(var(--pad-val) * 2));
    left: calc(var(--pad-val) * -1);

    width: 100%;
    left: 0;

    background-color: #f4f4f4;
    border: 1px solid #c6c6c6;
    border-bottom: 2px solid #c6c6c6;
  }

  .menu-toggle-mob span {
    padding-right: 20px;
  }

  .menu-toggle-mob img {
    padding-left: 20px;
  }

  .side-menu-mob p {
    font-size: 18px;
  }

  .side-menu-mob a {
    max-width: unset;
    margin-bottom: 40px;
  }

  .side-menu-mob > .d-center-c {
    width: 100%;
  }

  .d-center,
  .d-center-c {
    flex-wrap: wrap;
  }

  .d-center .w50,
  .d-center-c .w50 {
    width: 100%;
  }

  /* top share buttons */
  .top.content-padding.right-top {
    padding: 15px 15px 88px 15px;
  }

  img {
    max-width: calc(100vw - 30px);
  }

  /* chapter with image  */
  .cls016 {
    justify-content: flex-start;
  }

  /* a somewhat bigger 'spacing element' #2 */
  .cls022 {
    height: 115px;
  }

  /* 'spacing element' #3 */
  .cls035 {
    height: 40px;
  }

  /* 'spacing element' #4 */
  .cls046 {
    height: 40px;
  }

  /* 'spacing element' #5 */
  .cls050 {
    height: 60px;
  }

  /* 'spacing element' #6 */
  .cls056 {
    height: 105px;
  }

  /* 'spacing element' #7 */
  .cls057 {
    height: 120px;
  }

  /* 'spacing element' #8 */
  .cls033 {
    height: 0px;
  }
  /* TEMPORARY ====================================================*/
  .chapter-3 {
    /* display: none; */
  }
  .chapter-4-content {
    /* display: none; */
  }
  [id="preload"] {
    /* display: none; */
  }
  [alt="chapter-3-artwork.png"] {
    /* display: none; */
  }

  [class="chapter-2"] [class="chapter-1-content"],
  [classs="chapter-2"] {
    /* overflow: hidden; */
  }

  [class="footer"] {
    /* overflow: hidden; */
  }

  body > section:nth-child(1) > section:nth-child(1) {
    /* display: none; */
  }

  body > section:nth-child(1) > section:nth-child(2) {
    /* display: none; */
  }

  body > section:nth-child(1) > section:nth-child(3) {
    /* display: none; */
  }

  body > section:nth-child(2) {
    /* display: none; */
  }
  body > section:nth-child(3) {
    /* display: none; */
  }
  body > section:nth-child(4) {
    /* display: none; */
  }
  body > section:nth-child(5) {
    /* display: none; */
  }
  body > section:nth-child(6) {
    /* display: none; */
  }
  body > section:nth-child(7) {
    /* display: none; */
  }
  body > section:nth-child(8) {
    /* display: none; */
  }
  body > section:nth-child(10) {
    /* display: none; */
  }
  body > section:nth-child(11) {
    /* display: none; */
  }
  body > section:nth-child(12) {
    /* display: none; */
  }
  body > section:nth-child(13) {
    /* display: none; */
  }
  body > section:nth-child(14) {
    /* display: none; */
  }
  body > section:nth-child(15) {
    /* display: none; */
  }
  .chapter-4.content-padding {
    /* display: none; */
  }

  body > div {
    /* display: none; */
  }

  body {
    overflow-x: hidden;
  }

  /* #top_panel_share_buttons ================================================================= */
  .top.content-padding {
    flex-wrap: wrap;
  }
  .content .top.rsp001 {
    padding-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 270px;
  }

  .content .top.rsp001 .icon-arrow-left {
    display: none;
  }

  .top.rsp001 > .container:first-child a {
    margin-left: 0px;
    font-size: 12px;
    max-width: calc(100vw - 225px);
  }

  .top.rsp001 > .container:nth-child(2) p:first-child {
    /* 'Share:' */
    font-size: 12px;
  }

  /* #first-section */
  /* scroll-step-1 */
  section.hero .hero-1.with-background .separator {
    margin-bottom: 54px;
  }

  /* section.hero - quotes scroll 2 & scroll 3 */
  .cls008 {
    font-size: 33px;
    line-height: 42px;
    max-width: 300px;
  }

  section.hero .full-content {
    display: flex;
    place-content: normal;
    padding-top: 129px;
  }
  section.hero .full-content .center.d-center {
    justify-content: flex-start;
  }

  /* paragraph scroll inner section - cancel the effect on parent -> apply the same effect on child*/
  [ph-scroll] {
    padding-top: 0;
    position: relative;
    top: -129px;
  }
  [ph-scroll] [content-target] {
    padding-top: 129px;
  }


  /* presentation content */
  .hero-1 {
    background-image: url("../img/hero-1-placeholder-mob.jpg");
    background-position-x: left;
  }
  .cls004 {
    font-size: 50px;
    line-height: 53px;
  }

  .cls006 {
    font-size: 20px;
  }

  .cls005 {
    font-size: 36px;
    text-align: center;
    margin-top: 20px;
  }

  /* #chapter-1 ==================================================== */

  #introduction {
    min-height: 100vh;
    position: relative;
  }

  .introduction {
    position: unset;
  }

  .cls012 {
    max-width: unset;
    font-size: 24px;
    line-height: 34px;
  }

  .scroll-info.d-center-c p {
    font-size: 12px;
  }

  /* lower the dotted line */
  #introduction .scroll-info.d-center-c img {
    object-fit: cover;
    height: 41px;
    width: 2px;
    object-position: top;
  }

  .introduction {
    /* min-height: 100vh; */
    height: auto;
  }

  .introduction .scroll-info {
    display: none;
  }

  /* ##chapter-1 */
  .chapter-1 .cls016 img {
    display: block;
    width: 317px;
    max-width: 100%;

    /* avoid padding right */
    position: relative;
    right: -(var(--pad-val));
  }

  .chapter-1 {
    height: auto;
    min-height: 100vh;
  }

  /* ###chapter-1-content */
  .chapter-1-content {
    padding-top: 0;
    padding-bottom: 45px;
  }

  .chapter-1-content .separator {
    padding: 0 35px;
  }

  /* TODO: add custom class*/
  .chapter-1-content .content.d-center-c > .d-center {
  }

  .chapter-1-content .cls098 {
    font-size: 12px;
    line-height: normal;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
    text-align: center;
  }

  /* #chapter-2 mutations_and_pathways_section ==================================================== */
  .cls032 {
    padding-left: var(--pad-val);
    padding-right: var(--pad-val);
  }
  .cls034 {
    max-width: unset;
    font-size: 18px;
    line-height: 28px;
  }

  /* chapter text  */
  .chapter-2-content .cls037 > .cls038:first-child {
    padding-bottom: 120px;
  }

  /* chapter text  */
  .chapter-2-content .cls037 > .cls038:nth-child(2) .cls029 {
    padding-left: 0;
    padding-right: 0;
  }

  .chapter-2-content .cls037 > .cls038:nth-child(2) .cls040 {
    margin-top: 0px;
  }

  .chapter-2-content {
    padding-bottom: 45px;
  }

  /* #Chapter 3 ====================================================*/
  .cls051 {
    font-size: 24px;
    line-height: 34px;
    font-weight: normal;
  }

  .chapter-3 .cls016 img.cls041 {
    width: 500px;
    max-width: calc(100% - 30px);

    /* avoid padding right */
    position: relative;
    right: -15px;
  }

  .chapter-3-content .cls045 {
    margin-top: 30px;
  }

  /* paragraph list container */
  .cls042 {
    padding: 0 60px;
  }

  /* custom-paragraph-var-1 */
  .cls051 {
    font-size: 24px;
    line-height: 34px;
  }

  /* custom-paragraph-var-2 */
  .cls053 {
    font-size: 18px;
    line-height: 28px;
  }

  /* cancel effect from desktop css */
  .cls042 {
    padding: 0 0;
  }

  .chapter-3-content .cls049 {
    width: calc(100% - calc(56px * 2));
    height: 277px;
    object-fit: cover;
    object-position: left;
  }

  .chapter-3-content .cls042 .cls052 {
    flex-direction: column-reverse;
  }

  .chapter-3-content .cls042 .cls052 .w50.cls038 .content.d-center-c {
    margin-bottom: 92px;
  }

  .chapter-3-content .cls042 .cls052 .w50.cls038 {
  }

  .chapter-3-content .cls042 .cls052 {
    flex-direction: column-reverse;
  }

  /* #chapter-4 */
  /* video frame - in chapter-4 (at least) */
  .cls0056 {
    width: 100%;
    height: 300px;
  }

  /* custom-paragraph-var-3 */
  .cls058 {
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 75px;
  }
  .chapter-4-content [alt="chapter-4-graph.png"] {
    content: url("./../img/chapter-4-graph-mob.png");
    width: calc(100% - 100px);
    margin-left: 50px;
  }

  /* a separator */
  .chapter-4-content .cls059.cls060 {
    margin-top: 60px;
  }

  /* the following quote */
  .chapter-4-content .cls045.cls061 {
    margin-top: 40px;
    margin-bottom: 37px;
  }

  .chapter-4-content .content-d-center-c.cls062 {
    margin-top: 40px;
  }

  /* story section */

  .chapter-4-content .cls029.cls063 .cls024 {
    width: 100%;
  }

  .chapter-5-content .cls065 {
    min-height: unset;
  }

  /* quote variant 1 */
  .cls019 {
    font-size: 26px;
    line-height: 40px;
  }

  /* #end-section card REFERENCE ====================================================*/
  .end-section {
    margin-bottom: 0px;
  }
  .end-section .cls067 {
    align-items: flex-start;
  }

  .end-section .cls067 p {
    text-align: left;
  }

  .end-section-content {
    font-size: 18px;
  }

  .cls0071 {
    font-size: 18px;
    line-height: 26px;
  }

  .cls0072 {
    font-size: 18px;
    line-height: 26px;
  }

  /* select */
  .end-section-content .custom-select {
    margin-top: 50px;
  }

  /* 'spacing element' #3 - custom  */
  .end-section-content .cls035 {
    height: 22px;
  }

  /* #footer ====================================================*/
  .end-footer > div {
    flex-wrap: wrap;
  }
  .footer .content.d-center {
    flex-wrap: wrap;
  }

  .footer .cls071,
  .footer .cls072 {
    width: 100%;
  }

  .footer .cls071 {
    height: 350px;
    min-height: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* main paragraph  */
  .footer .cls075 {
    font-size: 24px;
    line-height: 34px;
  }

  /* arrow label */
  .footer .cls076 {
    font-size: 18px;
    line-height: normal;
  }

  /* ##footer form section */
  .footer .cls072 {
    padding-bottom: 0;
    min-height: unset;
    height: auto;
    padding: 100px var(--pad-val);
  }

  /* share buttons */
  .footer .cls072 .container.cls078 {
    width: 100%;
    font-size: 18px;
    line-height: 18px;
  }

  /* form title */
  .footer .cls072 .cls077 {
    text-align: center;
    font-size: 24px;
    line-height: 34px;
  }

  /* form inputs */
  .footer .cls072 form input {
    width: unset;
    flex-grow: unset;
    height: 60px;
    font-size: 16px;
    line-height: normal;
    font-size: 16px;
    width: calc(100% - 105px);
  }

  .footer .cls072 form button {
    height: 60px;
    width: 105px;
    font-size: 14px;
    line-height: 14px;
    padding: 0;
    text-align: center;
  }

  /* ##footer bottom links */
  /* long description */
  .end-footer {
    padding-top: 60px;
    padding-bottom: 32px;
  }

  .footer .end-footer .cls082 > .cls081 {
    font-size: 16px;
    line-height: 30px;
    padding: 40px 0;
    text-align: center;
  }

  .footer .end-footer .d-center-c.cls082 {
    align-items: center;
  }

  /* links */
  .footer .end-footer .cls082 .cls079 {
    font-size: 18px;
    line-height: 28px;
    padding-top: 60px;
  }

  /* a piece of link */
  .footer .end-footer .cls082 .cls079 a {
    padding: 0 5px;
  }

  /* copy-right */
  .footer .end-footer .cls082 > .cls081:last-child {
    font-size: 16px;
    line-height: 30px;
    width: 100%;
    text-align: center;
    padding: 0;
  }

  .footer .end-footer img {
    width: 110px;
  }

  .footer .end-footer .content.d-center {
    justify-content: center;
  }

  .infographic_1 {
    max-width: calc(100vw - 30px);
  }

  .chapter-3-content .cls049 {
    height: auto;
    width: 100%;
  }

  .ps2-background-1 {
    background-position: 60% center;
  }

  .patient-story .custom-section-content .ps2-background-2,
  .patient-story .custom-section-content .ps2-background-3,
  .patient-story .custom-section-content .ps2-background-4,
  .patient-story .custom-section-content .ps2-background-5 {
    background-position: center center;
  }

  .patient-story-3 .custom-section-content section:not(:first-child) {
    padding: 0;
  }

  .patient-story-3 [scroll-step].ps3-background-2 .content {
    flex-direction: column-reverse;
  }

  .cls089 .w50 {
    width: 100%;
    height: 50%;
  }

  .cls090 {
    padding-left: 0;
  }

  .cls091 {
    margin-left: 0;
    padding-top: 40px;
    padding-left: 60px;
    padding-right: 60px;
    font-size: 30px;
    line-height: 46px;
  }

  .patient-story-3 [scroll-step].ps3-background-4 .content {
    flex-direction: column;
  }

  .cls092 .w50 {
    width: 100%;
    height: 50%;
  }

  .cls093 img {
    height: auto;
    width: 100%;
  }

  .cls094 {
    padding-top: 40px;
    padding-left: 60px;
    padding-right: 60px;
    font-size: 30px;
    line-height: 46px;
  }

  .patient-story-3 [scroll-step].ps3-background-5 .content {
    flex-direction: column;
    height: 100%;
  }

  /* .test-child {
    height: calc(100vh - 68px);
  } */

  .cls096 {
    font-size: 26px;
    line-height: 36px;
    padding: 40px 60px 0px 60px;
  }

  .ps3-background-8 .cls086 {
    padding-left: 60px;
    padding-right: 60px;
    font-size: 26px;
    line-height: 36px;
  }

  .ps3-background-9 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .side-menu-negative {
    margin-top: 0px;
  }

  .side-menu-wrapper-sticky {
    display: none;
  }

  .infographic_1 {
    margin-bottom: 40px;
  }

  .hero-1 .center {
    padding-left: var(--pad-val);
    padding-right: var(--pad-val);
  }

  .footer-form {
    flex-wrap: nowrap;
  }

  .footer .footer-form input[type="submit"] {
    width: fit-content;
  }

  .infographic_1 {
    width: 100%;
  }

  .cls049 {
    padding-left: var(--pad-sub);
    padding-right: var(--pad-sub);
  }

  .patient-story-3-offset .content.d-center-c {
    padding: 0;
  }

  .cls016 {
    margin-top: -130px;
  }

  .content-padding-new {
    padding: 0px var(--pad-val);
  }

  .cls073 {
    margin-bottom: 0px;
  }

  .cls087 {
    padding-left: var(--pad-val);
    padding-right: var(--pad-val);
  }

  .cls066 {
    padding-top: 40px;
    padding-bottom: 40px;
    background-attachment: unset;
    position: relative;
    border-radius: 0px;
    background-position: 70% 0%;
  }

  .cls066 .cls067 {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
  }

  .cls066::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2;
    width: 100%;
    height: 100%;
  }

  .hero section[scroll-wrapper] {
    height: 100vh;
  }

  .footer-form input.button {
    padding: 0 20px;
  }

  .cls013 {
    white-space: normal;
  }

  .chapter-4-offset-content, .cls058, .cls051, .cls052, .cls062, .cls063 {
    padding: 0 !important;
  }

  .cls042 .d-center-c {
    width: 100%;
  }

  .cls065 {
    padding-top: 40px;
  }

  .video-overlay .vimeo-video {
    max-width: 80vw;
  }

  .cls099 > .cls038:first-child {
    padding-right: 0;
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 600px) {
  /* #learn_more UI item */
  .lm-container {
    padding-top: 38pt;
    padding-bottom: 38pt;

    padding-left: var(--pad-sub);
    padding-right: var(--pad-sub);
  }

  .learn-more-btn {
    min-width: unset;
    width: 420px;
    max-width: 100%;
    border-radius: 5pt;
    padding-right: 14px;
  }

  .learn-more-btn .lm-main {
    height: 65px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: center;
  }

  .learn-more-btn .lm-main > span {
    font-size: 14px;
    line-height: normal;
  }

  .learn-more-btn .lm-arrow {
    width: 44px;
  }

  .learn-more-btn .lm-arrow img {
    height: 12px;
  }
  /* #learn_more UI item - END */

  a[data-copy] {
    display: none;
  }

  .cls003 {
    margin-right: 0px;
  }

  .cls016 {
    margin-top: -130px;
  }

  .cls013 {
    font-size: 70px;
  }

  .video-overlay .vimeo-video {
    max-width: 90vw;
  }
}

@media only screen and (max-width: 580px) and (max-height: 820px) {
  /* first screen title top distance */
  .content .top.rsp001 {
    padding-bottom: 50px;
  }
}

@media only screen and (max-width: 450px) {
  .learn-more-btn {
    width: 100%;
  }

  .learn-more-btn .lm-main > span {
    max-height: unset;
  }
}