/* /////////////////////////////////////////////////////
 *
 * VICHY 2015 - DIAGNOSTIC MODIFACE FR
 * surcharge 2016 en fin de fichier
 *
 * ////////////////////////////////////////////////// */
/* =====================================================
 *
 * ================================================== */
.modiface{
	background:#f0f0f0;
	overflow:hidden;
	padding:60px 20px;
	position:relative;
	}
.modiface.result{
	overflow:visible;
	height:auto;
	}
.modiface .lazyload img{
	height:auto;
	max-width:100%;
	}
/* =====================================================
 * BUTTON
 * ================================================== */	
.nav .b_filet,
.ctn_push .b_filet{
	padding:0 25px 0 40px;
	}
.nav .b_filet::before,
.nav .b_filet::after,
.ctn_push .b_filet::before,
.ctn_push .b_filet::after{
	left:18px;
	}
.nav .b_filet.back{
	padding:0 40px 0 25px;
	}
.nav .b_filet.back::before,
.nav .b_filet.back::after{
	left:auto;
	right:18px;
	}
/* -----------
 * blue green
 *----------- */ 
.b_filet.blue-green{
	background-image:url('../images/b_filet-blue-green.gif');
	border-color:#003a5d;
	color:#003a5d;
	}
.b_filet.blue-green:hover{
	color:#fff;
	}
.b_filet.blue-green::before{
	background-image:url('../images/sprite_icon.png');
	background-position:-338px -75px;
	}	
/* reverse */	
.b_filet.blue-green.reverse{
	color:#fff;
	}
.b_filet.blue-green.reverse:hover{
	color:#003a5d;
	}
/* -----------
 * clear blue
 *----------- */ 
.b_filet.clear-blue{
	color:#4b555b;
	border-color:#95b5dc;
	background-image:url('../images/b_filet-clear-blue.gif');
	padding:0 20px 0 57px;
	} 
.b_filet.clear-blue:hover{
	color:#fff;
	}
/* icon */	 
.b_filet.clear-blue::before,
.b_filet.clear-blue::after{
	background:url('../images/sprite_icon.png') -110px top;
	background-size:512px auto;
	height:25px;
	left:29px;
	margin:-12px 0 0 -12px;
	width:25px;
	}
/* save */
.b_filet.clear-blue.save::after{
	background-position:-110px -25px;
	}
/* mail */
.b_filet.clear-blue.mail::before{
	background-position:-135px top;
	}
.b_filet.clear-blue.mail::after{
	background-position:-135px -25px;
	}
/* =====================================================
 * TYPO
 * ================================================== */
.modiface .title-1{
	color:#4e83c5;
	font-size:20px;
	font-weight:normal;
	line-height:1em;
	margin-bottom:14px;
	}
.modiface .title-2{
	color:#023a5d;
	font-size:40px;
	font-weight:700;
	line-height:1em;
	margin-bottom:14px;
	}
.modiface .title-3{
	font-size:36px;
	font-weight:100;
	line-height:em;
	text-align:center;
	}
/* mention */
.modiface .mention{
	color:#4e83c5;
	font-size:13px;
	}
.modiface .mention a{
	color:inherit;
	text-decoration:underline;
	}
.modiface .mention a:hover{
	text-decoration:none;
	}
/* =====================================================
 * OBJECT
 * ================================================== */
/* -----------------------------------------------------
 * BLOC
 * -------------------------------------------------- */
.modiface .obj_bloc{
	background:#fff;
	margin:0 auto;
	max-width:1170px;
	}
.modiface .obj_bloc > div{
	padding:83px 5.982905% 60px;/* 83px 70px 60px */
	}
.modiface .obj_bloc + .obj_bloc{
	margin-top:130px;
	}
.modiface .obj_bloc.ctn_push + .obj_bloc{
	margin-top:60px;
	}
.modiface .obj_bloc .title-1{
	text-align:center;
	}
.modiface .obj_bloc .title-2{
	text-align:center;
	margin-bottom:75px;
	}
/* push */	
.modiface .obj_bloc.ctn_push{
	overflow:hidden;
	position:relative;
	}
.modiface .obj_bloc.ctn_push > div{
	padding:38px 260px 38px 37.179487%;
	}
.modiface .obj_bloc.ctn_push h2{	
	font-size:2.285714em;
	font-weight:100;
	line-height:1.34375em;
	margin-bottom:2px;
	}
.modiface .obj_bloc.ctn_push h2 strong{
	color:#467ab9;
	}
.modiface .obj_bloc.ctn_push .ctn_bt{
	margin-top:-30px;
	position:absolute;
	right:5.128205%;/* 60px */
	top:50%;
	}
.modiface .obj_bloc.ctn_push figure{
	left:2.820512%;/* 33px */
	position:absolute;
	top:0;
	}
