@font-face {
    font-family: 'PP Editorial New';
    src: url('PPEditorialNew-Regular.woff2') format('woff2'),
        url('PPEditorialNew-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Editorial New';
    src: url('PPEditorialNew-Ultralight.woff2') format('woff2'),
        url('PPEditorialNew-Ultralight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
::-webkit-scrollbar {
  width: 0px;
}
* {
  font-family: PP Editorial New;
  margin: 0px;
  padding: 0px;
   font-weight: normal;
    font-style: normal;
  box-sizing: border-box;
   
/*  mix-blend-mode: difference;*/
}

html {
  box-sizing: border-box;
 
  /*font-family: ui-monospace, monospace; */ 
}
#N { display: none }






body {

  overflow: hidden;
  font-family: Archivo;
  background-color: white;

 
  
  /*background: #ccc;
*/}
img {
   display: none;
    mix-blend-mode: difference;
    mix-blend-mode: difference white;
}


body.row { 
background-color: black;
-webkit-filter: invert(1);

margin-bottom: 0px;
padding-bottom: 0px;

}
.champi { 
  width: 20%;
}




#dropzone {
  display: block;
  width: 100vw;
  height: 100vh;
  
}


canvas {
  transform: scale(0.3,0.3);
  display: block;
  margin-bottom:50%;
  margin-top: -30vh;
  margin-left: 9vw;
  max-height:70%;
    mix-blend-mode: difference black;
  pointer-events: none;
  transition-duration: 1s;
  transform: scale(0.3,0.3);
}

canvas.stepone { transform:scale(1,1);
transform:scale(1,1);


transition-duration: 1s;}
canvas.steptwo { transform:scale(1.03,1.03);
transform:scale(1.02,1.02);
transition-duration: 2s;}
#_canvas {
  display:none;
  
}
canvas.stepskew {
  transform: skew(95deg);
  transition-duration: 2s;}

  canvas.stepskewdos {
    transform: skew(-95deg);
    transition-duration: 2s;}
canvas.row{ 
  max-height: 50vh;
/*transform: rotate(45deg);*/
transform: scale(1.5, 1.5);

  transition-duration: 15s; 
}


label {
  display: inline-block;
  width: 10em;
  text-align: left;
}

input[type='range'] {
  display: inline-block;
  width: 20em;
}

span {
  display: inline-block;
  width: 2em;
}



/*.xp{ position: fixed;
  top: 0%;

  height: 200vh;
  background-color: red;
  z-index: 2;
}*/

/*.xp.after{ background-color:yellow;
  background-color:yellow;
  background-color:yellow;*/
/*width: 1%;*/
/*transition-duration: 2s;

}*/



.zero{ 
  position: relative;
  align-items: start; 
 /* padding-top: 3vh;*/

 }

.steps{ position: relative;
width: 16vw;
font-size: 3rem; 
/*background-color: yellow;*/
/*padding-left:100px;*/
/*margin-right: 0px;*/
}

.story{ position: relative;
    width: 80vw; 
    font-size: 3rem;}

.story.after{ 
    width: 33vw; 
    
    font-size: 1.5rem;}
.caracteri.after{ transition-duration: 2s;
          position: relative;  
        width: 16vw; 
        font-size: 1.5rem;}
.caracteri{ 
  
  display: none;
  display: none;
  padding-top:0%; 
  width: 0vw;
/* background: pink; */

       }



  
  .theori{ 
  
    display: inline-block;
    display: inline-block;
    
    width: 27vw;
    font-size: 1rem;
  padding-top:0%; 

 background: white; 

       }
.theori.after{ display: none;}
 


.steps,.story,.caracteri.after{ 
  background: white;
  display: inline-block; }



.categories{ 

  width: 16vw;
  display: inline-block;
  padding-left:35px;
  
 
  z-index: 3;
 
 font-size: 0.5rem;
       }

       canvas{
        mix-blend-mode: difference black;
    
       }
  .headerdos{
    position: fixed;
    position: fixed;
    top: 2vh;
    z-index: 3;
  }
  .headertres{
    position: fixed;
    position: fixed;
    bottom: 2vh;
    z-index: 3;
  }

#innertravel{ 
  
width: 34vw;

 }

#innertravel.after{ 
width: 34vw;
 }
#caracteristics{ 
  opacity: 0;
  width: 14vw;
 }
#caracteristics.after{ 
  opacity: 1;
  display: inline-block;
  width: 14vw;
 }
