/* COMMON */
@font-face{
	font-family:'FuturaND-Light';
	src:url('../webfonts/f80beac3-ddaf-43e0-b40c-0147bb18e1f6.woff2') format("woff2"), url('../webfonts/6fa8d7db-1486-45aa-897b-26dae909916a.woff') format("woff");
	}
@font-face{
	font-family:'FuturaND-Regular';
	src:url('../webfonts/1935222e-0e8a-444b-8e9d-cff3216d763c.woff2') format("woff2"), url('../webfonts/3b320088-03d1-4266-b8b7-afe8585fea8b.woff') format("woff");
	}
@font-face{
	font-family:'FuturaND-Bold';
	src:url('../webfonts/c767d6b7-8f4d-4dc3-b6d6-4dea97203d31.woff2') format("woff2"), url('../webfonts/6fc4945c-df4d-4a40-81cd-202afab440e7.woff') format("woff");
	}
p strong{
	font-weight: 600;
	}

/* SKINCONSULT */
.obj_header{
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	padding: 0 45px;
	height: 670px;
	background: none #E5EEFD;
	}
.obj_header .content{
	max-width: 1170px;
	width: 100%;
	height: 100%;
	display: flex;
	margin: 0 auto;
	justify-content: space-between;
	padding: 0 20px 0;
	}	

/* OBJ FACE */
.obj_header .obj_face{
	position: relative;
	width: 100%;
	max-width: 580px;
	max-height: 670px;
	}	
.obj_header .obj_face .obj_label {
   position: absolute;
   width: 18%;
   text-align: left;
	z-index: 3;
	}	
.obj_header .obj_face .obj_label.var_1 {
   top: 24%;
   right: 23.9%;
   transition: opacity .15s ease-in
	}	
.obj_header .obj_face .obj_label.var_2 {
   top: 42%;
   right: 4.5%;
   transition: opacity .35s ease-in;
	}
.obj_header .obj_face .obj_label.var_2::after{
	right: auto;
	top: 4px;
	left: -10px;
	}	
.obj_header .obj_face .obj_label.var_3 {
   top: 75%;
   right: 21.7%;
   transition: opacity .5s ease-in;
	}	
.obj_header .obj_face .obj_label.var_3::after {
   left: 62%;
   right: 0;
   top: -5px;
	}
.obj_header .obj_face .obj_label::after {
   content: '';
   position: absolute;
   top: -8px;
   left: -8px;
   display: block;
   width: .66667vh;
   height: .66667vh;
   background: #fff;
   border-radius: 100%;
   z-index: 2;
	}	
.obj_header .obj_face .obj_label .t_name {
   display: block;
   text-transform: uppercase;
   font-size: 1.45vh;
	line-height: 1em;
	font-weight: 600;
   color: #fff;
	}	
.obj_header .obj_face .obj_encart {
   display: inline-block;
   margin-top: 5px;
   padding: 0.4vh;
   text-transform: uppercase;
   font-size: 11px;
   font-weight: 600;
   line-height: 1;
   color: #fff;
   background: #3e4a59;
	}
.obj_header .obj_face .obj_encart.var_strength {
   background: #3c77e3;
	}	
.obj_header .obj_face .obj_encart.var_priority {
   background: #a82f31;
	}	

/* OBJ HEADER */
.obj_header .obj_text{
	margin: 0;
	padding: 200px 0 0;
	width: 100%;
	max-width: 530px;
	}
.obj_header .text{
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 420px;
	text-align: center;
	flex-direction: column;
	}
.obj_header .text h1{
	display: block;
	text-align: left;
	font: 52px/1em 'FuturaND-Light';
	font-weight: 200;
	text-transform: uppercase;
	color: #1a214f;
	margin: 0 auto;
	text-align: center;
	}	
.obj_header .text h1 strong{
	font-family: 'FuturaND-Bold';
	}	
.obj_header .text h1 sup {
   position: relative;
   top: 3px;
   font-family: 'FuturaND-Bold';
   font-size: 0.6em;
	}
.obj_header .text p{
	padding: 5px 0 10px;
	color: #1c213f;
	font-size: 32px;
	font-weight: 300;
	}	
.obj_header .steps .title{	
	width: 100%;
	text-transform: uppercase;
	color: #1c213f;
	font-size: 18px;
	font-weight: 600;
	padding: 20px 0;
	text-align: center;
	}
.obj_header .steps{
	position: relative;
	display: flex;
	margin: auto 0 10px;
	padding: 0 30px;
	width: 100%;
	width: 530px;
	flex-direction: column;
	}
.obj_header .steps .ctn_steps{
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 25px;
	}	
.obj_header .steps .ctn_steps figure{	
	position: relative;
	display: flex;
	width: 150px;
	height: 150px;
	text-align: center;
	background: #fff;
	flex-direction: column;
	}
.obj_header .steps::before {
   content: "";
   position: absolute;
   z-index: 99;
   display: block;
   left: 0;
   top: 0;
   width: 21px;
   height: 21px;
   border: solid 7px #1c213f;
   border-bottom: none;
   border-right: none;
   text-indent: -9999px;	
	}