.modiface .obj_bloc.ctn_push figure img{
	height:auto;
	max-width:100%;
	}
/* ritual */	
.modiface .obj_bloc.ctn_ritual .obj_responsive-list{
	margin:10px 0;
	}
/* conseils */	
.modiface .obj_bloc.ctn_conseils > div{
	padding:64px 8.547008% 0;/* 64px 100px 0 */
	}
.modiface .obj_bloc.ctn_conseils .title-2{
	margin-bottom:96px;
	}
.modiface .obj_bloc.ctn_conseils .advices{
	margin-bottom:87px;
	}
.modiface .obj_bloc.ctn_conseils .advices li{
	clear:left;
	float:left;
	font-size:1.142857em;/* 16px */
	line-height:1.5em;
	min-height:96px;
	padding-left:106px;
	position:relative;
	width:calc(41.237113% - 106px);
	}
.modiface .obj_bloc.ctn_conseils .advices li:nth-of-type(even){
	clear:right;
	float:right;
	}
.modiface .obj_bloc.ctn_conseils .advices li:nth-of-type(3),
.modiface .obj_bloc.ctn_conseils .advices li:nth-of-type(3) ~ li{
	margin-top:20px;
	}
.modiface .obj_bloc.ctn_conseils .advices li::before{
	background:url('../images/sprite_icon-questions.png') 0 0;
	background-size:576px auto;
	content:"";
	display:block;
	height:96px;
	left:0;
	position:absolute;
	top:-10px;
	width:96px;
	}
.modiface .obj_bloc.ctn_conseils .advices li.icon-2::before{background-position:-100% top;}
.modiface .obj_bloc.ctn_conseils .advices li.icon-3::before{background-position:-200% top;}
.modiface .obj_bloc.ctn_conseils .advices li.icon-4::before{background-position:-300% top;}
.modiface .obj_bloc.ctn_conseils .advices li.icon-5::before{background-position:-400% top;}
.modiface .obj_bloc.ctn_conseils .advices li.icon-6::before{background-position:-500% top;}
.modiface .obj_bloc.ctn_conseils .advices li.icon-7::before{background-position:0 -100%;}
.modiface .obj_bloc.ctn_conseils .advices li.icon-8::before{background-position:-100% -100%;}
.modiface .obj_bloc.ctn_conseils .advices li.icon-9::before{background-position:-200% -100%;}
.modiface .obj_bloc.ctn_conseils .advices li.icon-10::before{background-position:-300% -100%;}
.modiface .obj_bloc.ctn_conseils .advices li.icon-11::before{background-position:0 -400%;}
.modiface .obj_bloc.ctn_conseils .advices li.icon-12::before{background-position:-100% -400%;}
.modiface .obj_bloc.ctn_conseils .advices li.icon-13::before{background-position:-200% -400%;}
.modiface .obj_bloc.ctn_conseils .advices li.icon-14::before{background-position:-300% -400%;}
.modiface .obj_bloc.ctn_conseils .advices li.icon-15::before{background-position:-400% -400%;}

.modiface .obj_bloc.ctn_conseils .advices li strong{
	color:#4e83c5;
	display:block;
	}
.modiface .obj_bloc.ctn_conseils .title-3{
	margin-bottom:45px;
	}
/* save */
.modiface .obj_bloc.ctn_save > div{
	padding-bottom:144px;
	padding-top:129px;
	}
.modiface .obj_bloc.ctn_save .title-2{
	color:#4e83c5;
	margin-bottom:54px;
	}
/* -----------------------------------------------------
 * DIAG PROGRESS
 * -------------------------------------------------- */	
.modiface .obj_diag-progress-bar{
	background:#ccd8df;		
	height:20px;
	margin:0 auto;
	max-width:1170px;
	position:relative;
	z-index:2;
	}
.modiface .obj_diag-progress-bar div{
	height:100%;
	overflow:hidden;
	}
.modiface .obj_diag-progress-bar div::after{
	background: url('../images/i_chevron.gif') calc(16.6% + 2px) center no-repeat,
				url('../images/i_chevron.gif') calc(33.3% + 4px) center no-repeat,
				url('../images/i_chevron.gif') calc(50.0% + 5px) center no-repeat,
				url('../images/i_chevron.gif') calc(66.6% + 7px) center no-repeat,
				url('../images/i_chevron.gif') calc(83.3% + 9px) center no-repeat;
	background-size:auto 20px;
	content:"";
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
	}
/* bar */
.modiface .obj_diag-progress-bar .bar{
	background:#023a5d;
	display:block;
	height:100%;
	position:relative;
	transition:width .5s;
	width:0;
	}
.modiface .obj_diag-progress-bar .bar::after{
	background:#023a5d;
	content:"";
	height:16px;
	margin-top:-8px;
	position:absolute;
	right:-8px;
	top:50%;
	-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
			transform:rotate(45deg);
	width:16px;
	}
