/*
<!--------------------------------------------------------------->
<!-- LEVEL 1 Slider -->
<!--------------------------------------------------------------->
*/

.bg-gradient-1-2 {
    background-color: transparent;
    background: url(../images/bg-gradient-1-2.jpg) 50% 0% no-repeat,
                url(../images/bg-gradient-1-2-line.jpg) 50% 0%;
}

.level-1 {
    background-color: #FFDAD1;
}
.level-1 .col-lg-4 {
    background-image: url(../images/level-1-slide-text-bg.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 100%;
}

.level-1 h2 {
    font-family: 'Roboto-Black', sans-serif;
    font-size: 60px;
    color: #B2675A;
    display: inline-block;
    line-height: 1;
    margin-bottom: 20px;
}
.level-1 h2 span {
    font-size: 60px;
    letter-spacing: 2px;
    background-color: #FFFFFF;
    padding-bottom: 0;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 8px;
}

.level-1 .slide-2 h2 {
    font-family: 'Montserrat-ExtraBold-Italic', sans-serif;
    font-size: 74px;
    color: #FF8672;
}

.level-1 h3 {
    font-family: 'Roboto-Bold-Italic', sans-serif;
    font-size: 28px;
    color: #E73337;
}

.level-1 li {
    display: inline-block;
    font-family: 'Roboto-Medium', sans-serif;
    font-size: 28px;
    color: #848484;
}

.level-1 a.more-btn {
    display: inline-block;
    font-family: 'Montserrat-Medium-Italic', sans-serif;
    font-size: 18px;
    color: #202020;
    background-color: #FFFFFF;
    border-radius: 20px;
    text-decoration: none;
}
/*mobile fonts size */
@media only screen and (max-width: 767.98px) {
    .level-1 h2 {
        font-size: 35px;
    }
    .level-1 h2 span {
        font-size: 34px;
        letter-spacing: 1px;
    }

    .level-1 h3 {
        font-size: 18px;
    }

    .level-1 li {
        font-size: 16px;
    }
}


.slider-control-level {
    background: url(../images/level-1-slide-control-bg.jpg) 50% 0%;
    width: 100%;
}

.slider-control-level .row {
    height: 90px;
}

/*
<!--------------------------------------------------------------->
<!-- LEVEL 2 YouTube -->
<!--------------------------------------------------------------->
*/

#YouTubeCarouselControls .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23C7A299' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    width: 40px;
    height: 30px;
}
#YouTubeCarouselControls .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23C7A299' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    width: 40px;
    height: 30px;
}
@media only screen and (max-width: 767.98px) {
    #YouTubeCarouselControls .carousel-control-next-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    }
    #YouTubeCarouselControls .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    }
    
    #YouTubeCarouselControls iframe {
        width: 560px;
        height: 340px;
        max-width: 100%;
    }
}

/*
<!--------------------------------------------------------------->
<!-- LEVEL 3 product-1 Labium Advans-->
<!--------------------------------------------------------------->
*/

.level-3,
.level-4 {
    overflow-x: hidden!important;
}

.level-3 {
    background-color: #F6A8B8;
}
.level-3 .col-lg-7 {
    background-color: #FFFFFF;
}