.obj_header .steps::after {
   content: "";
   position: absolute;
   z-index: 99;
   display: block;
   right: 0;
   bottom: 0;
   width: 21px;
   height: 21px;
   border: solid 7px #1c213f;
   border-top: none;
   border-left: none;
   text-indent: -9999px;	
	}
.obj_header .steps .ctn_steps .i_selfie svg{
	width: 27px; height: 50px;
	margin: 20px auto 10px;
	fill:#1c213f;
	}
.obj_header .steps .ctn_steps .i_profile svg{
	width: 39px; height: 50px;
	margin: 20px auto 10px;
	fill:#1c213f;
	}
.obj_header .steps .ctn_steps .i_discover svg{
	width: 50px; height: 50px;
	margin: 20px auto 10px;
	fill:#1c213f;
	}
.obj_header .steps .ctn_steps figure img {
   display: block;
	width: auto;
   height: 50px;
   max-width: inherit;
   margin: 20px auto 10px;
	}
.obj_header .steps .ctn_steps figure figcaption{
	font-size: 15px;
	text-transform: uppercase;
	color: #1c213f;
	font-weight: 600;
	}	
.obj_header .obj_text .button{
	font-size: 15px;
	left: 50%;
	transform: translateX(-50%);
	}

@media screen and (max-width:1200px){	
	.obj_header .obj_face{
		margin-left: -18%;
		}
}
	
@media screen and (max-width:1024px){		
	.obj_header{
		height: auto;
		padding: 0 20px;
		}
	.obj_header .obj_face{
		margin-left: -326px;
		}	
	.obj_header .obj_text{
		padding: 0;
		margin: auto;
		}	
	.obj_header .steps{
		margin: 0 auto;
		order: 2;
		max-width: 460px;
		}
	.obj_header .steps::before{
		top: -10px;
		}	
	.obj_header .steps::after{
		bottom: -10px;
		}	
	.obj_header .steps .ctn_steps figure {
		width: 28%;
		}	
	.obj_header .text{
		margin: 0 auto 30px auto;
		order: 1;
		text-align: center;
		}	
	.obj_header .text h1 {
		margin: 0 auto;
		}	
	.obj_header .text p {
		padding: 10px 0 20px;
		font-size: 24px;
		}	
}

@media screen and (max-width:980px){		
	.obj_header .obj_face{
		margin-top: -90px;
		}	
	.obj_header .obj_text{
		padding: 0;
		margin: auto;
		}	
}		

@media screen and (max-width:767px){		
	.obj_header{
		height: auto;
		padding: 0;
		}
	.obj_header .content{
		flex-flow: column wrap;
		padding: 0;
		}
	.obj_header .obj_face{
		order: 2;
		margin: 0 auto;
		}
	.obj_header .obj_face .obj_label .t_name{
		font-size: 12px;
		}	
	.obj_header .obj_face .obj_encart{
		font-size: 8px;
		}	
	.obj_face figure img {
    	width: 100%;
		}	
	.obj_header .obj_text{
		order: 1;
		margin: 0 auto 20px;
		padding: 40px 20px 0;
		}
	.obj_header .text h1 {
		font-size: 32px;
		}	
	.obj_header .text h1 sup{
		top: 0;	
		}
	.obj_header .text p{
		padding: 10px 0 0;
		}	
	.obj_header .steps {
		max-width: 100%;
		padding: 0;
		margin: 0 auto 20px;
		}	
	.obj_header .steps .title{
		padding: 20px;
		}	
	.obj_header .steps .ctn_steps figure {
		width: 32%;
		}
}
	
/* BLOC TECHNOLOGY */
.obj_technology{
	margin: 40px auto 0;
	}
.obj_technology .content{
	max-width: 1070px;
	height: 100%;
	display: flex;
	z-index: 1;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0;
	background: #fff;
	}
.obj_technology .content .ctn_title{
	display: flex;
	width: 50%;
	background: no-repeat url("../images/f_analysis.gif") center center #fff;
	}	
.obj_technology .content h2{
	margin: auto;
	padding: 0 0 30px;
	font-size: 32px;
	font-weight: 600;
	color: #1c213f;
	}				
.obj_technology .content .ctn_text{
	width: 50%;
	height: 500px;
	padding: 0 45px;
	display: flex;
	} 	
.obj_technology .content .text{
	position: relative;
	margin: auto 0;
	z-index: 1;
	width: 71%;
	}	
.obj_technology .content .text p{
	padding: 0 0 30px;
	font-size: 16px;
	line-height: 22px;	
	}
.obj_technology .content .text p em {
    display: inline-block;
    position: relative;
	height: 20px;
	font-size: 12px;
    line-height: 20px;
    vertical-align: top;
	}	
.obj_technology .content .text .detects{
	position: relative;
	display: inline-block;
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	margin: 0 0 25px 20px;
	padding: 20px 0;
	}
