@charset "UTF-8";

@font-face {
  font-weight: bold;
  font-style: normal;
  font-family: "messapia";
  src: url("../fonts/Messapia-Bold.otf");
}


:root {
  /*   --line-colour: rgba(90, 240, 80, 0.8); */
    --background: #ff5527;
    width: 100%;
    --text-colour: yellow;
    --line-colour: #ffa397;
  
    --link-colour: rgba(255, 255, 255, 0.8)
  }
  
  .intro-lines{
    position:absolute;
    margin-top: 750vh;
    top:0vh;
    left:0vw;
    width:100%;
    height:50vh;
    z-index:0;
    z-index:100;

  }

  
  
  @media only screen and (max-width: 1080px){
  .intro-lines{
    margin-top:100vh;
    height:50vh;
    overflow:hidden;
    }}
  
  #trame-lines{
    transform-origin: 50% 50%;
    position: absolute;
    top:0;
    left:0;
    stroke:yellow;
    stroke-width: 10;
  
  }

  .name {
    font-size: 15em;
    text-align: center;
    color: var(--text-colour);
    font-family: messapia;
    -webkit-text-stroke-width: 10px;
    -webkit-text-stroke-color: yellow;
  }
  
  .text-content {
    width: 100%;
    margin: 0px auto 1em auto;
    color: var(--text-colour);
    font-family: messapia;
  }

  body {
    font-family: sans-serif;
    color: yellow;
width: 100%;
    background: var(--background);
  }
  
  .p-image-1{
    font-size: 1.3em;
    line-height: 1.3;
    font-family: "messapia";
  	position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky; 
    margin-top:180vh;
  	top:30vh;
  	float:left;
    width:40vw;
}

  @media only screen and (max-width: 1080px){
.p-image-1{
	width:100vw;
	margin-top:0vh;
	z-index:-10;
	top:35vh;
	overflow:hidden;
}}

.p-image-2{
  font-size: 1.3em;
  line-height: 1.3;
  font-family: "messapia";
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top:120vh;
  top:45vh;
  left: 30%;
  float:left;
  width:40vw;
}

@media only screen and (max-width: 1080px){
.p-image-2{
width:100vw;
margin-top:0vh;
z-index:-10;
top:35vh;
overflow:hidden;
}}

.p-image-3{
  font-size: 1.3em;
  line-height: 1.3;
  font-family: "messapia";
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top:130vh;
  top: 68vh;
  left: 30%;
  float:left;
  width:40vw;
}

@media only screen and (max-width: 1080px){
.p-image-3{
width:100vw;
margin-top:0vh;
z-index:-10;
top:35vh;
overflow:hidden;
}}


  .background {
    z-index: -1;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 120vh;
  }
  
  .wave {
    stroke: var(--line-colour);
    stroke-width: 3px;
    stroke-dasharray: 50 10;
    stroke-linecap: round;
  }

  .intro-container{
    position:relative;
    text-align: center;
    vertical-align: center;
    height:350vh;
    background-color: #ff553e;
    top:0;
  
  }
  
  


  button{
    font-family: messapia;
    color: yellow;
    border:none;
    outline:none;
    font-size: 7em;
    line-height: 1em;
    height:100px;
    z-index:20;
    padding-top: 20px;
    background-color: transparent;
    text-align: left;
    
  }
  
  button:hover{
    color: #ffa397;
  }

  #clickme{
    top:0;
  }  


  
.counter-container-1-1{
  position: absolute;
  display:inline-block;
  width:auto;
  height:700vh;
}
  @media only screen and (max-width: 1080px){
.counter-container-1-1{
  height: 300vh;
}}

.counter-1-1{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
  top:0;
  left:0;
  z-index:10;
  margin-top:50vh;
  padding:0;
  padding-bottom:1em;
  padding-left: 1em;
}

.counter-container-1-2{
  position: absolute;
  display:inline;
  width:auto;
  height:700vh;  
  float: right;
  right:0;
  padding-right: 1em;
}
  @media only screen and (max-width: 1080px){
.counter-container-1-2{
height:100vh;
}}

