@charset "UTF-8";

html {
  width: 100%;
  height:100%;
}

body {
  width: 100%!important;
  height:100%;
  font-size: 1em;
  line-height: 1.2em;
}

p {
padding-bottom:1.4em;}






/*NAV-------------------------------------------------*/
/*NAV-------------------------------------------------*/

.navigation-bar{
display:flex;
flex-direction: column;
position:fixed;
justify-content:space-between;
margin-left:0vw;
margin-top:10vh;
left:0.3vw;
width:5vw;
height:80vh;
z-index:1000;
}

.navigate-1 a,
.navigate-2 a,
.navigate-3 a,
.navigate-4 a,
.navigate-5 a{
text-align: left;
font-size:1.2em;
color:#b373f5;
font-family:rakkas;
text-decoration: none;
cursor:pointer;
z-index: 100;
height:10vh;
width:10vw;
z-index:100;
opacity:1;
z-index:1000;
}


input[name="1"] { 
  margin-top:300px;
}
input[name="2"] { 
  margin-top:300px;
}
input[name="3"] { 
  margin-top:300px;
}
input[name="4"] { 
  margin-top:300px;
}
input[name="5"] { 
  margin-top:300px;
}



/*intro-------------------------------------------------*/
/*intro-------------------------------------------------*/

.intro-container{
	position:relative;
  text-align: center;
  vertical-align: center;
	height:350vh;
  background-image: linear-gradient(#8cff7f, yellow);
  top:0;

}
  @media only screen and (max-width: 1080px){
.intro-container{
height:200vh;

}}


.disclaimer{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top:0;
  width:100vw;
  align-items: center;
  justify-content: center;
  vertical-align: center;
  font-family: rakkas;
  font-size:0.8em;
  color:#b373f5;
  line-height:0.9em; 
  z-index:10;
  overflow:hidden;
  height:5vh;
  padding-top:0.5vh;
}



  @media only screen and (max-width: 1080px){
.disclaimer{
display:none;
}}







.intro-text{
	position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top:0;
  width:100vw;
  display: inline;
  align-items: center;
  justify-content: center;
  vertical-align: center;
  font-family: rakkas;
  font-size:8em;
  color:#b373f5;
  height:350vh;
  line-height:0.9em; 
  z-index:10;
  top:25vh;  
  overflow:hidden;
}

@media only screen and (max-width: 1080px){
#intro-text{
	font-size:6em;
 	height:200vh;
  	overflow:hidden;
	top:10vh;
  }}

#intro-text-small{
	position:sticky;
	display: inline;
	height:auto;
	align-items: center;
  justify-content: center;
  font-family: rakkas;
  font-size:4em;
  color:#b373f5;
  height:350vh;
  line-height:1.1em; 
  top:70vh;
  z-index:10;
  overflow:hidden;
}

@media only screen and (max-width: 1080px){
#intro-text-small{
	position:sticky;
  height:200vh;
  top:70vh;
  }}

.intro-lines{
  position:absolute;
  margin-top:150vh;
  top:0vh;
  left:0vw;
  width:100vw;
  height:200vh;
  z-index:0;
  background-image: linear-gradient(transparent,yellow);
  z-index:100;
}

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

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

}

.dollar-sign-intro{
  wrap:nowrap;
  position:absolute;
  align-items: center;
  justify-content: center;
  font-family: rakkas;
  font-size:200em;
  color:yellow;
  height:350vh;
  top:0;
  z-index:10;
  mix-blend-mode: overlay;
  line-height: 0.5em;
  width:100vw;
  overflow:hidden;
}
  @media only screen and (max-width: 1080px){
.dollar-sign-intro{
font-size:120em;
line-height: 0.6em;
height:200vh;
}}





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

button{
  font-family:Abril Fatface;
  color: yellow;
  border:none;
  outline:none;
  font-size: 18em;
  line-height: 1em;
  height:100px;
  z-index:20;
  background-color: transparent;
}

button:hover{
  color: #ff9c00;
}