.obj_technology .content .text .detects::before {
    content: "";
    position: absolute;
    z-index: 99;
    display: block;
    left: -20px;
    top: 0;
    width: 16px;
    height: 16px;
    border: solid 3px #d2d3d9;
    border-bottom: none;
    border-right: none;
    text-indent: -9999px;	
	}
.obj_technology .content .text .detects::after {
    content: "";
    position: absolute;
    z-index: 99;
    display: block;
    right: -20px;
    bottom: 0;
    width: 16px;
    height: 16px;
    border: solid 3px #d2d3d9;
    border-top: none;
    border-left: none;
    text-indent: -9999px;	
	}		
.obj_technology .content .text .button{
	font-size: 15px;
	}	
	
	
@media screen and (max-width:1024px){	
	.obj_technology .content .ctn_text{
		padding: 20px;
		z-index: 2;
		}
	.obj_technology .content .ctn_text::before{
		display: none;
		}	
	.obj_technology .content .text {
		width: 100%;
		}	
	.obj_technology .content .text h2,
	.obj_technology .content .text p{
		padding: 0 0 15px;
		}
	.obj_technology .content .text .detects::before{
		left: -10px;
		}	
	.obj_technology .content .text .detects::after{
		right: -10px;
		}	
		
}	
	
@media screen and (max-width:767px){	
	.obj_technology .content {
		flex-direction: column;
		padding: 30px 0 0;
		background: #fff;
		}
	.obj_technology .content .ctn_title {
		width: 100%;
		background: none;
		}	
	.obj_technology .content h2 {
		margin: auto;
		padding: 0 20px;
		text-align: center;
		}	
	.obj_technology .content .ctn_text {
		width: 100%;
		max-width: inherit;
		height: auto;
		padding: 30px 20px;
		}	
	.obj_technology .content .text .detects{
		margin: 0 auto 20px;
		padding: 20px;
		}	
	.obj_technology .content .text .detects::before{
		left: 0;
		}
	.obj_technology .content .text .detects::after{
		right: 0;
		}	
	.obj_technology .obj_face figure img{	
		width: 100%;
		max-width: 565px;
		}
	.obj_technology .obj_label .t_name{
		font-size: 12px;
		}	
	.obj_technology .obj_encart{
		font-size: 8px;
		}	
}	
	
/* OBJ SCIENCE */
.obj_science .content{
	max-width: 1070px;
	height: 100%;
	display: flex;
	overflow: hidden;
	justify-content: space-between;
	margin: 0 auto;
	padding: 70px 0 120px;
	}		
.obj_science .content figure{
	margin: auto -40px auto 0;	
	position: relative;
	}
.obj_science .content figure::before{
	position: absolute;
   left: 50%;
	z-index: 0;
   content: "";
   display: block;
   height: 770px;
   width: 20px;
	bottom: -260px;
   background: url("../images/v_rail.png") no-repeat center top; 
	}	
.obj_science .content figure img{	
	z-index: 1;
	position: relative;
	}
.obj_science .content .ctn_text{
	width: 100%;
	max-width: 565px;
	height: 520px;
	padding: 60px 45px 0 70px;
	display: flex;
	background: #fff;
	} 	
.obj_science .content .ctn_text::after {
   position: absolute;
   right:0;
	z-index: 0;
   content: "";
   display: block;
   height: 100%;
   width: 32.5%;
	max-height: 520px;
	margin-top: -60px;
   background: #fff;
	}
.obj_science .content .text{
	position: relative;
	z-index: 1;
	}	
.obj_science .content .text h2{
	padding: 0 0 20px;
	font-size: 32px;
	font-weight: 600;
	color: #1c213f;
	}	
.obj_science .content .text p{
	padding: 0 0 20px;
	font-size: 16px;
	line-height: 20px;	
	}	
.obj_science .content .text p em {
   display: inline-block;
   position: relative;
	height: 20px;
	font-size: 12px;
   line-height: 20px;
   vertical-align: top;
	}
.obj_science .content .text .t_mentions{
	font-size: 10px;
	line-height: 1.1em;
	color: #c4c4c4;
	}	
	
@media screen and (max-width:1024px){	
	.obj_science .content{
		padding: 70px 0;
		}
	.obj_science .content figure {
		margin: auto -45px auto 0;
		position: relative;
		}
	.obj_science .content figure img {
		max-width: 100%;
		}
}
	
@media screen and (max-width:767px){	
	.obj_science .content{
		padding: 70px 0;
		flex-direction: column;
		}
	.obj_science .content figure {
		margin: 0 auto;
		position: relative;
		order: 2;
		width: 90%;
		max-width: 320px;
		}	
	.obj_science .content .ctn_text{
		height: auto;
		order: 1;
		margin-bottom: 30px;
		padding: 30px 20px;
		z-index: 1;
		margin: 0 auto 30px;
		max-width: inherit;
		}
	.obj_science .content .ctn_text::after{
		display: none;
		}	
	.obj_science .content figure::before{
		bottom: -560px;
		}	
}

