@font-face {
    font-family: 'Singulier Light';
    src: url('fonts/Singulier-Light.eot');
    src: local('fonts/Singulier-Light'),
        url('fonts/Singulier-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Singulier-Light.woff') format('woff'),
        url('fonts/Singulier-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Singulier Bold';
    src: url('fonts/Singulier-Bold.eot');
    src: local('fonts/Singulier-Bold'),
        url('fonts/Singulier-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Singulier-Bold.woff') format('woff'),
        url('fonts/Singulier-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Singulier Demi';
    src: url('fonts/Singulier-Demi.eot');
    src: local('fonts/Singulier-Demi'),
        url('fonts/Singulier-Demi.eot?#iefix') format('embedded-opentype'),
        url('fonts/Singulier-Demi.woff') format('woff'),
        url('fonts/Singulier-Demi.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Singulier';
    src: url('fonts/Singulier-Regular.eot');
    src: local('fonts/Singulier-Regular'),
        url('fonts/Singulier-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Singulier-Regular.woff') format('woff'),
        url('fonts/Singulier-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.main .nav svg path,
.main .bande-nav .nav svg path{
    /* fill: #000; */
}
.main a,
.main b,
.main h1,
.main h2,
.main h3,
.main header,
.main html,
.main i,
.main img,
.main li,
.main p,
.main span,
.main ul{
    font: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: 0;
}
.main header{
    display: block;
}
body{
    font-family: sans-serif;;
    line-height: 1;
    margin:0 auto;
}
.main ul{
    list-style: none;
}
.main body > img{
    position: fixed;
}
.main h1,
.main h2{
    font-family: 'Singulier Bold';
}
.main h1,
.main h2,
.main h3{
    text-transform: uppercase;
}
.main h1{
       font-family: 'Singulier Bold';
    font-size: 4.938rem;
}
.main h1 span{
    font-family: inherit;
    font-size: inherit;
}
.main h2{
    font-size: 2.125rem;
}
.main h3{
        font-family: 'Singulier';
    font-size: 1.5rem;
}
.main .cta{
        font-family: 'Singulier Bold';
    font-size: 13px;
    line-height: 1em;
    padding: 20px 20px;
    max-width:200px;
    width: 100%;
    cursor: pointer;
    text-transform: uppercase;
    background-color: transparent;
    box-shadow: none;
    -webkit-appearance: none;
}
.main .portrait .cta,
.main .portrait button{
    font-size: 3.2vw;
    padding: 20px 80px;
}
.main .lien-start{
    font-size: 14px;
    line-height: 1em;
    height: auto;
    padding: 10px 20px;
    background: #000;
}
.main .lien-form{
    height: auto;
    color: #fff;
    border: 0;
    background-color: #000;
}
.main .portrait .lien-form{
    padding: 20px 40px;
}
.main p,
.main span{
        font-family: 'Singulier';
}
.main .upper{
    text-transform: uppercase;
}
.main html{
    font-size: 1.3vw;
}
.main body{
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background-color: #0a0a0d;
    -webkit-touch-callout: none;
}
.main html.focused,
.main html.focused body{
    height: 100%;
}
.main html.focused body .flex-content{
    min-height: 100%;
}
.main .container,
.main .shadefinder{
    display: flex;
}
.main .flex-content{
    position: relative;
    overflow: hidden;
    flex-direction: column;
    width: 100vw;
    min-height: 100vh;
    min-height: calc(100vh - var(--browser-address-bar,0px));
    flex-wrap: wrap;
}
.main .container--etape{
    position: relative;
    z-index: 4;
    width: 100%;
    background: #000;
    align-self: stretch;
    flex-grow: 1;
}
.main .ie .container--etape{
    height: 77vh;
}
.main .ie .container--etape.form-active{
    height: 92.5vh;
}

.main .ios .form-active .resultat-content{
    position: relative;
    height: auto!important;
}
.main .ios .form-active.shrink .resultat-content .inner{
    position: relative;
    overflow: auto!important;
    height: auto!important;
}
.main .ios .form-active .form-part_middle{
    overflow: auto!important;
}
.main .ios .form-active .packshot{
    height: calc(100vh - var(--browser-address-bar,0px));
}
.main .optanon-show-settings-popup-wrapper{
    display: none;
}
.main #optanon-popup-wrapper *{
    color: #000;
}
.main *{
    box-sizing: border-box;
    color: #fff;
}
.main input,
.main option,
.main select{
    color: #000;
}
.main body{
    background: #000;
}
.main .bande-nav{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 15vh;
    background: #fff;
    justify-content: space-between;
    align-self: flex-start;
}
.main .bande-nav > .logo{
    z-index: 8;
    display: none;
    width: 100%;
    text-align: center;
    background: #000;
}
.main .bande-nav .logo svg{
    height: 4vh;
    margin: 1.5vh;
    cursor: pointer;
}
.main .bande-nav .bande-etapes{
    display: flex;
}
.main .bande-nav .nav{
    position: relative;
    cursor: pointer;
}
.main .bande-nav .bande-nav__number{
    display: block;
}
.main .bande-nav .logo.container,
.main .bande-nav.hideBack .nav{
    display: none;
}
.main .nav{
    z-index: 8;
    right: 0;
    height: 100%;
    padding: 0 5.5vh;
    border-left: .2vh solid #f5f5f5;
    align-items: center;
}
.main .nav svg{
    width: 3.2vh;
    height: 2vh;
}
.main .portrait .nav{
    display: none;
    padding: 0 1vh;
    border-left: .25vh solid #f5f5f5;
}
.main .bande-etapes > div,
.main .question-content > div{
    display: inline-block;
    vertical-align: middle;
}
.main .bande-etapes{
    position: relative;
    z-index: 7;
    flex-direction: column;
    flex-grow: 1;
}
.main .portrait .bande-etapes{
    padding-left: 0;
}
.main .question-content{
    margin-top: 3vh;
}
.main .question-content > div{
    width: 100%;
}
.main .bande-nav__number{
        font-family: 'Singulier Bold';
    font-size: 16vh;
    font-weight: 700;
    line-height: 9.332rem;
    position: relative;
    z-index: 3;
    bottom: -3vh;
    left: -4rem;
    letter-spacing: -.6rem;
    color: #f7f7f7;
}
.main .bande-nav__number > div{
    color: inherit;
}
.main .portrait .bande-nav__number{
    font-size: 17rem;
    line-height: 17rem;
    left: 0;
    display: none;
    margin-top: 10vh;
}
.main .bande-etapes .bande-etapes__etapes{
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 7vh;
    margin: 2vh auto .5vh;
    transition: all .8s ease;
    opacity: 1;
    align-items: center;
}
.main .bande-etapes .bande-etapes__etapes span{
        font-family: 'Singulier ';
    font-size: 1.45vh;
    display: flex;
    width: 3vh;
    color: #000;
}
/*.main .bande-nav.shrink .bande-nav__number,
.main .bande-nav.shrink .bande-etapes{
    display: none;
}*/
.main .bande-etapes .bande-etapes__etapes span.etapeNum{
    flex-direction: column;
    margin-top: -3.1vh;
}
.main .bande-etapes .bande-etapes__etapes span.etapeN{
        font-family: 'Singulier';
    font-size: 2.5vh;
    position: absolute;
}
.main .bande-etapes .bande-etapes__etapes span.separator{
    width: .2vh;
    height: 1vh;
    margin: 0 .5vh 0 .4vh;
    background: #000;
}
.main .bande-etapes .bande-etapes__etapes.hidden{
    opacity: 0;
}
.main .question{
    width: 100%;
    text-align: center;
}
.main .number{
    top: 5vh;
    left: 22vw;
    transform: translateX(-50%);
}
.main .question-title{
    font-size: 2.125rem;
    font-weight: 700;
    position: relative;
    z-index: 5;
    color: #f8f8fd;
    flex-grow: 1;
}
.main .question-title .question{
        font-family: 'Singulier Bold';
    font-size: 24px;
    position: absolute;
    top: 5%;
    color: #000;
}
.main .landscape .question-title .question{
    line-height: 1vh;
}
.main .portrait .question-title .question{
    font-size:16px;
    letter-spacing: 0;
}
.main .portrait .bande-etapes__etapes{
    margin-top: 1.5vh;
}
.main .bande-nav.shrink .nav{
    position: relative;
    right:initial;
    left:0;
    border-left: .1em solid #000;
}
.main .bande-nav.shrink .nav svg path{
    fill: #fff;
}
.main .bande-nav.shrink .logo.container{
    display: block;
}
.main .cover{
    position: absolute;
    flex-direction: column;
    opacity: 0;

    background: url(img/portada-desktop.gif) 50% 0 no-repeat;
    background-size: cover;
}

.main .cover > div{
    text-align: center;
}
.main .portrait.cover{
    background: 0 0;
}

.main .splash-header{
    background-color: #000;
    flex-grow: 0;
}
.main .splash-header__logo{
    margin: 1.4vh;
}
.main .splash-header__logo svg{
    height: 4vh;
}
.main .cover-title {
    position: relative;
    width: 100%;
    padding-top: 0px;
    flex-grow: 0.8;
    color: #000;
}
.main .cover-title h1{
        font-family: 'Singulier';
    font-size: 64px;
    position: relative;
    display: inline-block;
    margin: 0 auto;
}
.main .cover-title span{
    font-size: 50px;
    display: inline-block;
    color: #000;
}
.main .cover-title span:first-child{
    padding-right: 20px;
    text-align: right;
}
.main .cover-title span:nth-child(2){
    padding-left: 20px;
    text-align: left;
}
.main .portrait .cover-title{
    background: url(img/portada-mobile.gif) 50%;
    background-size: cover;
    padding-top: 40px;
}

/*.main .packshot.AH
{
    background: url(../images/components/gom/bg-mat.jpg);
}
.main .packshot.TE
{
    background: url(../images/components/gom/bg-lum.jpg);
}
*/
/*PREMIÈRE ÉTAPE*/
.cover{
    display: none;
}
.cover.active{  
    display: flex!important;
}
.cover h1 span, .cover .cover-content, .cover .cover-content h2, .cover .cover-content h3, .cover .cover-content .cta{
    opacity: 0;

    transform: translateX(15vh);
}
.cover .cover-content{
    background:none!important;
}
.cover .cover-title__x{
    opacity: 0;
}
.cover.active h1 span, .cover.active .cover-content, .cover.active .cover-content h2, .cover.active .cover-content h3, .cover.active .cover-content .cta{
    opacity: 1;
    transform: translateY(0);
}
.cover.active .cover-title__x{
    opacity: 1;
}
.cover.active h1 span:nth-child(1){
    transition: 0.8s ease-in-out;
}
.cover.active h1 span:nth-child(2){
    transition: 0.9s ease-in-out;
}
.cover.active .cover-title__x, .cover.active .cover-content{
    transition: 1s ease-in-out;
}
.cover.active h1 span:nth-child(4), .cover.active .cover-content h2{
    transition: 1.1s ease-in-out;
}
.cover.active .cover-content h3{
    transition: 1.2s ease-in-out;
}
.cover.active .cover-content .cta{
    transition: 1.3s ease-in-out;
}


/*back button*/
.prev{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5.5vh;


}
.nav{
    padding: 0;
}


.bande{
    background-color: black;
    opacity: 0;
    transition: 1s ease-in-out;
}
.bande.active{
    opacity: 1;
    -webkit-animation: slideIn 1.2s ease-in-out forwards;

}
.bande.chosen{
    -webkit-animation: fadeOut 2s ease-in-out forwards;
}
.bande .slide{
    left: 0vw;
}
.bande.active .slide:nth-child(1){
    -webkit-animation: slideIn 1.2s ease-in-out forwards;
}
.bande.active .slide:nth-child(2){
    -webkit-animation: slideIn 1.3s ease-in-out forwards;
}
.bande.active .slide:nth-child(3){
    -webkit-animation: slideIn 1.4s ease-in-out forwards;
}
.bande.active .slide:nth-child(4){
    -webkit-animation: slideIn 1.5s ease-in-out forwards;
}
.bande.active .slide:nth-child(5){
    -webkit-animation: slideIn 1.6s ease-in-out forwards;
}@-webkit-keyframes slideIn{
    0%{
        left: 100vw;
    }    100%{
        left: 0vw;
    }}
@-webkit-keyframes fadeOut{
    0%{
        opacity: 1;
        left: 0vw;
    }    50%{
        left: 0vw;
        opacity: 0;
    }    100%{
        opacity: 1;
        left: 100vw;
    }}


/*label*/
.landscape .bande .slide .left-strip-label{
    left: 50%;
    opacity: 1;
}
.landscape .bande.active .slide .left-strip-label{
    -webkit-animation: slideInLabel 1.8s ease-in-out forwards;
}@-webkit-keyframes slideInLabel{
    0%{
        left: 150%;
        opacity: 0;
    }    100%{
        left: 50%;
        opacity: 1;
    }}
.portrait .bande .slide .left-strip-label{
    left: 0;
    opacity: 1;
}
.portrait .bande.active .slide .left-strip-label{
    -webkit-animation: slideInLabelAlt 1.8s ease-in-out forwards;
}@-webkit-keyframes slideInLabelAlt{
    0%{
        left: 150%;
        opacity: 0;
    }    100%{
        left: 0;
        opacity: 1;
    }}
/*tono h2*/

.bande--tono .slide h2{
    position: absolute;
    left: 2.9rem;
    opacity: 1;
}
.bande--tono.active .slide:nth-child(1) h2{
    -webkit-animation: slideIntono 1.4s ease-in-out forwards;
}
.bande--tono.active .slide:nth-child(2) h2{
    -webkit-animation: slideIntono 1.5s ease-in-out forwards;
}
.bande--tono.active .slide:nth-child(3) h2{
    -webkit-animation: slideIntono 1.6s ease-in-out forwards;
}
.bande--tono.active .slide:nth-child(4) h2{
    -webkit-animation: slideIntono 1.7s ease-in-out forwards;
}
.bande--tono.active .slide:nth-child(5) h2{
    -webkit-animation: slideIntono 1.8s ease-in-out forwards;
}@-webkit-keyframes slideIntono{
    0%{
        left: 150%;
        opacity: 0;
    }    100%{
        left: 2.9rem;
        opacity: 1;
    }}

/*h2 & p*/

.bande--subtono .slide h2, .bande .slide p{
    position: relative;
    width: auto;
    left: 0%;
        opacity: 1;
}
.bande--subtono.active h2{
    -webkit-animation: slideInText 1.5s ease-in-out forwards;
}
.bande--subtono.active p{
    -webkit-animation: slideInText 1.6s ease-in-out forwards;
}
.bande--acabado.active p{
    -webkit-animation: slideInText 1.5s ease-in-out forwards;
}
@-webkit-keyframes slideInText{
    0%{
        left: 100%;
        opacity: 0;
    }    100%{
        left: 0%;
        opacity: 1;
    }}
/*svg*/
.bande .slide svg{
    right: 3em;
    opacity: 1;
}
.bande.active .slide svg{
    -webkit-animation: slideInSVG 1.7s ease-in-out forwards;
}    
@-webkit-keyframes slideInSVG{
    0%{
        right: -100%;
        opacity: 0;
    }    100%{
        right: 3em;
        opacity: 1;
    }}






.form-part{
    left: 100vw!important;
}
.form-active .form-part{
    left: 37.85%!important;

}
.form-active .form-part{
    -webkit-animation: slideInform 1.7s ease-in-out forwards;
}    
@-webkit-keyframes slideInform{
    0%{
        left: 100%;
    }    100%{
        left: 37.85%;
    }}
.portrait 
.form-active .form-part{
    -webkit-animation: slideInformPortrait 1s ease-in-out forwards;

}@-webkit-keyframes slideInformPortrait {
    0%{
        left: 100%;
    }    100%{
        left: 0%;
    }}
    .form-part .inner{
    left: 0!important;
}
.cta{
    text-decoration: none;
}
.after{
    width: 100%;
    position: relative;
}
.form-active .after{
    -webkit-animation: slideInformPortrait 1.2s ease-in-out forwards;
}
.after img{
    height: 100%;
    transform: translateX(-25%);
}
.main .portrait .form-active .bande--4 .bande-item > div{
    width: 100%;

}
.portrait .after img{
    height: auto;
    width: 100%;
    transform: translateX(0%);
}
.packshot__img>img{
    margin: 0 auto;
    width: auto;
    height: 100%;
}
.form-active .packshot{
    -webkit-animation: slideInformPortrait 1.4s ease-in-out forwards;
}
.main .image>img{
    filter: none;
    height: 100%;
}
.main .portrait .image>img{

    height: auto;
    width: 100%;
}
.main .image{
    overflow: hidden;
}



/* YSL SITE OVERRIDES*/
.main>.main { 
    width: 100% !important; 
    padding: 0 !important;
 }
.breadcrumb li:before {
    display: none!important;
}
/*.content{
    position: relative;
    min-height:800px!important;
    height:800px!important;
    max-height:800px!important;
}
.flex-content{
    min-height:800px!important;
    height:800px!important;
    max-height:800px!important;
}*/
.portrait .cover-title{
    height: auto;
}
.portrait .resultat-content{
    margin-top: 29vh;
    height: auto;
    position: relative;
}
.portrait .resultat-content .inner{
    position: relative;
    overflow: hidden;
}
.portrait .resultat-content .packshot__img.traces{
    padding: 0;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    transform: none;

}
.results-page .content.portrait{
    position: relative;
    height: auto!important;
    max-height: unset!important;
    min-height:unset!important;
}
.results-page .portrait .flex-content{
    height: auto!important;
    max-height: unset!important;
    min-height: unset!important;
}
.results-page .portrait .nav{
    display: block;
}

.main .packshot__img.traces{
    max-height: 100%;
    overflow: hidden;
}
/*.main .packshot__img.traces img{
    transform: translateX(-14%);
}*/
.portrait .packshot__img.traces img{
    transform: none;
    height: auto;
    width: 100%;
}
.portrait .resultat-content .packshot__img.traces{
    padding: 0;
}
.breadcrumb{
    display: none;
}
.main,.foundation-shade-finder,.cover{
    max-width:100%;
    width:100%;
}

/*.main .nav svg path,
.main .bande-nav .nav svg path {
    fill: #000;
}*/
.main a,
.main b,
.main h1,
.main h2,
.main h3,
.main header,
.main html,
.main i,
.main img,
.main li,
.main p,
.main span,
.main ul,
{
    font: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: 0;
}
.main .bande-nav,
{
    display: block;
}
.main body {
    font-family: sans-serif;
    ;
    line-height: 1;
}
.main ul {
    list-style: none;
}
.main body>img {
    position: fixed;
}
.main h1,
.main h2 {
        font-family: 'Singulier Bold';
    ;
}
.main h1,
.main h2,
.main h3 {
    text-transform: uppercase;
}
.main h1 {
       font-family: 'Singulier Bold';
    font-size: 4.938rem;
}
.main h1 span {
    font-family: inherit;
    font-size: inherit;
}
.main h2 {
    font-size: 2.125rem;
}
.main h3 {
        font-family: 'Singulier';
    font-size: 1.5rem;
}
.main .cta,
{
        font-family: 'Singulier Bold';
    font-size: 13px;
    line-height: 1em;
    padding: 10px 20px;
    cursor: pointer;
    text-transform: uppercase;
    border: .125rem solid #fff;
    background-color: transparent;
    box-shadow: none;
    -webkit-appearance: none;
}
.main .portrait .cta,
.main .portrait button {
    font-size: 3.2vw;
    padding: 20px 80px;
}
.main .lien-start {
    font-size: 14px;
    line-height: 1em;
    height: auto;
    padding: 10px 20px;
    background: #000;
        padding: 20px 20px;
max-width:350px;
border:0px !important;
width: 100%;
}

/*.main .cta--submit
{
    color: #f8f8fd;
    border-color: #101115;
    background-color: #101115;
}*/


/*.main .cta--restart
{
    display: none;

    color: #000;
    border: .125rem solid #000;
}*/

.main .lien-form,
.main .cta--gamme {
    height: auto;
    color: #fff;
    border: 0;
    background-color: #000;
}

/*
.main .cta--gamme
{
    text-decoration: none;
}*/

.main .portrait .lien-form {
    padding: 20px 40px;
}
.main p,
.main span {
        font-family: 'Singulier';
    ;
}
.main .upper {
    text-transform: uppercase;
}
.main html {
    font-size: 1.3vw;
}
.main body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #0a0a0d;
    -webkit-touch-callout: none;
}
.main html.focused,
.main html.focused body {
    height: 100%;
}
.main html.focused body .flex-content {
    min-height: 100%;
}
.main .container,
.main .shadefinder {
    display: flex;
}
.main .flex-content {
    position: relative;
    overflow: hidden;
    flex-direction: column;
    width: 100vw;
    min-height: 100vh;
    min-height: calc(100vh - var(--browser-address-bar, 0px));
    flex-wrap: wrap;
}
.main .container--etape {
    position: relative;
    z-index: 4;
    width: 100%;
    background: #000;
    align-self: stretch;
    flex-grow: 1;
    /* height: 85vh; */
}
.main .ie .container--etape {
    height: 77vh;
}
.main .ie .container--etape.form-active {
    height: 92.5vh;
}
.main .mask {
    position: absolute;
    right: 0;
    display: none;
    width: 0;
    height: 100%;
    background: #000;
}
.main .mask.active {
    display: block;
}
.main .bande .mask {
    z-index: 14;
}
.main .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    transform: translate(-50%, -50%);
}
.main .loader--item,
.main .loader.active {
    display: inline-block;
}
.main .loader--item {
    width: 1em;
    height: 4em;
    margin: .05em;
    opacity: 0;
    background: #fff;
}
.main .ios .form-active .resultat-content {
    position: relative;
    height: auto!important;
}
.main .ios .form-active.shrink .resultat-content .inner {
    position: relative;
    overflow: auto!important;
    height: auto!important;
}
.main .ios .form-active .form-part_middle {
    overflow: auto!important;
}
.main .ios .form-active .packshot {
    height: calc(100vh - var(--browser-address-bar, 0px));
}
.main .optanon-show-settings-popup-wrapper {
    display: none;
}
.main #optanon-popup-wrapper * {
    color: #000;
}
.main * {
    box-sizing: border-box;
    color: #fff;
}
.main input,
.main option,
.main select {
    color: #000;
}
.main body {
    background: #000;
}
.main .bande-nav {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 15vh;
    background: #fff;
    justify-content: space-between;
    align-self: flex-start;
}
.main .bande-nav>.logo {
    z-index: 8;
    display: none;
    width: 100%;
    text-align: center;
    background: #000;
}
.main .bande-nav .logo svg {
    height: 4vh;
    margin: 1.5vh;
    cursor: pointer;
}
.main .bande-nav .bande-etapes {
    display: flex;
    height: 40px;
/*    background: #000;*/
}
.main .bande-nav .nav {
    position: relative;
    cursor: pointer;
    background: #000;
}
.main .bande-nav .bande-nav__number {
    display: block;
}
.main .bande-nav .logo.container,
.main .bande-nav.hideBack .nav {
    display: none;
}
.main .nav {
    z-index: 8;
    right: 0;
    height: 40px;
    padding: 0 5.5vh;
    border-left: .2vh solid #f5f5f5;
    align-items: center;
}
.main .nav svg {
    width: 3.2vh;
    height: 2vh;
}
.main .portrait .nav {
    display: none;
    padding: 0 1vh;
    border-left: .25vh solid #f5f5f5;
}
.main .bande-etapes>div,
.main .question-content>div {
    display: inline-block;
    vertical-align: middle;
}
.main .bande-etapes {
    position: relative;
    z-index: 7;
    flex-direction: column;
    flex-grow: 1;
}
.main .portrait .bande-etapes {
    padding-left: 0;
}
.main .question-content {
    margin-top: 0;
    position: absolute;
    width: 100%;
    top: 10%;
    color:#fff;
}
.main .question-content>div {
    width: 100%;
}
.main .bande-nav__number {
        font-family: 'Singulier Bold';
    ;
    font-size: 16vh;
    font-weight: 700;
    line-height: 9.332rem;
    position: relative;
    z-index: 3;
    bottom: -3vh;
    left: -4rem;
    letter-spacing: -.6rem;
    color: #f7f7f7;
}
.main .bande-nav__number>div {
    color: inherit;
}
.main .portrait .bande-nav__number {
    font-size: 17rem;
    line-height: 17rem;
    left: 0;
    display: none;
    margin-top: 10vh;
}
.main .bande-etapes .bande-etapes__etapes {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 7vh;
    margin: 2vh auto .5vh;
    transition: all .8s ease;
    opacity: 1;
    align-items: center;
}
.main .bande-etapes .bande-etapes__etapes span {
        font-family: 'Singulier';
    font-size: 1.45vh;
    display: flex;
    width: 3vh;
    color: #000;
}
/*.main .bande-nav.shrink .bande-nav__number,
.main .bande-nav.shrink .bande-etapes {
    display: none;
}*/
.main .bande-etapes .bande-etapes__etapes span.etapeNum {
    flex-direction: column;
    margin-top: -3.1vh;
}
.main .bande-etapes .bande-etapes__etapes span.etapeN {
        font-family: 'Singulier';
    font-size: 2.5vh;
    position: absolute;
}
.main .bande-etapes .bande-etapes__etapes span.separator {
    width: .2vh;
    height: 1vh;
    margin: 0 .5vh 0 .4vh;
    background: #000;
}
.main .bande-etapes .bande-etapes__etapes.hidden {
    opacity: 0;
}
.main .question {
    width: 100%;
    text-align: center;
}
.main .number {
    top: 5vh;
    left: 22vw;
    transform: translateX(-50%);
}
.main .question-title {
    font-size: 2.125rem;
    font-weight: 700;
    position: relative;
    z-index: 5;
    color: #f8f8fd;
    flex-grow: 1;
}
.main .question-title .question {
        font-family: 'Singulier Bold';
    font-size: 30px;
    text-shadow: 2px 2px 3px #000;
    position: absolute;
    top: 5%;
    color: #fff;
}
.main .landscape .question-title .question {
    line-height: 1vh;
}
.main .portrait .question-title .question {
    font-size: 16px;
    letter-spacing: 0;
}
.main .portrait .bande-etapes__etapes {
    margin-top: 1.5vh;
}
.main .bande-nav.shrink .nav {
    position: absolute;
    border-left: .1em solid #000;
}
.main .bande-nav.shrink .nav svg path {
    fill: #fff;
}
.main .bande-nav.shrink .logo.container {
    display: block;
}
.main footer {
    z-index: 17;
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 7.5vh;
    text-align: center;
    background: #000;
    align-items: center;
}
.main footer .footer__logo {
    margin: 0 auto;
}
.main footer .footer__logo svg {
    height: 3vh;
}
.main .cover {
    position: absolute;
    flex-direction: column;
    opacity: 0;
    background: url(img/portada-desktop.gif) 50% 0px no-repeat;
    background-size: cover;
}
.main .cover>div {
    text-align: center;
}
.main .portrait.cover {
    background: 0 0;
}
.main .ie .portrait.cover {
    background: url(img/portada-mobile.gif) 50% 0px no-repeat;
    background-size: cover;
}
.main .splash-header {
    background-color: #000;
    flex-grow: 0;
}
.main .splash-header__logo {
    margin: 1.4vh;
}
.main .splash-header__logo svg {
    height: 4vh;
}
.main .cover-title {
    position: relative;
    width: 100%;
    padding-top: 0px;
    flex-grow: 0.8;
    color: #000;
}
.main .cover-title h1 {
        font-family: 'Singulier';
    ;
    font-size: 64px;
    position: relative;
    display: inline-block;
    margin: 0 auto;
}
.main .cover-title span {
    font-size: 50px;
    display: inline-block;
    color: #000;
}
.main .cover-title span:first-child {
    padding-right: 20px;
    text-align: right;
}
.main .cover-title span:nth-child(2) {
    padding-left: 20px;
    text-align: left;
}
.main .cover-title .cover-title__x {
    position: absolute;
    left: 50%;
    height: 140px;
    margin-top: -114px;
    transform: translateX(-50%);
}
/*.main .cover-title .vtvs {
    font-family: ITCAvantGardeStd-Bk, 'ITCAvantGardeStd-Md', 'avantgarde-regular', Helvetica, sans-serif;
    font-size: 18px;
    display: block;
    margin-top: 10px;
    color: #000;
}*/
.main .portrait .cover-title {
    background: url(img/portada-mobile.gif) 50%;
    background-size: cover;
    padding-top: 40px;
}
.main .portrait .cover-title span {
    font-size: 40px;
}
.main .portrait .cover-title span:first-child {
    padding-right: 30px;
}
.main .portrait .cover-title span:nth-child(2) {
    padding-left: 0;
}
.main .portrait .cover-title .cover-title__x {
    height: 110px;
    margin-top: -85px;
}
/*.main .portrait .cover-title .vtvs {
    font-size: 16px;
}*/
.main .ie .portrait .cover-title {
    background: 0 0;
}
/*.main .edge .vtvs,
.main .ie .vtvs {
    position: absolute;
    width: 100vw;
}*/
.main .landscape .cover-content {
    overflow: hidden;
    width: 100%;
    max-width: 295px;
    margin: 0 auto 0;
    padding: 0;
    margin-right: 0;
    background: #fff;
    flex-grow: 0;
}
.main .cover-content h2 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #000;
}
.main .cover svg {
    position: absolute;
    right: 15px;
    max-width: 40px;
    top: 15px;
    z-index: 999999999;
    transform: rotate(180deg);
}
.main .cover svg path{
    fill:#fff!important;
}
.main .cover-content h3 {
        font-family: 'Singulier';
    font-size: 14px;
    margin-bottom: 10px;
    color: #000;
}
.main .portrait .cover-content {
    max-width: 100%;
    margin-bottom: 0;
    padding: 4vw 1vh;
}
.main .landscape.remodal,
.main .remodal {
    max-width: 860px;
}
.main .ie .cover-content {
    margin-top: 45vh;
    margin-bottom: 0;
}
.main .breadcrumb {
    width: 100%;
    justify-content: center;
}
.main .breadcrumb .dot,
.main .breadcrumb .num {
        font-family: 'Singulier Bold';
    ;
    display: none;
}
.main .etapes-info {
        font-family: 'Singulier';
    overflow: hidden;
    min-width: 19vw;
    padding: 0 1rem;
    transition: all .8s ease;
    letter-spacing: .035em;
/*    background: #000;*/
}
.main .etape-decision-value{
    display:none;
}
/*.main .etapes-info:not(:last-child) {
    border-bottom: 1px solid #fff;
}*/
.main .etapes-info{
    border-bottom: 2px solid #fff;
}
.main .etapes-info.hidden {
    display: none;
    width: 0;
    margin: 0;
    transition: all .8s ease;
}
.main .etapes-info.active:after {
    border-top: 2px solid #c19f8a;
}
.main .etapes-info span {
    font-size: 12px;
    line-height: .5vh;
    letter-spacing: 0.1em;
}
.main .etapes-info .inner {
    position: relative;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}
