/*-- BANNIERE --*/

#Hero{
    margin-bottom: -120px;
}
.banner_skinscope{
	width:auto;
	max-width:960px;
	margin:0 auto;
	padding:0;
	height:607px;
    background: #efefef url('images/f_banner_skinscope.jpg') center top no-repeat;
	}
.banner_skinscope .ctn_header {
    float: right;
    padding: 107px 25px;
    width: 45%;
}
.banner_skinscope .ctn_header h1 {
    font: 21px/30px "FuturaBT-Medium",arial;
    color: #008ab0;
    letter-spacing: 1.8px;
    text-align: right;
    text-transform: uppercase;
}
.banner_skinscope .ctn_header h1 strong{
    font: 50px/50px "FuturaBT-Medium",arial;
    letter-spacing: 4.3px;
}
.banner_skinscope .ctn_header p {
    float: right;
    margin: 93px 0;
    width: 340px;
    font: 14px/24px "FuturaBT-Light",arial;
    letter-spacing: 1.4px;
    text-align: left;
}

/*-- SECTION --*/

section {
    margin: 0 auto;
	max-width:960px;
}
section header {
    margin-bottom: 18px;
}
section article header h2 {
    font: 21px/30px "FuturaBT-Medium",arial;
    color: #008ab0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/*-- SECTION 01 --*/

#Section01{
    border-bottom: 7px solid #e1eeef;
    padding: 190px 0 0;
    margin-bottom: -120px;
}
#Section01 .content {
    width: 665px; 
}
#Section01 .content p {
    margin: 0 0 24px;
    font: 14px/24px "FuturaBT-Light",arial;
    /*letter-spacing: 0.3px;*/
}
#Section01 .content ul{
    margin-top: -20px;
}
#Section01 .content ul li {
    margin: 0 0 9px;
    padding-left: 36px;
    letter-spacing: 0.6px;
    font: 14px/18px "FuturaBT-Light",arial;
    background:  url("images/b_arrow.gif") no-repeat scroll 9px 6px; 
}
#Section01 .ctn_video {
    margin-top: 60px;
}
#Section01 .ctn_video .content{
    width: auto;
}
#Section01 .ctn_video .content figure {
    display: inline-block;
    position: relative;
    margin-left: -63px;
}
#Section01 .ctn_video .content figure img {
    max-width: 813px; 
}
#Section01 .ctn_video .content figure .btn_player {
    position: absolute;
    left: 50%; top: 25%;
    display: block;
    height: 114px;
    width: 115px;
    margin-left: -55px;
    background: url("images/i_player.png") no-repeat scroll 0 0;
}
#Section01 .ctn_video .content a:hover .btn_player {
    background-position: 0 bottom;
}

/*-- SECTION 02 --*/

#Section02 {
    border-bottom: 7px solid #e1eeef;
    width: auto;
    padding: 190px 0 0;
    margin-bottom: -120px;
}
#Section02 article {
    width: 633px;
    padding: 19px 0 14px 0;
    margin-bottom: 0;
}
#Section02 header {
    margin-bottom: 5px;
}
#Section02 header h2 {
    font: 21px/30px "FuturaBT-Medium",arial;
    color: #008ab0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
#Section02 header h3 a {
    display: block;
    width: 100%;
    padding: 0;
    font: 14px/14px "FuturaBT-Heavy",arial;
    text-transform: uppercase;
    color: #008ab0;
    background:  url("images/b_faq-close.gif") no-repeat scroll right 5px; 
}

/* Before After */