#theories{ 
            width: 34vw;
            opacity: 1;

  }

/* #theories.after{ 
            width: 34vw;
            opacity: 1;

  } */

 .twenty,.fourty,.sixty,.ninety,.eighty,.hundred.eighty, .ninety,.cent,.centdix,.centADJECTIVES,.deuxcent{ position: relative;
  padding-top: 200vh; padding-left: 3vw; padding-right: 0px; width: 100vw; display: flex; align-items: start;  }

.twentys,.fourtys,.sixtys,.ninetys,.eightys,.hundreds.eightys, .ninetys,.cents,.centdixs,.deuxcents{ position: relative;
 /* padding-bottom: 136vh;*/ padding-bottom: 200vh; padding-left: 3vw; padding-right: 0px; width: 100vw; display: flex; align-items:end;}

.ENDS{
  padding-top: 20vh;
color: black;
background-color: white;

}
.END{
  padding-bottom: 20vh;
  color: black;
  background-color: white;

}

#decs, #dec{ 
width: 100vw;
font-size: 1.7em;}
/* .fourtys{ padding-bottom: 150vh; } */

/* .cents{ margin-bottom: 20vh;

 margin-top: 140vh;} */


/* .sixtys{ padding-bottom: 120vh;
  padding-bottom: 120vh;
} */
#final{ 
	padding-top: 70vh;
	
width: 100vw;
font-size: 1.7em;
background-color: white;
 /* color: white;	*/
line-height: 0.9em;



}
#fino{ padding-bottom: 0vh;
  padding-bottom: 0vh;
  
width: 100vw;
font-size: 1.7em;
background-color: white;
 /* color: white; */
line-height: 0.9em;}

.centADJECTIVES{ color: pink;
font-size: 9rem;}

#left, #right {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0px;
  
  /*pointer-events: none;*/
}


#left {
  width: 100vw;
  left: 0px;
  padding: 0px;
  overflow: scroll;
 /* mix-blend-mode: multiply;*/ 
}
.window#soustitre{ 
  mix-blend-mode: difference;
  padding-top: 40vh;/*//40vh//*/
padding-bottom: 30vh;
font-size: 2em;
color: black;






}
.window#soustitredeux{ 
  color: black;
  position: absolute;
margin-top:19vh;
 
  
  /*top: 904vh;*/

 /* padding-top: 300vh;*/
   z-index: 1;
   font-size: 2em;}




#right{
  right: 0px;
  font-family: Archivo;

  height: 100vh;
  overflow: scroll;
  /*pointer-events: none;*/
}

.innerRight {

  height: 4200vh;
}


#quatrevindix.row{ 
/*background-color: pink;*/
background-color: pink;
width: 90vw;
font-size: 1.5em;

    



}
#quatrevindixe.row{ 
/*background-color: pink;*/
background-color: pink;
width: 90vw;
font-size: 1.5em;



}

#caracteriten.row{ 
/*background-color: pink;*/
background-color: pink;
width: 90vw;
font-size: 1.5em;

}
#caracteritens.row{ 
/*background-color: pink;*/
background-color: pink;
width: 90vw;
font-size: 1.5em;

}
#storynine.step{ 
  font-size: 0.7rem;
 }
 #storynines.step{ 
  font-size: 0.7rem;
 }

 #storyten.step{ 
  font-size: 0.7rem;
 }
 #storytens.step{ 
  font-size: 0.7rem;
 }
  #storyten.big{ 
    font-size:1.8rem;
   }
 #storytens.big{ 
  font-size:1.8rem;
   }
#top, #bottom {
  width: 100%;
  height: 50vh;
  position: fixed;
  left: 0px;
  overflow: scroll;
  pointer-events: none;
  z-index: 0;
  /*mix-blend-mode: multiply;*/
}


#top {
  top: 0px;
  color: black;
  padding-bottom: 0px;
 

  
 /* linear-gradient(0deg, rgba(255,0,0,.35) 0%, rgba(255,0,0,0) 20%);*/
}

#bottom {
 top: 50vh;
  bottom: 0px;
  color: black;


   
}

.overflow {
  font-size: 4vw;
  /*background: linear-gradient(0deg, rgba(100,0,0,.5) 0%, rgba(100,0,0,0) 100%);*/
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  justify-content: flex-start;
  /*mix-blend-mode: multiply*/;
  height: 2200vh;
}

