@import "animate.min.css";

/****************/
 /* basic colors */
/****************/

.bg-primary{
    background-color: #DCBFA6!important;
}
.text-primary, .text-primary a{
    color: #DCBFA6!important;
}
.border-primary{
    border-color: #DCBFA6!important;
}
.separator-primary{
    min-height: 1px;
    border-bottom: 10px solid #DCBFA6;
}

.bg-secondary{
    background-color: #f9e7de!important;
}
.text-secondary, .text-secondary a{
    color: #f9e7de!important;
}
.border-secondary{
    border-color: #f9e7de!important;
}

.bg-tertiary{
    background-color: #67dad5!important;
}
.text-tertiary, .text-tertiary a{
    color: #67dad5!important;
}
.text-shadow-tertiary{
    text-shadow: -1px -1px 0 #40beb6, 1px -1px 0 #40beb6, -1px 1px 0 #40beb6, 1px 1px 0 #40beb6;
}
.border-tertiary{
    border-color: #67dad5!important;
}
.separator-tertiary{
    min-height: 1px;
    border-bottom: 10px solid #67dad5;
}
.separator-tertiary-light{
    min-height: 1px;
    border-bottom: 3px solid #67dad5;
}

.bg-dark{
    background-color: #5E514D!important;
}
.text-dark, .text-dark a{
    color: #5E514D!important;
}
.text-darkbrown{
    color: #503c38;
}
.border-dark{
    border-color: #82706c!important;
}
.separator-dark{
    min-height: 1px;
    border-bottom: 10px solid #5E514D;
}

.bg-light{
    background-color: #fbf1eb!important;
}
.text-light, .text-light a{
    color: #fbf1eb!important;
}
.border-light{
    border-color: #fbf1eb!important;
}

.bg-white{
    background-color: #fff!important;
}
.bg-white-80{
    background-color: rgba(255,255,255,0.8)!important;
}
.text-white, .text-white a{
    color: #fff!important;
}
.border-white{
    border-color: #fff!important;
}

.bg-black{
    background-color: #313434!important;
}
.text-black, .text-black a{
    color: #252525!important;
}
.border-black{
    border-color: #313434!important;
}

.bg-red{
    background-color: #ff504d!important;
}
.text-red, .text-red a{
    color: #ff504d!important;
}
.border-red{
    border-color: #ff504d!important;
}

.bg-lightmint{
    background-color: #d1f4f2!important;
}
.bg-ultralightmint{
    background-color: rgba(103,218,213,0.1)!important;
}
.bg-mediummint{
    background-color: rgba(103,218,213,0.5)!important;
}

.bg-grey-gradient{
    background: rgb(152,152,154);
    background: -moz-linear-gradient(180deg, rgba(152,152,154,1) 0%, rgba(204,204,207,1) 70%);
    background: -webkit-linear-gradient(180deg, rgba(152,152,154,1) 0%, rgba(204,204,207,1) 70%);
    background: linear-gradient(180deg, rgba(152,152,154,1) 0%, rgba(204,204,207,1) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#98989a",endColorstr="#bcbcbe",GradientType=1);    
}

.bg-brown-hair{
    background-color: #804d3c!important;
}
.bg-brown-hair-80{
    background-color: rgba(128,77,60,0.8)!important;
}
.bg-brown-hair-60{
    background-color: rgba(128,77,60,0.6)!important;
}
.text-brown-hair, .text-brown-hair a{
    color: #804d3c!important;
}
a.text-brown-hair:focus, a.text-brown-hair:hover {
    color: #1d2124!important;
}
.border-brown-hair{
    border-color: #804d3c!important;
}
.separator-brown-hair{
    min-height: 1px;
    border-bottom: 10px solid #804d3c;
}

.bg-pink{
    background-color: #fdcddb;
}



  /**********************/
 /* General typography */
/**********************/

body{
    font-family: 'Raleway', 'Lato', sans-serif;
    font-size:  1.25rem;
    line-height: 1.35em;
    counter-reset: faq1;
}

h1.section-title{
    margin-bottom:  0.8em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    
}

p, li{
    
}

strong, b{
    font-weight: 800;
}

.font-weight-500{
    font-weight: 500;
}
.font-weight-600{
    font-weight: 600;
}
.font-weight-bold{
    font-weight: 800 !important;
}

.warning{
    color:  #f55;
}

.lh-1-4{
    line-height: 1.4em;
}

.order-button button{
    font-weight: 600;
    cursor: pointer;
    transition: 0.4s;
    outline: none;
}

.order-button button:hover{
    filter: brightness(1.06);
    transform: scale(1.06);
}
.order-button button.bg-red:hover{
    filter: brightness(1.6);
}
.order-button button>p{
    margin-top: 0.1em;
}

.mw-100{
    max-width: 100% !important;
}


  /************/
 /*  header  */
/************/

header{
    position: relative;
}

section.slider-top.only-one-slide a[role=button], section.slider-top.only-one-slide ol.carousel-indicators{
    display:    none;
}

header .container-fluid.main-nav-wrapper{
    max-width: 1280px;
    position: relative;
    z-index:    99;
}

.homepage header{
    overflow: hidden;
}
.homepage .main-nav-wrapper:before{
    content: '';
    position: absolute;
    left: calc( -1 * (100vw - 100%) / 2 );
    right: calc( -1 * (100vw - 100%) / 2 );
    top: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.8);
}