.counter-1-2{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
  	right:0;
  	top:79vh;
  	margin-top:160vh;
  	padding:0;
  	z-index:10000;

}
  @media only screen and (max-width: 1080px){
.counter-1-2{
  	top:10vh;
  	padding-bottom:1vh;
}}

/*First paper bill-----------------------------------------*/
/*First paper bill-----------------------------------------*/

.images-container-1{
  position:relative;
  top: 30vh;
  z-index:-3;
  height:700vh;
  width:100%;
  background-color: #525fff;
}

  @media only screen and (max-width: 1080px){
.images-container-1{
  height:300vh;
  width:100vw;
}}

/*---------------------*/
/*---------------------*/

.image-1-1{
  	position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky; 
  	margin-top:150vh;
  	top:30vh;
  	float:left;
  	width:30vw;
}

  @media only screen and (max-width: 1080px){
.image-1-1{
	width:100vw;
	margin-top:0vh;
	z-index:-10;
	top:35vh;
	overflow:hidden;
}}

.text-container{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top: 0vh;
  top:13vh;
  float:left;
  width:30vw;
  font-family: messapia;
  color: yellow;
}

@media only screen and (max-width: 1080px){
.text-container{
width:100vw;
margin-top:0vh;
z-index:-10;
top:0vh;
overflow:hidden;
}}

.image-1-2{
	position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0vh;
  	float:right;
  	width:30vw;
  	margin-top:250vh;
}
  @media only screen and (max-width: 1080px){
.image-1-2{
	width:100vw;
	margin-top:0vh;
	z-index:-10;
	float:left;
	top:0vh;
}}

.image-1-3{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 55vh;
    align-content:center;
    width: 20vw;
    margin-left:32vw;
  	margin-top:100vh;
    z-index:10;
    overflow: hidden;
    animation: spin 5s linear infinite;
  }
    @keyframes spin { 
      100% { 
        transform: rotateZ(360deg);
      }
    
}


  @media only screen and (max-width: 1080px){
.image-1-3{
overflow:hidden;
height:auto;
margin-top:3vh;
max-width:20vw;
top:2vh;
float:right;
left:0;
}
  }

/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/


.text-container-1-1{
  position:relative;
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  height:auto;
  width:100vw;
  background-color:#ff553e;
  flex: 0 0 50%;
  padding:0;
  left:0;
}

.counter-container-2-1{
  position: absolute;
  display:inline-block;
  width:auto;
  height:330vh;
}
  @media only screen and (max-width: 1080px){
.counter-container-2-1{
  height:300vh;
}}

/*---------------------*/
/*---------------------*/

.counter-2-1{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
  top:0;
  left:0;
  z-index:10;
  margin-top:70vh;
  padding:0;
  padding-bottom:1em;
  padding-left: 1em;
}
  @media only screen and (max-width: 1080px){
.counter-2-1{
margin-top:0;
}}


.counter-container-2-2{
  position: absolute;
height:400vh;  
float: right;
right:0;
  padding-right: 1em;
  background-color: #56ea94;
}

  @media only screen and (max-width: 1080px){
.counter-container-2-2{
height:200vh;
	margin-top:50vh;
}}

.counter-2-2{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  right:0;
  top:79vh;
  margin-top:160vh;
  padding:0;
  z-index:10000;

}
  @media only screen and (max-width: 1080px){
.counter-2-2{
	margin-top:50vh;
  top:85vh;
}}


/*---------------------*/
/*---------------------*/

.images-container-2{
    position:relative;
    display: grid;
    grid-template-columns: auto auto auto auto;
    z-index:-3;
    padding-left: 5%;
    height:400vh;
    width:100vw;
    background-color: #56ea94;
  }
  
    @media only screen and (max-width: 1080px){
  .images-container-2{
    height:300vh;
    width:100vw;
  }}
  

/*---------------------*/
/*---------------------*/