/* txt */
.modiface .obj_diag-progress-bar .txt{
	color:#023a5d;
	font-size:20px;
	font-weight:700;
	line-height:1em;
	position:absolute;
	text-align:center;
	top:30px;
	transition:left .5s, opacity .5s;
	width:16.6%;
	}
.modiface .obj_diag-progress-bar .hidden{
	opacity:0;
	}
.modiface .obj_diag-progress-bar .sp1{
	left:0;
	}
.modiface .obj_diag-progress-bar .sp2{
	left:50%;
	}
.modiface .obj_diag-progress-bar .sp3{
	color:#cdd1d6;
	right:0;
	}
/* -----------------------------------------------------
 * PUSH
 * -------------------------------------------------- */	
/* conseils */
.modiface .obj_push.conseils-02 .visuel{
	margin-bottom:27px;
	}
.modiface .obj_push.conseils-02 h4{
	color:#4b555b;
	font-size:1.571428em;/* 22px */
	line-height:1.454545em;
	margin-bottom:17px;
	}
.modiface .obj_push.conseils-02 p{
	font-size:1.142857em;/* 16px */
	font-weight:300;
	line-height:1.5em;
	}
.modiface .obj_push.conseils-02 .link{
	color:#4e83c5;
	display:block;
	font-size:.928571em;/* 13 */
	font-weight:700;
	line-height:1em;
	margin:21px 0 0 15px;
	text-decoration:none;
	text-transform:uppercase;
	}
/* product */
.modiface .obj_push.product{
	font-size:16px;
	padding-top:25px;
	}
.modiface .obj_push.product h2{
	margin:5px 0;
	text-transform:uppercase;
	}
.modiface .obj_push.product header p,
.modiface .obj_push.product .obj_rating-customers a{
	display:none;
	}
.modiface .obj_rating-customers span{
	margin:0;
	}
/* -----------------------------------------------------
 * RESPONSIVE LIST
 * -------------------------------------------------- */
.modiface .obj_responsive-list{
	font-size:0;
	}
.modiface .obj_responsive-list .item{
	font-size:14px;
	}
/* conseils */
.modiface .obj_responsive-list.conseils .item{
	width:27.628865%;
	}
.modiface .obj_responsive-list.conseils .item + .item{
	margin-left:8.556701%;
	}
.modiface .obj_responsive-list.conseils .obj_push{
	display:block;
	margin:0;
	max-width:none;
	}
/* ritual */
.modiface .obj_responsive-list.ritual li{
	position:relative;
	padding:0 4%;
	width:28%;
	}
.modiface .obj_responsive-list.ritual li:first-child{
	padding-left:0;
	}
.modiface .obj_responsive-list.ritual li:last-child{
	padding-right:0;
	}
.modiface .obj_responsive-list.ritual li::before{
	background:url('../images/sprite_icon.png') -271px top;
	background-size:512px auto;
	bottom:220px;
	content:"";
	display:block;
	height:50px;
	left:-25px;
	position:absolute;
	width:50px;
	}
.modiface .obj_responsive-list.ritual li:first-child::before{
	display:none;
	}
.modiface .obj_responsive-list.ritual .num{
	color:#4e83c5;
	display:block;
	font-size:60px;
	font-weight:700;
	line-height:1em;
	margin-bottom:18px;
	}
.modiface .obj_responsive-list.ritual li > h3{	
	color:#023a5d;
	font-size:18px;
	font-weight:500;
	line-height:1em;
	margin-bottom:11px;
	text-transform:uppercase;
	}
.modiface .obj_responsive-list.ritual li > p{
	font-size:16px;
	line-height:30px;
	}
.modiface .obj_responsive-list.ritual .obj_push{
	max-width:289px;
	}
.modiface .obj_responsive-list.ritual .obj_push header{
	width:289px;
	}
/* -----------------------------------------------------
 * SAVE
 * -------------------------------------------------- */
.obj_save{
	text-align:center
	}
.obj_save li{
	display:inline;
	margin:0 12px;
	}
/* -----------------------------------------------------
 * SENTENCE
 * -------------------------------------------------- */
.modiface .obj_sentence{
	margin:50px 0 50px;
	}
.modiface .obj_sentence .sp1{
	display:block;
	margin-bottom:10px;
	}
.modiface .obj_sentence .sp2{
	margin:0 5px;
	}
.modiface .obj_sentence [role=combobox]{
	min-width:210px;
	}
/* -----------------------------------------------------
 * SHARER
 * -------------------------------------------------- */ 
.modiface .obj_sharer{
	height:17px;
	overflow:hidden;
	}
.modiface .obj_sharer li{
	display:list-item;
	margin:15px 0 0;
	}
