/*=====* Updated global styles 6-7-21 -0B1 *=====*/

/* utilities */
.relative{
    position: relative;
}
.no-scroll{
    overflow-y: hidden;
}

.v-center{
    display: flex;
    align-items: center;
}

.mbl-hide{display: block;}
    @media only screen and (max-width: 991px){ .mbl-hide{display: none;}}
.mbl-show{display: none!important;}
    @media only screen and (max-width: 991px){ .mbl-show{display: block!important;}}

/* button styles */
a.cont-button{
    display: block;
    position: relative;
    text-align: center;
    font-size: 14px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    padding:13px 0;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 25px;
    border-width: 3px;
    border-style: solid;
    background-color:transparent;
    cursor: pointer;
    z-index: 0;
}
        @media only screen and (max-width: 991px){
            a.cont-button{
                font-size:13px;
                width:100%!important;
            }
        }
a.cont-button:hover,
a.cont-button:active{
    text-decoration: none;
}
a.cont-button:after{
    content: "";
    display: block;
    position:absolute;
    top:-3px;
    right:-4px;
    border-radius: 25px;
    height:46px;
    z-index: -1;
    opacity: 1;
    /*transition: width 0.3s,opacity 0.05ms 0.04s;*/
    transition: opacity 0.3s;
}
        @media only screen and (max-width: 991px){
            a.cont-button:after{
                width:102%!important;
            }
        }
a.cont-button:hover:after{
    /*width:0!important;*/
    opacity: 0;
    /*transition: width 0.3s,opacity 0.05ms 0.16s;*/
}


/*======================================* Hero @START *===*/
.cont-hero{
    background-color: #C0198D;
    padding:240px 0 90px;
    overflow: hidden;
}
        @media only screen and (max-width: 991px){
            .cont-hero {
                padding:210px 0 70px;
            }
        }
.cont-hero img[data-bkg-element]{
    display: block;
    position: absolute;
    max-width: none!important;
    transition:
            top 1s,
            left 1s,
            bottom 1s,
            right 1s,
            width 1s,
            height 1s,
            transform 1s;
}

.cont-hero h1 {
    display: block;
    position: relative;
    font-size: 53px;
    line-height: 62px;
    width: fit-content;
    margin-bottom:30px;
    padding-bottom:30px;
}
.cont-hero h1:after{
    content: "";
    display: block;
    position: absolute;
    bottom:0;
    left:0;
    height: 2px;
    width:95%;
    border-radius: 1px;
    background-color:#ffffff;
}
        @media only screen and (max-width: 991px){
            .cont-hero h1 {
                font-size: 40px;
                line-height: 47px;
                padding-bottom:30px;
            }
            .cont-hero h1:after{
                width:100%!important;
            }
        }
.cont-hero h1 sup.cont-reg {
    font-family: 'Helvetica Neue LT 47 Light Condensed', sans-serif;
    font-weight: normal;
    font-size: 35%!important;
    position: relative;
    top: -25px;
}
        @media only screen and (max-width: 991px){
            .cont-hero h1 sup.cont-reg {
                top: -18px;
            }
        }
.cont-hero h2{
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin:0 0 10px;
    padding:0;
}
        @media only screen and (max-width: 991px){
            .cont-hero h2{
                font-size: 17px;
            }
        }

.cont-hero p {
    font-size:18px;
    line-height: 26px;
    font-weight: normal;
}

/* Patch image */
.cont-hero img{
    display: block;
    width: 100%;
    max-width: 270px;
    height: auto;
    margin: 0 auto;
}
        @media only screen and (max-width: 991px){
            .cont-hero img{
                max-width: 240px;
            }
        }

.cont-hero p.footnote{
    display: block;
    position: absolute;
    bottom:0;
    right:0;
    color:#ffffff;
    font-size: 14px;
    line-height: 16px;
    text-align: right;
    margin:0;
    padding:0;
}
        @media only screen and (max-width: 991px){
            .cont-hero p.footnote{
                display: block;
                position: relative;
                padding-top:7px;
                bottom:auto;
                right:auto;
                line-height: 16px;
                text-align: center;
            }
        }
/* global Hero @END */

/*======================================* References @START *===*/
.cont-references{
    padding:70px 15px 60px;
}
@media only screen and (max-width: 991px){
    .cont-references{
        padding:60px 15px 60px;
    }
}
.cont-references p{
    display: block;
    width:100%;
    max-width: 1200px;
    color:#6C6D70;
    font-size:17px;
    line-height: 22px;
    margin:0 auto;
    padding:0 10px;
}
.cont-references p strong{
    font-family: "Helvetica Neue LT Std 77 Bold Condensed", Helvetica, sans-serif;
    color:#6C6D70;
    font-size:17px;
    line-height: 22px;
    margin:0;
    padding:0;
}/* Global References @END */


