/*
Theme Name: replenstheme
Author: Bryn Davies ,for Deftly Does It
Author URI: https://deftlydoesit.co.uk
Description: Theme Styles for Replens Website
Version: 0.1
*/

@charset "UTF-8";


html {background-color:#ffffff;}
body {margin:0px; font-family: "source-sans-pro", sans-serif; font-weight: 400; font-style: normal; font-size:18px; line-height:26px;color:#2E008B;}

h1,h2,h3,h4,h5,h6 {color:#2E008B;}

h1 {margin-top:0px;margin-bottom:10px;}
h2 {line-height: 35px;}
h3 {}
h4 {}
h5 {}
h6 {}

p {}

strong {font-weight:700;}

.superscript {font-size:14px;vertical-align: super; line-height: 0.1em;}

.topnotice {position:absolute; top:0px; width:100%;z-index:20;background-color: #8031A7;}
.topnotice p {font-size:22px; letter-spacing:1px;text-align:center;line-height: 18px;color:#ffffff;margin-top: 15px;margin-bottom: 15px;}
.topnotice p span {text-transform: uppercase;font-weight:700;font-size:22px;}

#cookiespolicy {margin-top:170px;}
#cookiespolicy h1 {text-align:center;font-size:60px; font-weight:700;}
#cookiespolicy h2 {text-align:left;font-size:30px; font-weight:700;}
#cookiespolicy p {font-size:18px;line-height:26px;}
#cookiespolicy p a {color:#2E008B; }

.mobonly {display:none;}
.dtonly {display:block;}

#mainheader {position:fixed; top:65px; max-width:1290px;margin:0 auto;left: 50%;transform: translate(-50%, 0);z-index:10;overflow:visible;}
.header {position:relative; margin:0 auto; max-width:1100px; margin:0 auto; height:100px;/*background-color:rgba(0,0,0,0.3);*/  z-index: 5;}

.logo {width:95px;margin-top:0px;padding-left:30px;position:absolute;z-index:7;}

.nav {float:right;width:100%; display:inline-block;margin-top:43px; background-color:rgba(255, 255, 255, 0.8);z-index:6;position:relative; text-align:right;border-radius:30px;backdrop-filter: blur(3px); border:1px solid #2E008B;}
.nav ul {padding-left:0px; list-style: none; padding-top:0px;margin-top:0px;margin-top: 5px; margin-bottom: 7px;margin-right: 25px;}
.nav ul li {display:inline; padding: 0px 30px; border-right:1px solid #7C3996;}
.nav ul li:last-of-type {border-right:0px;}
.nav ul li a {color:#7C3996; font-size:16px; text-decoration:none; font-weight:300;font-family: "source-sans-pro", sans-serif; }
.nav ul li a:hover {text-decoration: underline;}

.mobmenu {width: 50px;
    position: absolute;
    right: 20px;
    top: 55px;
  display:none; cursor:pointer;}

  .bordertext {margin-top:30px;font-size:16px; line-height:22px; font-weight:700; text-align:center; padding:10px 20px; border:2px solid #2E008B;margin-bottom:40px;}
  .bordertext a {color:#2E008B;}

.hcppopwrap {position:fixed; top:0px; left:0px; width:100%; height:100vh; background-color:rgba(255,255,255,0.9);z-index:1000; display:none;backdrop-filter: blur(6px);}
.hcpop {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color:#ffffff; border-radius:20px; border:3px solid #2E008B;padding:20px;
  width:700px;
}
.hcpop p {text-align:center!important;}
.hcplink {color:#000000; font-size:18px; text-decoration:none;}
.hcplink:hover {text-decoration:underline;}
.enterbutton {border-radius:5px;padding:5px 20px; font-weight:700;background-color:#2E008B; color:#ffffff; text-decoration:none; opacity:0.2; cursor:none; pointer-events: none;}

.orderKitBut {line-height: 22px;z-index:100;cursor:pointer;font-weight:bold;width:100px;position:fixed; left:0px; top:450px; text-align:center;background-color:#7639a1; color:#ffffff; border-top-right-radius:40px;border-bottom-right-radius:40px;padding:20px 30px 20px 20px;}
.triangleflair {position:absolute;right: -40px;top: 6px;width: 30px;}
.orderKitStrip {display:none;}
.stripbutton {width:100%; text-align:center; font-size:22px; font-weight:bold;position:relative;color:#ffffff;}

@media only screen and (max-width: 1440px) {
  .orderKitBut {line-height: 22px;z-index:100;cursor:pointer;font-weight:bold;width:100px;position:absolute; left:0px; top:450px; text-align:center;background-color:#7639a1; color:#ffffff; border-top-right-radius:40px;border-bottom-right-radius:40px;padding:20px 30px 20px 20px;}
}

@media only screen and (max-width: 900px) {
  .orderKitBut {display:none;}
  .orderKitStrip {cursor:pointer;display:block; background-color:#7639a1;padding-top:20px; padding-bottom:20px;overflow:visible;margin-top: 18px;border-radius: 20px;}
  .triangleflair {
    position:absolute;left: 50%;
    transform: translate(-50%, 0);
    top: -33px;
    width: 27px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin-left: -13.5px;
  }
}

.kitpopwrap {position:fixed; top:0px; left:0px; width:100%; height:100vh; background-color:rgba(255,255,255,0.9);z-index:1000; display:none;backdrop-filter: blur(6px);}
.kitpop {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color:#dae9f1; border-radius:5px; border:0px solid #2E008B;padding:20px;
  width:900px;
  overflow-y: scroll;
  height:90%;
}

.closekitpop {width:35px; height:35px; background-color:transparent; position:relative; float:right; margin-top:0px;cursor:pointer;}

.patientleafletbut {width:auto; padding:15px 15px; background-color:#48a1db; color:#ffffff; border-radius:8px; cursor:pointer; text-decoration:none;}

.kit40 {width:40%; float:left;}
.kit40 .field {font-size:13px; color:red; line-height: 42px;}
.kit60 {width:60%; float:left;}
.kit70 {width:70%; float:left;}
.kit75 {width:75%; float:left;}
.kit30 {width:30%; float:right; text-align: center;}
.kit30 img {width:80%;margin:0 auto;margin-top:-10px;}
.kit25 {width:25%; float:right; text-align: center;}
.kitpop .field {margin-top:10px; margin-bottom:10px;width:100%; overflow:hidden; display:block; line-height:39px;}
.kitpop .field input {padding:10px; border:1px solid #2E008B; border-radius:5px;width:90%;}
.kitpop .field select {padding:8px; border:1px solid #2E008B; border-radius:5px;width:70px;float:right;margin-right:6%;}

#kosubmit {width:200px; background-color:#2E008B; color:#ffffff; font-weight:bold; font-size:20px; cursor:pointer; opacity:0.3; pointer-events:none;}

.fielderror {border:2px solid red!important;}
.errormessage {color:red; font-size:13px;line-height: 14px;padding-top: 5px;padding-left: 5px;font-weight:bold;padding-bottom:10px;}

.ordercomplete {display:none; clear: both; width: 225px;
    padding: 10px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 10px;
    padding-top: 60px;
    border:1px solid #2E008B;
    background-image:url('assets/confirmedtick.png');
    background-size: 70px auto;
    background-position: center 15px;
    background-repeat:no-repeat;
  }


section {width:100%; height:auto; overflow:hidden;}

.header {max-width:1100px; margin:0 auto; height:80px;padding-left:20px; padding-right:20px;}

.content {max-width:1100px; position:relative; padding:0px 20px 0px 20px;margin:0 auto;overflow:hidden;}

.overdrive {font-size:22px; font-weight:600;}

.col20 {width:20%;}
.col25 {width:25%;}
.col30 {width:30%;}
.col35 {width:35%;}
.col40 {width:40%;}
.col45 {width:45%;}
.col50 {width:50%;}
.col55 {width:55%;}
.col60 {width:60%;}
.col65 {width:65%;}
.col70 {width:70%;}

.palebluebg {background-color:#eae1f7;}
.palegreenbg {background-color:#f4f9fb}

#vaginaldryness {}
#vaginaldryness .content {padding-top:70px; padding-bottom:50px;}
#vaginaldryness .col40 {float:left;}
#vaginaldryness .col40 p{width:90%;}
#vaginaldryness .col60 {float:right;text-align:center;}
#vaginaldryness .col60 img {width:100%; height:auto;}
#vaginaldryness h3 {margin-top:5px;}

#vaginaldryness .col25 {display:block; float:left; padding:1%; width:23%;margin-top:50px;}
#vaginaldryness .col35 {display:block; float:left; padding:1%; width:33%;margin-top:50px;}
#vaginaldryness .col40 {display:block; float:left; padding:1%; width:38%;margin-top:50px;}


#recommendreplens {}
#recommendreplens .content{margin-bottom: -7px; background-image:url('assets/reccomend-img.png'); background-size:auto 100%;background-position:center right; background-repeat:no-repeat;padding-bottom: 20px;
    padding-top: 0px;}
#recommendreplens .col40 {float:left;}
#recommendreplens .col40 p {width:90%;}
#recommendreplens .col60 {float:right;text-align:center;height:auto;}
#recommendreplens .col60 img {width:100%; height:auto;object-fit: cover;display:none;}
#recommendreplens h2 {margin-top:50px;}


#whychoosereplens {
  background-image:url('assets/whychoose-bg.png');
  background-repeat:no-repeat;
  background-size: cover;
}

#whychoosereplens .content {padding-top:60px; padding-bottom:60px;}
#whychoosereplens .col30 {float:left;padding-top:50px;}
/*#whychoosereplens .col30 .griddata {display: flex;flex-direction: column;justify-content: center;text-align: center;align-items: center;}*/
#whychoosereplens .col70 {float:right;}
#whychoosereplens .col70 img {width:90%; height:auto;float:right;}

#answergrid .content {padding-top:70px; padding-bottom:70px;}
.answergridwrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 90px;
  grid-auto-rows: 1fr;}

.answergridwrap .griditem {
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  justify-content: top;
  text-align: left;
  position:relative;
  padding-top:22px;
  padding-left:22px;
  background-image:url('assets/plusicon.png');
  background-repeat:no-repeat;
  background-size: 25px 25px;
  background-position: 0px 20px;
}

.answergridwrap .griditem h3 {text-align:left;margin-bottom:0px;}
.answergridwrap .griditem p {text-align:left;}

.dthero {display:block;}
.mobilehero {display:none;}
#heroblock {background-image:url('assets/herogradient.png'); background-size:cover;background-position:center center; width: 100%;}
#heroblock .content {max-width:1200px;padding-top:0px;height:750px;position:relative; /*background-image:url('assets/heroimg.png'); background-size:55% auto;background-position:100% 80%;background-repeat:no-repeat;*/}
#heroblock h2 {font-size:50px; color:#ffffff;position:absolute; top:28%; left:5%;line-height:48px; font-weight:300;max-width:600px;z-index:3;}
#heroblock h3 {font-size:32px; color:#ffffff;position:absolute; bottom:6%; left:5%;line-height:40px; font-weight:600;z-index:3;}
#heroblock img {position:absolute; width:auto; height:500px; right:10px; bottom:2%;z-index:3;}
#heroblock .strip {position:absolute; width:100%; left:0px; top:620px; z-index:2; background-color:rgba(46,0,139,0.05);height:180px;}
.herotext {position:absolute; left:50%; top:40%;font-size:40px; line-height:46px;max-width:450px; float:right;}

#clinicalevidence {padding-top:50px; padding-bottom:60px;}
#clinicalevidence .ceimage {width:43%; float:left;margin-top:25px;}
#clinicalevidence .cesplittext {width:47%; float:right;}
#clinicalevidence h2 {background-image: url(assets/plusicon.png);
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: 0px 0px; padding-top:30px; padding-left:20px;
  }


#howreplensworks {padding-top:50px; padding-bottom:50px;}
.hiwgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    grid-auto-rows: 1fr;
  }

.hiwgrid .griditem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;
    text-align: left;
    position:relative;
    /*padding-top:22px;
    padding-left:22px;
    background-image:url('assets/plusicon.png');
    background-repeat:no-repeat;
    background-size: 25px 25px;
    background-position: 0px 20px;*/
  }

.hiwgrid h3 {text-align:left;width:100%;margin-bottom:0px;}
.objecta {padding-left:85px;background-image:url('assets/objectA.png'); background-repeat:no-repeat; background-size: 40px 40px; background-position: 35px 13px;padding-top:20px; padding-bottom:15px;}
.objectb {padding-left:85px;background-image:url('assets/objectB.png'); background-repeat:no-repeat; background-size: 40px 40px; background-position: 35px 13px;padding-top:20px; padding-bottom:15px;}
.objectc {padding-left:85px;background-image:url('assets/objectC.png'); background-repeat:no-repeat; background-size: 40px 40px; background-position: 35px 13px;padding-top:20px; padding-bottom:15px;}
.howitworksImg {width:100%; margin-top:50px;}
.howitworksKey {width:75%; margin-top:30px;margin-bottom:50px;float:right;}

#recognisedtrusted {}
#recognisedtrusted .content {padding: 0px 0px 0px 20px;background-image:url('assets/recognised-image.png'); background-repeat:no-repeat; background-size: auto 100%; background-position: center right;}
#recognisedtrusted h2 {
    background-image: url(assets/plusicon.png);
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: 0px 0px;
    padding-top: 30px;
    padding-left: 20px;
    margin-top:20px;
}
#recognisedtrusted .col60 {padding-top:20px; padding-bottom:50px;}
#recognisedtrusted p {width:calc(80% - 120px); height:auto;float:left;padding-top:18px;}
.mtick {width:120px; height:auto; float:left;}
.recognisedimg {width:100%; height:auto; margin-bottom: -8px; display:none; border-radius: 10px;}

#lastingdifference {}
#lastingdifference .content {padding-top:80px; padding-bottom:50px;}
#lastingdifference .col50 {float:left;}
#lastingdifference .col50 p {width:90%; float:right;}
#lastingdifference .col50 h2 {width:90%; float:right;margin-top:10px;margin-bottom:10px;}


#references {}
#references .content {/*border-top: 1px solid #2E008B;*/padding-bottom:70px;}
#references .heading {font-weight:700;font-size:24px;margin-bottom: 15px;}
#references .listholder {column-count: 2; column-gap: 25px; column-fill: balance; width:100%; border-top: 1px solid #2E008B;padding-top:30px;}
#references .listholder ol {margin:0px;padding-left: 20px;}
#references .listholder li {padding-left: 10px;display:table;margin-bottom:10px;display: list-item;break-inside: avoid;font-size:16px;line-height:20px;}
#references ol > li::marker {
  font-weight: bold;
}


#footersection {background-color:#8031A7;}
.footer {position:relative;max-width:1120px; margin:0 auto;  padding-left:140px; padding-right:20px;padding-top: 20px; padding-bottom: 40px; font-size:16px; color:#ffffff;}
.footerlogo {width:100px; height:auto; position:absolute;left:20px;top:-33px;}
.footerlogo img{width:100%;}
.copyright {font-size:14px;display:inline;}
.footerlinks {display:inline;margin-left:8%;float:right;}
.footerlinks a {text-decoration:none; color:#ffffff;}
.footerlinks a:hover {text-decoration: underline;}
.ftlink {margin-left:10px;margin-right:10px;font-size:16px;}
.ftcite {position:absolute; right:25px; bottom:10px;font-size:14px;}

@media only screen and (max-width: 1366px) {
  section {width:100%; height:auto; overflow:hidden;margin:0 auto;}
}

@media only screen and (max-width: 1200px) {
.herotext {
    position: absolute;
    left: auto;
    top: 40%;
    font-size: 40px;
    line-height: 46px;
    max-width: auto;
    width:35%;
    float: right;
    right: 20px;
}
}

@media only screen and (max-width: 1120px) {
#mainheader {overflow: visible;position:fixed; top:63px; max-width:auto; width:100%;margin:0 auto;left: 50%;transform: translate(-50%, 0);z-index:10;}
.header {position:absolute; top:0px; width:96%; margin:0 auto; height:120px;background-color:rgba(255,255,255,0.95);backdrop-filter: blur(3px);
  left: auto;
margin-left: auto; padding-left:2%;padding-right:2%;/* Negative half of width. */height:90px;}

.nav {display:none;margin-top:90px;background-color:rgba(255,255,255,0.95);position: absolute; right: 0px; width:100%;display:none;border-radius:0px;border:0px;}
.nav ul {padding-top:20px;float: right;}
.nav ul li {
  display: block;
  padding: 10px 15px;
}
.nav ul li a {font-size:20px;}

.mobmenu {width: 40px;
    position: absolute;
    right: 20px;
    top: 30px;
  display:block;}

  .topnotice p {margin-top: 13px;
      margin-bottom: 13px;}

    .logo {
    width: 100px;
    margin-top: 0px;
    padding-left: 10px;
    display: inline-block;
    }



}


@media only screen and (max-width: 820px) {

.howitworksKey {width:100%; margin-top:30px;float:right;}


}



@media only screen and (max-width: 1100px) {
  #whychoosereplens .col30 {float:left;padding-top:0px;}
}


@media only screen and (max-width: 1066px) {

  #recognisedtrusted .col55 {width:100%;}
  #recognisedtrusted .col45 {width:100%;}
  #recognisedtrusted .content {background-image:none;padding: 0px 20px 20px 20px;}
  #recognisedtrusted .col45 img {opacity:1;display:block;}
  #recognisedtrusted p {width: calc(95% - 120px); }

}


@media only screen and (max-width: 1044px) {
  #recommendreplens .col40 {width:100%;}
  #recommendreplens .col60 {width:100%;height: auto;display:block;}
  #recommendreplens .col60 .mobonly {display:block;}
  #recommendreplens .col60 .dtonly{display:none;}
  #recommendreplens .content {
    margin-bottom: -7px;
    background-image: none;
    background-size: auto 100%;
    background-position: center right;
    background-repeat: no-repeat;
}
#recommendreplens .col40 p {
    width: 100%;
}
}

@media only screen and (max-width: 960px) {

  .kitpop {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #dae9f1;
    border-radius: 5px;
    border: 0px solid #2E008B;
    padding: 20px;
    width: 95%;
    overflow-y: scroll;
    height: 90%;
}

  #heroblock h2 {font-size:45px; color:#ffffff;position:absolute; top:18%; left:5%;line-height:48px; font-weight:300;max-width:500px;z-index:3;}
  #heroblock h3 {font-size:32px; color:#ffffff;position:absolute; bottom:-2%; left:5%;line-height:40px; font-weight:600;z-index:3;}
  #heroblock img {position:absolute; width:auto; height:500px; right:10px; bottom:5%;z-index:3;}

  /*.dthero {display:none;}
  .mobilehero {display:block;padding-top: 100px;}
  #heroblock .content {max-width:100%;padding-top:0px;padding-left:0px; padding-right:0px;padding-bottom: 0px;height:auto;position:relative; background-image:url('assets/mobilebackground.jpg'); background-size:cover;background-position:center center;}

  .herotext {
    position: absolute;
    left: 5%;
    top: auto;
    font-size: 40px;
    line-height: 46px;
    max-width: none;
    width: 90%;
    float: none;
    right: 0px;
    text-align: center;
    bottom:10px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

.herotext h2 {text-align:center;}


#heroblock h2 {
    font-size: 30px;
    line-height: 30px;
    padding-left:15px;
    padding-right:15px;
    margin-top: 10px;
    margin-bottom: 15px;
}*/

  #introduction .grid {display:block;}
  #introduction h2 {
      font-size: 70px;
      line-height: 65px;
      text-align: left;
      margin-top: 7px;
      margin-bottom: 15px;
  }

  #naturalsolution .grid {display:block;}
  #naturalsolution h2 {
      font-size: 40px;
      line-height: 40px;
      text-align: left;
      margin-top: 20px;
      color: #ffffff;
      font-weight: 900;
      margin-bottom: 10px;
  }

#hygiene2 {display:block;}
#hygiene2 p {width:100%;}

#lastingdifference .col50 {float:left; width:100%;}
#lastingdifference .col50 p {width:100%; float:left;}
#lastingdifference .col50 h2 {width:100%; float:left;margin-top:10px;margin-bottom:10px;}

.answergridwrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    grid-auto-rows: 1fr;
}

}

@media only screen and (max-width: 850px) {

.hiwgrid {
    display: block;
    grid-template-columns: repeat(1, 1fr);
    gap: 0px;
    grid-auto-rows: 1fr;
}
.hiwgrid .griditem {
    display: flex
;
    flex-direction: column;
    align-items: normal;
    justify-content: top;
    text-align: left;
    position: relative;
}

.objecta {padding-left:55px;background-image:url('assets/objectA.png'); background-repeat:no-repeat; background-size: 40px 40px; background-position: 5px 13px;padding-top:20px; padding-bottom:15px;}
.objectb {padding-left:55px;background-image:url('assets/objectB.png'); background-repeat:no-repeat; background-size: 40px 40px; background-position: 5px 13px;padding-top:20px; padding-bottom:15px;}
.objectc {padding-left:55px;background-image:url('assets/objectC.png'); background-repeat:no-repeat; background-size: 40px 40px; background-position: 5px 13px;padding-top:20px; padding-bottom:15px;}

#clinicalevidence .col30 {width:100%;clear:both;}
#clinicalevidence .col60 {width:100%;}
#clinicalevidence .cesplittext {
    width: 48%;
    float: right;
}

#whychoosereplens .col30 {width:100%;}
#whychoosereplens .col70 {width:100%;}
#whychoosereplens .col70 img {width: 100%;}

#vaginaldryness .col40{width:100%;}
#vaginaldryness .col60{width:100%;}
#vaginaldryness .col40 p {width: 100%;}
#vaginaldryness .content {
    padding-top: 40px;
    padding-bottom: 50px;
}

}


@media only screen and (max-width: 800px) {

#vaginaldryness .col25 {width: 100%;margin-top:0px;}
#vaginaldryness .col35 {width: 100%;margin-top:0px;}
#vaginaldryness .col40 {width: 100%;margin-top:0px;}

#nasalhygiene .grid {display:block;}
#nasalhygiene h2 {margin-bottom: 20px;}
#nasalhygiene p {width:100%;}
#nasalhygiene .content {
    padding-bottom: 0px;
}
.supportspan {
    font-size: 22px;
    line-height: 20px;
    font-weight: 900;
    color: #003DA5;
}
#rangerow1 {display:block;}
#rangerow1 h2 {
    font-size: 70px;
    line-height: 65px;
    text-align: left;
    margin-top: 20px;
    color: #003DA5;
    margin-bottom: 0px;
}

.formulationsblock .grid {display:block;}
.formulationsblock .griditem img {width:200px!important;}

.formulationstitle {
    width: auto;
    line-height: 38px;
    margin: 0 auto;
    background-color: #F7F7F7;
    color: #003DA5;
    font-size: 28px;
    text-align: center;
    margin-bottom: -17px;
    z-index: 8;
    position: relative;
    max-width: auto;
    width: 430px;
    font-weight: 900;
}



#howdoesitwork .grid {display:block;}
#howdoesitwork .griditem {
    height: 440px;
    border-radius: 20px;
    margin-bottom: 20px;
    position: relative;
}

.videogrid {display:block;}

}

@media only screen and (max-width: 750px) {
#effectiveforall .grid {display:block;}
#effectiveforall .griditem {height:200px;}
.rangeblock img {margin-bottom: -80px!important;}

.answergridwrap {
    display: block;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    grid-auto-rows: 1fr;
}

}

@media only screen and (max-width: 700px) {
.hcpop {width:80%;}
#references .listholder {column-count: 1; column-gap: 25px; column-fill: balance; width:100%; border-top: 1px solid #2E008B;padding-top:30px;}

}

@media only screen and (max-width: 660px) {

  .kit30 {display:none;}
  .kit40 {display:none;}
  .kit60 {width:100%;}
  .kit70 {width:100%;}
  .kit75 {width:100%;}

#cta2 .grid {display:block;}
#cta2 p {text-align:center!important;}
#clinicalevidence .cesplittext {
    width: 100%;
    float: left;
}
#clinicalevidence .ceimage {
    width: 100%;
    float: left;
    margin-top: 25px;
}

#heroblock {margin-top:50px;}

#heroblock .content {
    max-width: 1200px;
    padding-top: 150px;
    height: auto;
    position: relative;
    padding-bottom:30px;
}

#heroblock img {
    position: relative;
    width: 95%;
    padding-left:2.5%;
    height: auto;
    right: auto;
    bottom: auto;
    z-index: 3;
}

#heroblock .strip {display:none;}

#heroblock h2 {/*display:none;*/ position:relative; width:100%; text-align:center; font-size:36px; left:auto;line-height: 34px;margin: 0 auto;padding-bottom: 25px;}
#heroblock h3 {/*display:none;*/ position:relative; width:100%; text-align:center; font-size:20px; left:auto;line-height: 24px;margin: 0 auto;}

#vaginaldryness .content {padding-top:40px;padding-bottom:30px;}
#whychoosereplens .content {padding-top: 30px;}
#answergrid .content {
    padding-top: 40px;
    padding-bottom: 40px;
}
#clinicalevidence {
    padding-top: 30px;
    padding-bottom: 30px;
}

