:root {
    --fontNormal: 'Montserrat Regular';
    --semiBold: 'Montserrat Medium';
    --bold: 'Montserrat Bold';
    --white: #fff;
    --skyBlue: #06C4BB;
    --darkSkyBlue: #05a59d;
    --lightGray: #EBEFEE;
    --navyBlueDark: #0b455e;
    --black: #2F2F2F;
  }
  
  img{max-width: 100%} .clear{clear: both;height:0}
  body{overflow-x: hidden}
  a, button{cursor: pointer} p{margin: 0;}
  #aboutAirsupraDTC{background: url('/content/dam/intelligentcontent/brands/airsupra-dtc/us/en/images/desktop/About_Bkg_img_D.png') top left / cover;font-family: var(--fontNormal);color: var(--white);padding:128px 100px 58px 100px;}
  #aboutAirsupraDTC p { font-size: clamp(1.125rem, 1.0778rem + 0.1914vw, 1.25rem);font-family: var(--fontNormal)}
  #bannerContent{opacity:0;}
  #bannerContent h1{font-family: var(--bold);font-size: clamp(1.5rem, 1.3583rem + 0.5742vw, 1.875rem);max-width: 1022px;margin:0 0 80px;
  line-height: 36px;}
  #bannerContent h1 span, #asthmaGuideRight span{color: var(--skyBlue); color: #05A69E;}
  #infoCon{display: flex;text-align: center; opacity: 0; justify-content: space-between;
    align-items: center;}
  #infoCon .infoBlock{flex-basis: 33%;padding: 0;display: flex;align-items: center;text-align: left} 
  #infoCon .infoBlock img{width: 120px}
  .infoBlock p{margin: 0 0 0 15px;line-height: 28px; max-width:270px; } 
  #tableCon{margin: 80px 0}
  #tableCon table{width: 100%;background: #fff;border-radius: 10px}
  #tableCon table td, #tableCon table th{border-bottom: 1px solid #d5d5d5;background: var(--white);color: var(--black);font-family: var(--semiBold);font-size: clamp(0.8125rem, 0.7465rem + 0.2817vw, 1rem);padding: 20px 7%}
  #tableCon table th:not(:first-child){border-top:1px solid var(--lightGray);border-right:1px solid var(--lightGray);border-left:1px solid var(--lightGray)}
  #tableCon table td:nth-child(2), #tableCon table th:nth-child(2){padding: 20px 20px 20px 20px;}
  #tableCon caption{ background: var(--darkSkyBlue); padding: 20px; text-align: center; font-family: var(--semiBold); font-size: clamp(0.875rem, 0.7805rem + 0.3828vw, 1.125rem); border-radius: 10px 10px 0 0}
  #tableCon table td:first-child, #tableCon table tr:first-child th:not(:first-child){background: var(--lightGray);color: var(--navyBlueDark);font-family: var(--bold)}
  #tableCon table th:first-child{width: 31%}
  #tableCon table span{display: block;margin: 10px 0 0;font-family: var(--semiBold);font-size: clamp(0.75rem, 0.706rem + 0.1878vw, 0.875rem)}
  #tableCon table tr:last-child td:first-child{border-radius: 0 0 0 10px}
  #tableCon table tr:last-child td:last-child{border-radius: 0 0 10px 0}
  #tableCon table tr:last-child td{border-bottom: none}
  #tableCon h4 {font-family: var(--semiBold);font-size: clamp(1.25rem, 1.1555rem + 0.3828vw, 1.5rem);max-width: 971px;margin: 0 0 30px;line-height: 26px}
  #tableCon p {margin: 80px auto;text-align: center;line-height: 32px;max-width: 773px;font-size: 24px;font-family: var(--semiBold)}
  #talkToHealthcare{margin: 80px auto;text-align: center;line-height: 28px;max-width: 660px;font-size: clamp(1.125rem, 1.0778rem + 0.1914vw, 1.25rem);font-family: var(--semiBold)}
  #tableCon hr{max-width: 630px;border: 1px solid var(--skyBlue);opacity: 0.5;width: 80%}
  #asthmaGuide{position: relative}
  #asthmaGuideLeft{width: 62%}
  #asthmaGuideLeft img{width: 100%;max-width: 730px;}
  #asthmaGuideRight{position: absolute;top: 70px;height: fit-content;margin: auto;width: 49.5%;right: 0;background: var(--white);padding: 40px 45px;border-radius: 10px;color: var(--black);font-family: var(--semiBold);font-size: clamp(1.25rem, 1.1555rem + 0.3828vw, 1.5rem);line-height: 32px;max-width: 600px;font-family: 'Montserrat-SemiBold';color: #2F2F2F;}
  #asthmaGuideRight div{margin: 20px 0 0}
  #airsupraTaken{position: relative;margin:80px 0 0}
  #airsupraTaken img{position: absolute;top:-23px;left: 100px;width: 180px}
  #airsupraTakenBar{background: var(--lightGray);padding: 30px 0;border-radius: 10px;}
  #airsupraTakenBar p{
  color: var(--black);
  font-family: var(--semiBold);
  font-size: clamp(1.25rem, 1.1555rem + 0.3828vw, 1.5rem);
  line-height:26px;
  float: left;
  max-width: 740px;
  margin: 0 30px 0 320px;
  text-align: left;
  font-family: "Montserrat Bold";
  font-size: 30px;
  line-height: 36px;
  }
  #savingCamp{
    background: url('/content/dam/intelligentcontent/brands/airsupra-dtc/us/en/images/desktop/1.0_About_Saving_Comp_Bkg_D.png') top right / cover;font-family: var(--fontNormal);font-size: clamp(1.5rem, 1.3583rem + 0.5742vw, 1.875rem);padding: 30px 50px;position:relative;
    background: rgb(196,182,129);
    background: linear-gradient(179deg, rgba(196,182,129,1) 0%, rgba(196,182,129,1) 48%, rgba(152,134,65,1) 100%);
}
  #savingCampCon { max-width:1130px; margin: 0 auto;}
  #savingCampLeft{width:calc(100% - 500px);max-width: 600px;font-family: var(--bold);position: relative;display: table;height: 100%;min-height: 290px;margin: 50px 0 0}
  #savingCampLeft h2{max-width: 514px}
  #savingCampLeft .white-button{margin: 30px 0;max-width: 182px}
  #savingCampLeft .white-button a{display: block;padding: 24px 0;text-align: center}
  #savingCampLeft h2{font-size: clamp(1.5rem, 1.3583rem + 0.5742vw, 1.875rem);font-family: var(--bold)}
  #savingCampLeft p:last-child{ max-width: 416px;text-indent: -8px; font-size: 14px; line-height:18px; font-family: var(--bold);position: absolute;bottom: 0;color:#2f2f2f;}
  #savingCardDesVer{position: absolute;right: 0;top: -60px;opacity: 0}
  #mobVerGuideImg, #savingCardMobVer{display: none}
  #savingCardMobVer{opacity: 0}
  #aboutAirsupraDTCPage a.white-cta:before{content: ''}
  #aboutAirsupraDTCPage a.white-cta img{margin: 0 0 -3px 10px}
  
  #tableCon table tr th {}
  
  #tableCon table tr th.sd1 { width: 28%; }
  #tableCon table tr th.sd2 {width: 31%;text-align: center;}
  #tableCon table tr th.sd3 {width: 31%;text-align: center;} 
  
  #tableCon table tr td.sd1 { width: 28%; }
  #tableCon table tr td.sd2 {width: 31%;text-align: center;}
  #tableCon table tr td.sd3 {width: 31%;padding: 20px 2%;text-align: center;} 
  
  #airsupraTakenBar p.air-puff { font-size: 20px; line-height: 36px; padding-top: 5px;}
  
  /*for home page */
  body#home-page #savingCampLeft .white-button{ max-width:332px} 
  body#home-page #savingCampLeft .white-button a{ padding: 24px 49px 24px 25px} 
  body#home-page #savingCampLeft .white-button a:before{ right: 8%} 
  /*for home page */
  #savingCampLeft .white-button a:hover {color: #002231;border:1px solid #002231}
  #savingCampLeft .white-button a:focus {outline: 1px solid #000000;outline-offset: 4px}
  
  /* *****************Animations Start****************** */
  .animateTop{animation: animateBannerContent 0.7s ease-in-out;opacity:1!important}
  .animateInfoCon{animation: animateInfoCon 0.7s ease-in-out;opacity:1!important}
  .animateasthmaGuideRight{animation: animateasthmaGuideRight 0.7s ease-in-out}
  .animateSavingCardDesVer{animation: animateSavingCardDesVer 0.7s ease-in-out;opacity:1!important}
  
  @keyframes animateBannerContent {
    0% {transform: translateY(30px);opacity: 0}
    100% {transform: translateY(0);opacity: 1}
  }
  @keyframes animateInfoCon {
    0% {transform: translateY(40px);opacity: 0}
    100% {transform: translateY(0);opacity: 1}
  }
  @keyframes animateasthmaGuideRight {
    0% {transform: translateY(40px);opacity: 0}
    100% {transform: translateY(0);opacity: 1}
  }
  @keyframes animateSavingCardDesVer {
    0% {transform: translateX(50%)}
    100% {transform: translateY(0)}
  }
  /* *****************Animations End****************** */
  @media only screen and (max-width: 1366px) {
    #savingCampCon { max-width: 1000px;}   
    #savingCampLeft h2 { max-width: 420px;}
  }
  @media only screen and (max-width: 1200px) {
    #aboutAirsupraDTC{padding: 80px 50px 10px}
  
    #savingCamp {padding: 30px 20px}
    #airsupraTaken img{left: 50px}
    #airsupraTakenBar p{margin: 0 30px 0 270px; font-size: 28px;
      line-height: 34px;}
    #savingCardDesVer{max-width: 550px}
    #savingCampLeft{margin: 50px 0 0;width: calc(100% - 430px);min-height: initial}
    #savingCampLeft p:last-child{position: initial; padding-top: 45px;}
    #asthmaGuideRight{top: 0;bottom: 0} 
    #asthmaGuideRight{padding: 42px 30px; max-width: 520px;}
    #asthmaGuideLeft img { max-width: 630px;}
    #savingCampLeft h2 { max-width: 464px;}
    #asthmaGuideLeft{ width: 57%;} 
  
  }
  @media screen and (min-width: 992px) {
    .mobile-only {
      display: none;
    }
  }
  @media only screen and (max-width: 991px) {
    .desktop-only {
    display: none;
    }
    #aboutAirsupraDTC{padding: 0 30px 80px; margin: 128px 0 0}
    #about-airsupra-page #bannerContent{padding: 55px 0 0;} 
    #bannerContent h1{margin: 0 0 50px; font-size: 24px; line-height: 28px;}
    #bannerContent h1{}
    #asthmaGuideLeft{width: 100%}
    #asthmaGuideRight {position: relative; width: 100%; margin: -55px 0 0; max-width: 100%;line-height: 26px;
    padding: 40px 30px;}
    #desktopVerGuideImg{display: none}
    #mobVerGuideImg{display: block}
    #asthmaGuideLeft img{max-width: 100%}
    #asthmaGuideLeft{width:calc(100% + 60px);margin: 0 0 0 -30px} 
    #airsupraTaken img{position: initial;width: 100px;}
    #airsupraTakenBar p{float: none;max-width: initial;margin: 0 30px; font-size: 24px;
        line-height: 28px;} 
    #airsupraTakenBar p.air-puff { font-size: 16px;
        line-height: 26px;}
    #airsupraTakenBar{margin: -55px 0 0;padding: 65px 0 40px;}
    #airsupraTaken{margin: 40px 0 0;text-align: center}
    #savingCamp{text-align: center;padding:5px 0 30px;}
    #savingCampLeft{width: 100%;text-align: left;padding: 0 20px;}
    #talkToHealthcare{margin: 50px auto 0;}
    #savingCardDesVer{position: initial;margin: -95px 0 0;max-width: initial; }
    #tableCon table td, #tableCon table th{padding: 20px 4%;text-align: left;} 
    #savingCampLeft p:last-child{  padding-top: 0; max-width: 100%;}
    #infoCon { display: block; }
    #infoCon .infoBlock { width: 100%;}
    .infoBlock p { max-width: 100%;}
  }
  
  @media only screen and (max-width: 767px) {
    #infoCon{display: block}
    #infoCon .infoBlock{display: flex;align-items: center;padding: 10px 0;text-align: left}
    #infoCon .infoBlock img {width: 100px}
    .infoBlock p{margin: 0 0 0 15px}
    #aboutAirsupraDTC{background: url('/content/dam/intelligentcontent/brands/airsupra-dtc/us/en/images/desktop/About_Bkg_img_M@2x.png') top left / cover}
    #bannerContent h1{margin: 0 0 40px}
    #tableCon{margin: 35px 0 50px}
    #tableCon p, #talkToHealthcare{margin: 60px auto 50px;}
    #savingCardDesVer{display: none}
    #savingCardMobVer{display: block}
    #airsupraTakenBar p{margin: 0 24px;}
    #asthmaGuideLeft{width: calc(100% + 40px);margin: 0 0 0 -20px}
    #savingCardMobVer{width: 100%;margin: -105px 0 0}
    #tableCon table span{margin: 5px 0 0}
    #savingCampLeft h2{max-width:342px}
  }
  
  @media only screen and (max-width: 600px) {
    #aboutAirsupraDTC{padding: 0 20px 30px}
    #savingCardMobVer{margin: -60px 0 0}
    #tableCon table td, #tableCon table th{padding: 20px 4%; text-align: left;}
    #savingCampLeft .white-button{max-width: 100%}
    #tableCon table th:first-child{width: 30%}
    #tableCon table td:nth-child(2), #tableCon table th:nth-child(2){padding: 20px 0px 20px 25px;width: 35%}
    #savingCampLeft p:last-child{ max-width: 100%;}
  }
  
  @media only screen and (min-width: 1441px) {
    #aboutAirsupraDTC .text, #savingCampCon{max-width: 1440px;padding: 0 90px;margin: 0 auto}
    #savingCampCon{ }
    #savingCampCon{ position: relative; max-width: 1330px;padding: 0 90px; margin: 0 auto;}
    #savingCardDesVer{top: -157px}
  }