nav#main-nav .nav-link{
    color: #5E514D;
    transition: 0.4s;    
}

nav#main-nav .nav-link:hover{
    filter: saturate(10);
}



nav#main-nav .navbar-toggler{
    border-color: rgba(94, 81, 77, 0.9);
}

nav#main-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(94, 81, 77, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


.homepage .nav-link {
    filter: brightness(0.4);
}

.homepage .carousel-item{
    height: 50vw;
    min-height: 400px;
    max-height: 700px;
    background-repeat: no-repeat;
}

.homepage .carousel-item.carousel-item-1{
    background-color: #ceae95;
    background-image: url('../img/slides/home-slide-1-woman.png');
    background-position: 65% bottom;
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
}

.homepage .carousel-item.carousel-item-1 a, .homepage .carousel-item.carousel-item-1 a:hover{
    text-decoration: none;
}

.homepage .carousel-item.carousel-item-1 .carousel-caption{
    bottom: 10px;
}

.homepage .carousel-item.carousel-item-1 .column-lash{
    position: relative;
    background-color: rgba(94, 81, 77, 0.8);
    transition: 0.4s;
}
.homepage .carousel-item.carousel-item-1 .column-lash:hover{
    background-color: rgba(94, 81, 77, 1);
}
.homepage .carousel-item.carousel-item-1 .column-lash:before{
    content: '';
    position: absolute;
    height: 100%;
    width: 300%;
    top: 0;
    left: -300%;
    background-color: rgba(94, 81, 77, 0.8);
    transition: 0.4s;
}
.homepage .carousel-item.carousel-item-1 .column-lash:hover:before{
    background-color: rgba(94, 81, 77, 1);
}

.homepage .carousel-item.carousel-item-1 .column-lash-interior{
    padding:    6vw 7vw;
}


.homepage .carousel-item.carousel-item-1 .column-brow{
    position: relative;
    background-color: rgba(220, 191, 166, 0.8);
    transition: 0.4s;
}
.homepage .carousel-item.carousel-item-1 .column-brow:hover{
    position: relative;
    background-color: rgba(220, 191, 166, 1);
}
.homepage .carousel-item.carousel-item-1 .column-brow:before{
    content: '';
    position: absolute;
    height: 100%;
    width: 300%;
    top: 0;
    right: -300%;
    background-color: rgba(220, 191, 166, 0.8);
    transition: 0.4s;
}

.homepage .carousel-item.carousel-item-1 .column-brow:hover:before{
    background-color: rgba(220, 191, 166, 1);
}

.homepage .carousel-item.carousel-item-1 .column-brow-interior{
    padding:    6vw 7vw;
}

.homepage .carousel-item.carousel-item-1 .lash-button{
    position: absolute;
    display: block;
    bottom: -1.1vw;
    right: 7vw;
    color: rgb(243,208,190);
    background-color: rgba(94, 81, 77, 1);
    font-size: 2vw;
    line-height: 1em;
    font-weight: 800;
    padding: 0.7vw 1.2vw 1.04vw 1.2vw;
    border-radius: 1.8vw;
}
.homepage .carousel-item.carousel-item-1 .brow-button{
    position: absolute;
    display: block;
    bottom: -1.1vw;
    left: 7vw;
    color: rgb(130,112,108);
    background-color: rgba(220, 191, 166, 1);;
    font-size: 2vw;
    line-height: 1em;
    font-weight: 800;    
    padding: 0.7vw 1.2vw 1.04vw 1.2vw;
    border-radius: 1.8vw;    
}

.homepage .carousel-item .home-logo-wrapper img{
    height: 5vw;
    max-height: 65px;
}

