/* /content/dam/intelligentcontent/brands/ic-dtc-fasenra/us/en/hes/css/compability.css */

@media screen and (max-width: 389px) {
  #take-a-deeper-look-at-hes #fasenra-approved-container .purple-button {
    width: 100%;
  }

  #signs-and-symptoms-of-hes #fasenra-approved-container .purple-button {
    width: 100%;
  }

  #signs-and-symptoms-of-hes #banner-section::after {
    background-size: cover;
  }

  #hes-cost-affordability #what-expect-container h2 {
    padding-right: 60px;
  }

  #results-with-fasenra #banner-section::after {
    background-size: cover;
  }

  #results-with-fasenra #banner-section p {
    font-size: 22px;
    max-width: 100px;
  }

  #savings-support #banner-title h1,
  #savings-support #banner-subheading h4 {
    max-width: 68%;
  }

  #dosing-Information #banner-title h1,
  #dosing-Information #banner-subheading h4,
  #dosing-Information .footer-text {
    max-width: 69%;
  }

  #dosing-Information .footer-text {
    padding-bottom: 30px;
  }

  #how-to-administer-fasenra #second-div .button .mobile-only,
  #savings-support #card-flex #second-flex #button-or .call-section,
  #patient-resources-hes #box-container a span,
  #patient-resources-hes #box-container .cmp-button,
  #patient-resources-hes #box-container .button {
    width: 100%;
  }

  #savings-support #card-flex #second-flex #button-or .call-section {
    padding: 11px 15px;
  }

  #instructs-for-use-new .grey-information {
    width: 100%;
  }

  #signs-and-symptoms-of-hes #banner-section {
    min-height: 220px;
    background-size: cover;
  }

  #results-with-fasenra #banner-section {
    background-size: cover;
  }
}

@media screen and (min-width: 391px) and (max-width: 992px) {
  #hes-home #home-banner-container {
    background-size: cover;
  }
  #take-a-deeper-look-at-hes #banner-section,
  #signs-and-symptoms-of-hes #banner-section,
  #results-with-fasenra #banner-section,
  #hes-home #home-banner-container {
    background-size: cover;
  }

  #dtc-hes-top-nav > ul.cmp-topnavigation__group {
    width: 100%;
  }

  #dosing-Information #pen-box #second-div {
    max-width: 310px;
    margin: 0 auto;
  }

  #instructs-for-use-new #accordion-container #max-width-350 {
    margin: 0 auto;
  }

  #instructs-for-use-new #lift-image {
    margin: 30px auto;
  }

  #instructs-for-use-new
    #accordion-container
    #background-white
    .image
    .cmp-image,
  #instructs-for-use-new
    #accordion-container
    #background-white-last
    .image
    .cmp-image,
  #instructs-for-use-new
    #accordion-container
    #background-white-flex-items-row
    .image
    .cmp-image,
  #instructs-for-use-new
    #accordion-container
    #background-white-flex-items-last-row
    .image
    .cmp-image,
  #instructs-for-use-new
    #accordion-container
    #background-white-flex-items-row-reverse
    .image
    .cmp-image,
  #instructs-for-use-new
    #accordion-container
    #background-white-flex-items-last-row-reverse
    .image
    .cmp-image {
    display: flex;
    justify-content: center;
  }

  #instructs-for-use-new
    #accordion-container
    #second-accordion
    .cmp-accordion__title
    img {
    max-width: 26px;
    margin: 0;
  }

  #results-with-fasenra #banner-section p {
    max-width: 36%;
  }

  #dtc-hes-header-main-menu .navigation-overlay ul.cmp-navigation__group {
    margin-top: 188px;
  }

  #results-with-fasenra #banner-section {
    background-position: bottom center;
  }

  #take-a-deeper-look-at-hes #banner-section,
  #signs-and-symptoms-of-hes #banner-section,
  #results-with-fasenra #banner-section,
  #see-how-fasenra-works #banner-section,
  #safety-information #banner-section {
    min-height: 68.462vw;
  }
}

