/* CSS Landing Page ----------------- Biotherm DW context */
.main .content {background-color:#23bbd2; padding: 0;}
.main .content .primary {width:100%; float:none}
.main .content .secondary, .main .content .breadcrumb {display:none}

/* CSS Landing Page ----------------- generic */
.cl_page {background:White}
.cl_page h1 {color:White; text-transform: uppercase; font-style:italic}
.cl_page h1 span { font-family:FuturaStdHeavy; font-style:normal;  display:block}
.cl_page h2 {color:#535355; font-family:FuturaStdBold; font-style:italic; text-transform: uppercase; padding-bottom:20px}
.cl_page h2 span {font-family:FuturaStdMedium; font-style:normal}
.cl_page h3 {text-transform:uppercase; font-size: 25px; text-align:center; color: White; padding: 30px 0; background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 10%, rgba(34,75,138,1) 10%, rgba(34,75,138,1) 90%, rgba(255,255,255,0) 90%, rgba(255,252,252,0) 100%);}
.cl_page h4 {text-transform:uppercase; font-size: 18px; color: #0c0c43; padding: 10px 0;     font-family: FuturaStdMedium;    font-weight: normal;}
.cl_page p.cl_subheader { font-size: 18px;    margin: -10px 0 15px 0;    text-transform: uppercase;}
.cl_page p, .cl_page dd, .cl_page dt {font-family:Arial; color:#454545}
.cl_page dd {margin:0}
.cl_page a {color:#224b8a}
.cl_page a.cl_link1	{color: White;  background: #23c9c5 url(picto_cart.png) no-repeat 15px 10px;  width: 46px;  height: 46px;    padding: 0;   text-decoration: none; font-size: 15px; font-family: FuturaStdMedium;     text-transform: uppercase; display:inline-block}
.cl_page a.cl_link1 span {display:none}
.cl_page a.cl_link2	{color: White;  background: #23c9c5;   padding: 10px 30px;   text-decoration: none; font-size: 15px; font-family: FuturaStdMedium;     text-transform: uppercase; display:inline-block}
.cl_page a.cl_link3	{color: White;  background: #23c9c5;  width: 46px;  height: 46px;    padding: 0;   text-decoration: none; font-size: 50px; font-family: FuturaStdLight;     text-transform: uppercase; display:inline-block}
.cl_page a.cl_link3 span {    position: absolute;    top: -12px;    left: 7px;}

.cl_page .cl_hide {display:none}
.cl_page .cl_spaceh {margin-left:20px}
.cl_page .cl_spacev {margin-top:20px !important}
.cl_page .cl_bloc {clear:both; text-align:center; margin-bottom:50px}
.cl_page .cl_mobile {display:none}




/* CSS Landing Page ----------------- PAGE 1 */
#slp_section1 {background:url(s1_cover_bg.jpg) no-repeat top; padding-top: 1px;}

/* CSS Landing Page ----------------- PAGE 2 */
#slp_section2 {text-transform:uppercase; font-family: FuturaStdMedium; position:relative}
#slp_section2 .sl_forherskin {height:620px; padding:0 108px; background:url(s2_forherskin_bg.jpg) no-repeat top; margin-bottom:50px}
#slp_section2 .sl_forhisskin {height:620px; padding:0 108px; background:url(s2_forhisskin_bg.jpg) no-repeat top;}
#slp_section2 .slick-slide img {display:inline}
#slp_section2 .slick-list {overflow:visible}
#slp_section2 .cl_prd_picto {padding:20px 0}
#slp_section2 .cl_prd_header {font-size:18px; font-style:italic;     padding-bottom: 30px;}
#slp_section2 .cl_prd_header span {font-family:FuturaStdHeavy;    font-size: 26px;    font-style: normal;}
#slp_section2 .cl_prd_desc { font-style:italic; position: relative}
#slp_section2 .cl_prd_desc span {position: absolute}
#slp_section2 dt  {font-size:16px; margin-top:70px}
#slp_section2 dt span {font-family:FuturaStdHeavy;}
#slp_section2 .sl_forherskin .cl_prd_header, #slp_section2 .sl_forherskin .cl_prd_desc {color:White}
#slp_section2 .cl_prd_link {position: relative}
#slp_section2 .cl_prd_link a {position: absolute}

#slp_section2 .sl_forherskin .sl_prd1 .cl_prd_desc span {width: 200px;    text-align: right;   left: 50%;    margin-left: -240px;}
#slp_section2 .sl_forherskin .sl_prd2 .cl_prd_desc span.cl_span1 {width: 200px;    text-align: right;    left: 50%;     margin-left: -220px; top:75px}
#slp_section2 .sl_forherskin .sl_prd2 .cl_prd_desc span.cl_span2 {    width: 200px;    left: 50%; margin-left: -40px;   top: -10px;}
#slp_section2 .sl_forherskin .sl_prd3 .cl_prd_desc span {width: 300px;   left: 50%;    margin-left: -130px;}

#slp_section2 .sl_forhisskin .sl_prd1 .cl_prd_desc span {width: 300px;    left: 50%;    margin-left: -150px;    top: -15px;}
#slp_section2 .sl_forhisskin .sl_prd2 .cl_prd_desc span.cl_span1 {width: 200px;    text-align: right;    left: 50%; margin-left: -300px;}
#slp_section2 .sl_forhisskin .sl_prd2 .cl_prd_desc span.cl_span2 { width: 200px;    text-align: left;    top: 90px;    left: 50%;    margin-left: 80px;}

#slp_section2 .sl_forherskin .sl_prd1 .cl_prd_link a {   top: -330px;    left: 50%; margin-left: 40px;}
#slp_section2 .sl_forherskin .sl_prd2 .cl_prd_link a.cl_span1 {       top: -270px;    left: 50%; 	margin-left: -110px;}
#slp_section2 .sl_forherskin .sl_prd2 .cl_prd_link a.cl_span2 {       top: -330px;    left: 50%;    margin-left: 90px;}
#slp_section2 .sl_forherskin .sl_prd3 .cl_prd_link a.cl_span1 {   top: -270px;    left: 50%;    margin-left:  -110px;}
#slp_section2 .sl_forherskin .sl_prd3 .cl_prd_link a.cl_span2 {   top: -330px;    left: 50%;    margin-left: 55px;}

#slp_section2 .sl_forhisskin a.cl_link1	{background: #f20000 url(picto_cart.png) no-repeat 15px 10px; }
#slp_section2 .sl_forhisskin .sl_prd1 .cl_prd_link a.cl_span1 {       top: -380px;    left: 50%; 	margin-left: -100px;}
#slp_section2 .sl_forhisskin .sl_prd1 .cl_prd_link a.cl_span2 {       top: -260px;    left: 50%;    margin-left: 55px;}
#slp_section2 .sl_forhisskin .sl_prd2 .cl_prd_link a.cl_span1 {   top: -240px;    left: 50%;    margin-left:  -125px;}
#slp_section2 .sl_forhisskin .sl_prd2 .cl_prd_link a.cl_span2 {   top: -400px;    left: 50%;    margin-left: 65px;}


#slp_section2 .sl_shelfher {position:absolute; left: 110px;    top: 552px; width:993px; height:115px; background:url(s2_her_shelf_bg.png)}
#slp_section2 .sl_shelfhis {position:absolute; left: 170px;    top: 1270px; width:857px; height:113px; background:url(s2_his_shelf_bg.png)}

/* CSS Landing Page ----------------- PAGE 3 */
#slp_section3 {padding:0 108px; margin-bottom: 80px;}
#slp_section3 .sl_offerforher {height:260px; background:url(s3_offers_her_bg.jpg) no-repeat top; margin-bottom:80px; padding-top: 20px;}
#slp_section3 .sl_offerforhim {height:260px; background:url(s3_offers_him_bg.jpg) no-repeat top; padding-top: 20px;}
#slp_section3 {color:White}
#slp_section3 .sl_offerforher img {float:left;     margin-right: 50px;}
#slp_section3 .sl_offerforhim img {float:right;     margin-left: 20px;}
#slp_section3 dl {width:300px}
#slp_section3 dd, #slp_section3 dt {color:white; font-family: FuturaStdMedium; font-size:18px; text-align:left;     width: 830px;}
#slp_section3 dt {font-size:30px; font-family:FuturaStdHeavy;font-style:italic; text-transform:uppercase}
#slp_section3 dd.cl_desc {padding:20px 0}
#slp_section3 .sl_offerforhim dd, #slp_section3 .sl_offerforhim dt {text-align:right;         margin-left: 160px;    width: 400px;}
#slp_section3 .sl_offerforhim .cl_link2 {background:#f20000}

/* CSS Landing Page ----------------- PAGE 4 */
#slp_section4 {height:381px; padding: 20px 0 0 55%; margin:0; background:url(s4_livemore_bg.jpg) no-repeat left top;     text-align: left;}
#slp_section4 h2 {color:#0cbbd4;     font-style: normal; font-size: 40px;    padding-bottom: 0;}
#slp_section4 h2 span.cl_span1 {    font-size: 60px;    font-family: FuturaStdHeavy;}
#slp_section4 h2 span.cl_span2 {color:#fff000;     font-style: italic; margin-right: 2px;}
#slp_section4 .cl_style1 {    font-family: FuturaStdMedium;    font-size: 10px;    margin-top: -20px;    margin-left: 40px;    text-transform: uppercase;}
#slp_section4 .cl_style2 {color:#23bbd2; font-family: FuturaStdHeavy; font-style:italic; font-size:30px;    line-height: 30px; text-transform:uppercase; padding:20px 0 10px 0}
#slp_section4 .cl_style3 {font-family: FuturaStdMedium; font-size:18px; text-transform:uppercase; padding-bottom:10px}
#slp_section4 .cl_style4 {    font-size: 14px;    line-height: normal;    width: 80%;    padding-bottom: 20px;}
	

/*----------------------------------------------------------------------\
					MAX-WIDTH 1176px 
\---------------------------------------------------------------------*/
@media only screen and (max-width: 1176px) {

}

/*----------------------------------------------------------------------\
					MAX-WIDTH 1060px 
\---------------------------------------------------------------------*/
@media only screen and (max-width: 1060px) {

}

/*----------------------------------------------------------------------\
					MAX-WIDTH 960px 
\---------------------------------------------------------------------*/
@media only screen and (max-width: 960px) {

}

/*----------------------------------------------------------------------\
					MAX-WIDTH 750px 
\---------------------------------------------------------------------*/
@media only screen and (max-width: 750px) {
	.cl_page h3 {    width: 100% !important;    background: #224b8a; margin-top: 0 !important;}

}

/*----------------------------------------------------------------------\
					MAX-WIDTH 650px 
\---------------------------------------------------------------------*/
@media only screen and (max-width: 650px) {

}

/*----------------------------------------------------------------------\
					MAX-WIDTH 480px // 430px => decalage 50px
\---------------------------------------------------------------------*/
@media only screen and (max-width: 530px) {

}