/* Index */

.splide-spacing { margin-bottom:30px; }

.splide__track .responsive { width:100%; }

.splide button::before { display:none; }


.discover-by-range-hair-care { float:left; width:585px; margin-right:30px; position:relative; cursor:pointer; text-align:left; overflow:hidden; }
.discover-by-range-hair-styling { float:left; width:585px; position:relative; cursor:pointer; text-align:left; overflow:hidden;   }

.discover-by-range-hair-care:hover, .discover-by-range-hair-styling:hover { transition:0.5s; }

.discover-by-range-hair-care span, .discover-by-range-hair-styling span { 
    position:absolute; background:rgba(255,255,255,0.8); color:#fe6695; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal;
    font-size:22px; padding:10px 20px; left:0; bottom:0; width:60%; height:46px; transition: all 0.5s ease-in-out;
}

.discover-by-range-hair-care:hover > span, .discover-by-range-hair-styling:hover > span { height:100px; width:75%; transition: all 0.5s ease-in-out; }

.discover-by-range-hair-care:hover > span::after { 
    font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; color:#81636c; font-size:16px; 
    content:''; 
    position:absolute; 
     animation-name: animate-hair-care;
     animation-duration: 0.5s;
     animation-delay: 0.1s;
     animation-fill-mode: forwards;

}

.discover-by-range-hair-styling:hover > span::after { 
    font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; color:#81636c; font-size:16px; 
    content:''; 
    position:absolute; 
     animation-name: animate-hair-styling;
     animation-duration: 0.5s;
     animation-delay: 0.1s;
     animation-fill-mode: forwards;
     
}

.discover-by-range-hair-care img, .discover-by-range-hair-styling img { 
    opacity:1;
}


.discover-by-range-hair-care:hover > img, .discover-by-range-hair-styling:hover > img { 
    transition: all 0.5s ease-in-out; opacity:0.6;
}


@keyframes animate-hair-care {
  0%   { 
opacity:0;
top:80px; left:20px; 
padding-right:40px;
}
  100% { 
opacity:1;
top:46px; left:20px; 
padding-right:40px;
content:'Formulated with Moroccan Argan Oil to nourish your hair, keeping it soft, smooth and lustrous!'; 
}
}

@keyframes animate-hair-styling {
  0%   { 
opacity:0;
top:80px; left:20px; 
padding-right:30px;
}
  100% { 
opacity:1;
top:46px; left:20px; 
padding-right:30px;
content:'Style your hair effortlessly with our wide range of styling products from wax, sticks, sprays and more!'; 
}
}


.library-article { float:left; margin-right:30px; width:380px; transition:0.5s; }

.library-article-last  { float:left; width:380px; transition:0.5s;  }

.library-article a, .library-article-last a { text-decoration:none; }

.library-article .link, .library-article-last .link  { display:block; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; color:#81636c; margin-top:10px;}

.library-article:hover, .library-article-last:hover { opacity:0.6; }


/* For a Shiny & Beautiful Hair */

.for-a-shiny-and-beautiful-hair-container { width:1200px; margin:100px auto 30px auto; }
.for-a-shiny-and-beautiful-hair-left-column { width:525px; margin-right:50px; float:left; font-size:48px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:54px;}
.for-a-shiny-and-beautiful-hair-right-column { width:625px; float:left; font-size:16px; line-height:26px; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal;}

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

.for-a-shiny-and-beautiful-hair-container { width:750px; margin:60px auto 20px auto; }
.for-a-shiny-and-beautiful-hair-left-column { width:320px; margin-right:30px; float:left; font-size:44px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:50px;}
.for-a-shiny-and-beautiful-hair-right-column { width:400px; float:left; font-size:15px; line-height:24px; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal;}
	
}

@media only screen and (max-width : 768px) {
	
.for-a-shiny-and-beautiful-hair-container { width:90%; margin:40px auto 20px auto; }
.for-a-shiny-and-beautiful-hair-left-column { width:90%; margin:0 auto; float:none; font-size:48px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:54px;}
.for-a-shiny-and-beautiful-hair-right-column { width:90%; margin:20px auto; float:none;  font-size:16px; line-height:26px; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal;}
	
}