.modiface .obj_sharer a,
.modiface .obj_sharer .network{
	background:url('../images/sprite_icon.png') -186px top no-repeat;
	background-size:512px auto;
	display:inline-block;
	height:17px;
	opacity:1;
	text-indent:-10000px;
	width:17px;	
	}
.modiface .obj_sharer .facebook a{
	background-position:-237px top;
	}
.modiface .obj_sharer .twitter a{
	background-position:-203px top;
	}
.modiface .obj_sharer .pinterest a{
	background-position:-220px top;
	}
.modiface .obj_sharer .g-plus a{
	background-position:-254px top;
	}
/* hover */	
.modiface .obj_sharer:hover{
	height:auto;
	}
.modiface .obj_sharer:hover .network{
	background-position:-186px -17px;
	}
.modiface .obj_sharer .facebook a:hover{
	background-position:-237px -17px;
	}
.modiface .obj_sharer .twitter a:hover{
	background-position:-203px -17px;
	}
.modiface .obj_sharer .pinterest a:hover{
	background-position:-220px -17px;
	}
.modiface .obj_sharer .g-plus a:hover{
	background-position:-254px -17px;
	}
/* =====================================================
 * INTRO
 * ================================================== */
.modiface .intro{
	background:#fff;
	height:100%;
	left:0;
	padding:0 20px;
	position:absolute;
	top:0;
	width:calc(100% - 40px);
	z-index:3;
	}
.modiface .intro > div{
	background:url('../images/f_intro.jpg') center center no-repeat;
	border:1px solid #dae1e5;
	height:616px;
	margin:59px auto 0;
	max-width:1170px;
	overflow:hidden;
	position:relative;
	}
.modiface .intro .ctn_text{
	position:absolute;
	right:4.358974%;
	text-align:center;
	top:123px;
	width:45.641025%;
	z-index:2;
	}
.modiface .intro .ctn_text h1{
	color:#4e83c5;
	font-size:48px;
	font-weight:100;
	line-height:1.208333em;
	margin-bottom:17px;
	}
.modiface .intro h1 strong{
	color:#003a5d;
	display:block;
	}
.modiface .intro .sub-title{
	color:#4b555b;
	font-size:16px;
	font-weight:300;
	line-height:24px;
	margin-bottom:38px;
	text-transform:none;
	}
/* sample */
.modiface .intro .ctn_samples{
	margin:0 auto;
	max-width:220px;
	/*position:relative;*/
	}
.modiface .intro .ctn_samples .packshot{
	left:0;
	margin-left:-15.355805%;/* -82px */
	position:absolute;
	width:36.329588%;
	}
.modiface .intro .ctn_samples p{
	font-size:25px;
	font-weight:100;
	line-height:1.2em;
	margin-bottom:42px;
	}
.modiface .intro .ctn_samples strong{
	color:#4e83c5;
	white-space:nowrap;
	}
/* duration */
.modiface .intro .ctn_duration{
	display:inline-block;
	margin-bottom:10px;
	position:relative;
	}
.modiface .duration{
	color:#4e83c5;
	font-size:13px;
	font-weight:500;
	line-height:1em;
	left:100%;
	margin:-6px 0 0 24px;
	position:absolute;
	text-transform:uppercase;
	top:50%;
	white-space:nowrap;
	}
.modiface .duration::before{
	background:url('../images/sprite_icon.png') -160px top;
	background-size:512px auto;
	content:"";
	display:inline-block;
	height:30px;
	margin:-6px 13px 0 0;
	vertical-align:middle;
	width:26px;
	}
.modiface .intro .obj_sharer{
	position:absolute;
	right:28px;
	top:31px;
	z-index:3;
	}
.modiface .intro .mannequin{
	left:38%;
	margin:0 0 0 -400px;
	position:absolute;
	top:-167px;
	width:56%;
	z-index:1;
	}
/* =====================================================
 * CAROUSSEL DIAG
 * ================================================== */
.modiface .obj_carrousel{
	background:#fff;
	height:596px;
	margin:0 auto;
	max-width:1170px;
	}
.modiface .obj_carrousel .masque{
	z-index:2;
	}
.modiface .obj_carrousel .item{
	height:322px;
	padding-top:108px;
	text-align:center;
	transition:opacity .5s;
	}
.modiface .obj_carrousel .item > div{
	padding:0 40px;
	}
.modiface .obj_carrousel .item.hidden{
	opacity:0;
	}
.modiface .obj_carrousel .item.visible{
	transition-delay:.75s;
	}
.modiface .obj_carrousel .item .sub-title{
	color:#023a5d;
	font-size:20px;
	line-height:1em;
	margin-bottom:6px;
	text-transform:none;
	}
/* nav */
.modiface .obj_carrousel .nav{
	position:relative;
	z-index:1;
	margin-top:20px;
	}
.modiface .obj_carrousel .nav button{
	position:absolute;
	}