#howreplensworks {
    padding-top: 30px;
    padding-bottom: 30px;
}

#lastingdifference .content {
    padding-top: 60px;
    padding-bottom: 30px;
}

#references .content {
    /* border-top: 1px solid #2E008B; */
    padding-bottom: 70px;
    padding-top: 20px;
}

}

@media only screen and (max-width: 618px) {
#mainheader {position:fixed; top:80px;}
}

@media only screen and (max-width: 580px) {
#cta1 img {width:100%; height:auto;}
.footer {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 25px;
    font-size: 16px;
    color: #000000;
}
.footerlogo {
    width: 100px;
    height: auto;
    position: relative;
    left: calc(50% - 60px);
    top: auto;
}
.copyright {
    font-size: 14px;
    display: block;
    text-align:center;
}
.footerlinks {
    display: inline-block;
    margin-left: auto;
    text-align: center;
}

}

@media only screen and (max-width: 551px) {
  /*#mainheader {position:fixed; top:60px;}*/
  .nicetext {
    max-width: 800px;
    float: right;
    font-weight: 900;
    font-size: 20px;
    color: #003DA5;
}
.niceblock {width:auto; border-radius:20px; border:1px solid #003DA5; padding:10px;display:block; overflow:hidden;margin-bottom: 50px;}
}

@media only screen and (max-width: 513px) {
    .rangeblock img {
        margin-bottom: -50px !important;
    }

    #references .listholder {
    column-count: 1;
    column-gap: 25px;
    column-fill: balance;
    width: 100%;
}

#introduction h2 {
    font-size: 50px;
    line-height: 55px;
    text-align: left;
    margin-top: 7px;
    margin-bottom: 15px;
}
#nasalhygiene h2 {
    font-size: 50px;
    line-height: 55px;
    text-align: left;
    margin-top: 20px;
    color: #003DA5;
}