.level-3 h1 {
    font-family: 'Roboto-Black', sans-serif;
    font-size: 60px;
    color: #B46157;
}
.level-3 h1 span {
    font-size: 56px;
    color: #FFFFFF;
    background-color: #FF8570;
    display: inline-block;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.level-3 p {
    font-family: 'Roboto-Regular', sans-serif;
    font-size: 20px;
    color: #575756;
    text-align: justify;
    line-height: 1.25;
    padding-top: 7px;
}

.level-3 p>img{
    margin-top: -7px;
}
.level-3 p span {
    font-family: 'Roboto-Medium', sans-serif;
    font-size: 20px;
    color: #FF423A;
}

.level-3 .above-photo {
    position: absolute;
    bottom: 80px;
    left: 10px;
    display: inline-block;
    width: 180px;
    height: 28px;
    font-family: 'Roboto-Medium', sans-serif;
    font-size: 17px;
    line-height: 1.2;
    text-align: center;
    color: #FFFFFF;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
    background: rgb(208,151,146);
    background: -moz-linear-gradient(90deg, rgba(208,151,146,1) 0%, rgba(167,82,72,1) 98%);
    background: -webkit-linear-gradient(90deg, rgba(208,151,146,1) 0%, rgba(167,82,72,1) 98%);
    background: linear-gradient(90deg, rgba(208,151,146,1) 0%, rgba(167,82,72,1) 98%);
}


.level-3 .col-12 p {
    font-family: 'Roboto-Regular', sans-serif;
    font-size: 12px;
    color: #FFFFFF;
}

@media only screen and (max-width: 991.98px) {
    .level-3 .above-photo {
        position: static;
    }
}
@media only screen and (max-width: 767.98px) {
    .level-3 h1 {
        font-size: 36px;
    }
    .level-3 h1 span {
        font-size: 34px;
    }
    .level-3 p {
        font-size: 18px;
        line-height: 1.15;
        padding-top: 7px;
    }
    .level-3 p>img{
        margin-top: -7px;
    }
    .level-3 p span {
        font-size: 18px;
    }
    .level-3 .above-photo {
        font-size: 16px;
        line-height: 1.2;
        position: static;
    }
    .level-3 .col-12 p {
        font-size: 10px;
    }
}

.level-3 a.buy-btn:hover img:not(.btn-hover),
.level-3 a.buy-btn img.btn-hover {
    display: none;
}

.level-3 a.buy-btn:hover img.btn-hover {
    display: inline-block;
}

.level-4 .pictos-lips .origin-img,
.level-3 .pictos-lips .origin-img {
    display: inline-block;
}

.level-4 .pictos-lips .change-img,
.level-3 .pictos-lips .change-img {
    display: none;
}

.level-4 .pictos-lips,
.level-3 .pictos-lips {
    position: absolute;
    bottom: 0;
    left: 0;
}

/*
<!--------------------------------------------------------------->
<!-- LEVEL 4 product-2 Labium -->
<!--------------------------------------------------------------->
*/

.bg-gradient-4 {
    background: rgb(239,201,192);
    background: -moz-linear-gradient(top, rgba(239,201,192,1) 0%, rgba(255,255,255,1) 80%, rgba(239,201,192,1) 95%);
    background: -webkit-linear-gradient(top, rgba(239,201,192,1) 0%, rgba(255,255,255,1) 80%, rgba(239,201,192,1) 95%);
    background: linear-gradient(to bottom, rgba(239,201,192,1) 0%, rgba(255,255,255,1) 80%, rgba(239,201,192,1) 95%);
}

.level-4 .col-lg-7 {
    background-color: #FFFFFF;
}

.level-4 h2 {
    font-family: 'Roboto-Black', sans-serif;
    font-size: 55px;
    color: #FFFFFF;
    background-color: #FF7D69;
    display: inline-block;
}

.level-4 p {
    font-family: 'Roboto-Regular', sans-serif;
    font-size: 20px;
    color: #575756;
    text-align: justify;
    line-height: 1.25;
    padding-top: 7px;
}

.level-4 p>img{
    margin-top: -7px;
}

.level-4 p span {
    font-family: 'Roboto-Medium', sans-serif;
    font-size: 20px;
    color: #FF423A;
}

.level-4 .above-photo {
    font-family: 'Roboto-Medium', sans-serif;
    font-size: 17px;
    color: #FFFFFF;
    background-color: #FF8570;
    position: absolute;
    bottom: 80px;
    left: 0;
    clip-path: polygon(0 0, 90% 0, 100% 20%, 100% 100%, 10% 100%, 0 80%);
}

.level-4 .col-12 p {
    font-family: 'Roboto-Regular', sans-serif;
    font-size: 12px;
    color: #BDAEAB;
}

@media only screen and (max-width: 767.98px) {
    .level-4 h2 {
        font-size: 36px;
    }
    .level-4 h2 span {
        font-size: 34px;
    }
    .level-4 p {
        font-size: 18px;
        line-height: 1.15;
        padding-top: 7px;
    }
    .level-4 p>img {
        margin-top: -7px;
    }
    .level-4 p span {
        font-size: 18px;
    }
    .level-4 .above-photo {
        font-size: 16px;
        line-height: 1.2;
        position: static;
    }
    .level-4 .col-12 p {
        font-size: 10px;
    }
}

.level-4 .samolik-img {
    opacity: 0; /*animation*/
}

.level-4 a.buy-btn:hover img:not(.btn-hover),
.level-4 a.buy-btn img.btn-hover {
    display: none;
}

.level-4 a.buy-btn:hover img.btn-hover {
    display: inline-block;
}

/*
<!--------------------------------------------------------------->
<!-- LEVEL 5 About -->
<!--------------------------------------------------------------->
*/

.bg-gradient-5 {
    background-color: transparent;
    background: url(../images/bg-gradient-5.jpg) 50% 0% no-repeat,
                url(../images/bg-gradient-5-line.jpg) 50% 0%;
}

.level-5 h3 {
    font-family: 'Roboto-Medium', sans-serif;
    font-size: 38px;
    color: #FF7D69;
} 

.level-5 li,
.level-5 p {
    font-family: 'Roboto-Regular', sans-serif;
    font-size: 21px;  
    color: #3C3C3B;
    line-height: 1.35;
    opacity: 0; /*animation*/
} 
.level-5 p {
    text-align: justify;
}

.level-5 h4 {
    font-family: 'Roboto-Medium', sans-serif;
    font-size: 21px;  
    color: #FF7D69;
    opacity: 0; /*animation*/
}

.level-5-1 .level-5-1-1 {
    padding-top: 60px;
}
.level-5-1 .level-5-1-1 img {
    margin-top: -60px;
}

.level-5-1 h4 {
    padding-top: 20px;
}
.level-5-1 h4 img{
    margin-top: -20px;
}
.level-5-1 ul {
    line-height: 1.7;
}

@media only screen and (min-width: 767.98px) {
    .level-5-2 img {
        margin-top: -33px;
    }
    .level-5-3 img {
        margin-top: -6px;
    }
    .level-5-4 > img {
        margin-top: -42px;
    }
    .level-5-5 > img {
        margin-top: -9px;
    }
}

@media only screen and (max-width: 767.98px) {
    .level-5 h3 {
        font-size: 28px;
    } 
    .level-5 li,
    .level-5 p {
        font-size: 16px;  
    }
    .level-5 h4 {
        font-size: 18px;  
        color: #FF7D69;
    }
    .level-5-1 .level-5-1-1 {
        padding-top: 20px;
    }
    .level-5-1 .level-5-1-1 img {
        margin-top: 0px;
    }
    .level-5-1 h4 {
        padding-top: 20px;
    }
    .level-5-1 h4 img{
        margin-top: 0px;
    }
    .level-5-1 ul {
        line-height: 1.4;
    }
}