/*======================================* page specific overrides @START *===*/
/* TODO: clean up code base - remove PHP and unused files - Create Sass build into singular css sheet -0B1 */
/* TODO: once Sass build is implemented - create page specific sass for below overrides of global styles -0B1 */


.cont-hero.transdermal-hormone-delivery{padding: 240px 0 40px;}

.cont-hero.twirla-savings,
.cont-hero.patch-replacement,
.cont-hero.patient-considerations,
.cont-hero.skin-fusion,
.cont-hero.adhesion-data,
.cont-hero.safety-and-tolerability,
.cont-hero.application-schedule{padding: 240px 0 30px;}
.cont-hero.patch-placement{padding: 200px 0 30px;}

        @media only screen and (max-width: 991px){
            .cont-hero.transdermal-hormone-delivery {
                padding:210px 0 100px;
            }
            .cont-hero.twirla-savings,
            .cont-hero.patch-replacement,
            .cont-hero.patient-considerations,
            .cont-hero.skin-fusion,
            .cont-hero.adhesion-data,
            .cont-hero.safety-and-tolerability,
            .cont-hero.application-schedule{
                padding: 210px 0 30px;
            }
            .cont-hero.skin-fusion{
                padding: 210px 0 70px;
            }
        }

/* H1 */
.cont-hero.patch-replacement h1,
.cont-hero.patch-placement h1{padding-bottom:0;}
        @media only screen and (max-width: 450px){
            .cont-hero.twirla-savings h1{
                padding-right:15%;
            }
        }


.cont-hero.skin-fusion h1:after,
.cont-hero.demonstrated-efficacy h1:after,
.cont-hero.secure-trial h1:after{
    width:100%;
}
.cont-hero.transdermal-hormone-delivery h1:after{
    width:76%;
}
.cont-hero.twirla-savings h1:after,
.cont-hero.patch-replacement h1:after,
.cont-hero.patient-considerations h1:after,
.cont-hero.patch-placement h1:after,
.cont-hero.adhesion-data h1:after,
.cont-hero.safety-and-tolerability h1:after,
.cont-hero.application-schedule h1:after{
    display: none;
}