#Section02 .ctn_second_part article{
    height: 378px;
    margin-bottom: 14px;
    border-bottom: none; 
}
#Section02  .content p {
    font: 14px/24px "FuturaBT-Light",arial;
    letter-spacing: 0.3px;
    margin: 0 0 24px;
}
#Section02 .content ul{
    margin: 0px;
}
#Section02 .content ul li {
    margin: 0 0 9px;
    padding-left: 36px;
    letter-spacing: 0.6px;
    font: 14px/18px "FuturaBT-Light",arial;
    background:  url("images/b_arrow.gif") no-repeat scroll 9px 6px; 
}
#Section02 .content .ctn_color{
    height: 153px;
}
#Section02 .content .ctn_color ul {
    float: left;
    margin: 0;
    width: 50%;
}
#Section02 .content .ctn_color ul li {
    padding-left: 55px;
    height: 29px;
    padding-top: 16px;
    font: 14px/14px "FuturaBT-Light",arial;
}
#Section02 .content .ctn_color_01 li {
    background:  url("images/v_color_01.gif") no-repeat scroll 0 0; 
}
#Section02 .content .ctn_color_01 li + li {
    background:  url("images/v_color_03.gif") no-repeat scroll 0 0; 
}
#Section02 .content .ctn_color_01 li + li + li {
    background:  url("images/v_color_05.gif") no-repeat scroll 0 0; 
}
#Section02 .content .ctn_color_02 li {
    background:  url("images/v_color_02.gif") no-repeat scroll 0 0; 
}
#Section02 .content .ctn_color_02 li + li {
    background:  url("images/v_color_04.gif") no-repeat scroll 0 0; 
}
#Section02 .content .ctn_color_02 li + li + li {
    background:  url("images/v_color_06.gif") no-repeat scroll 0 0; 
    height: 37px;
    padding-top: 8px;
}
#Section02 .content .t_mention {
    clear: both;
    font: 14px/14px "FuturaBT-Light",arial;
    margin: 20px 0;
}
#Section02 .ctn_second_part{
    clear: both;
}
#Section02 .obj_before-after figure img {
    height: 379px;
    width: 636px;
}
#Section02 .obj_before-after figure span {
    position: absolute;
    width: 121px;
    color: #ffffff;
    font: 10px/25px "FuturaBT-Medium",arial;
    text-align: center;
    text-transform: uppercase;
    background: url("images/b_before_short.png") no-repeat scroll 0 0;
}
#Section02 .obj_before-after.obj_before-after_01 figure span {
    left: 494px;
    top: 240px;
}
#Section02 .obj_before-after.obj_before-after_01 figure .ctn_top{
    left: 494px;
    top: 208px;
}
#Section02 .obj_before-after.obj_before-after_01 .ctn_left {
    left: 16px;
    top: 230px;
}
#Section02 .obj_before-after.obj_before-after_02 .obj_before-after-left span {
    left: 9px;
    top: 215px;
    width: 138px;
    background: url("images/b_before_long.png") no-repeat scroll 0 0;
}
#Section02 .obj_before-after.obj_before-after_02 figure span {
    left: 496px;
    top: 230px;
}
#Section02 .obj_before-after.obj_before-after_02 .ctn_left {
    left: 26px;
    top: 213px;
}
#Section02 .obj_before-after.obj_before-after_02 figure .ctn_top{
    left: 496px;
    top: 198px;
}
#Section02 .obj_before-after.obj_before-after_03 .obj_before-after-left span {
    left: 23px;
    top: 240px;
    background-size: 100% 100%;
    width: 106px;
}
#Section02 .obj_before-after.obj_before-after_03 figure span {
    left: 496px;
    top: 244px;
}
#Section02 .obj_before-after.obj_before-after_03 figure .ctn_top{
    left: 496px;
    top: 208px;
}
#Section02 .obj_before-after.obj_before-after_03 .ctn_left {
    left: 23px;
    top: 240px;
    background-size: 100% 100%;
    width: 106px;
}

/*-- SECTION 04 --*/