#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:0vh;
  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:300vh;
}}

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

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

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

.images-container-1{
  position:relative;
  z-index:-3;
  height:700vh;
  width:100vw;
  animation: pulsegreen 5s infinite;
}
@keyframes pulsegreen {
  0%, 100% {
    background-color: #c4daba;
  }
  50% {
    background-color: #a5ec87;
  }}

  @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:90vh;
  	top:0vh;
  	float:left;
  	width:50vw;
    mix-blend-mode: luminosity;
}

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

.image-1-2{
	position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top:0vh;
  	float:right;
  	width:50vw;
  	margin-top:200vh;
    mix-blend-mode: luminosity;
}
  @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:0;
    align-content:center;
    width:70vw;
    margin-left:10vw;
  	margin-top:100vh;
    mix-blend-mode: luminosity;
    z-index:10;
    overflow: hidden;
}

  @media only screen and (max-width: 1080px){
.image-1-3{
overflow:hidden;
height:auto;
margin-top:10vh;
max-width:70vw;
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-image: linear-gradient(yellow,#87ffe7,yellow);
  flex: 0 0 50%;
  padding:0;
  left:0;
}

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

.title-1-1{
	display:block; 
  position:relative;
  align-self:center;
  top:0;
  font-family:rakkas;
  font-size:3em;
  line-height:1.2em;
  color:#ff9c00;
  text-align: center;
  z-index:9;
  width:auto;
  margin-top:20vh;
  padding:1em;
  /*background-color: #ff9c00;
  border: 5px solid yellow;*/
}
  @media only screen and (max-width: 1080px){
.title-1-1{
font-size:10em;
margin-top:10vh;
}}

.text-1-1{
  display:block; 
  position:relative;
  align-self:center;
  top:0;
  font-family:rakkas;
  font-size:2em;
  line-height:1.2em;
  color:#ff9c00;
  text-align: justify;
  text-align-last: center;
  z-index:9;
  width:90vw;
  margin-top:2vh;
  padding:1em;
  /*background-color: yellow;
  border: 5px solid #ff9c00;*/
}

  @media only screen and (max-width: 1080px){
.text-1-1{
font-size:4em;
width:90vw;
}}


.image-text-1-1 {
	text-align:center;
	align-self:center;
	position:relative;
	 display:flex;
  	flex-wrap: wrap;
  	flex-direction: column;
  	justify-content: center;
	width:30em;
	padding:0.9em;
	margin-top:2vh;
	background-color:#ff9c00;
  	border: 2px solid yellow;
  	}
  @media only screen and (max-width: 1080px){
.image-text-1-1{
	font-size:4em;
	width:90vw;
}}
.image-text-1-1-info{
  display:block; 
  position:relative;
  align-self:center;
  top:0;
  font-family:rakkas;
  font-size:1.4em;
  line-height:1.2em;
  color:yellow;
  text-align: center;
  z-index:9;
  width:auto;
  max-width:30em;
  margin-top:1vh;
  padding:0.5em;
color:#ff9c00;
margin-bottom:20vh;
}
  @media only screen and (max-width: 1080px){
.image-text-1-1-info{
font-size:4em;
width:90vw;
}}


/*Second paper bill---------------------------------------------------------------*/
/*Second paper bill---------------------------------------------------------------*/


.counter-container-2-1{
  position: absolute;
  display:inline-block;
  width:auto;
  height:900vh;
}
  @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:900vh;  
float: right;
right:0;
  padding-right: 1em;
}

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

.counter-2-2{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
  	right:0;
  	top:67vh;
  	margin-top:120vh;
  	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;
  z-index:-3;
  height:900vh;
  width:100vw;
  animation: pulse 5s infinite;
}
@keyframes pulse {
  0%, 100% {
    background-color: #ff9c00;
  }
  50% {
    background-color: #FFFF00;
  }}
  @media only screen and (max-width: 1080px){
.images-container-2{
  height:300vh;
}}

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

.image-2-1{
	position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top:0;
  	float:left;
  	width:70vw;
  	margin-top:0vh;
}
@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:2vh;
  	float:right;
  	right:2vw;
  	width:40vw;
  	margin-top:30vh;
}
  @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;
    margin-top:0vh; 
    top:30vh;
   	float:right;
   	width:100vw;
   	z-index:10;
    mix-blend-mode:overlay;

}
  @media only screen and (max-width: 1080px){
.image-2-2{
margin-top:10vh;
overflow:hidden;
top:40vh;
}}


