/* ////////////////////////////////////////
 * 
 * $ LANDING SUNSCREEN
 * 
 * //////////////////////////////////////// */

/*
body,html{
	min-width:0;
	}
header.main,
footer.main{
	display:none;
	}
*/
.sunscreen{
	margin:50px auto;
	max-width:960px;
	background:#00809e;
	}
.sunscreen header{
	background:#f7bf36;
	}
.sunscreen section{
	
	}	
.sunscreen .light-blue{
	background:#ddf0f2;
	}
.sunscreen .yellow{
	background:#ffd659;
	}
.sunscreen footer{
	background:#231f20;
	}
.sunscreen .wrapper{
	padding:25px 55px;
	}
.sunscreen h2{
	font:2.181818em 'FuturaBT-Bold',arial;/* 24 */
	color:#f7bf36;
	margin-bottom:20px;
	}
.sunscreen .light-blue h2,
.sunscreen .yellow h2{
	color:#00809e;
	}
.sunscreen h3{
	font-size:1.545454em;/* 17 */
	color:#fff;
	text-transform:none;
	}
.sunscreen .light-blue h3{
	color:#000;
	}
.sunscreen p, 
.sunscreen ul{
	font:1.545454em 'FuturaBT-Book',arial;/* 17 */
	color:#fff;
	margin-bottom:20px;
	}
.sunscreen .light-blue p,
.sunscreen .light-blue ul,
.sunscreen .yellow p,
.sunscreen .yellow ul{
	color:#000;
	}
.sunscreen strong{
	color:#f7bf36;
	}
/* ctn_visuel */
.sunscreen .ctn_visuel{
	position:relative;
	}
.sunscreen .ctn_visuel img{
	width:100%;
	}
/* --------------- 
 * header
 * ------------ */
.sunscreen header .wrapper{
	padding-bottom:27px;
	}
.sunscreen header .wrapper > div{
	float:left;
	width:45.294117%;
	}
.sunscreen header h1{
	display:table-cell;
	height:155px;
	vertical-align:middle;
	color:#fff;
	font:4.272727em/.9em 'FuturaBT-Book',arial;/* 47 */
	}
.sunscreen header h1 strong{
	color:#00809e;
	font-family:'FuturaBT-Bold',arial;
	}
.sunscreen header h1 span{
	font-size:.765957em;/* 35 */
	}
.sunscreen header h1 .sp2{
	position:relative;
	top:-10px;
	}
.sunscreen header p{
	float:right;
	font:2.363636em/1.275em 'FuturaBT-Medium',arial;/* 26 */
	color:#00809e;
	width:46.941176%;
	margin-top:38px;
	padding-left:4.352941%;
	border-left:2px solid #00809e;
	}
/* --------------- 
 * essential
 * ------------ */
.sunscreen .essential .wrapper{
	padding-top:18px;
	padding-bottom:18px;
	}
.sunscreen .essential .ctn_visuel{
	float:left;
	width:33.411764%;
	margin-left:5px;
	}
.sunscreen .essential .ctn_visuel > span{
	position:absolute;
	top:35px;
	left:201px;
	width:75px;
	text-align:center;
	font:29px/1em 'FuturaBT-Bold',arial;
	color:#9b1060;
	}
.sunscreen .essential .ctn_visuel > span + span{
	left:37px;
	top:215px;
	color:#d81d49;
	}
.sunscreen .essential .ctn_texte{
	float:right;
	width:59.411764%;
	}
	
.sunscreen .essential .ctn_visuel .sp1{
	font-size:11px;
	margin-left:5px;
	}
.sunscreen .essential .ctn_visuel span span{
	position:relative;
	top:-12px;
	display:inline-block;
	font:17px/1em 'FuturaBT-Book',arial;
	white-space:nowrap;
	}
.sunscreen .essential .ctn_visuel span + span .sp2{
	font-size:10px;
	top:-17px;
	}
.sunscreen .essential li{
	line-height:1.1em;
	}
/* --------------- 
 * protect
 * ------------ */
.sunscreen .protect .wrapper{
	padding-top:36px;
	}
.sunscreen .protect .wrapper div{
	float:left;
	width:14.64%;
	padding:7px 35.36% 17px 0;
	min-height:254px;
	background:url('images/f_sun.png') 124px 5px no-repeat;
	}
.sunscreen .protect .wrapper div + div{
	width:18%;
	padding-right:32%;
	background:url('images/f_accessoires.png') right top no-repeat;
	}
.sunscreen .protect h3{
	margin-bottom:20px;
	}
/* --------------- 
 * consequences
 * ------------ */
.sunscreen .consequences{
	float:left;	
	width:53.854166%;
	}
.sunscreen .consequences .wrapper{
	padding:14px 37px 13px 55px;
	}
.sunscreen .consequences p{
	padding:7px 0 0 52.352941%;
	min-height:185px;
	background:url('images/f_visage.png') left 9px no-repeat;	
	}
/* --------------- 
 * how-protect
 * ------------ */	
.sunscreen .how-protect{
	float:left;
	width:46.145834%;
	}
.sunscreen .how-protect .wrapper{
	padding:14px 55px 13px 18px;
	}
	
.sunscreen .how-protect p{
	padding:7px 0 0 48.714479%;
	min-height:193px;
	background:url('images/f_bouclier.png') left 9px no-repeat;	
	}
/* --------------- 
 * effective
 * ------------ */
.sunscreen .effective{
	clear:both;
	margin-bottom:-31px;
	background:url('images/border_effective.gif') center bottom no-repeat;
	}
.sunscreen .effective .wrapper{
	padding-top:21px;
	padding-bottom:36px;
	}