.homepage .header-quote{
    position: relative;
    font-family: Lato, sans-serif;
    margin-top: 4em;
    margin-bottom: 6em;
}
.homepage .header-quote:before{
    position: absolute;
    content: '„';
    font-family: Lato, sans-serif;
    font-size: 1.82em;
    font-weight: 600;
    left: -0.1em;
    top: -1.3em;
    opacity: 50%;
}
.homepage .header-quote:after{
    display: none;
    position: absolute;
    content: '';
    font-family: Lato, sans-serif;
    font-size: 1.82em;
    font-weight: 600;
    height: 2.2em;
    bottom: -2.2em;
    width: 5em;
    right: -2em;
    /*background-image: url('../img/tadla-signature.png');*/
    -webkit-background-size: contain;
    background-size: contain;
    background-position: right botttom;
    background-repeat: no-repeat;
    filter: drop-shadow(2px 2px 1px #afafb1);
}

.homepage header{
    position: relative;
}
.homepage header:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /*background-image: url('../img/slides/tadla.png');*/
    -webkit-background-size: auto 95%;
    background-size: auto 95%;
    background-position: 85% bottom;
    background-repeat: no-repeat;
    z-index: 0;
}
.homepage header>*{
    position: relative;
    z-index: 9;
}
.homepage #home-poster{
    min-height: max( 50vh, 400px );
    background-image: url('../img/slides/home-slide-1-woman.png');
    -webkit-background-size: 100% auto;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.homepage .home-logo-wrapper{
    padding-right: 3.3em;
    transition: 0.4s;
}
.homepage .home-logo-wrapper:hover{
    filter: brightness(1.2);
}
.homepage .home-logo-wrapper.home-logo-brow:hover{
    filter: brightness(1.07);
}
.homepage .home-logo-wrapper.home-logo-lash .home-logo-inner{
    position: relative;
    background-color: rgba(130,112,108,0.9);
}
.homepage .home-logo-wrapper.home-logo-brow .home-logo-inner{
    position: relative;
    background-color: rgba(243,208,190,0.9);
}
.homepage .home-logo-wrapper.home-logo-esthetic .home-logo-inner{
    position: relative;
    background-color: rgba(103,218,213,0.9);
}
.homepage .home-logo-wrapper.home-logo-hair .home-logo-inner{
    position: relative;
    background-color: rgba(128,77,60,0.9);
}
.homepage .home-logo-wrapper .home-logo-inner:after{
    content: ">>";
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3em;
    right: -3.3em;
    height: 100%;
    top: 0;
    color: #fff;
    font-weight: 700;
    font-family: 'Raleway', 'Lato', sans-serif;
    font-size: 1em;
}
.homepage .home-logo-wrapper.home-logo-lash .home-logo-inner:after{
    background-color: rgba(130,112,108,0.5);
}
.homepage .home-logo-wrapper.home-logo-brow .home-logo-inner:after{
    background-color: rgba(243,208,190,0.5);
}
.homepage .home-logo-wrapper.home-logo-esthetic .home-logo-inner:after{
    background-color: rgba(103,218,213,0.5);
}
.homepage .home-logo-wrapper.home-logo-hair .home-logo-inner:after{
    background-color: rgba(128,77,60,0.5);
}

.homepage .our-story-link{
    transition: 0.4s;
}

.homepage .our-story-link:hover{
    text-decoration: none;
    filter: opacity(0.5);
}

.carousel-caption{
    left: 0;
    right: 0;
}

.carousel-caption h1{
    font-size: 8vw;
    font-weight: 800;
}

.lash .carousel-caption .header-text{
    margin-bottom: 1vw;
}

.lash .carousel-caption h1{
    font-size: 6.5vw;
    font-weight: 800;
}
.brow .carousel-caption h1{
    font-size: 6vw;
    text-transform: uppercase;
    margin-top: 4vw;
}

.brow .carousel-caption h1, .brow .carousel-caption h2, .lash .carousel-caption h1, .lash .carousel-caption h2{
    text-shadow: -1px -1px 2px rgba(94,81,77,0.8), 1px -1px 2px rgba(94,81,77,0.8), -1px 1px 2px rgba(94,81,77,0.8), 1px 1px 2px rgba(94,81,77,0.8);    
}
.esthetic .carousel-caption h2{
    text-shadow: -1px -1px 2px rgba(33,95,92,0.8), 1px -1px 2px rgba(33,95,92,0.8), -1px 1px 2px rgba(33,95,92,0.8), 1px 1px 2px rgba(33,95,92,0.8);    
}

[lang=en-GB] .lash .carousel-caption h1, [lang=it-IT] .lash .carousel-caption h1{
    font-size: 3vw;
    font-weight: 800;
    padding-top: 10vw;
}
[lang=ro-RO] .lash .carousel-caption h1{
    font-size: 3vw;
    font-weight: 800;
    padding-top: 10vw;
}
.carousel-caption h2{
    font-size: 4vw;
    font-weight: 800;
}
.lash .carousel-caption h2{
    font-size: 4vw;
    font-weight: 800;
}
.brow .carousel-caption h2{
    font-size: 3vw;
}
.esthetic .carousel-caption h2{
    font-size: 3vw;
}
[lang=en-GB] .lash .carousel-caption h2, [lang=it-IT] .lash .carousel-caption h2{
    font-size: 7vw;
    font-weight: 800;
}
[lang=ro-RO] .lash .carousel-caption h2{
    font-size: 7vw;
    font-weight: 800;
}
.carousel-caption>.row{
    height: 100%;
}

.logo-wrapper{
    position: relative;
    display: inline-block;
    margin-top: 5rem;
    max-width: 320px;
    width: 22vw;
}

.logo-wrapper:before{
    content: '';
    position: absolute;
    top: -70%;
    bottom: -70%;
    right: -5rem;
    left: -300%;
    background-color: #5E514D;
    z-index: -1;
}

.brow .logo-wrapper:before{
    background-color: #DCBFA6;
    box-shadow: 0px 0px 3px rgba(94,81,77,0.8);
}
.hair .logo-wrapper:before{
    background-color: #804d3c;
    box-shadow: 0px 0px 3px rgba(94,81,77,0.8);
}