#trame-lines-2{
  transform-origin: 50% 50%;
  position:absolute;
  top:0;
  left:0;
  stroke:#ff9c00;
  stroke-width:8px;
  z-index:-5;
  background-color: transparent;
  overflow:hidden;
}
  @media only screen and (max-width: 1080px){
.trame-lines-2{
display:none;
}}


/*Second text----------------------------------------------------------*/
/*Second text----------------------------------------------------------*/

.text-container-2-1{
  position:relative;
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  height:auto;
  width:100vw;
  background-image: linear-gradient(yellow,#87ffe7);
  flex: 0 0 50%;
  padding:0;
  left:0;
  z-index:6;
}

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

.title-2-1{
	display:block; 
  position:relative;
  align-self:center;
  top:0;
  font-family:rakkas;
  font-size:3em;
  line-height:1.2em;
  color:#ff9c00;
  text-align: center;
  z-index:9;
  width:auto;
  margin-top:20vh;
  padding:1em;
  text-decoration: underline;
}
  @media only screen and (max-width: 1080px){
.title-2-1{
font-size:10em;
margin-top:10vh;
}}

.text-2-1,
.text-2-2,
.text-2-3{
 display:block; 
 position:relative;
 align-self:center;
 top:0;
 font-family:rakkas;
 font-size:2em;
 line-height:1.2em;
 color:#ff9c00;
 text-align: justify;
 text-align-last: center;
 z-index:9;
 width:90vw;
 margin-top:1vh;
 padding:1em;
}
.text-2-1{
	margin-top:2vh;
}
.text-2-2{
  margin-bottom:20vh;
}

  @media only screen and (max-width: 1080px){
.text-2-1,
.text-2-2,
.text-2-3{
font-size:4em;
width:90vw;
}}

.image-text-2-1 {
	text-align:center;
	align-self:center;
	position:relative;
	display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
	width:60vw;
	padding:0.9em;
	margin-top:2vh;
	background-color:#ff9c00;
  	}
  @media only screen and (max-width: 1080px){
.image-text-2-1{
font-size:4em;
width:90vw;
}}

.image-text-2-1-info{
  display:block; 
  position:relative;
  align-self:center;
  top:0;
  font-family:rakkas;
  font-size:1.4em;
  line-height:1.2em;
  color:yellow;
  text-align: center;
  z-index:9;
  width:auto;
  max-width:30em;
  margin-top:1vh;
  padding:0.5em;
  color:#ff9c00;
}
  @media only screen and (max-width: 1080px){
.image-text-2-1-info{
font-size:4em;
width:90vw;
}}



/*Third paper bill----------------------------------------------------------*/
/*Third paper bill----------------------------------------------------------*/

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

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

.counter-3-1{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top:0;
  	z-index:10;
  	float:right;
  	right:0;
  	margin-top:100vh;
  	padding-bottom:2vh;
  	padding-left: 2vw;
}

  @media only screen and (max-width: 1080px){
.counter-3-1{
margin-top:40vh;
}}

.counter-container-3-2{
  position: absolute;
  display:inline-block;
  width:auto;
  height:1000vh;
  float: right;
  right: 0;
}
  @media only screen and (max-width: 1080px){
.counter-container-3-2{
height:400vh;
}}

.counter-3-2{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
  	top:67vh;
  	right:0;
  	z-index:10;
  	float:right;
  	margin-top:200vh;
  	padding-bottom:2vh;
  	padding-right:2vw;
}
  @media only screen and (max-width: 1080px){
.counter-3-2{
margin-top:80vh;
  	top:86vh;

}}
/*---------------------*/
/*---------------------*/


@keyframes slide {
  0% {background-position: 0 0;}
  50%{background-position: 300px 0;}
  100% {background-position: 0 0;}
}
.images-container-3{
  position:relative;
  z-index:-3;
  height:1000vh;
  width:100vw;
  background-color: #87ffe7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='338' height='40.6' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23fff000' stroke-width='7.8' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
    /* background by SVGBackgrounds.com */
  animation: 10s slide linear infinite;
}
  @media only screen and (max-width: 1080px){
.images-container-3{
height:400vh;
}}

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

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

.image-3-2{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top:47vh;
    float:right;
    height:50vh;
    margin-top:150vh;
}
  @media only screen and (max-width: 1080px){
.image-3-2{
margin-top:60vh;
}}

#trame-lines-3-3{
  transform-origin: 50% 50%;
  position:relative;
  top:0;
  left:0;
  stroke:yellow;
  stroke-width:4px;
  z-index:-5;
}