.modiface .obj_carrousel .nav .b_prev{
	right:50%;
	margin-right:10px;
	}
.modiface .obj_carrousel .nav .b_next{
	left:50%;
	margin-left:10px;
	}
.modiface .obj_carrousel .nav .b_next span{
	min-width:73px;
	text-align:left;
	}
.modiface .obj_carrousel .nav .b_next.disabled{
	cursor:pointer;
	opacity:1;
	}
/* item05 */
.modiface .obj_carrousel .item05 .radio span:first-child{
	margin-right:40px;
	}
.modiface .obj_carrousel .item05 .radio label:nth-of-type(1){
	margin-right:25px;
	}
.modiface .obj_carrousel .item05 .radio label:nth-of-type(2){
	margin-right:0;
	}
/* =====================================================
 * QUESTIONS
 * ================================================== */
/* -----------------------------------------------------
 * ICON
 * -------------------------------------------------- */
.modiface .icon-response{
	font-size:0;
	text-align:center;
	}
.modiface .icon-response li{
	display:inline-block;
	font-size:14px;
	max-width:152px;
	vertical-align:text-top;
	}
.modiface .icon-response.n-child-4 li{
	width:25%;
	}
.modiface .icon-response.n-child-6 li{
	width:16.666666%;
	}
.modiface .icon-response li > span{
	display:block;
	margin:0 5px 10px;
	position:relative;
	}
.modiface .icon-response [role]{
	background:url('../images/sprite_icon-questions.png');
	background-size:600% auto;
	display:block;
	height:96px;
	left:50%;
	margin:0 0 0 -48px;
	outline:none;
	position:absolute;
	top:5px;
	width:96px;
	}
/* checked */
.modiface .icon-response label{
	display:block;
	font-size:16px;
	line-height:1em;
	margin:0;
	padding:121px 0 10px;
	transition:background-color .25s;
	}
.modiface .icon-response span:hover + label,
.modiface .icon-response label:hover{
	background:#f7fafe;
	}
.modiface .icon-response input:checked ~ label{
	background:#f1f7ff;
	}
/* ------
 * Q01
 * --- */	
#aria-Quiz01_Q01_R01{
	background-position:left top;
	}
#aria-Quiz01_Q01_R02{
	background-position:-100% top;
	}
#aria-Quiz01_Q01_R03{
	background-position:-200% top;
	}
#aria-Quiz01_Q01_R04{
	background-position:-300% top;
	}
#aria-Quiz01_Q01_R05{
	background-position:-400% top;
	}
#aria-Quiz01_Q01_R06{
	background-position:-500% top;
	}
span:hover #aria-Quiz01_Q01_R01,
input:checked + #aria-Quiz01_Q01_R01{
	background-position:left -200%;
	}
span:hover #aria-Quiz01_Q01_R02,
input:checked + #aria-Quiz01_Q01_R02{
	background-position:-100% -200%;
	}
span:hover #aria-Quiz01_Q01_R03,
input:checked + #aria-Quiz01_Q01_R03{
	background-position:-200% -200%;
	}
span:hover #aria-Quiz01_Q01_R04,
input:checked + #aria-Quiz01_Q01_R04{
	background-position:-300% -200%;
	}
span:hover #aria-Quiz01_Q01_R05,
input:checked + #aria-Quiz01_Q01_R05{
	background-position:-400% -200%;
	}
span:hover #aria-Quiz01_Q01_R06,
input:checked + #aria-Quiz01_Q01_R06{
	background-position:-500% -200%;
	}
/* ------ 
 * Q02
 * --- */	
#aria-Quiz01_Q02_R01{
	background-position:left -100%;
	}
#aria-Quiz01_Q02_R02{
	background-position:-100% -100%;
	}
#aria-Quiz01_Q02_R03{
	background-position:-200% -100%;
	}
#aria-Quiz01_Q02_R04{
	background-position:-300% -100%;
	}
span:hover #aria-Quiz01_Q02_R01,
input:checked + #aria-Quiz01_Q02_R01{
	background-position:left -300%;
	}
span:hover #aria-Quiz01_Q02_R02,
input:checked + #aria-Quiz01_Q02_R02{
	background-position:-100% -300%;
	}
span:hover #aria-Quiz01_Q02_R03,
input:checked + #aria-Quiz01_Q02_R03{
	background-position:-200% -300%;
	}
span:hover #aria-Quiz01_Q02_R04,
input:checked + #aria-Quiz01_Q02_R04{
	background-position:-300% -300%;
	}
/* -----------------------------------------------------
 * radio
 * -------------------------------------------------- */	
.modiface .radio [role]{
	background:#f2f5f7;
	border:1px solid #f2f5f7;
	border-radius:50%;
	height:24px;
	outline:none;
	position:relative;
	top:0;
	vertical-align:middle;
	width:24px;
	}
	