.esthetic .logo-wrapper{
    max-width: 435px;
    width: 22.6vw;
}
.esthetic .logo-wrapper:before{
    background-color: #6bdbd6;
    box-shadow: 0px 0px 3px rgba(94,81,77,0.8);
    left: -5rem;
    right: -300%;
}
 
.logo-wrapper img{
    max-width: 100%;
}

.vid-wrapper{
    position: relative;
    line-height: 0;
    background-color: #ddd;
}
.vid-wrapper:after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAK0lEQVQYV2NkYGAwZmBgOMsAAQ2MUAZI0BdZoIGBgWEzSCVIBYgDwiBgDACzhQW4ubpmVAAAAABJRU5ErkJggg==');
    -webkit-background-size: 6px;
    background-size: 6px;
    background-repeat: repeat;
    z-index: 9;
}

.our-story .carousel-item{
    height: 37.3vw;
    min-height: 400px;
    max-height: 700px;
    background-repeat: no-repeat;
}

.our-story .carousel-item.carousel-item-1{
    position: relative;
    background: #ffb76b; /* Old browsers */
    background: -moz-linear-gradient(left, #b7a69f 0%,#b7a69f 50%,#d3cbc9 50%,#d3cbc9 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #b7a69f 0%,#b7a69f 50%,#d3cbc9 50%,#d3cbc9 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #b7a69f 0%,#b7a69f 50%,#d3cbc9 50%,#d3cbc9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=1 ); /* IE6-9 */
}

.our-story .carousel-item.carousel-item-1:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url('../img/slides/our-story-slide-1-woman-v2.jpg');
    background-position: 100% bottom;
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.our-story .carousel-item.carousel-item-1 .title-wrapper{
    display: inline-block;
    position: relative;
    margin-top: 2vw;
    padding: 2.5vw 3.5vw 2.5vw 0;
}
.our-story .carousel-item.carousel-item-1 .title-wrapper:before{
    content: '';
    position: absolute;
    width: 400%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: rgba(220, 191, 166, 0.9);
    z-index: -1;
}
.our-story .carousel-caption h1{
    font-size: 3.5vw;
}

.our-story .carousel-item.carousel-item-1 .header-text h4{
    max-width: 25vw;
    font-size: 1.8vw;
    font-weight: 800;
}

  /************/
 /*  footer  */
/************/

#contact button.close{
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
}

footer{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

footer .address, footer .copyright{
    font-size: 1.05rem;
    line-height: 1.35em;
    margin-bottom: 0;
}

footer  p:last-of-type{
    margin-bottom: 0;
}

footer .social-icons>a, footer .lang-icons>a{
    display: inline-block;
    margin-bottom: 0.6rem;
    margin-left: 0.3rem;
    transition: 0.4s;
}

footer .social-icons>a:hover, footer .lang-icons>a:hover{
    filter: brightness(1.2);
}

/****************************/
/* footer for Esthetic page */
/****************************/

.page-esthetic footer{  
    background-color: #67dad5!important;
}
.page-esthetic footer p{  
    color: #fff !important;
    font-weight: 500;
}
.page-esthetic footer .footer-logo{
    filter: brightness(1.4);
}
.page-esthetic footer .social-icons>a{
    filter: brightness(1.4);
    opacity: 0.5;
}
.page-esthetic footer .lang-icons>a{
    opacity: 0.3;
}
.page-esthetic footer .social-icons>a:hover, .page-esthetic footer .lang-icons>a:hover{
    opacity: 1;
}
.page-esthetic #contact{
    background-color: #d1f4f2!important;
    color: #313434!important;
}


div#gotop{
	position:	fixed;
	right:	30px;
	bottom:	30px;
	display:	none;
	width:	50px;
	height:	50px;
	z-index:	999;
	border-width: 1px;
        border-style: solid;
        transition: background-color 0.4s, color 0.4s;;
}

div#gotop:hover{
    background-color:   rgba(73,186,47,0.8);
    border-color:   #fff;

}

div#gotop i{
	display:	block;
	position:	absolute;
	left:	50%;
	top:	50%;
	margin-left:	-20px;
	margin-top:	-22px;
	font-size:	40px;
}

div#gotop:hover i{
    color:  #fff;;
}


  /**************/
 /*  sections  */
/**************/

.section-interior.container-fluid, .maxw1280{
    max-width: 1280px;
}

.section {
    padding: 3rem 1.25rem;
}

section#page-content{
    /*overflow: hidden;*/
}

.container-fluid .not-fluid-half{
    max-width: 640px;
    padding-left: 2rem;
    padding-right: 2rem;
}


/* home-intro */

.read-more-button{
    padding: 0.3em 2em;
    background-color: rgb(220, 191, 166);
    transition: 0.4s;
}
a.read-more-button:hover{
    background-color: #f9e7de;
    color: #82706c;
    text-decoration: none;
}


/* rules */
section#rules{
    padding:    0;
    overflow: visible;
}

#rules h3{
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 1em;
}