/* OBJ stats */
.obj_stats{
	width: 100%;
	background: #22264a;
	}
.obj_stats .content{
	position: relative;
	max-width: 1170px;
	height: 100%;
	display: flex;
	overflow: hidden;
	justify-content: space-between;
	margin: 0 auto;
	padding: 60px 0 115px;
	}		
.obj_stats .content .bg{
	margin: 0;	
	position: absolute;
	left: 190px;
	top: 0;
	z-index: 0;
	}
.obj_stats .content .bg img{	
	z-index: 1;
	position: relative;
	}
.obj_stats .content .ctn_text{
	position: relative;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	z-index: 2;
	text-align: center;
	color: #fff;
	}	
.obj_stats .text h2{
	display: block;
	text-align: left;
	font: 52px/1em 'FuturaND-Light';
	font-weight: 200;
	text-transform: uppercase;
	color: #fff;
	margin: 0 auto;
	text-align: center;
	}	
.obj_stats .text h2 strong{
	font-family: 'FuturaND-Bold';
	}	
.obj_stats .text h2 sup {
   position: relative;
   top: 3px;
   font-family: 'FuturaND-Bold';
   font-size: 0.6em;
	}	
.obj_stats .content .ctn_text h3{
	padding: 30px 0 60px;
	font-size: 32px;
	font-weight: 300;	
	}
.obj_stats .content .text ul{
	max-width: 250px;
	margin: 0 auto;
	}	
.obj_stats .content .text ul li{
	display: flex;
	flex-direction: row;
	text-align: left;
	margin: 0 0 30px;
	}	
.obj_stats .content .text ul li img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 38px;
	width: 41px;
	margin: 0 auto;
	}
.obj_stats .content .text ul li figure{
	position: relative;
	height: 55px;
	width: 55px;
	background: #fff;
	border-radius: 25px;
	margin: 0 20px 0 0;
	}	
.obj_stats .content .text ul li svg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 31px;
	width: auto;
	}	
.obj_stats .content .text ul li span{
	display: inline-block;	
	font-size: 70px;
	line-height: 50px;
	font-weight: 300;
	}	
.obj_stats .content .text ul li span em{
	display: inline-block;
	width: 50px;
	text-align: center;
	}	
.obj_stats .content .text ul li span strong{
	display: inline-block;
	padding: 0 0 0 15px;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 1em;
	font-weight: 700;
	}

@media screen and (max-width:767px){
	.obj_stats .content{
		padding: 60px 0;
		}
	.obj_stats .content .ctn_text .title{
		max-width: 280px;
		}
	.obj_stats .text h2 {
		font-size: 32px;
		}	
	.obj_stats .text h2 sup{
		top: 0;	
		}	
}
	
/* OBJ VIDEO */
.obj_video{
	position: relative;
	max-width: 1170px;
	height: 100%;	
	margin: 120px auto 0;
	}
.obj_player {
    position: relative;
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
	}
.obj_video .obj_player::before {
    content: "";
	left: 50%;
	position: absolute;
	top: 50%;
	background: rgba(0,0,0,.3);
    border-radius: 50%;
    height: 64px;
    margin: -32px 0 0 -32px;
    width: 64px;
	}
.obj_video .obj_player::after {
    content: "";
	left: 50%;
	position: absolute;
	top: 50%;
	border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 10px 0 10px 15px;
    margin: -10px 0 0 -6px;	
	}
.obj_video .obj_player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
	}
.obj_video .obj_player img {
	max-width: 100%;	
	}	

@media screen and (max-width:767px){
	.obj_video{
		margin: 60px auto 0;
		}
	.obj_video .obj_player {
		width: 100%;
		}
}

/* BLOC GRAPH */
.obj_graph .content{
	max-width: 1170px;
	height: 100%;
	display: flex;
	z-index: 1;
	justify-content: space-between;
	margin: 0 auto;
	padding: 70px 0 0;
	}		
.obj_graph .content .ctn_text{
	width: 100%;
	max-width: 565px;
	height: 565px;
	padding: 0 45px 0 70px;
	display: flex;
	background: #fff;
	} 	
.obj_graph .content .ctn_text::after {
    position: absolute;
    right: 0;
	z-index: 0;
    content: "";
    display: block;
    height: 100%;
    width: 32.5%;
	max-height: 565px;
    background: #fff;
	}
.obj_graph .content .text{
	position: relative;
	margin: auto 0;
	z-index: 1;
	}	
.obj_graph .content .text h2{
	padding: 0 0 30px;
	font-size: 32px;
	font-weight: 600;
	color: #1c213f;
	}	
.obj_graph .content .text p{
	padding: 0 0 30px;
	font-size: 16px;
	line-height: 22px;	
	}
.obj_graph .content .text p em {
    display: inline-block;
    position: relative;
	height: 20px;
	font-size: 12px;
    line-height: 20px;
    vertical-align: top;
	}	