#Section03 {
    margin-top: 0;
    padding: 190px 0 70px;
    border-bottom: 7px solid #e1eeef;
    margin-bottom: -120px;
}
#Section03 article header {
    margin-bottom: 21px;
}
#Section03 .content {
    width: 840px;
}
#Section03 .content p {
    margin: 0 0 29px;
    font: 14px/24px "FuturaBT-Light",arial;
    letter-spacing: 0.3px;    
}
#Section03 .content .ctn_schema {
    margin-top: 96px;
}
#Section03 .content .ctn_schema h3 {
    font: 11px/11px "FuturaBT-Medium",arial;
    letter-spacing: 0.2px;
    margin-bottom: 33px;
}
#Section03 .content .ctn_schema figcaption {
    position: absolute;
    width: 100px;
    text-transform: uppercase;
    font: 11px/11px "FuturaBT-Medium",arial;   
}
#Section03 .content .ctn_schema figure {
    display: inline-block;
    position: relative;
    width: auto;
    height: 145px
}
#Section03 .content .ctn_schema figure img {
    margin-left: 90px;
}
#Section03 .content .ctn_schema figcaption.fig_bot {
    left: 86px;
    top: 129px;
    width: 299px;
    text-align: center;
}
#Section03 .content .ctn_schema figcaption.fig_left {
    left: 92px;
    top: 87px;
}
#Section03 .content .ctn_schema figcaption.fig_right {
    right: 0;
    top: 87px;
}

/*-- SECTION 05 --*/

#Section04 {
    padding: 190px 0 0;
    margin-bottom: 0px;
}
#Section04 h2 {
    color: #008ab0;
    font: 21px/30px "FuturaBT-Medium",arial;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 36px;
}
section.business .obj_produit {
    float: left;
    margin-right: 25px;
    min-height: 260px;
    width: 415px;
}
section.business .obj_produit figure {
    display: block;
    float: left;
    text-align: left;
    width: 159px;
}
section.business .obj_produit .t_produit {
    display: block;
    float: left;
    margin-top: 23px;
}
section.business .obj_produit h3 {
    font: 15px/14px "FuturaBT-Medium";
    margin-bottom: 27px;
}
section.business .obj_produit a {
    font: 15px/14px "FuturaBT-Medium";
    color: #008ab0;
}

@media screen and (max-width:960px){
    #Hero {
        margin-bottom: -150px;
        margin-top: 0;
    }
    .banner_skinscope {
        background:#efefef url("images/f_banner_skinscope.jpg") no-repeat scroll left bottom / 60% auto;
    }  
    .banner_skinscope .ctn_header {
        float: none;
        padding: 107px 50px 0 25px;
        width: auto;
    }
    .banner_skinscope .ctn_header h1 {
        color: #008ab0;
        font: 21px/30px "FuturaBT-Medium",arial;
        letter-spacing: 1.8px;
        text-align: left;
        text-transform: uppercase;
    }
    .banner_skinscope .ctn_header h1 strong {
        display: block;
        font: 40px/40px "FuturaBT-Medium",arial;
    }
    .banner_skinscope .ctn_header p {
        float: left;
        margin: 50px 0;
        width: auto;
    }
    .banner_skinscope .ctn_header p br {
        display: none; 
    }
    #Section04, #Section03, #Section01 {
        padding: 190px 50px 70px 25px;
        width: auto;
         margin: 0 0 -70px;
    }  
    #Section02 {
        padding: 120px 0 70px 0;
    }
    #Section04 {
        padding-top: 120px;
    }
    #Section02 .ctn_first_part,
    #Section02 > header{
        padding: 0 50px 0 25px;
    }
    #Section02 article {
        width: auto;
    }
    #Section01 .content,
    #Section03 .content {
        width: auto;
    }
    section.business .obj_produit {
        margin-right: 0;
        width: 50%;
    }
    #Section01 .ctn_video .content figure {
        margin-left: 0;
    }   
    #Section01 .ctn_video .content img{
        width: 100%;
    }
    .obj_before-after > div {
        margin: 0 auto;
    }
}