#rules .safety-image, #rules .brows1-image{
    background-image: url('../img/safety.jpg');
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center 10%;
    background-repeat: no-repeat;
    min-height: 370px;
}

#rules .brows1-image{
    background-image: url('../img/brows1.jpg?v=2');
}

#rules .intro img{

}

#rules .intro .text-block{
    padding:    2.5rem 1rem 2.5rem 7rem; 
    max-width: 500px;
}

#rules .intro .text-block>h4{
    position: relative;
    font-size: 2.4vw;
}
.brow #rules .intro .text-block>h4{
    font-size: 2.2vw;
}

#rules .intro .text-block>h4:before{
    content: '3';
    position: absolute;
    bottom: 50%;
    -ms-transform: translate(0, 37%);
    -moz-transform: translate(0, 37%);
    -webkit-transform: translate(0, 37%);
    transform: translate(0, 37%);
    left: -27%;
    font-weight: 900;
    font-size: 19vw;
    line-height: 1em;
    color:  #DCBFA6;
    z-index: -1;
}

#rules .intro .packshot{
    background-image: url('../img/lash-packshot-blur.jpg');
    -webkit-background-size: 65% auto;
    background-size: 65% auto;
    background-position: right bottom;
    background-repeat: no-repeat;
}

.brow #rules .intro .packshot{
    background-image: url('../img/brow-packshot-blur.jpg');
}

#rules .intro .packshot img{
    margin-top: 0rem;
    margin-left: -5rem;
}

#rules .safety .text-block, #rules .brows1 .text-block{
    padding:    2.5rem 7rem 2.5rem 2rem; 
    max-width: 580px;
    position: relative;
}

#rules .safety .text-block:before{
    content: '1';
    position: absolute;
    top:    4rem;
    right: 20%;
    font-weight: 900;
    font-size: 15rem;
    color:  #8e7a75;
    z-index: 0;
}

#rules .safety .text-block *{
    position: relative;
    z-index: 9;
}

#rules .effectiveness .text-block, #rules .brows2 .text-block{
    position: relative;
    padding:    3.5rem 2rem 3.5rem 7rem; 
    max-width: 580px;
}

#rules .effectiveness .text-block:before{
    content: '2';
    position: absolute;
    top:    5rem;
    left: 2%;
    font-weight: 900;
    font-size: 15rem;
    color:  #f8e3d8;
    z-index: 0;
}

#rules .effectiveness .text-block *{
    position: relative;
    z-index: 9;
}

#rules .effectiveness-image, #rules .brows2-image{
    flex-basis: 50%;
    background-image: url('../img/effectiveness-v2.jpg');
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    min-height: 370px;
}

#rules .brows2-image{
    flex-basis: 100%;
    background-image: url('../img/brows3.jpg');
    background-position: center;
}

#rules .effectiveness-titles{
    flex-basis: 50%;
    padding:    3.5rem 2rem 3.5rem 2rem; 
    color:  #5E514D;
}

#rules .effectiveness-titles .title-1{
    font-size:  2.5vw;
}
#rules .effectiveness-titles .title-number{
    font-weight: 800;
    font-size:  6vw;
    margin-bottom: 0;
}
#rules .effectiveness-titles .title-2{
    font-weight: 800;
    font-size:  3.4vw;
}

#rules .care .text-block h3, #rules .care .text-block p{
    color:  #5E514D;
}

.brow #rules .care .text-block p{
    color: inherit;
    font-size: 1.5em;
    line-height: 1.35em;
    margin-bottom: 0;
}

#rules .care .care-icons{
    padding:    2.5rem 2rem 2.5rem 7rem; 
    max-width: 580px;
    height: 100%;
}

#rules .care .care-icons .care-icon{
    width:  140px;
    text-align: center;
    font-weight: 800;
}
.brow #rules .care .care-icons .care-icon{
    color: #76635f;
}

#rules .care .care-icons .care-icon img{
    margin-bottom: 0.7em;
}

#rules .care .care-icons .care-icon p{
    font-size:  1.6rem;
}

#rules .care .text-block{
    position: relative;
    padding:    2.5rem 7rem 2.5rem 2rem; 
    max-width: 580px;
}

#rules .care .text-block{
    position: relative;
    padding:    3.5rem 7rem 3.5rem 2rem; 
    max-width: 580px;
}

#rules .care .text-block:before{
    content: '3';
    position: absolute;
    top:    5rem;
    right: 2%;
    font-weight: 900;
    font-size: 15rem;
    color:  #f8e6db;
    z-index: 0;
}

.brow #rules .care .text-block:before{
    display: none;
}

#rules .care .text-block *{
    position: relative;
    z-index: 9;
}

.hair #rules .hair-box-wrapper{
    position: relative;
}
.hair #rules .hair-box-wrapper>*{
    position: relative;
    z-index: 9;
}
.hair #rules .hair-box-wrapper:before{
    content: '';
    position: absolute;
    left: -15%;
    right: -15%;
    top: 0;
    bottom: -3%;
    background-image: url('../img/hair-box-shadow.png');
    -webkit-background-size: contain;
    background-size: contain;;
    background-position: center bottom 0;
    background-repeat: no-repeat;
    z-index: 0;
}