#rangerow1 h2 {
    font-size: 50px;
    line-height: 55px;
    text-align: left;
    margin-top: 20px;
    color: #003DA5;
    margin-bottom: 0px;
}

#howdoesitwork h2 {
    font-size: 50px;
    color: #003DA5;
    margin-bottom: 40px;
    line-height: 55px;
}

}

@media only screen and (max-width: 470px) {

  .mobilehero {
    display: block;
    padding-top: 140px;
}
}

@media only screen and (max-width: 450px) {
  .formulationstitle {
      width: auto;
      line-height: 24px;
      margin: 0 auto;
      background-color: #F7F7F7;
      color: #003DA5;
      font-size: 24px;
      text-align: center;
      margin-bottom: -17px;
      z-index: 8;
      position: relative;
      max-width: auto;
      width: 220px;
      font-weight: 900;
  }
  #heroblock h2 {/*display:none;*/ position:relative; width:100%; text-align:center; font-size:26px; left:auto;line-height: 28px;margin: 0 auto;padding-bottom: 25px;}
  #heroblock h3 {font-size: 16px;}
  #heroblock .superscript {font-size:10px;}
}

@media only screen and (max-width: 390px) {
  /*#mainheader {position:fixed; top:100px;}*/

}

@media only screen and (max-width: 397px) {
.nicelogo {
    width: 100%;
    float: left;
    padding-top: 7px;
}

.topnotice p span{font-size:15px;line-height: 11px;}

}