.modiface .radio [role]::after{
	background:#869cbd;
	border-radius:50%;
	content:"";
	height:10px;
	left:50%;
	margin:-5px 0 0 -5px;
	position:absolute;
	top:50%;
	-webkit-transform:scale(0);
		-ms-transform:scale(0);
			transform:scale(0);
	transition: -webkit-transform .25s;
	transition: 		transform .25s;	
	width:10px;
	}
.modiface .radio [role][aria-checked=true]::after{
	-webkit-transform:scale(1);
		-ms-transform:scale(1);
			transform:scale(1);
	}
/* -----------------------------------------------------
 * select
 * -------------------------------------------------- */	
.modiface span[role="combobox"]{
	background:#f2f5f7;
	border-color:#f2f5f7;
	color:#4f73a5;
	font-size:16px;
	font-weight:700;
	outline:none;
	padding:9px 29px 7px 19px;
	text-align:left;
	vertical-align:middle;
	}
.modiface span[role="combobox"]::after{
	background:none;
	border-color: #4f73a5;
	border-style:solid;
	border-width:0 2px 2px 0;
	margin-top:-4px;
	-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
			transform:rotate(45deg);
	transition: -webkit-transform .25s;
	transition: 		transform .25s;	
	width:5px;
	}
.modiface span[role="combobox"][aria-expanded=true]::after{
	-webkit-transform:rotate(225deg);
		-ms-transform:rotate(225deg);
			transform:rotate(225deg);
	}
.modiface span[role=combobox] + div {
	top:34px;	
	}
.modiface span[role=combobox] + div .border{
	background:#f2f5f7;
	border-width:0;
	text-align:left;
	}
.modiface span[role=combobox] + div .jQueryScroll{
	margin:0;
	max-height:96px;
	}
.modiface li[role="option"]{
	padding:8px 20px;
	}
.modiface li[role="option"][aria-selected="true"]{
	background:#e4f2f4;
	color:rgba(75, 85, 91, .8);
	}
/* -----------------------------------------------------
 * slider
 * -------------------------------------------------- */	
.modiface .ctn_slider{
	margin:65px auto 0;
	max-width:458px;
	padding:50px 0 0 0;
	position:relative;
	}
.modiface .ctn_slider > span:not(.label){
	color:#4e83c5;
	font-size:16px;
	font-weight:700;
	line-height:22px;
	position:absolute;
	top:0;
	width:140px;
	}
.modiface .ctn_slider span.lt{
	left:-70px;
	}
.modiface .ctn_slider span.rt{
	right:-70px;
	}
.modiface .slider{
	background:#ccd8df url('../images/f_slider.gif') left bottom;
	background-size:100% 16px;
	border-radius:4px;
	height:8px;
	margin:0 auto 20px;
	position:relative;
	}
.modiface .slider::after{
	background:url('../images/f_slider.gif') left top no-repeat;
	background-size:100% 16px;
	border-radius:4px;
	content:"";
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:2;
	}
.modiface .ui-slider-handle{
	background:#4e83c5;
	border:2px solid #fff;
	border-radius:50%;
	height:24px;
	margin:-14px 0 0 -14px;
	outline:none;
	position:absolute;
	top:50%;
	-webkit-transform:scale(.5);
		-ms-transform:scale(.5);
			transform:scale(.5);
	transition: -webkit-transform .25s;
	transition:			transform .25s;
	width:24px;
	z-index:3;
	}
.modiface .ui-slider-handle:hover,
.modiface .ui-slider-handle.ui-state-active{
	-webkit-transform:scale(1);
		-ms-transform:scale(1);
			transform:scale(1);
	}
.modiface .ui-slider-handle span{
	display:none;
	}
.modiface .ctn_slider .label{
	font-size:16px;
	font-weight:300;
	line-height:1.2em;
	}
/* /////////////////////////////////////////////////////
 *
 * MEDIA QUERIES
 *
 * ////////////////////////////////////////////////// */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){
	.b_filet.blue-green::before{background-position:-190px -41px;}	
}
/* =====================================================
 * max-width 1172
 * ================================================== */
@media screen and (max-width:1172px){
	.modiface .intro .ctn_text{top:90px;}
	.modiface .duration{margin:0 0 10px;position:static;}
	.modiface .intro .mannequin{margin-left:calc(-400px + (1172px - 100vw) * .2);margin-top:calc((1172px - 100vw) * .45);}
	
}
/* =====================================================
 * max-width 960
 * ================================================== */
@media screen and (max-width:960px){
	.modiface .obj_bloc.ctn_push > div{padding-left:40%;padding-right:20px;}
	.modiface .obj_bloc.ctn_push .ctn_bt{margin:20px auto 10px;position:static;}
	.modiface .obj_bloc.ctn_push figure{top:calc((960px - 100vw) / 10);width:31.739130%;}
	
	.modiface .intro .ctn_text h1{font-size:36px;}
}