@media screen and (max-width:768px){ 
    section.business .obj_produit {
        width: 100%;
        min-height: 145px;
    }
    section.business .obj_produit .t_produit {
        width: 120px;
    }
    section.business .obj_produit figure {
        width: 90px;
    }
    section.business .obj_produit figure img {
        width: 100%;
    }
    #Section01 .ctn_video .content figure .btn_player {
        background: url("images/i_player.png") no-repeat scroll 0 0 / 100% auto;
        height: 84px;
        margin-left: -42px;
        top: 20%;
        width: 85px;
    }
}

@media screen and (max-width:640px){
    #Section01 .ctn_video .content figure .btn_player {
        background: url("images/i_player.png") no-repeat scroll 0 0 / 100% auto;
        height: 49px;
        margin-left: -25px;
        top: 20%;
        width: 50px;
    }
    .banner_skinscope {
        background:#efefef url("images/f_banner_skinscope.jpg") no-repeat scroll left bottom / 100% auto;
    }
    #Section02 .content .ctn_color ul {
        float: none;
        margin: 0;
        width: 100%;
    }
    #Section02 .content .ctn_color {
        height: auto;
    }
    #Section02 .ctn_second_part {
        padding: 62px 0 ;
    }
    #Section02 .ctn_second_part article {
        height: 191px;
        margin-bottom: 14px;
    }
    #Section02 .obj_before-after figure img {
        height: auto;
        width: 320px;
    }
    #Section02 .obj_before-after figure span {
        background: url("images/b_before_short.png") no-repeat scroll 0 0 / 100% 100%;
        font: 6px/15px "FuturaBT-Medium",arial;
        width: 71px;
    }
    #Section02 .obj_before-after.obj_before-after_03 .obj_before-after-left span,
    #Section02 .obj_before-after.obj_before-after_02 .obj_before-after-left span,
    #Section02 .obj_before-after.obj_before-after_01 .obj_before-after-left span {
        left: 10px;
        top: 122px;
        width: 65px;
    }
    #Section02 .obj_before-after.obj_before-after_03 .obj_before-after-right span, 
    #Section02 .obj_before-after.obj_before-after_02 .obj_before-after-right span,
    #Section02 .obj_before-after.obj_before-after_01 .obj_before-after-right span {
        left: auto;
        line-height: 6px;
        padding: 5px 0;
        right: 11px;
        top: 119px;
        width: 65px;
    }
    #Section02 .obj_before-after.obj_before-after_03 figure .ctn_top,
    #Section02 .obj_before-after.obj_before-after_02 figure .ctn_top,
    #Section02 .obj_before-after.obj_before-after_01 figure .ctn_top {
        left: auto;
        right: 12px;
        top: 101px;
        width: 60px;
    }
    #Section02 .obj_before-after.obj_before-after_02 .obj_before-after-left span {
        padding: 4px 0;
        width: 71px;
        font: 7px/7px "FuturaBT-Medium",arial;
        background: url("images/b_before_short.png") no-repeat scroll 0 0 / 100% 100%;
    }
    #Section02 .obj_before-after.obj_before-after_02 .obj_before-after-right span {
        top: 114px;
    }   
    #Section02 .obj_before-after.obj_before-after_02 figure .ctn_top{
        top: 96px;
    }
    #Section03 .content .ctn_schema figure img {
        margin-left: 0;
        max-width: 250px;
    }
    #Section03 .content .ctn_schema figcaption {
        font: 10px/10px "FuturaBT-Medium",arial;
    }
    #Section03 .content .ctn_schema figcaption.fig_left {
        left: 0;
        top: 74px;
    }
    #Section03 .content .ctn_schema figcaption.fig_right {
        left: auto;
        right: 0;
        top: 74px;
        text-align: right;
    }
    #Section03 .content .ctn_schema figcaption.fig_bot {
        left: 0;
        top: 115px;
        width: 100%;
        max-width: 246px;
    }

    
}