/* //////////////////////////////////////////////////////////
 *
 * VICHY 2016 - PRODUCT SPECIFIQUE IDEAL SOLEIL
 *
 * /////////////////////////////////////////////////////// */
/* ==========================================================
 * OBJECT
 * ======================================================= */	
/* -------------------------------------------------------
 * obj_graph
 * ---------------------------------------------------- */	
.obj_graph{
	margin-bottom:30px;
	padding-left:35px;
	position:relative;
	}
.obj_graph::after{
	clear:both;
	content:"";
	display:block;
	}
.obj_graph .name{
	font-weight:700;
	margin:0 0 18px -35px;
	}
.obj_graph .graph{
	background:url('../images/f_graph.png') left bottom;
	background-size:3px auto;
	height:222px;
	position:relative;
	}
.obj_graph .graph::before,
.obj_graph .graph::after{
	background:#ccc;
	content:"";
	}
.obj_graph .graph::before{
	float:left;
	height:252px;
	width:1px;
	}
.obj_graph .graph::after{
	height:1px;
	left:-35px;
	position:absolute;
	top:225px;
	width:calc(100% + 35px);
	}
.obj_graph .ord{
	font-size:13px;
	left:-35px;
	position:absolute;
	text-align:right;
	top:12px;
	}
.obj_graph .ord li{
	margin-bottom:38px;
	}
.obj_graph .graph .data{
	font-size:12px;
	left:14px;
	padding-top:16px;
	position:absolute;
	text-align:center;
	top:225px;
	width:70px;
	z-index:2;
	}
.obj_graph .graph .data-2{
	left:84px;
	}
.obj_graph .graph .data span:first-child{
	background:#f2d7d9;
	color:#fff;
	display:block;
	font-size:18px;
	font-weight:500;
	height:50px;
	left:50%;
	margin-left:-28px;
	padding-top:6px;
	position:absolute;
	top:0;
	width:57px;
	}
.obj_graph .graph .data-2 span:first-child{
	background:#d3a8ab;
	}
.obj_graph .graph img{
	position:absolute;
	right:-10px;
	top:190px;
	width:68px;
	z-index:3;
	}
/* graph-1 */
.obj_graph.graph-1 .data-1 span:first-child{
	height:87px;
	top:-87px;
	}
.obj_graph.graph-1 .data-2 span:first-child{
	height:103px;
	top:-103px;
	}
/* graph-2 */
.obj_graph.graph-2 .data-1 span:first-child{
	background:#be6971;
	height:221px;
	top:-221px;
	}
.obj_graph.graph-2 .data-2 span:first-child{
	background:#723f44;
	height:85px;
	top:-85px;
	}
/* -------------------------------------------------------
 * prod bloc
 * ---------------------------------------------------- */	
/* ----
 * efficacy-derm
 * ---- */	
.obj_prod-bloc.efficacy-derm .center{
	
	}
.obj_prod-bloc.efficacy-derm .bloc-title{
	color:#d3a8ab;
	line-height:1.083333em;
	margin-bottom:30px;
	}
.obj_prod-bloc.efficacy-derm .mention{
	color:#9b9b9b;
	font-size:13px;
	line-height:1.2em;
	}
/* ==========================================================
 * MEDIA-QUERIES
 * ======================================================= */	
@media screen and (max-width:979px){
	
}

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

@media screen and (min-width:480px){
	.obj_graph .graph .data{font-size:15px;width:130px;}
	.obj_graph .graph .data-2{left:144px;}

@media screen and (min-width:980px){
	.obj_graph .name{font-size:17px;}

	.obj_prod-bloc.efficacy .content .center{padding-bottom:27px}
	.obj_prod-bloc.efficacy-derm .graph-container{position:relative;}
	.obj_prod-bloc.efficacy-derm .graph-container::before{border-left:1px dotted #ccc;content:"";height:270px;left:50%;position:absolute;top:35px;width:1px}
	.obj_prod-bloc.efficacy-derm .graph-container::after{clear:both;content:"";display:block;}
	.obj_prod-bloc.efficacy-derm .obj_graph{float:left;width:42.056074%;}
	.obj_prod-bloc.efficacy-derm .obj_graph.graph-2{float:right;}
}