/* Product Categories */

.acid-heat-treatment-container:hover, .hair-oil-treatment-container:hover, .hair-styling-container:hover, .hair-color-container:hover { opacity:0.8;  }

.acid-heat-treatment-container { width:1200px; margin:40px auto; background:#b086e4; border-radius:20px; position:relative; transition:0.5s }
.hair-oil-treatment-container { width:1200px; margin:40px auto; background:#78d18c; border-radius:20px; position:relative; transition:0.5s }
.hair-styling-container { width:1200px; margin:40px auto; background:#66c5c3; border-radius:20px; position:relative; transition:0.5s }
.hair-color-container { width:1200px; margin:40px auto; background:#f58758; border-radius:20px; position:relative; transition:0.5s }


.product-category-left-column { width:410px;float:left; padding:40px; color:#fff }
.product-category-left-column .product-title { font-weight:bold; font-size:50px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:54px; }
.product-category-left-column span { margin-top:10px; font-size:26px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:30px; }
.product-category-left-column p {font-size:18px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:26px; }
.product-category-left-column .product-disclaimer { margin-top:20px; font-size:12px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:15px; }
.product-category-right-column { width:690px; float:left; padding:60px; margin-right:80px;}

.product-category-left-column-color { width:390px;float:left; padding:40px; color:#fff }
.product-category-right-column-color { width:710px; float:left; padding:40px; margin-right:80px;}
.product-category-left-column-color .product-title { font-weight:bold; font-size:50px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:54px; }
.product-category-left-column-color span { margin-top:10px; font-size:26px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:30px; }
.product-category-left-column-color p {font-size:18px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:26px; }

.product-category-spacing-1 { margin-bottom:160px; }

.product-category-spacing-2 { margin-bottom:160px; }

.product-category-spacing-3 { margin-bottom:170px; }

.product-category-spacing-4 { margin-bottom:150px; }

.arrow-button { background-color:rgba(255,255,255,0.5); padding:20px 25px 20px 20px; position:absolute; bottom:30px; right:30px; border-radius:50%;}
.arrow {
  border: solid #fff;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 10px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

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

.acid-heat-treatment-container { width:750px; margin:30px auto; }
.hair-oil-treatment-container { width:750px; margin:30px auto; }
.hair-styling-container { width:750px; margin:30px auto;  }
.hair-color-container { width:750px; margin:30px auto; }
	
.product-category-left-column, .product-category-left-column-color { width:220px; margin-right:40px;}
.product-category-right-column, .product-category-right-column-color { width:470px; margin-right:20px; padding:30px; }

.product-category-spacing-1, .product-category-spacing-2, .product-category-spacing-3, .product-category-spacing-4 { margin-bottom:20px; }	
	
.product-category-left-column .product-title, .product-category-left-column-color .product-title { font-weight:bold; font-size:40px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:44px; }
	
.product-category-left-column span,  .product-category-left-column-color span { margin-top:10px; font-size:20px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:26px; }
.product-category-left-column p, .product-category-left-column-color p {font-size:16px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:24px; }
	
.product-category-left-column .product-disclaimer { margin-top:20px; font-size:11px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:15px; }
	
.arrow-button { bottom:20px; right:20px;}	
	
}

@media only screen and (max-width : 768px) {
	
.acid-heat-treatment-container { width:90%; margin:20px auto; }
.hair-oil-treatment-container { width:90%; margin:20px auto; }
.hair-styling-container { width:90%; margin:20px auto;  }
.hair-color-container { width:90%; margin:20px auto; }
	
.product-category-left-column, .product-category-left-column-color { width:100%; margin-right:0; float:none;}
.product-category-right-column, .product-category-right-column-color { width:100%; margin-right:0; padding:40px; float:none; }

.product-category-spacing-1, .product-category-spacing-2, .product-category-spacing-3, .product-category-spacing-4 { margin-bottom:20px; }	
	
.product-category-left-column .product-title, .product-category-left-column-color .product-title { font-weight:bold; font-size:40px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:44px; }
	
.product-category-left-column span,  .product-category-left-column-color span { margin-top:10px; font-size:20px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:26px; }
.product-category-left-column p, .product-category-left-column-color p {font-size:16px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:24px; }
	
.product-category-left-column .product-disclaimer { margin-top:20px; font-size:11px; font-family: 'Apercu Pro', sans-serif; font-style: normal; line-height:15px; }
	
.arrow-button { background-color:rgba(255,255,255,0.5); padding:10px 15px 10px 10px; position:absolute; bottom:10px; right:10px; border-radius:50%;}
.arrow {
  border: solid #fff;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 10px;
}	
	
}

/* General - Tablet */

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

.discover-by-range-hair-care { float:left; width:339.5px; margin-left:30px; margin-right:30px; position:relative; cursor:pointer; text-align:left; overflow:hidden; }

.discover-by-range-hair-styling { float:left; width:339.5px; position:relative; cursor:pointer; text-align:left; overflow:hidden; margin-right:30px;   }


.discover-by-range-hair-care span, .discover-by-range-hair-styling span { 
    position:absolute; background:rgba(255,255,255,0.8); color:#fe6695; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal;
    font-size:20px; padding:10px 20px; left:0; bottom:0; width:60%; height:46px; transition: all 0.5s ease-in-out;
}

.discover-by-range-hair-care:hover > span, .discover-by-range-hair-styling:hover > span { height:120px; width:90%; transition: all 0.5s ease-in-out; }

.discover-by-range-hair-care:hover > span::after { 
    font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; color:#81636c; font-size:15px; 
    content:''; 
    position:absolute; 
     animation-name: animate-hair-care;
     animation-duration: 0.5s;
     animation-delay: 0.1s;
     animation-fill-mode: forwards;

}

.discover-by-range-hair-styling:hover > span::after { 
    font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; color:#81636c; font-size:15px; 
    content:''; 
    position:absolute; 
     animation-name: animate-hair-styling;
     animation-duration: 0.5s;
     animation-delay: 0.1s;
     animation-fill-mode: forwards;
     
}

.discover-by-range-hair-care img, .discover-by-range-hair-styling img { 
    opacity:1;
}


.discover-by-range-hair-care:hover > img, .discover-by-range-hair-styling:hover > img { 
    transition: all 0.5s ease-in-out; opacity:0.6;
}

.library-article { float:left; margin-right:30px; width:236.3px; transition:0.5s; }

.library-article-last  { float:left; width:236.3px; transition:0.5s;  }

.library-article a, .library-article-last a { text-decoration:none; }

.library-article .link, .library-article-last .link  { display:block; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; color:#81636c; margin-top:10px; font-size:15px;}

}

/* General - Mobile */

@media only screen and (max-width : 768px) {
    
.splide-spacing { margin-bottom:10px; }


.discover-by-range-hair-care { float:none; width:100%; margin:0;  }

.discover-by-range-hair-styling { float:none; width:100%;  margin:0; }

.discover-by-range-hair-care span, .discover-by-range-hair-styling span { height:115px; width:75%; }

.discover-by-range-hair-care span::after, .discover-by-range-hair-styling span::after { 
    display:none;

}


.discover-by-range-hair-care .description-content, .discover-by-range-hair-styling .description-content  { 
    font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; color:#81636c; font-size:16px; 
}
     
.library-container { width:100%;overflow:auto }
.library-content { width:960px; overflow-x:auto; margin-bottom:20px; }

.library-article { float:left; margin-right:30px; width:300px;  }

.library-article-last  { float:left; width:300px;  }

.library-article a, .library-article-last a { text-decoration:none; }

.library-article .link, .library-article-last .link  { display:block; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; color:#81636c; margin-top:10px;}


}