.obj_graph .ctn_matrix{
	position: relative;
	width: 100%;
	max-width: 605px;
	max-height: 605px;
	background: #17203a;
	}	
.obj_graph .obj_label {
    position: absolute;
    width: 18%;
    text-align: left;
	z-index: 3;
	}	
.obj_graph .obj_label.var_1 {
    top: 17%;
    right: 23.9%;
    transition: opacity .15s ease-in
	}	
.obj_graph .obj_label.var_2 {
    top: 41%;
    right: 3.5%;
    transition: opacity .35s ease-in;
	}
.obj_graph .obj_label.var_3 {
    top: 81.4%;
    right: 23.7%;
    transition: opacity .5s ease-in;
	}	
.obj_graph .obj_label.var_3::after {
	left: auto; 
	right: 0;
	top: -4px;
	}
.obj_graph .obj_label::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    display: block;
    width: .66667vh;
    height: .66667vh;
    background: #fff;
    border-radius: 100%;
    z-index: 2;
	}	
.obj_graph .obj_label .t_name {
    display: block;
    text-transform: uppercase;
    font-size: 1.74vh;
	line-height: 1em;
	font-weight: 600;
    color: #fff;
	}	
.obj_graph .obj_encart {
    display: block;
    margin-top: 5px;
    padding: 0.4vh;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: #3e4a59;
	}
.obj_graph .obj_encart.var_strength {
    background: #3c77e3;
	}	
.obj_graph .obj_encart.var_priority {
    background: #a82f31;
	}	
.obj_graph .obj_matrix{
	position: relative;
	margin: 110px auto 0;
	width: 414px;
	height: 360px;
	}
.obj_graph .obj_matrix .bg-matrix{
	position: relative;
	display: block;
	width: 236px;
	height: 236px;
	margin: 0 auto;
	max-width: 100%;
	overflow: hidden;
	color: #fff;
	}
.bg-matrix svg{
	width: 236px;
	height: 236px;
	}
.obj_matrix .st0{
	fill:none;
	stroke:#8489a4;
	stroke-width: 1;
	stroke-miterlimit:10;
	}
	
/* BG GRADIENT*/ 
.obj_graph .obj_matrix .bg-gradient{
	position: absolute;
	display: block;
	width: 236px;
	height: 236px;
	margin: 0 auto;
	max-width: 100%;
	overflow: hidden;
	color: #fff;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 0;
	}
.bg-gradient svg{
	width: 236px;
	height: 236px;
	}
.obj_matrix .numbers{
	position: absolute; 
	top: 50%; right: 0;
	transform: translateY(-50%);
	z-index: 10;
	}
.obj_matrix .numbers li{
	display: inline-block;
	padding-left: 8px;
	font-size: 16px;	
	line-height: 16px;
	font-weight: 600;
	z-index: 7;
	text-align: left;
	text-transform: uppercase;	
	color: #fff;
	}

/* points */
.obj_graph .obj_matrix .obj_points{	
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	}
.obj_graph .obj_matrix .obj_points span{
	position: absolute;
	width: 11px;
	height: 11px;
	background: #fff;
	border-radius: 10px;
	}	
.obj_graph .obj_points .var_point-lack-firmness{
	top: -5.5px;
	left: 50%;
	transform: translateX(-50%)
	}
.obj_graph .obj_points .var_point-pores-visibility{
	transform: translate(85px,36px);
	}	
.obj_graph .obj_points .var_point-dark-spots-intensity{
	transform: translate(-95px, 36px);
	}
.obj_graph .obj_points .var_point-fine-lines{
	transform: translate(103px, 157px);
	}	
.obj_graph .obj_points .var_point-deep-wrinkles{
	transform: translate(45px, 218px);
	}
.obj_graph .obj_points .var_point-under-eye-wrinkles{
	transform: translate(-55px, 218px);
	}
.obj_graph .obj_points .var_point-under-eye-wrinkles{
	transform: translate(-55px, 218px);
	}
.obj_graph .obj_points .var_point-lack-radiance{
	transform: translate(-113px, 157px);
	}	
	
/* OBJ MATRIX */
.obj_matrix .obj_legend{
	position: absolute;
	bottom: 60px;
	width: 414px;
	height: 345px;
	}	
.obj_matrix .obj_legend li {
   position: absolute;
   text-align: left;
   text-transform: uppercase;
   font: 13px/1.2em;
	color: #fff;
	}	