.image-3-3{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top:50vh;
  	float:left;
 	  height:50vh;
  	margin-top:200vh;
    overflow: hidden;
}
  @media only screen and (max-width: 1080px){
.image-3-3{
margin-top:0vh;
}}

.image-3-4{
  position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top:0vh;
    right:20vw;
    align-content:middle;
    text-align:center;
    height:100vh;
    margin-left:0vw;    
    overflow-x: hidden;
    margin-top:300vh;
    mix-blend-mode: luminosity;
}
  @media only screen and (max-width: 1080px){
.image-3-4{
max-width:100vw;
height:auto;
padding-left:4vw;
padding-top:10vh;
z-index:-10;
margin-top:0vh;
}}

/*Third text----------------------------------------------------------*/
/*Third text----------------------------------------------------------*/

.text-container-3-1{
  position:relative;
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  height:auto;
  width:100vw;
  background-image: linear-gradient(#87ffe7,#6d25ff);
  flex: 0 0 50%;
  z-index:6;
}

.title-3-1{
	display:block; 
  position:relative;
  align-self:center;
  top:0;
  font-family:rakkas;
  font-size:3em;
  line-height:1.2em;
  color:#e47e7d;
  text-align: center;
  z-index:9;
  width:auto;
  margin-top:30vh;
  padding:1em;
  text-decoration:underline;
}
  @media only screen and (max-width: 1080px){
.title-3-1{
font-size:9em;
margin-top:10vh;
}}


.text-3-1,
.text-3-2{
 display:block; 
  position:relative;
  align-self:center;
  top:0;
  font-family:rakkas;
  font-size:2em;
  line-height:1.2em;
  text-align: justify;
  text-align-last: center;
  z-index:9;
  width:90vw;
  margin-top:1vh;
  padding:1em;
  color:#e47e7d;
}
.text-3-1{
  margin-top:2vh;
}
.text-3-2{
	margin-bottom:20vh;
}
  @media only screen and (max-width: 1080px){
.text-3-3{
margin-bottom:20vh;
}}
  @media only screen and (max-width: 1080px){
.text-3-1,
.text-3-2{
font-size:4em;
width:90vw;
}}

.image-text-3-1{
	text-align:center;
	align-self:center;
	position:relative;
	display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
	width:60vw;
	padding:0.9em;
	margin-top:2vh;
	background-color:#e47e7d;
  z-index:10;
}
@media only screen and (max-width: 1080px){
.image-text-3-1{
font-size:4em;
width:90vw;
}}

.image-text-3-1-info{
  display:block; 
  position:relative;
  align-self:center;
  top:0;
  font-family:rakkas;
  font-size:1.4em;
  line-height:1.2em;
  color:#e47e7d;
  text-align: center;
  z-index:9;
  width:auto;
  margin-top:1vh;
  padding:0.5em;
}
  @media only screen and (max-width: 1080px){
.image-text-3-1-info{
font-size:4em;
width:90vw;
}}

.image-text-3-2-info{
  display:block; 
  position:relative;
  align-self:center;
  top:0;
  font-family:rakkas;
  font-size:1.4em;
  line-height:1.2em;
  color:#e47e7d;
  text-align: center;
  z-index:9;
  width:auto;
  margin-top:1vh;
  padding:0.5em;
}
@media only screen and (max-width: 1080px){
.image-text-3-2-info{
font-size:4em;
width:90vw;
margin-bottom:5vh;
}}

.wave-text {
	width:60vw;
	margin:1vh;
	position:relative;
	height: 20px;
	background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/423754/wave.svg') repeat-x 0%;
	background-size: contain;
	animation: 30s wave linear infinite;
}

/*Fourth paper bill----------------------------------------------------------*/
/*Fourth paper bill----------------------------------------------------------*/

.images-container-4{
  position:relative;
  z-index:-3;
  height:1000vh;
  width:100vw;
  background-image: linear-gradient(#6d25ff, #b373f5, #6d25ff);
}
  @media only screen and (max-width: 1080px){
.images-container-4{
  height: 600vh;
}}


.image-4-1{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top:0;
  float:right;
  height:100vh;
  margin-top:0vh;
}

#trame-lines-4{
  transform-origin: 50% 50%;
  position:relative;
  top:0;
  left:0;
  stroke:#6d25ff;
  stroke-width:7px;
  z-index:-5;
}
@media only screen and (max-width: 1080px){
#trame-lines-4{
margin-top:0vh;
}}

