html {
    scroll-behavior: smooth;
  }

body{ 
    margin: 0;
    background-color: #000;
   overflow-x: hidden; 
}

.tetes{
    width: 100vw;
    display: flex;
    margin-top: 10vh;
justify-content: center;
}

.headline1, .headline2{
    width: 100vw;
}

.perso1, .perso2, .perso3, .perso4{
    width: 50vw;
    height: 50vw;
    margin-top: 200px;
}
.tete1{
   height: 100%;
    background-position: center;
    background-image: url(../img/xipeuh-newportraits.jpg);
    background-size: 85%;
    background-repeat: no-repeat;
    transition: 1s;
    filter: saturate(0);
}

.tete1:hover{
    background-size: 250%;
    transition: 1s;
    filter: saturate(1);
}
.tete2{
    height: 100%;
    background-position: center;
    background-image: url(../img/xipeuh-newportraits2.jpg);
    background-size: 70%;
    background-repeat: no-repeat;
    transition: 1s;
    filter: saturate(0);
}
.tete2:hover{
    background-size: 350%;
    transition: 1s;
    filter: saturate(1);
}
.tete3{
    height: 100%;
    background-position: center;
    background-image: url(../img/xipeuh-newportraits3.jpg);
    background-size: 70%;
    background-repeat: no-repeat;
    transition: 1s;
    filter: saturate(0);
}
.tete3:hover{
    background-size: 200%;
    transition: 1s;
    filter: saturate(1);
}
.tete4{
    height: 100%;
    background-position: center;
    background-image: url(../img/xipeuh-newportraits4.jpg);
    background-size: 70%;
    background-repeat: no-repeat;
    transition: 1s;
    filter: saturate(0);
}
.tete4:hover{
    background-size: 350%;
    transition: 1s;
    filter: saturate(1);
}
.name1, .name2, .name3, .name4{
    color: white;
    font-size: 50px;
    font-size: 80px;
font-weight: 600;
font-family: sans-serif;
text-transform: uppercase;
width: 100vw;


}

.tetes .text{
text-align: center;
    opacity: 0%;
    transition: .5s;
    margin-left: -50%;
}

.perso1:hover .text{
    opacity: 100%;
    transition: .5s;
}

.perso2:hover .text{
    opacity: 100%;
    transition: .5s;
}

.perso3:hover .text{
    opacity: 100%;
    transition: .5s;
}

.perso4:hover .text{
    opacity: 100%;
    transition: .5s;
}

.tetes p{
    margin: 0 0;
}

.description{
    color: white;
    font-size: 50px;
    font-size: 20px;
font-weight: 600;
font-family: sans-serif;
text-transform: uppercase;
width: 100vw;

}

/* ----------------------------------------------------------------------- FRESQUE */
.fresque{
    background-image: url('../img/newfresque.jpg');
    width: 100vw;
    height: 15591px;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
    margin-top: 400vh;
}

.traitblanc{
    height: 100vh;
    width: 1px;
    background-color: #fff;
    z-index: -9;
    position: fixed;
    top: 0;
    margin-left: 1400px;
    float: right;
}

.traitblanc2{
    height: 100vh;
    width: 1px;
    background-color: #fff;
    z-index: -9;
    position: fixed;
    top: 0;
    float: left;
}

.container{
    width: 1400px;
    margin: 0 auto;
}

.bartop{
    height: 1px;
    width: 100vw;
    background-color: #fff;
    margin-top: 20px;
}
.barbottom{
    height: 1px;
    width: 100vw;
    background-color: #fff;
    margin-top: 100px;
}

.homeslide{
    height: 150vh;
}

h1{

    color: #fff;
    font-size: 200px;
    font-family: 'Kdam Thmor Pro', sans-serif;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    width: 100vw;
    margin-top: -35px;
    margin-bottom: 0;
}

.navigation a{
color: white;
text-decoration: none;
font-size: 20px;
font-weight: 600;
transition: .2s;
}

.navigation a:hover{
    color: #966711;
    transition: .2s;
}
.navigation{
position: fixed;
top: 0;
right: 0;

}

.navigation ul{
    border-right: 1px solid #000;
    padding-right: 10px;
padding-top: 12px;
list-style-type: none;
}

.navigation li{
    padding-bottom: 12px;
    font-family: sans-serif;
    text-align: right;
    text-transform: uppercase;
  
}

.step1{
    height: 500px;
    margin-top: 1500px;
    opacity: 0;
    transition: 10s;
}

.step1 h2{
    color: white;
    font-size: 50px;
    font-family: 'Kdam Thmor Pro', sans-serif;
    text-transform: uppercase;
    text-align: right;
    margin: 0px;
    margin-top: 750px;
}

.step1:hover{
    opacity: 100%;
    transition: .2s;
}

.step1 .intro p{
    color: white;
    font-size: 17px;
    font-family: sans-serif;
    text-align: right;
    width: 400px;
    float: right;
}

.step2{
    height: 1700px;
    opacity: 0;
    transition: 10s;
    margin-top: 1800px;
}