.sunscreen .effective .ctn_texte{
	float:left;
	padding-top:20px;
	width:47.058823%;
	}
.sunscreen .effective .ctn_texte p{
	margin-bottom:12px;
	}
.sunscreen .effective .ctn_texte li{
	font-size:15px;
	}
.sunscreen .effective .ctn_visuel{
	float:right;
	width:49.352941%;
	}
/* --------------- 
 * consequences
 * ------------ */

/* --------------- 
 * antioxidant
 * ------------ */
.sunscreen .antioxidant p,
.sunscreen .antioxidant ul{
	font-size:15px;
	}
.sunscreen .antioxidant .col{
	float:left;
	width:30%;
	padding-right:2.352941%;
	padding-bottom:8px;
	background:url('images/border-2x2.gif') right top repeat-y;
	}
.sunscreen .antioxidant .col + .col{
	width:29.235295%;
	padding-left:2.823529%;
	padding-right:2.647058%;
	}
.sunscreen .antioxidant .col + .col + .col{
	width:30.176467%;
	padding-left:2.764705%;
	padding-right:0;
	background:none;
	}
.sunscreen .antioxidant .col :last-child{
	margin-bottom:0;
	}
/* ctn_visuel */
.sunscreen .antioxidant .ctn_visuel span{
	position:absolute;
	font-size:9px;
	white-space:nowrap;
	}
/* visuel 01 */
.sunscreen .antioxidant .visuel01{
	margin:21px 0 8px 38px;
	max-width:149px;
	}
.sunscreen .antioxidant .visuel01 span{
	top:60px;
	left:104px;
	}
.sunscreen .antioxidant .visuel01 span + span{
	left:140px;
	top:95px
	}
/* visuel 02 */
.sunscreen .antioxidant .visuel02{
	margin:16px 0 9px 16px;
	max-width:208px;
	}
.sunscreen .antioxidant .visuel02 span{
	top:5px;
	left:15px;
	}
.sunscreen .antioxidant .visuel02 span + span{
	top:80px;
	left:168px;
	}
.sunscreen .antioxidant .visuel03{
	margin:21px 0 20px 60px;
	max-width:108px;
	}
/* --------------- 
 * tips
 * ------------ */
.sunscreen .tips .wrapper{
	padding-top:33px;
	padding-bottom:12px;
	}
.sunscreen .tips .ctn_texte{
	float:left;
	width:50%;
	}
.sunscreen .tips .ctn_visuel{
	float:right;
	}
.sunscreen .tips .plus{
	display:inline-block;
	width:37px;
	height:37px;
	line-height:37px;
	text-align:center;
	color:#9aced9;
	margin:0 31px;
	background:url('images/v_plus.png') center center no-repeat;
	}
.sunscreen .tips img{
	vertical-align:middle;
	}
.sunscreen .tips .img01{
	width:92px;
	}
.sunscreen .tips .img02{
	width:36px;
	}
.sunscreen .tips .img03{
	width:50px;
	}
.sunscreen .tips .fps{
	position:absolute;
	color:#ffc32e;
	right:0px;
	top:67px;
	width:50px;
	font:18px 'FuturaBT-Bold',arial;
	text-transform:uppercase;
	text-align:center;
	}
/* --------------- 
 * footer
 * ------------ */
.sunscreen footer .wrapper{
	padding-top:27px;
	padding-bottom:27px;
	}
.sunscreen footer strong{
	color:#fff;
	}
.sunscreen footer p{
	float:left;
	width:220px;
	font-size:1.181818em;/* 13 */
	margin:0 46px 0 0;
	}
.sunscreen footer p span{
	font-size:.846153em;/* 11 */
	}
.sunscreen footer p + p{
	width:290px;
	margin:0;
	}
.sunscreen footer p.logo{
	float:right;
	width:auto;
	}
.sunscreen footer .logo a{
	display:block;
	text-indent:-10000px;
	width:196px;
	height:32px;
	background:url('images/logo_skinceuticals.png') center center no-repeat;
	}
/* ////////////////////////////////////////////
 *
 *	$ = SURCHARGE RETINA
 *
 * ///////////////////////////////////////// */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){

	/* --------------- 
	 * protect
	 * ------------ */
	.sunscreen .protect .wrapper div{
		background-image:url('images/f_sun_HD.png');
		background-size:249px auto;
		}
	.sunscreen .protect .wrapper div + div{
		background-image:url('images/f_accessoires_HD.png');
		background-size:268px auto;
		}
	/* --------------- 
	 * consequences
	 * ------------ */
	.sunscreen .consequences p{
		background-image:url('images/f_visage_HD.png');	
		background-size:195px auto;
		}
	/* --------------- 
	 * how-protect
	 * ------------ */	
	.sunscreen .how-protect p{
		background-image:url('images/f_bouclier_HD.png');	
		background-size:150px auto;
		}
	/* --------------- 
	 * effective
	 * ------------ */
	.sunscreen .effective{
		background-image:url('images/border_effective_HD.gif');
		background-size:850px auto;
		}
	/* --------------- 
	 * antioxidant
	 * ------------ */
	.sunscreen .antioxidant .col{
		background-image:url('images/border-4x4.gif');
		background-size:2px auto;
		}
	/* --------------- 
	 * tips
	 * ------------ */
	.sunscreen .tips .plus{
		background-image:url('images/v_plus_HD.png');
		background-size:37px auto;
		}
	/* --------------- 
	 * footer
	 * ------------ */
	.sunscreen footer .logo a{
		background-image:url('images/logo_skinceuticals_HD.png');
		background-size:196px auto;
		}
}