.image-2-1{
	position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top:40vh;
  	width:20vw;
    margin-top:180vh;
}
@media only screen and (max-width: 1080px){
.image-2-1{
width:100vw;
overflow:hidden;
}}

.image-2-2{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top:40vh;
  width:22vw;
  margin-top:180vh;
}
  @media only screen and (max-width: 1080px){
.image-2-2{
width:100vw;
overflow:hidden;
top:50vh;
}}

.image-2-3{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top:40vh;
  width:21.5vw;
  margin-top:180vh;

}
  @media only screen and (max-width: 1080px){
.image-2-2{
  width:100vw;
  overflow:hidden;
  top:50vh;
}}

.images-container-3{
  position:relative;
  z-index:-3;
  height:40vh;
  width:100vw;
}

  @media only screen and (max-width: 1080px){
.images-container-3{
  height:300vh;
  width:100vw;
}}

/*---------------------*/
/*---------------------*/


/*---------------------*/
/*---------------------*/

.images-container-3{
    position:relative;
    z-index:-3;
    padding-left: 5%;
    height:400vh;
    width:100vw;
  }
  
    @media only screen and (max-width: 1080px){
  .images-container-3{
    height:300vh;
    width:100vw;
  }}
  

/*---------------------*/
/*---------------------*/


.image-3-1{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top:0vh;
  top:45vh;
  width:45vw;
  padding-left: 40%;
}

@media only screen and (max-width: 1080px){
.image-3-1{
width:100vw;
margin-top:0vh;
z-index:-10;
top:35vh;
overflow:hidden;
}}


.p-image-3-1{
  font-size: 3em;
  line-height: 1.3;
  font-family: "messapia";
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top:150vh;
  top:45vh;
  width:30vw;
}

@media only screen and (max-width: 1080px){
.p-image-3-1{
  width:30vw;
  margin-top:0vh;
  z-index:-10;
  top:35vh;
  overflow:hidden;
}}




.image-3-2{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top:50vh;
  top:53vh;
  width:45vw;
  padding-left: 40%;
}

@media only screen and (max-width: 1080px){
.image-3-2{
width:100vw;
margin-top:0vh;
z-index:-10;
top:35vh;
overflow:hidden;
}}


.p-image-3-2{
  font-size: 3em;
  line-height: 1.3;
  font-family: "messapia";
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top:0vh;
  top:54vh;
  width:30vw;
}

@media only screen and (max-width: 1080px){
.p-image-3-2{
  width:30vw;
  margin-top:0vh;
  z-index:-10;
  top:35vh;
  overflow:hidden;
}}



.image-3-3{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top:50vh;
  top: 64vh;
  width:45vw;
  padding-left: 40%;
}

@media only screen and (max-width: 1080px){
.image-3-3{
width:100vw;
margin-top:0vh;
z-index:-10;
top:35vh;
overflow:hidden;
}}


.p-image-3-3{
  font-size: 3em;
  line-height: 1.3;
  font-family: "messapia";
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top:0vh;
  top: 64vh;
  width:30vw;
}

@media only screen and (max-width: 1080px){
.p-image-3-3{
  width:30vw;
  margin-top:0vh;
  z-index:-10;
  top:35vh;
  overflow:hidden;
}}



.image-3-4{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top:0vh;
  top:76vh;
  width:45vw;
  padding-left: 40%;
}

@media only screen and (max-width: 1080px){
.image-3-4{
width:100vw;
margin-top:0vh;
z-index:-10;
top:35vh;
overflow:hidden;
}}


.p-image-3-4{
  font-size: 3em;
  line-height: 1.3;
  font-family: "messapia";
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top:80vh;
  top: 75vh;
  width:30vw;
}

@media only screen and (max-width: 1080px){
.p-image-3-4{
  width:30vw;
  margin-top:0vh;
  z-index:-10;
  top:35vh;
  overflow:hidden;
}}

.image-3-5{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top:20vh;
  top:75vh;
  width:45vw;
  padding-left: 40%;
}