.main .etapes-info .inner .etape-name {
        font-family: 'Singulier';
    text-transform: uppercase;
}
.main .etapes-info .inner .etape-decision {
        font-family: 'Singulier';
    display: none;
}
/*.main .etapes-info:not(.chosen):not(.active) {
    height: 1vh;
}*/
.main .etapes-info.active .inner,
.main .etapes-info.chosen .inner {
    display: block;
}
.main .etapes-info.chosen .inner .etape-decision {
    display: inline-block;
}
.main .etapes-info{

    padding-top:8px;
}
.main .etapes-info.active,
.main .etapes-info.chosen {
    padding: .5vh;

}
.main .etapes-info.chosen {
    cursor: pointer;
}
.main .portrait .spacer {
    display: none;
}
.main .portrait .breadcrumb {
    z-index: 9;
}
.main .portrait .etapes-info {
    flex-grow: 1;
}
.main .portrait .etapes-info .inner {
    font-size: 14px;
    line-height: 1em;
}
.main .portrait .etapes-info.chosen .inner .etape-decision {
    display: block;
    width: 100%;
    text-align: center;
}
.main .portrait .etapes-info span {
    font-size: 1.2vh;
    line-height: normal;
}
@keyframes a {
    0% {
        transform: scale(1.05);
        opacity: 0;
    }    to {
        transform: none;
        opacity: 1;
    }}