#bottom .overflow {
  /*background: linear-gradient(180deg, rgba(100,0,0,.5) 0%, rgba(100,0,0,0) 100%);*/
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.window {
  height: 50vh;
  display: block;
/*  padding: 0px 40px;*/
padding-top: /*50vh*/;
  display: flex;
  align-items: center;
  justify-content: center;  
  text-transform: uppercase; 
 
}

#soustitredeux{ 

width:100vw; 
text-align: center;
justify-content: center;

}

#bottom .window {
  padding: 0px 120px;
}



/* lists page */

/*#list #left {
  width: 100vw;
  overflow: scroll;
  background: linear-gradient(180deg, rgba(255,255,0,.35) 0%, rgba(255,255,0,0) 20%);     
}

#list #right {
  overflow: scroll;
  background: linear-gradient(0deg, rgba(255,255,0,.35) 0%, rgba(255,255,0,0) 20%);       
}*/









@media only screen and (max-width: 800px) {

  #left{
    width: 100vw;
    height: auto;
    overflow: hidden;
    position: relative;
    top: auto;
  }


  .scroll {
    width: 100vw;
    padding: 20px;
  }

  #right {
    /*display: none;*/
    /*position: relative;*/
    width: 100vw;
  }

  



}

@media only screen and (max-width: 1085px) { 
canvas {
/* background-color: pink;
*/

 margin: auto;
 margin-top:-10vh;
max-height:120vh;
}
.caracteri.after{ transition-duration: 2s;
          position: relative;  
        width: 33vw; 
        flex: none;
padding-right: 1vw;
        font-size: 1.8rem;}

}
@media only screen and (min-width: 1085px) { 
canvas {

  display: block;

margin: auto;
 margin-top:-30vh;
height:160vh;


    mix-blend-mode: difference white;

} }

@media only screen and (max-width: 885px) { 
canvas {

  display: block;
/*background-color: yellow;*/
margin: auto;
/*margin-left: -50px;*/
margin-top:10vh;
height:90vh;



    

} }
@media only screen and (max-width: 885px) { 
canvas {

  display: block;

margin: auto;
/*margin-left: -50px;*/
margin-top:10vh;
height:90vh;



    

} }
@media only screen and (max-width: 669px) { 
canvas {

  display: block;
/*background-color: yellow;*/
margin: auto;
/*margin-left: -50px;*/
margin-top:20vh;
height:70vh;



    

} .twenty,.fourty,.sixty,.ninety,.eighty,.hundred.eighty, .ninety,.cent,.centdix,.centADJECTIVES,.deuxcent{ position: relative;
  padding-left: 12vw; padding-right: 0px; width: 100vw; display: flex; align-items: start;  }

.twentys,.fourtys,.sixtys,.ninetys,.eightys,.hundreds.eightys, .ninetys,.cents,.centdixs,.deuxcents{ position: relative;
 /* padding-bottom: 136vh;*/  padding-left: 12vw; padding-right: 0px; width: 100vw; display: flex; align-items:end;}




.window#soustitre{ 

 font-size: 2.7em;
width: 100%;


justify-content: center;
text-align: center;

}
.window#soustitredeux{ 
width: 100%;
   font-size: 2.7em;
   letter-spacing: 0.01vw;
   width: 100%;


text-align: center;
justify-content: center;
}


p{ width: 100vw;

 }

.zero{ width: 70%;
 
padding-left: 3vw;

display: inline-block;
}
.story{ font-size: 1.5rem;
padding-left: 1vw; }
.caracteri.after{ font-size: 1rem;
padding-right: 1vw;  }
.steps{ margin-right: 5vw; 
margin-right: 5vw;}
#contientzero{ display: flex;
padding-left: 0px;
margin-left: 0px; 
}
#bottom .window {
  padding: 0px 0px;
}
.twenty,.fourty,.sixty,.ninety,.eighty,.hundred.eighty, .ninety,.cent,.centdix,.centADJECTIVES,.deuxcent{ position: relative;
  padding-left: 2vw; padding-right: 0px; width: 100vw; display: flex; align-items: start;  }

.twentys,.fourtys,.sixtys,.ninetys,.eightys,.hundreds.eightys, .ninetys,.cents,.centdixs,.deuxcents{ position: relative;
 /* padding-bottom: 136vh;*/  padding-left: 2vw; padding-right: 0px; width: 100vw; display: flex; align-items:end;}






.steps,.story,.caracteri.after{ 
  background: white;
  display: block; }

}
@media only screen and (max-width: 520px) { 

}