@font-face { font-family: 'NewYorkLarge-MediumItalic'; src: url("//assets.lifecellskin.com/offers/fonts/NewYorkLarge-MediumItalic.otf"); font-weight: 500; font-style: italic; }
@font-face { font-family: 'NewYorkLarge-Regular'; src: url("//assets.lifecellskin.com/offers/fonts/NewYorkLarge-Regular.otf"); font-weight: 400; font-style: normal; }
@font-face { font-family: 'NewYorkLarge-Bold';    src: url("//assets.lifecellskin.com/offers/fonts/NewYorkLarge-Bold.otf");    font-weight: 700; font-style: normal; }

* { 
    box-sizing: border-box; 
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body { 
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin: 0;
} 
.body-wrapper {
    overflow: hidden;
}
/*
    ====== Reusables ======
*/
.container {
    /*width: 90%;
    max-width: 1000px; */
    padding: 0 15px;
    max-width: 1030px;
    margin: 0 auto;
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: space-between;
    justify-content: space-between;
}
.col {
    width: 100%;
}
.nowrap {
    white-space: nowrap;
}
.cta {
    font: 500 22px/1em 'Roboto', sans-serif;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    width: 100%;
    max-width: 361px;
    height: 56px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(2, 113, 202);
    background-color: rgb(6,115,202);
    background-image: -moz-linear-gradient( 90deg, rgb(6,115,202) 0%, rgb(36,138,219) 51%, rgb(65,161,236) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(6,115,202) 0%, rgb(36,138,219) 51%, rgb(65,161,236) 100%);
    border-radius: 5px;
    margin: 0 auto;
    transition: all 0.35s;
}
.cta:hover, .cta:focus {
    background-color: rgba(6, 93, 202,.9);
    background-image: -moz-linear-gradient( 90deg, rgba(6, 93, 202,.9) 0%, rgb(36, 118, 219) 51%, rgb(65, 165, 236) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgba(6, 93, 202,.9) 0%, rgb(36, 118, 219) 51%, rgb(65, 165, 236) 100%);
}
.mbg {
    font: 500 13px/2em 'Roboto', sans-serif;
    display: block;
    color: #3C3C3C;
    text-align: center;
    margin: 0;
}

.hidden {
    display: none;
}
/*
    ====== Sections ======
*/
.body-wrapper {
  background: url(//assets.lifecellskin.com/offers/images/2020/jul/lip/top-body-bg4.jpg) center top repeat-x;
}
.top-bar {
    background: #EAEAEA url(//assets.lifecellskin.com/offers/images/2020/jul/lip/lifecell-logo.svg) center no-repeat;
    height: 50px;
}
.hero-center {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: space-around;
    justify-content: space-around;
    min-height: 430px;
    align-items: center;
  }
.hero-img-wrap {
    width: 419px;
    height: 377px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    align-items: center;
    background: url(//assets.lifecellskin.com/offers/images/2020/jul/lip/lipsimage@2x.png) center no-repeat;
    background-size: cover; 
}
.benefit-list {
    position: relative;
    list-style: none;
    width: 419px;
    height: 377px;
    padding: 0;
    margin: 0;
}
.benefit-list li {
    position: absolute;
}
.benefit-list li:nth-child(1) {
    top: 20%; /*top: 78px;*/
    left: 11%; /*left: 45px;*/
}
.benefit-list li:nth-child(2) {
    top: 20%; /*top: 74px;*/
    left: 58%; /*left: 243px;*/
}
.benefit-list li:nth-child(3) {
    top: 56%; /*top: 210px;*/
    left: 19%; /*left: 81px;*/
}
.benefit-list li:nth-child(4) {
    top: 56%; /*top: 206px;*/
    left: 60%; /*left: 252px;*/
}
.hero-text-wrap {
    width: 100%;
    max-width: 361px;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
.hero .container {
    width: 100%;
}
.title {
    font: 400 25px/1.2em 'Roboto', sans-serif;
    color: #3C3B3B;
    text-align: center;
    margin-bottom: 1em;
}
.hero-text {
    background-color: #444544;
    border-radius: 6px;
    padding: 15px 20px;
    color: #ffffff;
    text-align: center;
    width: 100%;
    margin: 0 auto 20px;
}
.hero-text h1 {
    font: 400 20px/1.2em 'Roboto',sans-serif;
    text-transform: none;
    color: #ffffff;
    width: 100%;
    margin: 0;
    letter-spacing: 0;
}
.hero-text p {
    font: 400 14px/1.2em 'Roboto',sans-serif;
    width: 75%;
    margin: 0 auto;
}
.hero-text h1:after {
    content: '';
    display: block;
    margin: 10px auto;
    height: 1px;
    width: 52%;
    background-color: #ffff;
}
.feature-section {
    background-color: #E0E0E9;
}
.ft-center {
    min-height: 80px;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    padding: 5px 0;
    -ms-flex-pack: space-around;
    justify-content: space-around;
}
.ft-list {
    list-style: none;
    width: 100%;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
}
.ft-list li {
    font: 500 21px/1.8em 'Roboto', sans-serif;
    color: #232B2E;
    /*min-width: 220px;*/
    margin-right: 25px;
}
.ft-list li:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(//assets.lifecellskin.com/offers/mobile/images/2020/jul/lip/point.svg) no-repeat;
    background-size: contain;
    margin-right: 15px;

}
.ft-list li:last-child {
    margin-right: 0;
}
.mbg-wrap {
    width: 100px;
}
.mbg-wrap img {
    display: block;
    margin: 0 auto;
    width: 65px;
    box-sizing: content-box;
}
.lm-section {
    background: linear-gradient(to bottom, rgba(234,234,234,1) 0%, rgba(237,237,237,1) 100%);
}
.lm-center {
    align-items: center;
}
.lm-content-wrap {
    flex: 1;
    padding: 25px 0;
}
.lm-product {
    flex: 1;
}
.logo-set {
    text-align: right;
    padding: 10px 0;
}
.free-ico {
    width: 68px;
}
.usa-ico {
    width: 63px;
}
.patented-ico {
    width: 77px;
}
.logo-set img + img {
    margin-left: 45px;
}
.lm-content {
    text-align: right;
    padding-left: 5%;
}
.lm-content h2 {
    font: 500 20px/1em 'Roboto', sans-serif;
    color: #383434;
    margin-bottom: 0;
}
.lm-content p {
    font: 400 15px/1.6em 'Roboto', sans-serif;
    color: #383434;
    margin-top: .5em;
    margin-bottom: 1.7em;
}
.lm-product img {
    display: block;
    margin: 0 auto;
    max-width: 411px;
    width: 100%;
    box-sizing: content-box;
    padding-left: 5%;
}
.lm-section .cta {
    margin-right: 0;
}
.lm-section .mbg {
    width: 361px;
    margin-right: 0;
    margin-left: auto;
}
.lm-section .cta-wrapper {
    text-align: right;
}
.lg-center {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 901px;
    margin: 0 auto;
    padding: 20px 0;
}
.lg-center>div>img{
    width: 100%;
    margin: 0 auto;  
}
.ba1 img {
    max-width: 449px;
}
.ba2 img {
    max-width: 442px;
}
.review {
    color: #0B233F;
    background-color: #FFF7DD;
    position: relative;
    border-radius: 10px;
    padding: 15px 20px 25px 90px;
    margin-bottom: 20px;
}
.cr-center {
    max-width: 901px;
    margin: 0 auto;
    padding-bottom: 10px;
}
.section-title {
    font: 500 25px/1.2em 'Roboto', sans-serif;
    color: #010101;
    text-align: center;
}
.cr-center .section-title {
    margin-top: 0;
}
.cr-name  p {
    font: 400 16px/1.2em 'Roboto', sans-serif;
    margin: 0;
}
.cr-name p>b {
    font-weight: 700;
}
.cr-text p {
    font: 400 14px/1.4em 'Roboto', sans-serif;
    margin: 0;
    padding-left: 1%;
}
.gray {
    background-color: #F2F2F2;
}
.review:nth-child(even) {
    background-color: #F2F2F2;
}
.cr-rating>span {
    width: 20px;
    height: 18px;
    display: inline-block;
    background: url(//assets.lifecellskin.com/offers/mobile/images/lip/star.svg) center center no-repeat;
    background-size: contain;
    margin-right: 1px;
}
.cr-top-wrap {
    align-items: center;
    margin-bottom: 1em;
}
.cr-img {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}
.cr-img img {
    max-width: 77px;
}
.gallery-list {
    padding: 0;
    list-style: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    flex-wrap: wrap;
}
.gallery-list li {
    max-width: 151px;
    margin-bottom: 15px;
}
.gallery-list li img {
    width: 100%;
}
.mbg-section {
    background: url(//assets.lifecellskin.com/offers/images/2020/jul/lip/mbg-bg-large.jpg) center center no-repeat;
    background-size: cover;
}
.mbg-center {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: space-around;
    justify-content: space-around;
    align-items: center;
    padding: 30px 0;
}
.mbg-text {
    max-width: 430px;
    box-sizing: content-box;
}
.lip-wrap img {
    max-width: 313px;
    width: 100%;
    margin: 0 auto;
}
.mbg-wrap img {
    max-width: 108px;
    width: 100%;
    margin: 0 auto;
}
.mbg-text p {
    font: 400 18px/1.3em 'Roboto', sans-serif;
    color: #464949;
    text-align: center;
    padding-left: 3%;
}
.publication-section {
    padding: 25px 0 35px 0;
}
.pb-center {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .57);
    padding: 33px 25px;
    margin-top: -12px;
    flex-wrap: wrap;
}
.mag {
    flex: 1;
    min-width: 230px;
    box-sizing: content-box;
}
.mag p {
    text-align: center;
    font: 400 13px/1.4em 'Roboto', sans-serif;
    color: #464949;
    margin-top: .5em;
    margin-bottom: 0;
}
.mag img {
    display: block;
    margin: 0 auto;
}
.total-beauty {
    max-width: 240px;
}
.new-you {
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    max-width: 340px;
    min-width: 270px;
    margin: 0 3%;
}
.buzzfeed {
    max-width: 252px;
}
.total-beauty img {
    max-width: 240px;
}
.total-beauty p {
    margin-top: .25em;
    padding: 0 5%;
}
.new-you p {
    padding: 0 0 0 5%;
    flex: 1;
}
.new-you img {
    width: 74px;
}
.buzzfeed img {
    max-width: 161px;
}
.pb-title {
    font: 500 21px/1em 'NewYorkLarge-MediumItalic', serif;
    color: #010101;
    text-align: center;
    display: inline-block;
    padding: 0 30px;
    background-color: #fff;
    font-style: italic;
    position: relative;
    margin: 0 0 0 11%;
}
.pb-title:before, .pb-title:after  {
    content: '';
    background-color: #FFD5ED;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 4px);

}
.pb-title:before {
    left: 0;
}
.pb-title:after {
    right: 0;
}
.df-section {
    background-color: #D9D9D9;
}

.df-center {
    padding: 30px 0 25px;
}
.df-top-wrap{
    padding: 0 25px;
    margin-bottom: 40px;
    color: #464949;
    align-items: center;
}
.df-title {
    font: 400 30px/1.25em 'NewYorkLarge-Regular', sans-serif;
    margin: 0;
}
.df-text p {
    font: 400 20px/1em 'NewYorkLarge-Regular', sans-serif;
    margin: .6em 0 .25em 0;
}
.df-text p:first-child {
    margin-top: .3em;
}
.df-text p>span {
    font: 700 20px/1.3em 'NewYorkLarge-Bold', sans-serif;
}
.df-lip img {
    max-width: 303px;
}
.df-hd {
    padding: 25px 10px 25px 5px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    max-width: 310px;
}
.df-hd>div:first-child {
    flex-basis: 4px;
    border-radius: 2px;
    background-color: #464949;
    margin-right: 10px;
}
.df-hd>div:last-child {
    flex: 1;
}
.df-text {
    padding-right: 15px;
}
.line-percent {
    width: 100%;
    height: 4px;
    background-color: #707070;
    border-radius: 2px;
    position: relative;
    margin-bottom: 5px;
}
.line-percent div {
    position: absolute;
    height: 4px;
    overflow: hidden;
}
.line-percent div span {
    display: block;
    content: '';
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    height: 4px;
}
.lp1 .view-line span { animation: move 1s linear 1; background-color: rgb(55, 167, 219); }
.lp2 .view-line span { animation: move 1s linear .5s 1; background-color: rgb(55, 167, 219);}
.lp3 .view-line span { animation: move 1s linear 1s 1; background-color: rgb(55, 167, 219); }

@keyframes move {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.faq-center {
    max-width: 975px;
    margin: 0 auto;
    padding: 20px 0;
}
.faq {
    margin-bottom: 30px;
}
.faq .q, .faq .a>span {
    font: 500 17px 'Roboto', sans-serif;
}
.faq .q {
    margin-bottom: 5px;
}
.faq .a {
    font: 300 16px/1.35em 'Roboto', sans-serif;
    margin-bottom: 25px;
    margin-top: 0;
}
.faq-hd {
    margin-bottom: 1.25em;
}
.bottom-banner-section {
    min-height: 285px;
    height: auto;
    background: linear-gradient(to bottom, rgba(237,237,237,1) 0%, rgba(234,234,234,1) 100%);
    margin-bottom: 20px;
}
.bb-center {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: space-around;
    justify-content: space-around;
    align-items: center;
}
.bb-center>div {
    flex: 1;
}

.logo-set2 img {
    margin: 0 auto;
    display: block;
}
.bb-title-wrap h1 {
    font: 500 29px/1.2em 'Roboto', sans-serif;
    text-align: center;
    color: #000000;
}
.bb-content {
    min-width: 361px;
    max-width: 433px;
    padding-left: 5%;
    box-sizing: content-box;
}
.bb-product-wrap {
    max-width: 291px;
}
.logo-set2 {
    max-width: 80px;
}
.logo-set2 .free-ico, .logo-set2 .usa-ico {
    margin-bottom: 16px;
}
.ctn-center {
    border: 1px solid #D9D9D9; 
    background-color: #FAFAFA;
    padding: 25px;
    color: #676767;
}
.ctn-center h1 {
    font: 700 25px/1em 'Roboto', sans-serif; 
    margin-top: 0;
}
.ctn-center a {
    font: 300 15px/1.2em 'Roboto', sans-serif;
    color: #676767;
    margin-bottom: 15px;
    display: block;
    text-decoration: none;
    word-break: break-all;
}
.ctn-center a:last-child {
    margin-bottom: 0;
}
.ft-center {
    padding: 10px 0;
}
.copyright {
    font: 400 16px/1.2em, 'Roboto', sans-serif;
    color: #000000;
    text-align: center;
}


/* BlackFriday styles */
.blackfriday-wrapper {
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

.blackfriday-wrapper .blackfriday {
    display: flex;
    align-items: center;
    color: #3B4170;
    border-radius: 5px;
    border: 2px solid #3B4170;
    padding: 10px;
    width: 100%;
    max-width: calc(1000px - 30px);
    height: 60px;
    box-sizing: border-box;
    margin: 0 auto;
    background: #E2F4FF url(//assets.lifecellskin.com/offers/mobile/images/common/BlackFriday.svg) no-repeat left 32% top -12px;
    background-size: 120px auto;
}

.blackfriday-wrapper .bf1-col {
    flex: 1;
}

.blackfriday-wrapper .bf2-col {
    width: 65%;
    text-align: left;
}

.blackfriday-wrapper .bf1-col h2 {
    font: normal 18px/1em 'Avenir-Black', sans-serif;
    text-align: right;
    text-transform: uppercase;
    padding-right: 45px;
    padding-top: 2px;
}

.blackfriday-wrapper .bf2-col p {
    font: normal 18px/1em 'Avenir-Heavy', sans-serif;
    text-align: left;
    padding: 2px 0 0 42px;
}
/* End BlackFriday styles */






/*
    ====== Media Queries ======
*/
@media (max-width: 985px) {
    .ft-list {
        max-width: 500px;
    }
    .ft-list li {
        min-width: 220px;
    }
    .ft-center {
        -ms-flex-pack: center;
        justify-content: center;
    }
}
@media (max-width: 970px) {
    .gallery-list {
        max-width: 490px;
        margin: 0 auto;
    }
} 
@media (max-width: 940px) {
    .df-top-wrap {
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .df-hd {
        padding-left: 0;
        padding-right: 0;
        width: 300px;
    }
    .df-text {
        margin-bottom: 35px;
        padding-right: 0;
    }
    .df-lip img {
        box-sizing: content-box;
        padding: 0 20px;
    }
}
@media (max-width: 900px) {
    .bb-content {
        padding-left: 2%
    }

}
@media (max-width: 850px) {
    .hero-center {
        flex-direction: column;
        padding: 20px 0;
    }
    .hero-img-wrap {
        margin: 0 auto 15px;
    }
    .hero-text-wrap {
        margin: 0 auto;
    }
    .title-top {
        display: block;
        max-width: 419px;
        margin: .5em auto 1em;
    }
    .title-bottom {
        display: none;
    }
    .mbg-center {
        flex-direction: column-reverse;
    }
    .hidden-850 {
        display: none;
    }
    .display-850{
        display: block;
    }
    .pb-center {
        text-align: center;
        -ms-flex-pack: space-around;
        justify-content: space-around;
    }
    .mag {
        margin-bottom: 1.5em;
        padding: 0 2%;
    }
    .buzzfeed {
        margin-bottom: 0;
    }
}
@media (max-width: 767px) {
    .lm-center {
        flex-direction: column;
        max-width: 420px;
        margin: 0 auto;
        display: block;
    }
    .logo-set {
        text-align: center;
    }
    .lm-content {
        text-align: center;
        padding-left: 0;
    }
    .lm-section .cta-wrapper {
        text-align: center;
    }
    .lm-section .cta, .lm-section .mbg {
        margin-right: auto;
    }
    .lm-content-wrap {
        padding-bottom: 0;
    }
    .lg-center {
        flex-direction: column;
        max-width: 450px;
        margin: 0 auto;
    }
    .lm-section .mbg {
        width: 100%;
    }
    .bb-center {
        flex-direction: column;
    }
    .logo-set2 {
        display: -ms-flexbox;
        display: flex;
    }
    .hide-767 {
        display: none;
    }
    .logo-set3 {
        display: block;
        text-align: center;
    }
    .logo-set3 img + img {
        margin-left: 45px;
    }
    .bb-center {
        padding-bottom: 20px;
    }
    .bottom-banner-section .cta-wrapper {
        margin-bottom: 1em;
    }
    .bb-content {
        padding-left: 0;
    }
    .bb-title-wrap h1 {
        margin-top: 0;
    }
}
@media (max-width: 630px) {
    .ft-list {
        flex-direction: column;
    }
}
@media (max-width: 500px) {
    .cr-top-wrap {
        flex-direction: column;
    }
    .cr-name {
        width: 100%;
        margin-bottom: .5em;
    }
    .cr-rating {
        width: 100%;
    }
    .gallery-list {
        max-width: 320px;
    }

}
@media (max-width: 400px) {
    .ft-list li {
        margin-right: 0;
    }
    .logo-set img + img {
        margin-left: 20px;
    }
}
@media (max-width: 380px) {
    .benefit-list li:nth-child(1) {
        left: 1%; 
    }
    .benefit-list li:nth-child(2) {
        left: 58%;
    }
    .benefit-list li:nth-child(3) {
        left: 9%;
    }
    .benefit-list li:nth-child(4) {
        left: 50%; 
    }
}
@media (max-width: 330px) {
    .gallery-list li {
        max-width: 138px;
    }
}