@keyframes b {
    0% {
        transform: scale(1);
        opacity: 1;
    }    to {
        transform: scale(.95);
        opacity: 0;
    }}
@keyframes c {
    0% {
        opacity: 0;
    }    to {
        opacity: 1;
    }}
@keyframes d {
    0% {
        opacity: 1;
    }    to {
        opacity: 0;
    }}
.main .bande {
    position: absolute;
    width: 100%;
    height: 100%;
}
.main .bande.active {
    z-index: 15;
}
.main .portrait .bande {
    flex-direction: column;
}
.main .bande-item {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover !important;
    flex: 1;
    align-items: center;
}
.main .bande-item>div {
    width: 100%;
}
.main .bande-item>div>* {
    position: relative;
    opacity: 1;
}
.main .bande-item h2 {
       font-family: 'Singulier';
}
.main .left-stripe>span,
.main .bande-item p {
        font-family: 'Singulier';
}
.main .bande-item h2,
.main .bande-item p {
    text-align: center;
}
.main .portrait .bande-item>div {
    display: flex;
    flex-direction: column;
}
.main .left-stripe {
    position: relative;
    z-index: 5;
    width: 3.75rem;
}
.main .left-stripe>span {
    font-size: 40px;
    position: absolute;
    bottom: 1vh;
    left: 50%;
    margin-left: .1rem;
    transform: rotate(-90deg) translateY(-50%);
    transform-origin: 0 0;
}
.main .portrait .left-stripe {
    width: 100%;
    height: 3.75rem;
}
.main .portrait .left-stripe>span {
    position: relative;
    bottom: auto;
    left: auto;
    display: block;
    padding: 1.3rem;
    transform: none;
    text-align: center;
}
.main .form-active .bande--product .bande-item .fleche,
.main .form-active .bande--product .bande-item .image,
.main .form-active .bande--product .bande-item h2,
.main .bande--acabado .bande-item .fleche,
.main .bande--tono .bande-item .fleche,
.main .bande--tono .bande-item .image.beforeafter,
.main .bande--product .bande-item .fleche,
.main .bande--product .bande-item .image.beforeafter,
.main .bande--product .bande-item h2 {
    display: none;
}
.main .image {
    position: relative;
    width: calc(100%);
    height: 100%;
}
.main .image>img {
    object-fit: contain;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transition: all .4s ease;
    transform: translateX(-50%) translateY(-50%) scale(1.065);
    -o-object-fit: cover;
    object-fit: cover;
    filter: brightness(92%);
}
.main html:not(.ie) .image>img {
    max-width: 100%;
    max-height: 100%;
}
.main .portrait .image {
    width: 100%;
    height: calc(100% - 3.75rem);
}
.main .bande--acabado .portrait .image {
    height: 100%;
}
.main ::-webkit-scrollbar {
    width: 5px;
}
.main ::-webkit-scrollbar-thumb {
    width: 5px;
    background: #222;
}
.main ::-webkit-scrollbar-thumb:hover {
    background: #666;
}
.main .bande--acabado .bande-item {
    cursor: pointer;
}
.main .bande--acabado .bande-item>div {
    height: 100%;
}
.main .bande--acabado .bande-item .image {
    width: 100%;
    height: 100%;
}
.main .bande--acabado .bande-item .image>img {
    font-family: auto;
    min-width: auto;
    max-width: 100%;
    min-height: auto;
    max-height: auto;
    -o-object-fit: auto;
    object-fit: auto;
}
.main.portrait .bande-item {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    flex: 1;
    background-position: 50% 79%;
    align-items: center;
    min-height: 50vh;
}
.main .bande--acabado .bande-item h2 {
    font-size: 4.938rem;
    display: none;
    margin-bottom: 1vh;
}
.main .bande--acabado .bande-item p {
    font-size: 26px
}
.main .bande--acabado .item-txt {
    position: absolute;
    z-index: 13;
    top: 58%;
    left: 50%;
    transform: translateX(-50%)!important;
}
.main .bande--acabado :nth-child(2) p {
    color: #000;
}
.main .bande--acabado :nth-child(3) p {
    color: #fff;
}
.main .portrait .bande--acabado p {
    font-size: 24px;
    top: 55%;
    margin-top: 10px;
}
.main .bande--subtono .bande-item {
    cursor: pointer;
}
.main .bande--subtono .bande-item h2,
.main .bande--subtono .bande-item p {
    padding: 0 4rem 0 2rem;
    text-align: left;
    color: #000;
}
.main .bande--subtono .bande-item h2 {
        font-family: 'Singulier';
    ;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -.016rem;
}
.main .bande--subtono .bande-item p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1rem;
    margin-top: 1rem;
    padding-right: 8rem;
}
.main .bande--subtono .bande-item .fleche {
    position: absolute;
    top: 30%;
    right: 3em;
    height: 4rem;
}
.main .bande--subtono .item-txt {
    position: relative;
    z-index: 6;
}
.main .portrait .bande--subtono .bande-item h2,
.main .portrait .bande--subtono .bande-item p {
    padding: 0 1.5rem 0 1rem;
    text-align: left;
}
.main .portrait .bande--subtono .bande-item h2 {
    font-size: 1.7rem;
    line-height: 2rem;
}
.main .portrait .bande--subtono .bande-item p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2em;
    margin-top: 20px;
    padding-right: 5rem;
}
.main .portrait .bande--subtono .fleche {
    top: 40%;
    right: 10rem;
}
.main .bande--tono .bande-item {
    cursor: pointer;
}
.main .bande--tono .bande-item>div {
    height: 100%;
}
.main .bande--tono .item-txt {
    position: absolute;
    z-index: 6;
    left: 0;
    width: 100%;
    height: 100%;
}
.main .bande--tono h2 {
        font-family: 'Singulier';
    font-size: 36px;
    position: absolute;
    z-index: 7;
    top: 50%;
    left: 2.9rem;
    transform: translateY(-50%);
}
.main .portrait .bande--tono .item-txt {
    position: absolute;
    top: 5.75em;
    width: 100%;
    height: auto;
}
.main .portrait .bande--tono h2 {
    font-size: 3em;
    top: 0;
    width: 100%;
    text-align: left;
}
.main .bande--product .bande-item {
    cursor: pointer;
}
.main .bande--product .bande-item>div {
    height: 100%;
}
.main .portrait .bande--product .left-stripe>span {
    font-size: 40px line-height: 1em;
    padding: 0 3rem;
    text-align: left;
}
.main .form-active .bande--product {
    overflow: hidden;
    width: 48%;
}
.main .form-active .bande--product .bande-item>div {
    height: 100%;
}
.main .form-active .bande--product .bande-item .left-stripe {
    z-index: 2;
}
.main .form-active .bande--product .beforeafter {
    display: flex;
    width: 100%;
    height: 100%;
    background-position: 0 50%;
    background-size: auto 100%;
}
.main .form-active .bande--product .beforeafter .after {
    position: absolute;
    width: 100%;
    height: 100%;
}
.main .form-active .bande--product .beforeafter .before {
    position: absolute;
    overflow: hidden;
    width: 0;
    min-width: inherit;
    height: 100%;
    background-position: 0 0;
    background-size: auto 100%;
}
.main .form-active .bande--product .beforeafter .cursor {
    position: absolute;
    margin-right: 0;
    padding-bottom: 2rem;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    align-self: flex-end;
}
.main .form-active .bande--product .beforeafter .cursor .round {
    font-size: .7em;
    display: inline-block;
    margin-top: 1em;
    padding: 8px 5px;
    border-radius: 20px;
    background: rgba(0, 0, 0, .8);
}
.main .form-active .bande--product .beforeafter .cursor svg {
    margin: .15rem;
    fill: #fff;
}
.main .form-active .bande--product .beforeafter .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.main .form-active .bande--product .left-stripe {
    position: absolute;
    bottom: 0;
    left: 1vw;
    display: none;
    width: 10vw;
    height: 10vw;
    background: #000!important;
}
.main .form-active .bande--product .left-stripe>span {
        font-family: 'Singulier';
    font-size: 2.4rem;
    position: absolute;
    top: 50%;
    bottom: auto;
    left: 50%;
    margin: .1rem;
    transform: rotate(0) translateX(-50%) translateY(-50%);
    transform-origin: 0 0;
}
.main .ie .cursor {
    bottom: 0;
}
.main .portrait .form-active .bande--4 {
    width: 100%;
    height: 30vh;
}
.main .portrait .form-active .bande--4 .bande-item>div {
    width: 85%;
}
.main .portrait .form-active .bande--4 .beforeafter img {
    height: auto;
}
.main .portrait .form-active .bande--4 .beforeafter .after {
    width: 100%;
}
.main .portrait .form-active .bande--4 .beforeafter .after,
.main .portrait .form-active .bande--4 .beforeafter .before img {
    position: absolute;
    top: -17vw;
}
.main .portrait .form-active .bande--4 .beforeafter span {
    font-size: 3rem;
}
.main .portrait .form-active .bande--4 .beforeafter .cursor svg {
    margin: .5rem;
}
.main .portrait .form-active .bande--4 .left-stripe {
    display: none;
}
.main .beforeafter-container {
    display: none;
    width: 100%;
    height: 100%;
}
.main .beforeafter-container.active {
    display: flex;
    opacity: 1;
}
.main .resultat-content {
    position: absolute;
    z-index: 16;
    left: 37.85%;
    flex-direction: row;
    width: 62.15%;
    height: 100%;
    background-color: #000;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
}
.main .resultat-content h1 {
        font-family: 'Singulier';
    font-size: 20px;
    text-align: left;
    color: #000;
}
.main .resultat-content h2,
.main .resultat-content h3 {
    width: 100%;
    color: #101115;
}
.main .resultat-content h2 {
    font-family: 'Singulier';
    font-size: 60px;
    font-weight: 400;
    line-height: 68px;
    margin-top: 3rem;
    text-align: center;
    letter-spacing: -.18rem;
}
.main .resultat-content h3 {
    font-family: 'Singulier';
    font-size: 18px;
    margin: .5rem 0 0;
    text-align: center;
    color: #000;
}
.main .resultat-content h4 {
    font-family: 'Singulier Bold';
    font-size: .7rem;
    text-align: center;
    color: #000;
}
.main .portrait .form-active.shrink .bande--4 {
    height: 0;
    transition: height .3s ease;
}
.main .portrait .shrink .resultat-content {
    height: 100%;
    margin-top: 0;
    transition: all .3s ease;
}
.main .portrait .resultat-content {
    left: 0;
    width: 100%;
    height: calc(100% - 30vh);
    margin-top: 30vh;
}
.main .portrait .resultat-content h1 {
    font-size: 24px;
}
.main .portrait .resultat-content h2 {
    font-size: 60px;
    line-height: 1em;
    margin-top: 20px;
}
.main .portrait .resultat-content h3 {
    font-size: 24px;
    margin-top: 10px;
}
.main .edge .portrait .resultat-content .packshot__img,
.main .ie .portrait .resultat-content .packshot__img {
    left: auto;
    transform: none;
}
.main .resultat-content .inner {
    position: absolute;
    left: 100vw;
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.main .portrait .resultat-content .inner {
    display: block;
}
.main .form-part_middle {
    display: flex;
    flex-direction: column;
    width: 33%;
    padding: 1.5rem 3rem;
    justify-content: center;
    flex-grow: 1;
    height:100%;
    align-self: center;
}
.main .chrome .form-part_middle {
    margin-right: .15rem;
}
.main .portrait .form-part_middle {
    overflow-y: hidden;
    width: 100%;
    max-height: none;
    margin-right: 0;
    padding: 4rem 3rem 5rem;
}
.main .edge .form-part_middle,
.main .ie .form-part_middle {
    height: 100%;
    margin-right: 0;
}
.main .packshot {
    position: relative;
    display: flex;
    width: 33%;
    height: 100%;
    text-align: center;
    vertical-align: bottom;
    flex-grow: 1;
}
.main .packshot.AH {
    background: url(../images/components/gom/bg-mat.jpg);
}
.main .packshot.TE {
    background: url(../images/components/gom/bg-lum.jpg);
}
.main .resultat-content.dark .radio:after,
.main .resultat-content.dark input {
    background-color: #fff;
}
.main .packshot__img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    max-height: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.main .packshot__img>img {
    position: relative;
    height: 100%;
}
.main .packshot__img.traces {
    max-height: 80%;
}
.main .portrait .form-active .packshot {
    width: 100%;
}
.main .form-etapes {
    margin-top: 2.5rem;
}
.main .form-etapes p {
    font-family: 'Singulier';
    font-size: 14px;
    line-height: .9rem;
    color: #000;
}
.main .portrait .form-etapes p {
    font-size: 14px;
    line-height: 1.5rem;
}
.main .form-etape-0 .goto-form {
    margin-top: 1.7rem;
}
.main .form-etape-0 p {
    padding-right: 5rem;
}
.main .form-etape-0 p .subforalerts {
    font-family: 'ITCAvantGardeStd-Md', 'avantgarde-regular', Helvetica, sans-serif;
    ;
    color: #000;
}
.main .portrait .form-etape-0 {
    margin-top: 3.5rem;
}
.main .portrait .form-etape-0 .goto-form {
    margin-top: 3.5rem;
}
.main .portrait .form-etape-0 p {
    padding-right: 3rem;
}
.bande-nav.shrink {
    height: 7.5vh;
}
.bande-nav .bande-etapes .breadcrumb {
    display: flex!important;
    padding: 0px!important;
}
.etapes-info {
    opacity: 1;
}
.etapes-info:not(.chosen):not(.active) {
opacity: 0.5
}
.cover {
    display: none;
}
.cover.active {
    display: flex!important;
}
.cover h1 span,
.cover .cover-content,
.cover .cover-content h2,
.cover .cover-content h3,
.cover .cover-content .cta {
    opacity: 0;
    transform: translateX(15vh);
}

.cover.active h1 span,
.cover.active .cover-content,
.cover.active .cover-content h2,
.cover.active .cover-content h3,
.cover.active .cover-content .cta {
    opacity: 1;
    transform: translateX(0);
}
.cover.active .cover-title__x {
    opacity: 1;
}
.cover.active h1 span:nth-child(1) {
    transition: 0.8s ease-in-out;
}
.cover.active h1 span:nth-child(2) {
    transition: 0.9s ease-in-out;
}
.cover.active .cover-title__x,
.cover.active .cover-content {
    transition: 1s ease-in-out;
 
}
.main .portrait .cover-content {
    max-width: 100%;
    margin-bottom: 0;
    padding: 0;
    width: 100%;
}
.main .portrait .lien-start {
    max-width: 100%;
    width: 100%;
}
.cover.active h1 span:nth-child(4),
.cover.active .cover-content h2 {
    transition: 1.1s ease-in-out;
}
.cover.active .cover-content h3 {
    transition: 1.2s ease-in-out;
}
.cover.active .cover-content .cta {
    transition: 1.3s ease-in-out;
}
.prev {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5.5vh;
}
.nav {
    padding: 0;
}
.bande {
    background-color: black;
    opacity: 0;
    transition: 1s ease-in-out;
}
.bande.active {
    opacity: 1;
    -webkit-animation: slideIn 1.2s ease-in-out forwards;
}
.bande.chosen {
    -webkit-animation: fadeOut 2s ease-in-out forwards;
}
.bande .slide {
    left: 0vw;
}
.bande.active .slide:nth-child(1) {
    -webkit-animation: slideIn 1.2s ease-in-out forwards;
}
.bande.active .slide:nth-child(2) {
    -webkit-animation: slideIn 1.3s ease-in-out forwards;
}
.bande.active .slide:nth-child(3) {
    -webkit-animation: slideIn 1.4s ease-in-out forwards;
}
.bande.active .slide:nth-child(4) {
    -webkit-animation: slideIn 1.5s ease-in-out forwards;
}
.bande.active .slide:nth-child(5) {
    -webkit-animation: slideIn 1.6s ease-in-out forwards;
}@-webkit-keyframes slideIn {
    0% {
        left: 100vw;
    }    100% {
        left: 0vw;
    }}@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
        left: 0vw;
    }    50% {
        left: 0vw;
        opacity: 0;
    }    100% {
        opacity: 1;
        left: 100vw;
    }}
    .landscape .bande .slide .left-strip-label {
    left: 50%;
    opacity: 1;
}
.landscape .bande.active .slide .left-strip-label {
    -webkit-animation: slideInLabel 1.8s ease-in-out forwards;
}@-webkit-keyframes slideInLabel {
    0% {
        left: 150%;
        opacity: 0;
    }    100% {
        left: 50%;
        opacity: 1;
    }}
    .portrait .bande .slide .left-strip-label {
    left: 0;
    opacity: 1;
}
.portrait .bande.active .slide .left-strip-label {
    -webkit-animation: slideInLabelAlt 1.8s ease-in-out forwards;
}@-webkit-keyframes slideInLabelAlt {
    0% {
        left: 150%;
        opacity: 0;
    }    100% {
        left: 0;
        opacity: 1;
    }}
    .bande--tono .slide h2 {
    position: absolute;
    left: 2.9rem;
    opacity: 1;
}
.bande--tono.active .slide:nth-child(1) h2 {
    -webkit-animation: slideIntono 1.4s ease-in-out forwards;
}
.bande--tono.active .slide:nth-child(2) h2 {
    -webkit-animation: slideIntono 1.5s ease-in-out forwards;
}
.bande--tono.active .slide:nth-child(3) h2 {
    -webkit-animation: slideIntono 1.6s ease-in-out forwards;
}
.bande--tono.active .slide:nth-child(4) h2 {
    -webkit-animation: slideIntono 1.7s ease-in-out forwards;
}
.bande--tono.active .slide:nth-child(5) h2 {
    -webkit-animation: slideIntono 1.8s ease-in-out forwards;
}@-webkit-keyframes slideIntono {
    0% {
        left: 150%;
        opacity: 0;
    }    100% {
        left: 2.9rem;
        opacity: 1;
    }}
    .bande--subtono .slide h2,