/* =====================================================
 * max-width 768
 * ================================================== */
@media screen and (max-width:768px){
	.modiface .intro .ctn_text{position:relative;right:0;top:30px;width:auto;}
	.modiface .intro .ctn_samples .packshot{margin:0 auto;position:static;width:194px;}
	.modiface .intro .mannequin{display:none;}
	
	.modiface .obj_diag-progress-bar .txt{width:auto;}
	.modiface .obj_diag-progress-bar .sp1{left:30px !important;}
	.modiface .obj_diag-progress-bar .sp2{left:50% !important;}
	.modiface .obj_diag-progress-bar .sp3{right:30px;}
	.modiface .obj_diag-progress-bar .hidden{opacity:1;color:#cdd1d6;}
	.modiface .obj_diag-progress-bar .sp1.hidden{color:#023a5d;}
	
	.modiface .obj_sentence .sp2{display:block;margin:10px 0;}
	
	.modiface .obj_carrousel{height:auto;}
	.modiface .obj_carrousel .item{height:auto;padding:88px 0 65px;}
	.modiface .obj_carrousel .nav{height:60px;padding:0 0 50px;}
	.modiface .obj_carrousel .item05 .radio span:first-child{display:block;margin:0 0 15px;}
	
	.modiface .question .icon-response li{max-width:none;width:33.3%;}
	
	.modiface .ctn_slider span.lt{left:0;width:auto;}
	.modiface .ctn_slider span.rt{right:0;width:auto;}
}
/* =====================================================
 * max-width 640
 * ================================================== */
@media screen and (max-width:640px){
	.modiface{height:542px;padding:0;}
	
	.modiface .title-1{font-size:16px;margin-bottom:5px;}
	.modiface .title-2{font-size:24px;}
	
	.modiface .obj_bloc + .obj_bloc{margin-top:30px;}
	.modiface .obj_bloc.ctn_push + .obj_bloc{margin-top:0;}
	
	.modiface .obj_bloc.ctn_ritual > div{padding:42px 30px 23px;}
	.modiface .obj_bloc.ctn_ritual .title-2{margin-bottom:21px;}
	.modiface .obj_bloc.ctn_ritual .obj_responsive-list{margin-bottom:26px;}
	
	.modiface .obj_bloc.ctn_conseils > div{padding:28px 30px 20px;}
	.modiface .obj_bloc.ctn_conseils .title-2{margin-bottom:61px;}
	.modiface .obj_bloc.ctn_conseils .advices{margin-bottom:62px;}
	.container .modiface .obj_bloc.ctn_conseils .advices li{float:none;font-size:14px;min-height:50px;padding-left:57px;width:auto;}
	.container .modiface .obj_bloc.ctn_conseils .advices li + li{margin-top:60px;}
	.modiface .obj_bloc.ctn_conseils .advices li::before{background-size:288px auto;height:48px;width:48px;}
	.modiface .obj_bloc.ctn_conseils .title-3{font-size:16px;margin-bottom:23px;}
	
	.modiface .obj_bloc.ctn_push{background:#4e83c5;color:#bdd5e3;cursor:pointer;}
	.modiface .obj_bloc.ctn_push> div{padding:7.777777% 30px 6.111111% 38.888888%;}
	.modiface .obj_bloc.ctn_push h2{font-size:16px;}
	.modiface .obj_bloc.ctn_push h2 br{display:none;}
	.modiface .obj_bloc.ctn_push h2 strong{color:#fff;}
	.modiface .obj_bloc.ctn_push .ctn_bt{position:absolute;right:10000px;}
	.modiface .obj_bloc.ctn_push .mention{color:inherit;font-size:12px;}
	.modiface .obj_bloc.ctn_push figure{left:7.5%;margin-top:20px;top:calc((100vw - 640px) / 90);width:27.361111%;}
	
	.modiface .obj_bloc.ctn_save > div{padding:30px 30px 45px;}
	.modiface .obj_bloc.ctn_save .title-2{margin-bottom:30px;}
	
	.modiface .obj_diag-progress-bar{height:10px;}
	.modiface .obj_diag-progress-bar .txt{font-size:12px;top:18px;}
	.modiface .obj_diag-progress-bar .sp1{left:15px !important;}
	.modiface .obj_diag-progress-bar .sp3{right:15px;}
	
	.modiface .obj_push.conseils-02 h4,
	.modiface .obj_push.conseils-02 p,
	.modiface .obj_push.conseils-02 .link{font-size:14px;line-height:1.2em;margin-left:0;}
	.modiface .obj_push.conseils-02 h4{margin-bottom:9px;}
	.modiface .obj_push.conseils-02 .link{margin-top:10px;}
	
	.modiface .obj_push.product{font-size:1em;}
	.modiface .obj_push.product h2{margin:0;}
	
	.container .modiface .obj_responsive-list .item{display:block;width:auto;}
	
	.modiface .obj_responsive-list.conseils .item + .item{margin-left:0;}
	.modiface .obj_responsive-list .obj_push.conseils-02{padding-left:160px;}
	.modiface .obj_responsive-list.conseils .item{border-width:0;margin:0;padding:0;}
	.modiface .obj_responsive-list .conseils-02 .visuel{width:140px;}
	
	.modiface .obj_responsive-list.ritual li{padding:0;}
	.modiface .obj_responsive-list.ritual li + li{padding-top:112px;}
	.modiface .obj_responsive-list.ritual li::before{background-position:-136px top;background-size:256px auto;height:25px;left:50%;margin-left:-12px;top:34px;width:25px;}
	.modiface .obj_responsive-list.ritual .num{font-size:28px;margin-bottom:6px;}
	.modiface .obj_responsive-list.ritual li > h3{font-size:16px;}
	.modiface .obj_responsive-list.ritual li > p{font-size:14px;line-height:1.2em;}
	.modiface .obj_responsive-list.ritual .obj_push img{width:148px;}
	
	.obj_save li{display:list-item;}
	.obj_save li + li{margin-top:15px;}
	.obj_save li .b_filet{display:block;font-size:10px;height:50px;line-height:50px;margin:0 auto;max-width:165px;}
	
	.modiface .intro{padding:0;width:100%;}
	.modiface .intro > div{border-width:0;height:542px;margin:0;}
	.modiface .intro .ctn_text{padding:0 30px;top:45px;}
	.modiface .intro .ctn_text h1{margin-bottom:30px;}
	.modiface .intro .sub-title{display:none;}
	.modiface .intro .ctn_samples{max-width:250px;}
	
}
/* =====================================================
 * max-width 480
 * ================================================== */
@media screen and (max-width:480px){

	.modiface .intro .ctn_text{margin:0 auto;max-width:250px;top:62px;}
	.modiface .intro .ctn_text h1{font-size:28px;line-height:1.142857em;}
	.modiface .intro .ctn_samples .packshot{width:118px;}
	.modiface .intro .ctn_samples p{font-size:16px;margin:0 auto 29px;max-width:170px;}
	.modiface .duration{margin-bottom:37px;}
	
	.modiface .obj_carrousel .item{padding:67px 0 45px;}
	.modiface .obj_carrousel .title-2{margin-bottom:6px;}
	.modiface .obj_carrousel .item .sub-title{margin-bottom:44px;}
	.modiface .obj_carrousel .nav button{height:50px;font-size:10px;line-height:48px;}
	.modiface .obj_carrousel .nav .b_next span{min-width:56px;}
	
	.modiface .question .icon-response li{width:50%;}
	.modiface .question .icon-response li + li + li{margin-top:16px;}
	.modiface .icon-response [role]{height:47px;margin:0 0 0 -23px;width:47px;}
	.modiface .icon-response label{font-size:14px;padding-top:62px}
	
	.modiface .ctn_slider{margin-bottom:30px;margin-top:45px;padding-top:37px;}
	.modiface .ctn_slider > span:not(.label){font-size:12px;}
	.modiface .ctn_slider .label{font-size:12px;}
	.modiface .ui-slider-handle{border-width:4px;height:30px;margin:-19px 0 0 -19px;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);width:30px;}
}

/* =====================================================
 * max-width 360
 * ================================================== */
@media screen and (max-width:360px){
	.modiface .obj_responsive-list .obj_push.conseils-02{margin:0 auto;max-width:200px;padding-left:0;}
	.modiface .obj_responsive-list .conseils-02 .visuel{position:static;margin:0 auto 16px;}
}
/* /////////////////////////////////////////////////////
 *
 * VICHY 2016 - SURCHARGE
 *
 * ////////////////////////////////////////////////// */
.pg_diagnostic .container{background:transparent;}
.pg_diagnostic .modiface{padding-bottom:0;padding-top:0;}
.pg_diagnostic .modiface,
.pg_diagnostic .modiface .intro{background:transparent;}
.modiface .intro > div{margin-top:0;}
.pg_diagnostic .main-footer{margin-top:90px;} 
.obj_article.diagnostic .icon-response span[role]{border:none;z-index:1;}
.obj_article.diagnostic .icon-response span[role]::after{display:none;}
.modiface span[role="combobox"]{height:auto;line-height: normal;width:auto;}
.modiface .obj_carrousel .nav button{height:auto}
.modiface span[role="combobox"]::after{height:5px;}
@media screen and (max-width:980px){
.pg_diagnostic .container{padding:0}
.pg_diagnostic .main-footer{margin-top:0;} 
}


 