.hair .hair-research-medium{
    font-size: 2vw;
}
.hair .hair-research-big{
    font-size: 5vw;
}

.hair .hair-research-image{
    background-image: url('../img/hair-research.jpg');
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center 10%;
    background-repeat: no-repeat;
    min-height: 450px;
}

.hair .hair-usage-image{
    position: relative;
    min-height: 24vw;    
}

.hair .hair-usage-image:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: -15%;
    background-image: url('../img/hair-usage.jpg');
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
}

/* info */

#info .info-column{
    background-color: #f2f0f0;
}

#info #info-tabs{
    border-bottom: 3px solid #fff;
}

#info #info-tabs .nav-link{
    padding-top: 1em;
    padding-bottom: 1em;
    font-weight: 800;
    transition: 0.3s;
}
#info #info-tabs .nav-item{
    transition: 0.3s;
}
#info #info-tabs .nav-item:hover{
    filter: brightness(1.04) saturate(1.1);
}
#info #info-tabs .nav-item:hover #pills-directions-tab{
    color: #fff776 !important;
}

#info #info-tabs .nav-link.active{
    background-color: transparent;
}

#info #info-tabs .nav-link.active:before{
    content: '';
    position: absolute;
    width: 0; 
    height: 0;
    left: calc(50% - 12px);
    bottom: -12px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #82706c;    
}

#info #info-tabs #pills-ingredients-tab.active:before{
    border-top-color: #f9e7de;
}
#info #info-tabs #pills-directions-tab.active:before{
    border-top-color: #82706c;
}
#info #info-tabs #pills-warnings-tab.active:before{
    border-top-color: #fbf1eb ;
}
.hair #info #pills-ingredients-tab.active:before{
    border-top-color: rgba(128,77,60,0.8)!important;
}
.esthetic #info #info-tabs .nav-link.active:before{
    border-top-color: rgba(103,218,213,0.3)!important;
}
.esthetic #info #info-tabs #pills-directions-tab.active:before{
    border-top-color: rgba(103,218,213,0.7)!important;
}



#info #info-tabs #pills-directions-tab{

}
#info #info-tabs #pills-warnings-tab{

}

#info #pills-tabContent{
    padding: 0 0.7em 1.3em 0.7em;
}

#info #pills-tabContent p{
    margin-bottom: 0;
}


/* faq */

#faq{
    overflow: hidden;
}

#faq #faq-list .card{
    border-color: transparent;
    position: relative;
}

#faq #faq-list .card:before{
    content: '';
    position: absolute;
    left: -300%;
    right: -300%;
    top: 0;
    bottom: 0;
    z-index: 0;
}
#faq #faq-list .card:nth-child(2n):before{
    background-color: #fbf1eb;
}
#faq #faq-list .card:nth-child(2n+1):before{
    background-color: #f9e7de;
}

#faq #faq-list .card-header{
    border-color: transparent;
    background-color: transparent;
    position: relative;
    z-index: 1;
}

#faq #faq-list .card-header button{
    position: relative;
    color: #503c38;
    padding-left: 0;
    padding-right: 0;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 800;
    white-space: normal;
}

#faq #faq-list .card-header button:before{
    counter-increment: faq1;
    content: counter(faq1) '. ';
    font-size: 1.4rem;
    font-weight: 800;
}

#faq #faq-list .card-body{
    position: relative;
    padding-top: 0;
    padding-bottom: 1.5rem;
    z-index: 1;
}

#faq #faq-list .card-body p{
    margin-bottom: 0;
}


#faq .title{
    font-size: 1.8rem;
    font-weight: 800;
}


/* instagram */
#instagram {
    max-width: 1000px;
}


/* story */
#story{
    padding: 0;
}

#story .story1-image{
    background-image: url('../img/home-tubes.png');
    -webkit-background-size: contain;
    background-size: contain;
    background-position: 95% 50%;
    background-repeat: no-repeat;
    min-height: 370px;
}

#story .story1 .text-block{
    padding:    2.5rem 7rem 2.5rem 2rem; 
    max-width: 580px;
}

#story .story2 .text-block{
    padding:    3.5rem 2rem 3.5rem 7rem; 
    max-width: 580px;
}

#story .story2-image{
    flex-basis: 50%;
    background-image: url('../img/story2-v2.jpg');
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    min-height: 370px;
}

#story .story3 .text-block{
    padding:    2.5rem 7rem 2.5rem 2rem; 
    max-width: 580px;
}

#story .story3-image{
    background-image: url('../img/story3.jpg');
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 370px;
}

#newsletter form button{
    border: none;
}

#esthetic-mask-bar .tube-wrapper img{
    transform: translate(-2%, 40%) scale(1.1);
}

.esthetic-details .research ul{
    list-style: none;
    padding-left: 25px;
}

.esthetic-details .research ul li {
    position: relative;
    list-style: none;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.esthetic-details .research ul li:before {
    content: '';
    position: absolute;
    height: 11px;
    width: 11px;
    border-radius: 6px;
    left: -25px;
    top: 7px;
    background-color: #71dbd4;
}

.hair #hair-ingredients .ingredient-box{
    border-radius: 3em;
}