.step2 h2{
    color: white;
    font-size: 50px;
    font-family: 'Kdam Thmor Pro', sans-serif;
    text-transform: uppercase;
    text-align: left;
    margin: 0px;
    margin-top: 200px;
}

.step2:hover{
    opacity: 100%;
    transition: .2s;
}

.step2 .intro p{
    color: white;
    font-size: 17px;
    font-family: sans-serif;
    text-align: left;
    width: 400px;
    float: right;
}

.step3{
    height: 800px;
    margin-top: 350px;
    opacity: 0;
    transition: 10s;
}

.step3 h2{
    color: white;
    font-size: 50px;
    font-family: 'Kdam Thmor Pro', sans-serif;
    text-transform: uppercase;
    text-align: left;
    margin: 0px;
}

.step3:hover{
    opacity: 100%;
    transition: .2s;
}

.step3 .intro p{
    color: white;
    font-size: 17px;
    font-family: sans-serif;
    text-align: left;
    width: 400px;
    float: right;
}

.step4{
    height: 6000px;
    opacity: 0;
    transition: 10s;
}

.step5{
    height: 2500px;
}

.step5 h2{
    color: white;
    font-size: 50px;
    font-family: 'Kdam Thmor Pro', sans-serif;
    text-transform: uppercase;
    text-align: left;
    margin: 0px;
}

.step4:hover{
    opacity: 100%;
    transition: .2s;
}

.step4 .intro p{
    color: white;
    font-size: 17px;
    font-family: sans-serif;
    text-align: left;
    width: 400px;
    float: left;
}
.step1 .citation p{
    font-family: sans-serif;
    color: white;
    font-size: 100px;
    font-weight: 600;
    mix-blend-mode: difference;
    text-align: center;
    text-transform: uppercase;
    margin-top: -400px;
    
    }



.step4 .citation p{
font-family: sans-serif;
color: white;
font-size: 100px;
font-weight: 600;
mix-blend-mode: difference;
text-align: right;
margin-top: -200px;

}


.step2 .citation p{
    font-family: sans-serif;
    color: white;
    font-size: 100px;
    font-weight: 600;
    mix-blend-mode: difference;
float: left;
margin-bottom: 400px;
    
    }

   

.step7 .citation p{
        font-family: sans-serif;
        color: white;
        font-size: 100px;
        font-weight: 600;
        mix-blend-mode: difference;
        margin-top: 2800px;
        text-align: center;
    }



.conclusion p{
    color: white;
    font-family: sans-serif;
    width: 30%;
    margin-top: 180px;
}



/* ----------------------------------------------------------------------- PARALLAX 1 */

.parallax-1 {
    position: absolute;
    z-index: -1;
    top: 0;
    margin-top: 400vh;
    left: 0;
    width: 100vw;
    height: 15591px;
    background-image: url('../img/newfresque-parallax.jpg');
    mix-blend-mode: difference;
    background-size: cover;
  }

  .parallax-2 {
    position: fixed;
    z-index: -1;
    top: 0;
    margin-top: -45vh;    
    left: 0;
    width: 1500px;
    height: 1869px;
    background-image: url('../img/cristal2.jpg');
    mix-blend-mode: difference;
    background-size: cover;
  }

  .parallax-3 {
    position: fixed;
    z-index: -1;
    top: 0;
    margin-top: -30vh;    
    left: 0;
    width: 1000px;
    height: 1000px;
    background-image: url('../img/fleche.jpg');
    mix-blend-mode: difference;
    background-size: contain;
  }


  /* ----------------------------------------------------------------------- RESPONSIVE */

  @media only screen and (max-width: 900px) {
   h1{
        font-size: 50px;
        text-align: left;
        margin-left: 10px;
        margin-top: 10px;
   }

   .text{
   padding-left: 10px;
   }

.text .name1, .text .name2, .text .name3, .text .name4{
    font-size: 50px;
    text-align: left;

}
.text .description{
    text-align: left;
}

.perso1, .perso2, .perso3, .perso4{
    width: 100vw;
    height: 100vw;
    margin-top: 200px;
}

.tetes{
    width: 100vw;
    display: inherit;
    margin-top: 10vh;
justify-content: center;
}

.tetes .text{
    margin-left: 0px;
}

.fresque, .parallax-1{
    background-position: center;
}

.step1{
    margin-top: 2100px;
   
}

.step1 .citation p,
.step2 .citation p,
.step3 .citation p,
.step4 .citation p,
.step7 .citation p{
    font-size: 50px;
    margin-left: 10px;
    max-width: 100vw;
    text-align: left;
}

.parallax-1, .parallax-2, .fresque{
    margin-top: 500vh;
}

.step1{
    height: 0px;
}

.step1 h2{
    float: left;
    margin-left: 10px;
}

.step1, .step2, .step3, .step4, .step5, .step6, .step7, .step8{
opacity: 100%;

}

.step2 h2{
 clear: both;
    margin-left: 10px;
    text-align: left;
}

.step2{
    height: 1200px;
}
.step3{
    height: 1500px;
}
.step4 .citation p{

    margin-top: 600px;
    

}

.step4{
    height: 4500px;
}
    
.step5{
     height: 6000px;
  
}
  }