.image-4-2{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top:0;
  float:left;
  height:100vh;
  margin-top:0vh;
  overflow: hidden;
}
@media only screen and (max-width: 1080px){
.image-4-2{
max-width:100vw;
height:auto;
float:right;
}}

.image-4-3{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top:40vh;
  float:left;
  height:70vh;
  margin-top:200vh;
  margin-left:-10vw;
  left:0;
  z-index:0;
  overflow: hidden;
}
  @media only screen and (max-width: 1080px){
.image-4-3{
margin-top:40vh;
top:30vh;
}}

.image-4-4{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top:20vh;
    right:20vw;
    float:right;
    width:100vh;
    margin-top:200vh;
    left:0;
    overflow:hidden;
    mix-blend-mode:overlay;
}
  @media only screen and (max-width: 1080px){
.image-4-4{
margin-top:0vh;
}}

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

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

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

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

.counter-4-2{
	   position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
  	right:0;
  	top:67vh;
  	margin-top:100vh;
  	padding:0;
  	z-index:10000;
}
  @media only screen and (max-width: 1080px){
.counter-4-2{
  	top:85vh;
  	padding-bottom:1vh;
}}

.wave-container-1{
	margin-top:300vh;
}
  @media only screen and (max-width: 1080px){
.wave-container-1{
  	margin-top:0vh;
}}
@keyframes wave {
	0% {background-position: 0 0;}
	50%{background-position: 300px 0;}
	100% {background-position: 0 0;}
}
.wave {
	width:100vw;
	margin:0.2vh;
	position:relative;
	height: 50px;
	background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/423754/wave.svg') repeat-x 0%;
	background-size: contain;
	animation: 20s wave linear infinite;
}

/*Fourth text----------------------------------------------------------*/
/*Fourth text----------------------------------------------------------*/