@media screen and (min-width: 817px) and (max-width: 992px) {
  #dtc-hes-header-main-menu .navigation-overlay ul.cmp-navigation__group {
    margin-top: 172px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1300px) {
  #take-a-deeper-look-at-hes #banner-section {
    background-size: cover;
  }

  #take-a-deeper-look-at-hes #learn-more-container .text {
    flex: 0 0 82%;
  }

  #take-a-deeper-look-at-hes #body-wrapper > div > div:nth-child(6),
  #take-a-deeper-look-at-hes #banner-section {
    padding: 0 26px;
  }

  #signs-and-symptoms-of-hes #body-wrapper > div > div:nth-child(4),
  #signs-and-symptoms-of-hes #banner-section {
    padding: 0 26px;
  }

  #hes-cost-affordability #what-expect-container,
  #hes-cost-affordability #astrazeneca-commitment-container,
  #hes-cost-affordability #insurance-type-container,
  #hes-cost-affordability #banner-section,
  #hes-cost-affordability #body-wrapper > div:nth-child(4),
  #hes-cost-affordability #cant-afford-container {
    padding: 0 20px;
  }

  #hes-cost-affordability #cant-afford-container {
    max-width: 1100px;
  }

  #results-with-fasenra #body-wrapper > div > div:nth-child(2),
  #results-with-fasenra #banner-section {
    padding: 0 26px;
  }

  #dtc-hes-header-main-menu #site-logo a {
    margin-right: 0;
  }

  #dtc-hes-main-navigation > ul.cmp-navigation__group {
    gap: 2.431vw;
  }

  #dtc-hes-header-main-menu {
    padding: 29px 40px 16px 20px;
    justify-content: space-between;
  }

  #dtc-hes-main-navigation .topnavigation.languagenavigation {
    display: none;
  }

  #header-flex-outer > div > div#desktop-top-nav {
    justify-content: space-between;
  }

  #header-flex-outer > div > div#desktop-top-nav #site-text p {
    padding: 15px 0 14px 15px;
  }

  #header-flex-outer
    > div
    > div#desktop-top-nav
    #dtc-hes-top-nav
    > ul.cmp-topnavigation__group
    > li.top-level-pilink.cmp-topnavigation__item.cmp-topnavigation__item--index-0.cmp-topnavigation__item--level-0 {
    padding-left: 5.278vw;
  }

  #safety-information #text-container {
    padding: 44px 15px 18px;
  }

  #safety-information #footnotes-container,
  #dtc-hes-isi-container
    #isi
    #isi-header
    h3.cmp-title__text.cmp-title__text--h3 {
    padding: 10px 15px;
  }

  #isi #isi-first-div,
  #isi #isi-second-div,
  #isi #isi-third-div,
  #isi #isi-forth-div,
  #isi #approved-use,
  #dtc-hes-isi-container #isi #isi-fifth-div,
  #hes-inner-footer-container #dtc-hes-footer-con #footer-desktop-flex-only,
  #dtc-hes-footer-container #footer-bottom-text,
  #dtc-hes-footer-container #links-div {
    padding: 0 15px;
  }

  #dosing-Information #banner-title h1 {
    padding-top: 6.944vw;
  }

  #dosing-Information .cmp-container__backgroundImage--enabled {
    min-height: 40vw;
  }

  #how-to-administer-fasenra
    #body-container
    > div
    > div:nth-child(3):has(#accordion-container) {
    padding: 0 20px;
  }

  #instructs-for-use-new
    #accordion-container
    #second-accordion
    .cmp-accordion__button,
  #instructs-for-use-new
    #accordion-container
    #second-accordion
    .cmp-accordion__item,
  #instructs-for-use-new #accordion-container #second-accordion {
    width: 100%;
  }

  #instructs-for-use-new #banner-container {
    padding: 64px 20px 94px;
  }

  #instructs-for-use-new #accordion-container {
    padding: 92px 20px 36px;
  }

  #instructs-for-use-new #accordion-container #background-white,
  #instructs-for-use-new #accordion-container #background-white-last,
  #instructs-for-use-new #accordion-container #background-white-flex-items-row,
  #instructs-for-use-new
    #accordion-container
    #background-white-flex-items-last-row,
  #instructs-for-use-new
    #accordion-container
    #background-white-flex-items-row-reverse,
  #instructs-for-use-new
    #accordion-container
    #background-white-flex-items-last-row-reverse {
    padding: 45px 30px 40px 69px;
  }

  #instructs-for-use-new #accordion-container #flex-items .image {
    margin-right: 20px;
  }

  #instructs-for-use-new
    #accordion-container
    #part-3-dispose-container
    #background-white-flex-items-last-row
    img {
    width: 100%;
  }

  #instructs-for-use-new
    #accordion-container
    #part-3-dispose-container
    #background-white-flex-items-last-row
    .cmp-accordion__title::before {
    background-size: contain;
  }

  #hes-home #left-card,
  #hes-home #middle-card,
  #hes-home #right-card {
    max-width: 29.028vw;
    padding: 2.153vw 1.389vw 1.736vw;
  }

  #hes-home .purple-button {
    width: 26.25vw;
  }

  #hes-home .purple-button {
    font-size: clamp(0.5938rem, -0.7167rem + 2.1158vw, 1.1875rem);
    line-height: clamp(0.6875rem, -0.8299rem + 2.4499vw, 1.375rem);
  }

  #hes-home #cards-container p {
    font-size: 20px;
    line-height: 24px;
  }

  #hes-home #footnotes-container {
    padding: 0 15px;
  }
}

@media screen and (min-width: 1441px) {
  #hes-home #home-banner-container .title,
  #hes-home #home-banner-container .text {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
  }
  #savings-support #accordion-container h3 span {
    white-space: nowrap;
  }
  #signs-and-symptoms-of-hes #fasenra-approved-container > div:nth-child(2) {
    display: block;
  }
  #hes-home #home-banner-container {
    min-height: 58vh;
  }

  #safety-information #banner-section {
    min-height: 35vh;
  }

  #take-a-deeper-look-at-hes #banner-section,
  #signs-and-symptoms-of-hes #banner-section,
  #results-with-fasenra #banner-section,
  #see-how-fasenra-works #banner-section {
    min-height: 60vh;
  }

  #hes-home #home-banner-container,
  #take-a-deeper-look-at-hes #banner-section,
  #signs-and-symptoms-of-hes #banner-section {
    height: unset;
  }
  #results-with-fasenra #banner-section,
  #see-how-fasenra-works #banner-section,
  #safety-information #banner-section {
    background-position: top center;
  }
}

#isi .cmp-highlightinfov2 {
  width: 100%;
}

@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #hes-home #cards-container p {
      margin-top: 0px;
    }
    #hes-home #cards-container #right-card .purple-button {
      margin-top: 8px;
    }
  }
}
@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
    #isi .cmp-highlightinfov2 {
  height: 100%;
}
}