.bande .slide p {
    position: relative;
    width: auto;
    left: 0%;
    opacity: 1;
}
.bande--subtono.active h2 {
    -webkit-animation: slideInText 1.5s ease-in-out forwards;
}
.bande--subtono.active p {
    -webkit-animation: slideInText 1.6s ease-in-out forwards;
}
.bande--acabado.active p {
    -webkit-animation: slideInText 1.5s ease-in-out forwards;
}@-webkit-keyframes slideInText {
    0% {
        left: 100%;
        opacity: 0;
    }    100% {
        left: 0%;
        opacity: 1;
    }}
    .bande .slide svg {
    right: 3em;
    opacity: 1;
}
.bande.active .slide svg {
    -webkit-animation: slideInSVG 1.7s ease-in-out forwards;
}@-webkit-keyframes slideInSVG {
    0% {
        right: -100%;
        opacity: 0;
    }    100% {
        right: 3em;
        opacity: 1;
    }}
    .form-part {
    left: 100vw!important;
}
.form-active .form-part {
    left: 37.85%!important;
}
.form-active .form-part {
    -webkit-animation: slideInform 1.7s ease-in-out forwards;
}@-webkit-keyframes slideInform {
    0% {
        left: 100%;
    }    100% {
        left: 37.85%;
    }}
    .portrait .form-active .form-part {
    -webkit-animation: slideInformPortrait 1s ease-in-out forwards;
}@-webkit-keyframes slideInformPortrait {
    0% {
        left: 100%;
    }    100% {
        left: 0%;
    }}
    .form-part .inner {
    left: 0!important;
}
.cta {
    text-decoration: none;
}
.after {
    width: 100%;
    position: relative;
}
.form-active .after {
    -webkit-animation: slideInformPortrait 1.2s ease-in-out forwards;
}
.after img {
    height: 100%;
    transform: translateX(-9%);
}
.main .portrait .form-active .bande--4 .bande-item>div {
    width: 100%;
}
.portrait .after img {
    height: auto;
    width: 100%;
    transform: translateX(0%);
}
.packshot__img>img {
    margin: 0 auto;
    width: auto;
    height: 100%;
}
.form-active .packshot {
    -webkit-animation: slideInformPortrait 1.4s ease-in-out forwards;
}
.main .image>img {
    filter: none;
    height: 100%;
}
.main .portrait .image>img {
    height: auto;
    width: 100%;
}
.main .image {
    overflow: hidden;
}/*.main>.main {
    width: 100% !important;
    padding: 0 !important;
}*/
.breadcrumb li:before {
    display: none!important;
}
/*.main {
    position: relative;
    min-height: 800px!important;
    height: 800px!important;
    max-height: 800px!important;
}
.flex-content {
    min-height: 800px!important;
    height: 800px!important;
    max-height: 800px!important;
}*/
.portrait .cover-title {
    height: auto;
}
.portrait .resultat-content {
    margin-top: 29vh;
    height: auto;
    position: relative;
}
.portrait .resultat-content .inner {
    position: relative;
    overflow: hidden;
}
.portrait .resultat-content .packshot__img.traces {
    padding: 0;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    transform: none;
}
.results-page .content.portrait {
    position: relative;
    height: auto!important;
    max-height: unset!important;
    min-height: unset!important;
}
.results-page .portrait .flex-content {
    height: auto!important;
    max-height: unset!important;
    min-height: unset!important;
}
.results-page .portrait .nav {
    display: block;
}
.main .packshot__img.traces {
    max-height: 100%;
    overflow: hidden;
}
/*.main .packshot__img.traces img {
    transform: translateX(-14%);
}*/
.portrait .packshot__img.traces img {
    transform: none;
    height: auto;
    width: 100%;
}
.portrait .resultat-content .packshot__img.traces {
    padding: 0;
}
.breadcrumb {
    display: none;
}
.main,
.foundation-shade-finder,
.cover {
    max-width: 100%;
    width: 100%;}