.text-container-4{
  position:relative;
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  height:auto;
  width:100vw;
  background-image: linear-gradient(#6d25ff,#e47e7d);
  flex: 0 0 50%;
  overflow: hidden;
  z-index: 6;
}

.title-4-1{
  display:block; 
  position:relative;
  align-self:center;
  top:0;
  font-family:rakkas;
  font-size:3em;
  line-height:1.2em;
  color:yellow;
  text-align: center;
  z-index:9;
  width:auto;
  margin-top:30vh;
  padding:1em;
  text-decoration: underline;
  /*background-color: #e47e7d;
  border: 5px solid #87ffe7;*/
}
  @media only screen and (max-width: 1080px){
.title-4-1{
font-size:9em;
margin-top:10vh;
}}

.text-4-1 {
display:block; 
  position:relative;
  align-self:center;
  top:0;
  font-family:rakkas;
  font-size:2em;
  line-height:1.2em;
  color:yellow;
  text-align: justify;
  z-index:9;
  width:90vw;
  margin-top:10vh;
  margin-bottom:0vh;
  padding:1em;
}

.sources{
  display:block; 
  position:relative;
  align-self:center;
  justify-content: center;
  text-align:center;
  font-family:rakkas;
  font-size:1em;
  line-height:1.2em;
  align-self:center;
  text-align:;
  z-index:9;
  width:40em;
  margin-top:10vh;
  margin-bottom:20vh;
  padding:1em;
  color:yellow;
}
.sources a{
  text-decoration:none;
  cursor:pointer;
}
.sources a:active{
color:yellow;
}
  @media only screen and (max-width: 1080px){
.text-4-1,
.sources{
font-size:4em;
width:90vw;
}}

/*Fifth banknote----------------------------------------------------------*/
/*Fifth banknote----------------------------------------------------------*/

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

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

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

.counter-5-2{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
  	right:0;
  	top:67vh;
  	margin-top:100vh;
  	padding-bottom:2vh;
  	z-index:10000;
}
  @media only screen and (max-width: 1080px){
.counter-5-2{
  	top:85vh;
  	padding-bottom:1vh;
}}

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

.images-container-5{
  position:relative;
  z-index:-3;
  height:1100vh;
  width:100vw;
    animation: pulsepink 5s infinite;
}
@keyframes pulsepink {
  0%, 100% {
    background-color:#6d25ff;
  }
  25%{
    background-color:#e47e7d
  }
	50% {
    background-color:#b373f5;
  }
75%{
	background-color:#0f75ff;
	}}
@media only screen and (max-width: 1080px){
.images-container-5{
  height: 700vh;
}}

.image-5-1{
  position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top:20vh;
    float:right;
    width:100vw;
    margin-top:0vh;
    z-index:-10;
}

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

.image-5-3{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top:30vh;
  	float:left;
  	height:70vh;
  	margin-top:180vh;
  	margin-left:-10vw;
  	left:0;
  	z-index:10;
    overflow: hidden;
}
  @media only screen and (max-width: 1080px){
.image-4-3{
margin-top:40vh;
top:30vh;
}}

.image-5-4{
  position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top:0;
  	float:right;
  	width:40vw;
  	margin-top:150vh;
    overflow: hidden;
}
  @media only screen and (max-width: 1080px){
.image-5-4{
margin-top:0vh;
margin-right:10vw;
height:50vh;
width:auto;
}}

.image-5-5{
	top:0;
  	float:right;
  	height:200vh;
  	margin-top:200vh;
    overflow: hidden;
    z-index:-1000;
    mix-blend-mode: overlay;
}
  @media only screen and (max-width: 1080px){
.image-5-5{
margin-top:0vh;
}}

.end-credits{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  width:80vw;
  display: block;
	align-items: center;
  justify-content: center;
  vertical-align: center;
  text-align:center;
  font-family: rakkas;
  font-size:3em;
  color:yellow;
  line-height:0.6em; 
  z-index:10;
  top:40vh;  
  overflow:hidden;
  margin-left:auto;
  margin-right:auto;
  height:20vh;
  animation: pulsepinktext 5s infinite;
}
@keyframes pulsepinktext {
0%, 100% {
    color: #b373f5;}
25%{
    color:   #0f75ff;}
50% {
    color: #6d25ff;}
75%{
	color:#e47e7d;}
}
@media only screen and (max-width: 1080px){
.end-credits{
top:0vh;
font-size:7em;
line-height: 0.9em;
width:80vw;
height:auto;
}}

.wave-container-2{
  position:absolute;
  margin-top:720vh;
  padding-top:0;
  overflow:hidden;
}
  @media only screen and (max-width: 1080px){
.wave-container-2{
    margin-top:480vh;
}}





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

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