.hair-separator{
    width: 100%;
    height: 8px;
    margin-left: -5px;
    background-image: url(../img/hair-separator.png);
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
}


    /*******************************/
   /*                             */
  /*         animations          */
 /*                             */
/*******************************/

button.buy-now{
  --animate-duration: 1.2s;
}


    /*******************************************/
   /*                                         */
  /*              media queries              */
 /*                                         */
/*******************************************/



@media screen and (max-width: 1920px) {
    
}

@media screen and (max-width: 1600px) {
    .homepage header:before{
        background-size: auto 95%;
        background-position: 100% bottom;
    }
    
}


@media screen and (max-width: 1279px) {
    .homepage header:before{
        background-size: auto 95%;
        background-position: 110% bottom;
    }
    .homepage .header-quote:after{
        height: 2.2em;
        bottom: -2.5em;
        width: 5em;
        right: auto;
        left: 0;
        background-position: left botttom;
    }    
}


@media screen and (max-width: 1199px) {
    #story .story1 .text-block, #story .story2 .text-block, #story .story3 .text-block{
        padding-right: 2rem;
        padding-left: 2rem;
    }
    #story .story2-image{
        height: 100%;
    }
    .hair .hair-research-medium{
        font-size: 3vw;
    }
    .hair .hair-research-big{
        font-size: 6vw;
    }    
}


@media screen and (min-width: 992px) and (max-width: 1199px){
    
}


@media screen and (max-width: 991px) {
    .homepage .carousel-item.carousel-item-1 .lash-button{
        bottom: -1.1vw;
        right: 7vw;
        font-size: 3vw;
        line-height: 1em;
        padding: 0.9vw 1.5vw 1.25vw 1.5vw;
        border-radius: 2.4vw;
    }
    .homepage .carousel-item.carousel-item-1 .brow-button{
        bottom: -1.1vw;
        left: 7vw;
        font-size: 3vw;
        line-height: 1em;
        padding: 0.9vw 1.5vw 1.25vw 1.5vw;
        border-radius: 2.4vw;
    }    
    .homepage header:before{
        background-size: auto 95%;
        background-position: 140% bottom;
    }    
    .container-fluid .not-fluid-half{
        max-width: 100% !important;
    }    
    nav#main-nav .navbar-nav .nav-link {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    #rules .intro .text-block>h4, .brow #rules .intro .text-block>h4{
        font-size: 1.4rem;
    }
    #rules .intro .packshot{
        padding-top: 5rem;
        padding-bottom: 5rem;
        -webkit-background-size: contain;
        background-size: contain;
        background-position: 70% bottom;
        background-repeat: no-repeat;
    }

    #rules .intro .packshot img{
        margin-top: 0rem;
        margin-left: 0rem;
    }    
    
    #rules .effectiveness-titles{
        
    }
    #rules .effectiveness-titles .title-1{
        font-size: 1.4rem;
        margin-bottom: 0;
    }
    #rules .effectiveness-titles .title-number{
        font-size: 5rem;
    }
    #rules .effectiveness-titles .title-2{
        font-size: 2.2rem;
    }
    #rules .safety .text-block{
        padding-right: 5rem;
    }
    .brow #rules .brows1 .text-block{
        padding-right: 2rem;
    }
    .brow #rules .brows2 .text-block{
        padding-left: 2rem;
    }
    #rules .care .care-icons{
        padding-left: 4rem;
        padding-right: 4rem;
    }
    .brow #rules .care .care-icons{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .brow #rules .care .text-block{
        padding-right: 2rem;
    }
    .our-story .carousel-item.carousel-item-1 h1{
        font-size: 2rem;
    }
    .our-story .carousel-item.carousel-item-1 .title-wrapper{
        margin-top: 2rem;
        padding: 2rem 3rem 1.6rem 0;
    }
    .our-story .carousel-item.carousel-item-1 .header-text h4{
        max-width: 320px;
        font-size: 1.4rem;
    }
    .esthetic-summary h3{
        font-size: 1.5rem;
    }
    .hair .hair-usage-image{
        position: relative;
        min-height: 44vw;
        overflow: hidden;
        border-bottom: 1px dotted rgba(227,155,179,0.7);
    }    
    .hair .hair-research-medium{
        font-size: 2.5rem;
    }
    .hair .hair-research-big{
        font-size: 6rem;
    }     
}