.obj_matrix .var_priority .circleDot { fill : #a82f31 !important; }
.obj_matrix .var_strength .circleDot { fill : #3c77e3 !important; }
.obj_matrix .obj_legend li {
	position : absolute;
	}
.obj_matrix .obj_legend .var_lack-firmness {
	left:50%; bottom:50%;
	transform:translate(-50%,-145px);
	}
.obj_matrix .obj_legend .var_pores-visibility {
	left:50%; bottom:50%;
	transform:translate(85px,-105px);
	}
.obj_matrix .obj_legend .var_fine-lines {
	left:50%; top:50%;
	transform:translate(120px,25px);
	}
.obj_matrix .obj_legend .var_deep-wrinkles {
	left:50%; top:50%;
	transform:translate(45px,110px);
	}
.obj_matrix .obj_legend .var_under-eye-wrinkles {
	right:50%; top:50%;
	transform:translate(-45px,110px);
	}
.obj_matrix .obj_legend .var_lack-radiance {
	right:50%; top:50%;
	transform: translate(-120px,25px);
	}
.obj_matrix .obj_legend .var_dark-spots-intensity {
	right:50%; bottom:50%;
	transform:translate(-95px,-105px);
	}
.obj_matrix .obj_encart.var_strength {
    background: #3c77e3;
	}
.obj_matrix .obj_encart.var_priority {
    background: #a82f31;
	}	
.obj_matrix .obj_encart {
    margin-top: 0.75vh;
    padding: 0.4vh;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
	}


@media screen and (max-width:767px){
	.obj_matrix .obj_legend li {
		max-width: 20%;
		}
	.obj_graph .obj_legend li span {
    	min-height: 18px;
		height: 100%;
		}
}







	
/* ANIMATION */
.obj_graph .obj_matrix figure,
.obj_graph .obj_matrix .numbers,
.obj_graph .obj_matrix .obj_points span,
.obj_graph .obj_matrix .obj_legend li,
.obj_graph .obj_matrix .obj_legend li span,
.obj_graph .obj_matrix .numbers,
.obj_graph .obj_step > div{
	opacity: 0;
	transition: all 0.8s ease-out;
	}
.obj_graph .obj_matrix .obj_legend li span{
	padding:0;
	margin:0;
	overflow:hidden;
	}

/* ANIMATION STEP 1 */ 	
.obj_graph[data-step="step-01"] .obj_matrix	figure.bg-matrix{
	opacity: 1;
	}
	
.obj_graph[data-step="step-01"] .obj_points .var_point-lack-firmness{
	opacity: 1;
	transition-delay:0.2s;
	}
.obj_graph[data-step="step-01"] .obj_legend li.var_lack-firmness{
	opacity: 1;
	transition-delay:0.3s;
	}		
.obj_graph[data-step="step-01"] .obj_points .var_point-pores-visibility{
	opacity: 1;
	transition-delay:0.3s;
	}
.obj_graph[data-step="step-01"]  .obj_legend li.var_pores-visibility{
	opacity: 1;
	transition-delay:0.4s;
	}	
.obj_graph[data-step="step-01"] .obj_points .var_point-fine-lines{
	opacity: 1;
	transition-delay:0.4s;
	}
.obj_graph[data-step="step-01"] .obj_legend li.var_fine-lines{
	opacity: 1;
	transition-delay:0.5s;
	}	
.obj_graph[data-step="step-01"] .obj_points .var_point-deep-wrinkles{
	opacity: 1;
	transition-delay:0.5s;
	}
.obj_graph[data-step="step-01"] .obj_legend li.var_deep-wrinkles{
	opacity: 1;
	transition-delay:0.6s;
	}
.obj_graph[data-step="step-01"] .obj_points .var_point-under-eye-wrinkles{
	opacity: 1;
	transition-delay:0.6s;
	}
.obj_graph[data-step="step-01"] .obj_legend li.var_under-eye-wrinkles{
	opacity: 1;
	transition-delay:0.7s;
	}
.obj_graph[data-step="step-01"] .obj_points .var_point-lack-radiance{
	opacity: 1;
	transition-delay:0.7s;
	}
.obj_graph[data-step="step-01"] .obj_legend li.var_lack-radiance{
	opacity: 1;
	transition-delay:0.8s;
	}
.obj_graph[data-step="step-01"] .obj_points .var_point-dark-spots-intensity{
	opacity: 1;
	transition-delay:0.8s;
	}
.obj_graph[data-step="step-01"] .obj_legend li.var_dark-spots-intensity{
	opacity: 1;
	transition-delay:0.9s;
	}
.obj_graph[data-step="step-01"] .obj_step .step-var1{
	opacity: 1;	
	transition-delay:2s;
	}	
	
/* ANIMATION STEP 2 */		
.obj_graph[data-step="step-02"] .obj_matrix	figure.bg-matrix{
	opacity: 1;
	}
.obj_graph[data-step="step-02"] .obj_matrix .numbers{
	opacity: 1;	
	transition-delay:1.5s;
	}	
.obj_graph[data-step="step-02"] .obj_points span{
	opacity: 1;	
	}
.obj_graph[data-step="step-02"] .obj_legend li{
	opacity: 1;	
	}	
.obj_graph[data-step="step-02"] .obj_matrix	figure.bg-gradient{
	opacity: 1;
	transition-delay:1.8s;
	}	
.obj_graph[data-step="step-02"] .obj_step .step-var2{
	opacity: 1;	
	transition-delay:2.8s;
	}
	
/* ANIMATION STEP 3 */
.obj_graph[data-step="step-03"] .obj_matrix	figure.bg-matrix{
	opacity: 1;
	}
.obj_graph[data-step="step-03"] .obj_points span{
	opacity: 1;	
	}
.obj_graph[data-step="step-03"] .obj_legend li{
	opacity: 1;	
	}
.obj_graph[data-step="step-03"] figure.v_blue-chart{
	opacity: 1;	
	transition-delay:1.8s;
	}
.obj_graph[data-step="step-03"] .obj_matrix .obj_legend li span{
	height:auto;
	padding:0.4vh;
	margin:0.75vh 0 0 0;
	line-height: 1.2;
	transition-delay:1s;
	}
.obj_graph[data-step="step-03"] .obj_matrix .obj_legend li.var_pores-visibility span{
	opacity:1;
	transition-delay:2s;
	}
.obj_graph[data-step="step-03"] .obj_matrix .obj_legend li.var_under-eye-wrinkles span{
	opacity:1;
	transition-delay:2.2s;
	}	
.obj_graph[data-step="step-03"] .obj_matrix .obj_legend li.var_fine-lines span{
	opacity:1;
	transition-delay:2.4s;
	}
.obj_graph[data-step="step-03"] .obj_points span.var_point-pores-visibility{	
	opacity:1;
	background: #a82f31;
	transition-delay:2s;
	}
.obj_graph[data-step="step-03"] .obj_points span.var_point-under-eye-wrinkles{	
	opacity:1;
	background: #a82f31;
	transition-delay:2.2s;
	}
.obj_graph[data-step="step-03"] .obj_points span.var_point-fine-lines{
	background: #3c77e3;
	opacity: 1;	
	transition-delay:2.4s;	
	}	
.obj_graph[data-step="step-03"] .obj_step .step-var3{
	opacity: 1;	
	transition-delay:3.5s;
	}

/* ANIMATION STEP 4 */
.obj_graph[data-step="step-04"] .obj_matrix	figure.bg-matrix{
	opacity: 1;
	transition-delay:1.5s;
	}
.obj_graph[data-step="step-04"] .obj_points span{
	opacity: 1;	
	}
.obj_graph[data-step="step-04"] .obj_points span.var_point-pores-visibility{
	background: #a82f31;
	opacity: 1;	
	}	
.obj_graph[data-step="step-04"] .obj_points span.var_point-under-eye-wrinkles{
	background: #a82f31;
	opacity: 1;	
	}	
.obj_graph[data-step="step-04"] .obj_points span.var_point-fine-lines{
	background: #3c77e3;
	opacity: 1;	
	}	
.obj_graph[data-step="step-04"] .obj_legend li{
	opacity: 1;	
	}	
.obj_graph[data-step="step-04"] .obj_step .step-var4{
	opacity: 1;	
	transition-delay:2.5s;
	}		
.obj_graph[data-step="step-04"] .obj_matrix .obj_legend li span{
	opacity: 1;
	height:auto;
	padding:0.4vh;
	margin:0.75vh 0 0 0;
	line-height: 1.2;
	}
.obj_graph[data-step="step-04"] figure.v_blue-chart{
	opacity: 1;	
	}
.obj_graph[data-step="step-04"] figure.v_white-chart{
	opacity: 1;	
	transition-delay:1.5s;
	}	
	
/* STEP 4 */	
.obj_matrix .v_blue-chart{
	position: absolute;
	top: 58px;
	left: 50%;
	transform: translateX(-45%);
	}
.obj_matrix .v_blue-chart svg{
	width: 137px;
	height: 135px;
	fill: #3c77e3;
	}	
.obj_matrix .v_white-chart{
	position: absolute;
	top: 48px;
	left: 50%;
	transform: translateX(-60%);
	opacity: 0.6;
	}	
.obj_matrix .v_white-chart svg{
	width: 108px;
	height: 150px;
	fill: #c7d5ef;
	opacity: 0.6;
	}	

/* OBJ TITLE STEP */
.obj_graph .obj_step{
	position: absolute;
	width: 100%;
	top: 470px;
	left: 50%;
	transform: translateX(-50%); 
	margin: 0 auto;
	text-align: center;
	}
.obj_graph .obj_step div{
	top: 0;
	position: absolute;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
	}	
.obj_graph .obj_step h3{
	padding: 0 0 10px;
	text-transform: uppercase;
	color: #fff;
	font-weight: 600;
	font-size: 24px;
	}
.obj_graph .obj_step h3 span{
	display: inline-block;
	padding: 0 20px 0 0;
	font-size: 16px;
	font-weight: 300;
	}
.obj_graph .obj_step h3 span em{
	font-size: 24px;
	}
.obj_graph .obj_step p{
	font-size: 16px;
	color: #83858f;
	}

	
@media screen and (max-width:767px){
	.obj_graph .content{
		flex-direction: column;
		}
	.obj_graph .content .ctn_text{
		height: auto;
		padding: 30px 20px;
		max-width: inherit;
		order: 1;
		}	
	.obj_graph .content .ctn_text::after{
		display: none;
		}	
	.obj_graph .ctn_matrix{
		max-width: inherit;
		order: 2;
		min-height: 404px;
		}
	.obj_graph .obj_matrix{	
		position: absolute;
		margin: 30px auto 0;
		left: 50%;
		transform: translateX(-50%) scale(0.75);
		}
	.obj_graph .obj_step {
		top: 310px;
		margin: 0 auto 20px;
		}	
}	
	
/* REVIEWS */
.obj_prod-bloc.bloc_reviews .content {
 	background: #fff;
   margin: 0 auto;
   max-width: 1170px;
   padding: 70px 0;	
	text-align: center;
	}
.obj_prod-bloc.bloc_reviews .ctn_rate{
	display: flex;
	justify-content: center;
	}	
.obj_prod-bloc.bloc_reviews .ctn_rate .t_rate{
	font: 52px/1em 'FuturaND-Light';
   font-weight: normal;
	font-weight: 200;
	text-transform: uppercase;
	color: #1c213f;
	}
.obj_prod-bloc.bloc_reviews .ctn_rate .feedback{
   margin: 0 0 0 15px;		
	}
.obj_prod-bloc.bloc_reviews .ctn_rate .feedback .t_based{
	text-align: left;
	}
.obj_prod-bloc.bloc_reviews .ctn_rate .rating {
   margin: 0 0 8px;
   white-space: nowrap;
   font-size: 0;
   width: auto;
   height: auto;
   color: #1c213f;
	}
.obj_prod-bloc.bloc_reviews .ctn_rate .rating svg{
	height: 22px;
	width: 26px;
	color: #3c77e3;
	}
.obj_prod-bloc.bloc_reviews .obj_txt-review{
	width: 100%;
	max-width: 48%;
	margin: 30px auto 0; 
	text-align: center;
	}
.obj_prod-bloc.bloc_reviews .obj_txt-review .t_review{
	display: inline-block;
	padding: 0;
	font: 15px/1.2em 'FuturaND-Regular';
	color: #1c213f;
	text-align: center;
	}	
.obj_prod-bloc.bloc_reviews .obj_txt-review .feedback{
	display: flex;
	flex-flow: row nowrap;
	padding: 15px 0;
	justify-content: center;
	}		
.obj_prod-bloc.bloc_reviews .obj_txt-review .rating{
	width: auto;
	margin: auto 0;
	}	
.obj_prod-bloc.bloc_reviews .obj_txt-review .rating svg{
	height: 12px;
	width: 12px;
	color: #3c77e3;
	}
.obj_prod-bloc.bloc_reviews .obj_txt-review .t_user{
	padding: 0 0 0 10px;
	font: 13px/1.2em 'FuturaND-Bold';
	text-transform: uppercase;
	color: #1c213f;
	}
.obj_prod-bloc.bloc_reviews .t_load{
	display: inline-block;
	padding: 20px 0 30px;
	font: 13px/1.2em 'FuturaND-Regular';
	text-decoration: underline;
	color: #1c213f;
	}
.obj_prod-bloc.bloc_reviews .button{
	font-size: 15px;
	border: 1px solid #1c213f
	}
	

@media screen and (max-width:767px){
	.obj_prod-bloc.bloc_reviews .obj_txt-review {
		max-width: 80%;
		}
}

/* POPIN LEAVE COMMENT */
.popin.leave-comment{
	max-width: 980px;
	}
.popin.leave-comment .product-title{
	color: #000000;
	}	
.popin.leave-comment .cols-x-3 form{
	margin: 0 auto;
	}
.popin.leave-comment .cols-x-3 .col {
   display: block;
	}	
.popin.leave-comment .comment-step{
	margin-top: 25px;
	}
.popin.leave-comment .label-step{
	border-top: 1px solid #e8e8eb;
	padding-top: 25px;
	}
.popin.leave-comment .button{
	border-color: #1c213f; 
	}	
.popin.leave-comment .button .btn-bg{
	background: #1c213f;
	}
.popin.leave-comment .ctn_bottom {
   padding: 0;
	}






/* CARROUSEL MEDIA*/	
.obj_prod-bloc.media .content {
    background: #fff;
    margin: 0 auto;
    max-width: 1170px;
    padding: 70px 0;	
	}
.obj_prod-bloc.media .obj_carrousel {
    padding: 0 57px;
	}
.obj_prod-bloc.media .masque {
    max-width: none;
    overflow: hidden;
	}
.obj_prod-bloc.media .item {
    min-width: 244px;
	text-align: center;
	}		
.obj_prod-bloc.media .obj_carrousel.car-1 .nav {
    display: block;
	}	
	
/* INSTAGRAM */	
.obj_prod-bloc.instagram .icon {
	background: #1991b4;
	}
@media screen and (max-width:767px){
	.obj_prod-bloc.media .item {
		min-width: 206px;	
		}	
	.obj_prod-bloc.media .item img{	
		max-width: 100%;
		}	
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	