.decision-part .left-stripe{
    display:none;
}
body{
    max-height:100vh;
}
.portrait .cover-content {
    background: rgba(0,0,0,0.7);
    position: absolute;
    bottom: 0;
}
.portrait .cover-content button{
    border:0px !important;

}
.main.portrait .bande-item{
    min-height: auto;
}
.main .portrait .image {
    width: 100%;
    height: 100%;
}
.main .portrait .bande--tono .item-txt.left {
    position: absolute;
    top: 3.75em;
    width: 100%;
    height: auto;
    left: -15px;
}
.main .portrait .bande--tono .item-txt.left h2 {
    font-size: 1.5em;
    top: 32px;
    width: 100%;
    text-align: left;
}
.main .portrait .bande--tono .item-txt.right {
    position: absolute;
    top: 3.75em;
    width: 100%;
    height: auto;
    right: 20%;
    left: initial;
}
.main .portrait .bande--tono .item-txt.right h2 {
    font-size: 1.5em;
    top: 32px;
    width: 100%;
    text-align: right;
}
.main .portrait .bande-nav {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 10vh;
    }
.main .portrait .bande-nav {
    position: absolute;
    bottom: -36px;
    background: rgba(0,0,0,0.7);
    z-index: 9;
}
.main.portrait .question-content>div {
    width: 100%;
    height: 50px;
}
.main.portrait .question-content {
    margin-top: 0;
    position: absolute;
    width: 100%;
    top: 0;
    color: #fff;
    background: #000;
    height: 40px;
}
.main.portrait .question-title .question {
    font-size: 16px;
    top: 0;
    color: #fff;
    padding-top: 12px;
    height: 43px;
    background: #000;
}
.main.portrait .bande--subtono .bande-item .fleche {
    height: 2rem;
}
.question-content.oculto{
    opacity: 0;
    height:0;
    transition: all 0.2s ease-in;
}
.question-content{
    opacity: 1;
    height:initial;
  
}
.main .portrait .bande--subtono .fleche {
    top: 40%;
    margin-right: -18px !important;
    left: initial;
    width: 4%;
}
.main .portrait .bande--subtono .bande-item h2 {
    font-size: 20px;
    line-height: 2rem;
    padding-right: 3em;
    color: #fff;
}
.main.portrait .etapes-info .inner {
    position: relative;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.main.landscape .bande--acabado .bande-item .image.mobile{
   display:none; 
}
.main.portrait .bande--acabado .bande-item .image{
   display:none; 
}
.main.portrait .bande--acabado .bande-item .image.mobile{
   display:block; 
}
.main.portrait .bande--acabado .bande-item{
   background:none!important;
}
.main .portrait .bande.bande--acabado {
    flex-direction: row-reverse;
}
.main .portrait  .bande.bande--acabado .image>img {
    height: 100%;
    width: 100%;
}
.main .portrait .form-part_middle {
    overflow-y: hidden;
    width: 100%;
    max-height: none;
    margin-right: 0;
    padding: 0rem 3rem 2rem;
}
.main .portrait .form-etape-0 {
    margin-top: 0;
}
.main .portrait .form-etape-0 .goto-form {
    margin-top: 2.5rem;
}
.main .portrait .bande-nav {
bottom:0;
    height: 6vh;
}
.main .portrait .bande {
    height: 100vh;
}
.main .bande-nav {
    height: auto;
    background: rgba(0,0,0,0.7);
    z-index: 9;
    position: absolute;
    bottom:0;
}
.main .bande {
    height: 100vh;
}
.main .bande-nav .bande-etapes {
    display: flex;
    height: 40px;
}
.main .portrait .bande--subtono .bande-item p {
    margin-top: 0;
    }
    .main .portrait .resultat-content .inner {
    display: block;
    height: 70vh;
}
@media (min-width:1024px){
    .main .bande-nav {
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: auto;
        background: rgba(0,0,0,0.8);
        justify-content: space-between;
        align-self: flex-start;
        bottom: 0;
        z-index: 99;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
    }
    .main .bande-nav .nav,
    .main .bande-nav .breadcrumbs {
        background:none;
    }
  
}
@media (max-width:1440px){
    .main .bande-nav.shrink .bande-etapes {
    opacity:0;
    pointer-events: none
    }
}
@media (max-width:762px){
    body{
        max-height: auto;
    }
}
.main .bande--tono .bande-item#Fair .container {
    background: url(img/tono-muy-claro.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.main .bande--tono .bande-item#Light .container {
    background: url(img/claro-back.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.main .bande--tono .bande-item#Medium .container {
    background: url(img/tono-medio.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.main .bande--tono .bande-item#Deep .container {
    background: url(img/tono-oscuro.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.main .bande--tono .bande-item .image{
    opacity: 1;
    transition: opacity 0.2s ease-in;
}
.main .bande--tono .bande-item:hover .image{
    opacity: 0;
}
.main .lien-form, .main .cta--gamme {
    height: auto;
    color: #fff;
    border: 0;
    background-color: #000;
    text-align: center;
}
.main .packshot__img p{
    position: absolute;
    top: 10%;
    color: #000;
    right: auto;
    width: 100%;
    z-index: 99;
    font-size: 20px;
    font-weight: bold;
}

.main .packshot__img .lien-form {
    height: auto;
    color: #fff;
    border: 0;
    background-color: #000;
    text-align: center;
    bottom: 17%;
    position: relative;
}

 .main .bande.bande--3.bande--acabado .image>img {
    object-fit: contain;
    position: absolute;
    z-index: 1;
    top: 57%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transition: all .4s ease;
    transform: translateX(-50%) translateY(-50%) scale(1.065);
    -o-object-fit: cover;
    object-fit: contain;
/*    filter: brightness(92%);*/
}
.bande--4.bande--product .title {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 99;
    font-size: 30px;
    bottom: 10%;
}
.bande--4.bande--product .title span{
    display:block;
    padding:10px;
    background:#000;
    color:#fff;
    font-weight:bold;
}
.main .resultat-content h3 {
    font-family: 'Singulier';
    font-size: 18px;
    margin: .5rem 0 0;
    text-align: center;
    color: #000;
    margin-top: -2em;
}
.main .form-etapes {
    margin-top: 2.5rem;
}
@media (min-width:1440px){
    body {
        max-height: 100vh;
        max-width: 1440px;
        margin: 0 auto;
    }
    .main, .foundation-shade-finder, .cover {
        max-width: 1440px;
        width: 100%;
        margin: 0 auto;
    }
/*.main .packshot__img.traces img {
    transform: translateX(-25%);
}*/
.main .question-content {
    margin-top: 0;
    position: absolute;
    width: 100%;
    top: 10%;
    color: #fff;
    left: 0;
}
.main .etapes-info {
    font-family: 'Singulier';
    overflow: hidden;
    min-width: 12vw;
    padding: 0 1rem;
    transition: all .8s ease;
    letter-spacing: .035em;
    /* background: #000; */
}

.after img {
    height: 100%;
    transform: translateX(-25%) !important;
}
}
@media (max-width:1280px){
    .main .packshot {
        position: relative;
        display: flex;
        width: 28%;
    }
    .main .packshot__img>img {
        position: relative;
        height: 97%;
    }
    .after img {
    height: 100%;
    transform: translateX(-25%) !important;
}
/*    .main .packshot__img.traces img {
    transform: translateX(-27%);

}*/
}
@media (min-width:1024px){
    .main .packshot__img.traces{
        background: #000;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
    }
    .main .packshot__img.traces img {
        transform: none;
        width: auto;
        height: 100%;
        object-fit: cover;
        margin: 0;
        margin-top: 3em;
    }
}
@media (max-width:1024px){
    .main .nav {
        z-index: 8;
        right: 0;
        height: 40px;
        padding: 0 0.5vh;
        border-left: .2vh solid #f5f5f5;
        align-items: center;
    }
    .after img {
        height: 100%;
        transform: translateX(-12%) !important;
    }
    .after.te img {
    height: 100%;
    transform: translateX(-29%);
}
    .main .form-part_middle{
        background-position: 0 96% !important;
    }
  .main .packshot__img.traces {
        background: #000;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;
    }
    .main .packshot__img p {
        position: relative;
        top: 0;
        padding: 1em;
    }
    .main .packshot__img.traces img {
        max-width: 140px;
        transform: none;
        width: 100%;
        height: auto;
        margin-top: 0;
    }
        .after img {
    height: 100%;
    transform: translateX(-39%) !important;
}
/*    .after.TE img {
        height: 100%;
        transform: translateX(-28%);
    }*/

}
@media (max-height:800px){
    .after img {
    height: 100%;
    transform: translateX(-21%) !important;
}
}
@media (max-width:768px){
    .main .portrait .resultat-content {
    left: 0;
    width: 100%;
    height: calc(100% - 30vh);
    margin-top: 30vh;
    left: 0 !important;
}
.main .portrait .form-part_middle{
    background-size:cover !important;
}
.main .cover {
    position: absolute;
    flex-direction: column;
    opacity: 0;
    background: url(img/portada-desktop.gif) 50% 0px no-repeat !important;
    background-size: cover !important;
}
.cover-content >div {
    max-width: 100% !important;
    background: rgba(255,255,255,0.8);
    padding: 3em;
}
.portrait .after img {
    height: auto;
    width: 100%;
    transform: translateY(-9%) !important;
    margin: 0 auto;
}
.main .portrait .resultat-content h2 {
    font-size: 60px;
    line-height: 1em;
    margin-top: 3em;
}
.main .portrait .form-active .bande--4 {
    width: 100%;
    height: 50vh;
    z-index: 999;
}
.main .portrait .bande--subtono .bande-item h2 {
    font-size: 20px;
    line-height: 2rem;
    padding-right: 3em;
    color: #000 !important;
}
.main .bande.bande--3.bande--acabado .image>img{
    object-fit: contain !important;
}
.main .portrait .resultat-content h2 {
    font-size: 60px;
    line-height: 1em;
    margin-top: 1em;
}
.main .portrait .resultat-content h3 {
    font-size: 24px;
    margin-top: 9EM;
}
}

@media (max-width:600px){
.portrait .after img {
    height: auto;
    width: 114%;
    transform: translate(-4%,0%) !important;
    margin: 0 auto;
    object-fit: cover;
    transform: translate(-1%,7%) scale(1.15);
}
.portrait .cover-content {
    background: rgba(0,0,0,0.7);
    position: absolute;
    DISPLAY: flex;
    bottom: 0;
    align-items: center;
    justify-content: center;
    left: auto;
    /* width: 100% !important; */
    height: 100%;
    margin: 0 auto;
    left: 5%;
}
.cover-content >div {
    max-width: 41%;
    background: rgba(255,255,255,0.8);
    padding: 1.5em;
}
.cover-content h1 {
    font-size: 25PX;
    color: #000;
    margin-bottom: 1em;
}
.main .cover-content h2 {
    font-size: 20PX;
}
.main .portrait .form-etape-0 .goto-form {
    margin-top: 15px;
}
.main .portrait .resultat-content h2 {
    font-size: 60px;
    line-height: 1em;
    margin-top: 15px;
}
.main .portrait .resultat-content h3 {
    font-size: 24px;
    margin-top: 6EM;
}
.portrait .after img {
    height: auto;
    width: 114%;
    transform: translate(-4%,0%) !important;
    margin: 0 auto;
    object-fit: cover;
/*    transform: translate(-1%,7%) scale(1.15);*/
}
.main .portrait .cover-content {
    max-width: 100%;
    margin-bottom: 0;
    padding: 1em;
    left: 0;
    width: 100%;
}
.main .bande.bande--3.bande--acabado #Glow .image>img{
    object-fit: cover;
    object-position: 41%;

}
.bande--4.bande--product .title {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 99;
    font-size: 19px;
    bottom: 30%;
    padding-right: 1em;
}
}

.main .resultat-content h3 {
    font-family: 'Singulier demi';
    font-size: 23px;
    margin: .5rem 0 0;
    text-align: center;
    color: #000;
    margin-top: -2em;
}
.main .resultat-content h2 {
    font-family: 'Singulier demi';
    font-size: 80px;
    font-weight: 400;
    line-height: 68px;
    margin-top: 3rem;
    text-align: center;
    letter-spacing: -.18rem;
}
.main .portrait .bande.bande--acabado{
    flex-direction: row;
}
.main .packshot.AH .packshot__img .lien-form {
    height: auto;
    color: #000;
    border: 0;
    background-color: #FFF;
    text-align: center;
    position: relative;
}
.main .packshot.AH.TE .packshot__img .lien-form {
    height: auto;
    color: #fff;
    border: 0;
    background-color: #000;
    text-align: center;
    position: relative;
}
.main .packshot.AH .packshot__img p{
color:#fff;
}
.main .packshot.AH.TE .packshot__img p{
        color:#000;
}
.main .packshot.AH .packshot__img.traces{
background:url(img/te-high.jpg);
background-size:cover;
background-repeat:no-repeat;
}
.main .packshot.TE .packshot__img.traces{
background:url(img/te-stylo.jpg);
background-size:cover;
background-repeat:no-repeat;
}