@media screen and (max-width: 767px) {
    .logo-bar{
        padding-top: 3vw;
        padding-bottom: 2vw;
    }
    .logo-bar img{
        max-width: 50%;
    }
    .homepage nav#main-nav .navbar-collapse{
       position: absolute;
       top: 2.5em;
       padding: 0.4em 1em;
       background-color: rgba(230,230,230,0.8);
       border-radius: 5px;
       z-index: 99;
    }
    .homepage nav#main-nav .navbar-collapse>.navbar-nav{
        padding-top: 0 !important;
    }
    .homepage .carousel-item.carousel-item-1 .lash-button, .homepage .carousel-item.carousel-item-1 .brow-button{
        display: none;
    }
    .homepage .carousel-item.carousel-item-1 .column-lash-interior, .homepage .carousel-item.carousel-item-1 .column-brow-interior{
        padding-top: 5vw;
        padding-bottom: 4vw;
        padding-left: 2vw;
        padding-right: 2vw;
    }
    .homepage .carousel-item .home-logo-wrapper img{
        width: 100%;
        height: auto;
    }
    .homepage .header-quote{
        margin-top: 0;
        margin-bottom: 16em;
    }    
    .homepage header:before{
        background-size: auto 83%;
        background-position: 20% bottom;
    }
    .homepage #home-poster{
        background-position: 65% center;
    }    
    .vid-wrapper:after{
        display: none;
    }
    .brow .carousel-caption h1{
        font-size: 8vw;
    }    
    .brow .carousel-caption h2{
        font-size: 5vw;
    }    
    .esthetic .carousel-caption h2{
        font-size: 4vw;
    }    
    .lash .carousel-caption h1{
        font-size: 8vw;
    }    
    .lash .carousel-caption h2{
        font-size: 5vw;
    }    
    .our-story .carousel-item.carousel-item-1:before{
        background-position: center bottom;
    }
    .our-story .header-text h4{
        position: relative;
    }
    .our-story .header-text h4:before{
        content: '';
        position: absolute;
        left: -1.5rem;
        right: -1.5rem;
        top: -1rem;
        bottom: -1rem;
        background-color: rgba(255,255,255,0.5);
        z-index: -1;
    }
    #esthetic-details .usage img{
        max-width: 75%;
    }    
}


@media screen and (max-width: 575px) {
    .logo-bar{
        padding-top: 5vw;
        padding-bottom: 4vw;
    }
    .logo-bar img{
        max-width: 60%;
    }
    .homepage .header-quote{
        margin-top: -1em;
        margin-bottom: 24em;
        font-size: 1.4rem;
    }    
    .homepage header:before{
        background-size: auto 86%;
        background-position: 35% bottom;
    }    
    .esthetic .carousel-caption h2{
        font-size: 5vw;
    }
    .h4{
        font-size: 1.3rem;
    }
    #rules .text-block{
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    #rules .intro .text-block>h4:before {
        left: auto;
        right: 0;
        font-size: 16rem;
        opacity: 0.8;
    }    
    .esthetic-summary h3{
        font-size: 1.3rem;
    }     
}


@media screen and (min-width:576px){
    .text-sm-center{
        text-align: center !important;
    }
    .text-sm-left{
        text-align: left !important;
    }
    .text-sm-right{
        text-align: right !important;
    }
    .text-sm-justify{
        text-align: justify !important;
    }
}

@media screen and (min-width:768px){
    .text-md-center{
        text-align: center !important;
    }
    .text-md-left{
        text-align: left !important;
    }
    .text-md-right{
        text-align: right !important;
    }
    .text-md-justify{
        text-align: justify !important;
    }
    .lash .slider-wrapper, .brow .slider-wrapper{
        border-top: 1px solid #5E514D;
        border-bottom: 1px solid #5E514D;
    }    
    .hair #hair-ingredients .hair-bottle-wrapper{
        transform-origin: 50% 100%;
        transform: scale(1.15);
        z-index: 99;
    }    
}


@media screen and (min-width:992px){
    .text-lg-center{
        text-align: center !important;
    }
    .text-lg-left{
        text-align: left !important;
    }
    .text-lg-right{
        text-align: right !important;
    }
    .text-lg-justify{
        text-align: justify !important;
    }    
}


@media screen and (min-width:1200px){
    .text-xl-center{
        text-align: center !important;
    }
    .text-xl-left{
        text-align: left !important;
    }
    .text-xl-right{
        text-align: right !important;
    }
    .text-xl-justify{
        text-align: justify !important;
    }    
    .homepage .carousel-item.carousel-item-1 .column-lash-interior, .homepage .carousel-item.carousel-item-1 .column-brow-interior{
        padding: 73px 85px;
    }
    .carousel-caption h1 {
        font-size: 7.5rem;
    }
    .brow .carousel-caption h1 {
        font-size: 5.5rem;
    }
    .our-story .carousel-caption h1{
        font-size: 3.6rem;
    }    
    .carousel-caption h2 {
        font-size: 4rem;
    }
    .brow .carousel-caption h2 {
        font-size: 3rem;
    }
    .esthetic .carousel-caption h2 {
        font-size: 2.4rem;
    }
    #rules .intro .text-block>h4{
        position: relative;
        font-size: 1.8rem;
    }    
    .brow #rules .intro .text-block>h4{
        position: relative;
        font-size: 1.8rem;
    }    
    #rules .intro .text-block>h4:before{
        font-size: 15rem;
    }
}

@media screen and (min-width:1300px){
    #story .story1-image{
        -webkit-background-size: contain;
        background-size: contain;
        background-position: 85% 50%;
    }
}
@media screen and (min-width:1920px){
    
}