/* H2 */
.cont-hero.secure-trial h2{color:#B9E5FB;}
.cont-hero.demonstrated-efficacy h2{color:#EBEBEC;}
.cont-hero.transdermal-hormone-delivery h2{color:#FCD3C1;}
.cont-hero.application-schedule h2{color:#FCD3C1;}
.cont-hero.safety-and-tolerability h2{color:#B9E5FB}
.cont-hero.adhesion-data h2{color:#8FC9B7;}
.cont-hero.skin-fusion h2{color:#8FC9B7;}
.cont-hero.patch-placement h2{color:#FCD3C1;}
.cont-hero.patient-considerations h2{color:#B9E5FB;}
.cont-hero.patch-replacement h2{color:#EBEBEC;}
.cont-hero.twirla-savings h2{color:#EBEBEC;}

.cont-hero h1 br,
.cont-hero h2 br{display:none;}
        @media only screen and (max-width: 450px){
            .cont-hero h1 br,
            .cont-hero h2 br{display:inline;}
        }

.cont-hero p strong {
    font-family: "Helvetica Neue LT Std 77 Bold Condensed", Helvetica, sans-serif;
}


/*================================================== background line placement */
/* secure trial hero */
.cont-hero.secure-trial img[data-bkg-element='1']{
    width:656px;
    height:auto;
    top: -155px;
    right: -200px;
}
.cont-hero.secure-trial img[data-bkg-element='2']{
    width:476px;
    height:auto;
    bottom:0;
    right:0;
}
        @media only screen and (max-width: 991px){
            .cont-hero.secure-trial img[data-bkg-element='1']{width:456px;top: -89px;right: -195px;}
            .cont-hero.secure-trial img[data-bkg-element='2']{width:276px;bottom:-40px;right:-35px;}
        }

/* demonstrated efficacy hero */
.cont-hero.demonstrated-efficacy img[data-bkg-element='1']{
    width:656px;
    height:auto;
    top: -155px;
    right: -200px;
}
.cont-hero.demonstrated-efficacy img[data-bkg-element='2']{
    width:394px;
    height:auto;
    bottom:0;
    right:0;
}
        @media only screen and (max-width: 991px){
            .cont-hero.demonstrated-efficacy img[data-bkg-element='1']{width:456px;top: -89px;right: -195px;}
            .cont-hero.demonstrated-efficacy img[data-bkg-element='2']{width:276px;bottom:-40px;right:-35px;}
        }

/* transdermal hormone delivery hero */
.cont-hero.transdermal-hormone-delivery img[data-bkg-element='1']{
    width:656px;
    height:auto;
    top: -155px;
    right: -200px;
}
.cont-hero.transdermal-hormone-delivery img[data-bkg-element='2']{
    width:394px;
    height:auto;
    bottom:0;
    right:0;
}
        @media only screen and (max-width: 991px){
            .cont-hero.transdermal-hormone-delivery img[data-bkg-element='1']{width:456px;top: -105px;right: -195px;}
            .cont-hero.transdermal-hormone-delivery img[data-bkg-element='2']{width:276px;bottom:-40px;right: -35px;}
        }

/* ============================================================ application schedule hero */
.cont-hero.application-schedule img[data-bkg-element='1']{
    width:120px;
    height:auto;
    bottom: -60px;
    left: -30px;
    transform: rotate(10deg);
}
.cont-hero.application-schedule img[data-bkg-element='2']{
    width:310px;
    height:auto;
    bottom:0;
    right:0;
}
        @media only screen and (max-width: 1450px){
            .cont-hero.application-schedule img[data-bkg-element='1']{bottom: -170px;left:50px;transform:rotate(-35deg);}
        }
        @media only screen and (max-width: 991px){
            .cont-hero.application-schedule img[data-bkg-element='1']{width:70px;bottom: -90px;left:0;}
            .cont-hero.application-schedule img[data-bkg-element='2']{width:174px;bottom: auto;right: -40px;top: 70px;transform: rotate(-65deg);}
        }

/* ============================================================ safety-and-tolerability hero */
.cont-hero.safety-and-tolerability img[data-bkg-element='1']{
    width:401px;
    height:auto;
    top: -200px;
    left: -270px;
}
.cont-hero.safety-and-tolerability img[data-bkg-element='2']{
    width:209px;
    height:auto;
    bottom:0;
    right: -15px;
}
        @media only screen and (max-width: 1450px){
            .cont-hero.safety-and-tolerability img[data-bkg-element='1']{width: 301px;top: -170px;left: -150px;transform: rotate(60deg);}
        }
        @media only screen and (max-width: 991px){
            .cont-hero.safety-and-tolerability img[data-bkg-element='1']{width: 201px;top: -60px;left:-130px;}
            .cont-hero.safety-and-tolerability img[data-bkg-element='2']{width: 109px;bottom: -80px;right: -20px;}
        }
/* safety-and-tolerability button */
a.temp-safety-tolerability.cont-button{
    color:#ffffff;
    width:200px;
    border-color:#B9E5FB;
}
a.temp-safety-tolerability.cont-button:hover {
    color: #B9E5FB;
    border-color:#B9E5FB;
}
a.temp-safety-tolerability.cont-button:after{
    width:202px;
    background-color:#77787B;
}
        @media only screen and (max-width: 991px){
            .temp-safety-tolerability.cust-float-right{
                width:100%;
            }
        }

/* ============================================================ adhesion-data hero */
.cont-hero.adhesion-data img[data-bkg-element='1']{
    width:694px;
    height:auto;
    top: -40px;
    left: -190px;
}
.cont-hero.adhesion-data img[data-bkg-element='2']{
    width:568px;
    height:auto;
    bottom:0;
    right: 0;
}
        @media only screen and (max-width: 991px){
            .cont-hero.adhesion-data img[data-bkg-element='1']{width: 494px;top: 30px;left: -350px;}
            .cont-hero.adhesion-data img[data-bkg-element='2']{width: 368px;right: -170px;transform: rotate(-55deg);}
        }

/* adhesion data button */
a.adhesion-data.cont-button{
    display: inline-block;
    color:#ffffff!important;
    width:200px;
    border-color:#B9E5FB;
}
a.adhesion-data.cont-button:hover {
    color: #B9E5FB!important;
    border-color:#B9E5FB;
}
a.adhesion-data.cont-button:after{
    width:202px;
    background-color:#77787B;
}
        @media only screen and (max-width: 991px){
            #adhesion-data .with-pink-wrapper a.adhesion-data.cont-button{
                padding:13px 0;
            }
        }


/* ============================================================ skin-fusion hero */
.cont-hero.skin-fusion img[data-bkg-element='1']{
    width: 774px;
    height: auto;
    bottom: -400px;
    left: -300px;
    transform: rotate(180deg);
}
.cont-hero.skin-fusion img[data-bkg-element='2']{
    width: 774px;
    height: auto;
    top: -90px;
    right: -110px;
}
        @media only screen and (max-width: 1450px){
            .cont-hero.skin-fusion img[data-bkg-element='1']{bottom: -430px;}
        }
        @media only screen and (max-width: 991px){
            .cont-hero.skin-fusion img[data-bkg-element='1']{width: 574px;bottom: -280px;left: -300px;}
            .cont-hero.skin-fusion img[data-bkg-element='2']{width: 574px;top: -40px;right: -350px;transform: rotate(95deg);}
        }

/* ============================================================ patch-placement hero */
.cont-hero.patch-placement img[data-bkg-element='1']{
    width: 376px;
    height: auto;
    top: -240px;
    right: -100px;
}
.cont-hero.patch-placement img[data-bkg-element='2']{
    width: 310px;
    height: auto;
    bottom:0;
    left:0;
}
        @media only screen and (max-width: 991px){
            .cont-hero.patch-placement img[data-bkg-element='1']{width: 176px;top:auto;bottom: 10px;right: -70px;transform: rotate(25deg);}
            .cont-hero.patch-placement img[data-bkg-element='2']{width: 153px;bottom: 0;left: -30px;transform: rotate(15deg);}
        }

/* patch-placement button */
a.patch-placement.cont-button{
    color:#ffffff!important;
    width:200px;
    border-color:#B9E5FB;
    display: inline-block;
}
@media only screen and (max-width: 991px){
    a.patch-placement.cont-button{
        margin-top:30px;
    }
}
a.patch-placement.cont-button:hover {
    color: #B9E5FB!important;
    border-color:#B9E5FB;
}
a.patch-placement.cont-button:after{
    width:202px;
    background-color:#77787B;
}

/* ============================================================ patient-considerations hero */
.cont-hero.patient-considerations img[data-bkg-element='1']{
    width:654px;
    height:auto;
    top: -20px;
    right: -20px;
}
.cont-hero.patient-considerations img[data-bkg-element='2']{
    width:186px;
    height:auto;
    bottom:0;
    left: 0;
}
        @media only screen and (max-width: 991px){
            .cont-hero.patient-considerations img[data-bkg-element='1']{width: 454px;top: -20px;right: -250px;}
            .cont-hero.patient-considerations img[data-bkg-element='2']{width: 115px;bottom: 0;}
        }

/* patient considerations button */
a.patient-considerations.cont-button{
    display: inline-block;
    color:#ffffff!important;
    width:350px;
    border-color:#D052A9;
}
@media only screen and (max-width: 991px){
    a.patient-considerations.cont-button{
        margin-top:30px;
    }
}
a.patient-considerations.cont-button:hover {
    color: #D052A9!important;
}
a.patient-considerations.cont-button:after{
    width:352px;
    background-color:#77787B;
}

/* ============================================================ patch-replacement hero */

.cont-hero.patch-replacement img[data-bkg-element='1']{
    width: 655px;
    height: auto;
    top: 0;
    right: -20px;
}
.cont-hero.patch-replacement img[data-bkg-element='2']{
    width: 200px;
    height: auto;
    bottom:0;
    left:0;
}
        @media only screen and (max-width: 1450px){
            .cont-hero.patch-replacement img[data-bkg-element='1']{top:auto;bottom: 120px;right: -260px;transform: rotate(75deg);}
        }
        @media only screen and (max-width: 991px){
            .cont-hero.patch-replacement img[data-bkg-element='1']{width: 455px;top:auto;bottom: 120px;right: -260px;transform: rotate(75deg);}
            .cont-hero.patch-replacement img[data-bkg-element='2']{width:110px;}
        }

/* ============================================================ twirla-savings hero */
.cont-hero.twirla-savings img[data-bkg-element='1']{
    width:588px;
    height:auto;
    top: -170px;
    right: -20px;
}
.cont-hero.twirla-savings img[data-bkg-element='2']{
    width:388px;
    height:auto;
    bottom:0;
    right: 0;
}
        @media only screen and (max-width: 991px){
            .cont-hero.twirla-savings img[data-bkg-element='1']{width: 388px;top: 40px;right: -244px;}
            .cont-hero.twirla-savings img[data-bkg-element='2']{width: 280px;bottom: 0;right: -180px;}
        }
/* page specific overrides @END */