@media only screen and (max-width: 1080px){
.image-3-5{
width:100vw;
margin-top:0vh;
z-index:-10;
top:35vh;
overflow:hidden;
}}


.p-image-3-5{
  font-size: 3em;
  line-height: 1.3;
  font-family: "messapia";
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top:0vh;
  top: 74vh;
  width:30vw;
}

@media only screen and (max-width: 1080px){
.p-image-3-5{
  width:30vw;
  margin-top:0vh;
  z-index:-10;
  top:35vh;
  overflow:hidden;
}}

.image-3-6{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top:20vh;
  top:84vh;
  width:45vw;
  padding-left: 40%;
}

@media only screen and (max-width: 1080px){
.image-3-6{
width:100vw;
margin-top:0vh;
z-index:-10;
top:35vh;
overflow:hidden;
}}


.p-image-3-7{
  font-size: 3em;
  line-height: 1.3;
  font-family: "messapia";
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top: 0vh;
  top: 73vh;
  width:30vw;
}

@media only screen and (max-width: 1080px){
.p-image-3-7{
  width:30vw;
  margin-top:0vh;
  z-index:-10;
  top:35vh;
  overflow:hidden;
}}

.p-image-3-6{
  font-size: 3em;
  line-height: 1.3;
  font-family: "messapia";
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky; 
  margin-top: 0vh;
  top: 82vh;
  width:30vw;
}

@media only screen and (max-width: 1080px){
.p-image-3-6{
  width:30vw;
  margin-top:0vh;
  z-index:-10;
  top:35vh;
  overflow:hidden;
}}


.counter-container-3-1{
  position: absolute;
  display:inline-block;
  width:auto;
  height:530vh;
}
  @media only screen and (max-width: 1080px){
.counter-container-3-1{
  height: 300vh;
}}


.counter-3-1{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
top:0;
left:0;
z-index:10;
margin-top:50vh;
padding:0;
padding-bottom:1em;
padding-left: 1em;
}



.second-lines{
  position:absolute;
  margin-top: 1100vh;
  top:0vh;
  left:0vw;
  width:100vw;
  height:60vh;
  z-index:0;
  z-index:100;
}

@media only screen and (max-width: 1080px){
.second-lines{
  margin-top:100vh;
  height:50vh;
  overflow:hidden;
  }}

#trame-lines{
  transform-origin: 50% 50%;
  position: absolute;
  top:0;
  left:0;
  stroke:yellow;
  stroke-width: 10;

}


.counter-2-3{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  right:0;
  top:79vh;
  margin-top:160vh;
  padding:0;
  z-index:10000;

}

.counter-container-3-2{
  position: absolute;
height:400vh; 
width: 100%; 
float: right;
right:0;
  padding-right: 1em;
  background-color: #56ea94;
}

  @media only screen and (max-width: 1080px){
.counter-container-3-2{
height:200vh;
	margin-top:50vh;
}}

.counter-2-4{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
top:0;
left:0;
z-index:10;
margin-top:50vh;
padding-bottom:1em;
padding-left: 3em;
}

@media only screen and (max-width: 1080px){
.counter-2-4{
margin-top:0;
}}

.third-lines{
  position:absolute;
  margin-top: 2850vh;
  top:0vh;
  left:0vw;
  width:100vw;
  height:20vh;
  z-index:0;
  z-index:100;
}

@media only screen and (max-width: 1080px){
.third-lines{
  margin-top:100vh;
  height:50vh;
  overflow:hidden;
  }}


  .images-container-4{
    position:relative;
    z-index:-3;
    height:40vh;
    width:100vw;
  }
  
    @media only screen and (max-width: 1080px){
  .images-container-4{
    height:300vh;
    width:100vw;
  }}

  
  

.fenetre{
  box-sizing: border-box;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  margin:0;
  padding:0;
  width: 100%;
  height:100vh;
  border: solid yellow 15px;
  overflow-x:hidden;
  }