@charset "UTF-8";

* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'times new roman';
  src: url(../fonts/timesnewroman.woff2) format('woff2'),
       url(../fonts/timesnewroman.woff) format('woff');
    
        text-transform: uppercase;
      
}

html, body {
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
}

.wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: #131313;
  background-image:url("../images/mineun.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 170%;
  scroll-snap-align: start;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
}

@media only screen and (max-width:767px) { 
    .wrapper  {
  background-repeat: no-repeat;
  background-size: 340%;
  

  }
}

@media only screen and (max-width:600px) { 
    .wrapper  {
  background-repeat: no-repeat;
  background-size: 405%;
  

  }
}


@media only screen and (min-width: 768px) and (max-width: 992px) { 
    .wrapper  {
  background-repeat: no-repeat;
  background-size: 220%;

  }
}

.wrapper .type {
  
  width: 100%;
  text-transform: uppercase; 
   font-family: 'times new roman';
  text-align: center;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(0%, -50%);
   color: transparent;
   
}
.wrapper .type:nth-child(1) {
  
  font-size: 5vw;
  top: 12%;
  -webkit-transform: translateX(-50%);
  -webkit-transform: translateY(-50%);
  animation-name: change;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 11;
}

@media only screen and (max-width:767px) { 
.wrapper .type:nth-child(1) {

  font-size: 6vw;
  top: 18%;
  /*background-color: #131313;*/
  /*opacity : 50%;*/
  animation-name: change;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 11;
}}

@media only screen and (max-width:600px) { 
.wrapper .type:nth-child(1) {

  font-size: 6vw;
  top: 15%;
  /*background-color: #131313;*/
  /*opacity : 50%;*/
  animation-name: change;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 0.8px white;
   z-index : 11;
}}

.wrapper .type:nth-child(2) {
  position: absolute;
  font-size: 13vw;
  top: 30%;
/*  opacity : 50%;*/
  /*background-color: #131313;*/
  animation-name: change;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
   z-index : 11;
}
@media only screen and (max-width:767px) { 
.wrapper .type:nth-child(2) {
  position: absolute;
  font-size: 15vw;
  top: 33%;
/*  opacity : 50%;*/
  /*background-color: #131313;*/
  animation-name: change;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
   z-index : 11;
}}

@media only screen and (max-width:600px) { 
.wrapper .type:nth-child(2) {
  position: absolute;
  font-size: 15vw;
  top: 30.5%;
/*  opacity : 50%;*/
  /*background-color: #131313;*/
  animation-name: change;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
   z-index : 11;
}}

.wrapper .type:nth-child(3) {
    font-size: 5vw;
  top: 49%;
/*  opacity : 50%;*/
  /*background-color: #131313;*/
  animation-name: change;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
  animation-delay: 1s;
  z-index : 11;
}

@media only screen and (max-width:767px) { 
  .wrapper .type:nth-child(3) {

  font-size: 6vw;
  top: 61%;
  animation-name: change;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 11;
}}

@media only screen and (max-width:600px) { 
  .wrapper .type:nth-child(3) {

  font-size: 6vw;
  top: 59%;
  animation-name: change;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 0.8px white;
   z-index : 11;
}}

.wrapper .type:nth-child(4) {
    font-size: 13vw;
  top: 69%;
/*  opacity : 50%;*/
  /*background-color: #131313;*/
  animation-name: change;
  animation-duration: 2s;
  text-align: center;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
  animation-delay: 1s;
  z-index : 11;
}

@media only screen and (max-width:767px) { 
.wrapper .type:nth-child(4) {
    font-size: 15vw;
  top: 75%;
/*  opacity : 50%;*/
  /*background-color: #131313;*/
  animation-name: change;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
  animation-delay: 1s;
  z-index : 11;
}}

@media only screen and (max-width:600px) { 
.wrapper .type:nth-child(4) {
    font-size: 15vw;
  top: 66%;
/*  opacity : 50%;*/
  /*background-color: #131313;*/
  animation-name: change;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
  animation-delay: 1s;
  z-index : 11;
}}

@keyframes change {
  from {
    left: 100%;
  }

  to {
    left: 0%;
  }
}

    
.wrapper .burkinafaso {
  width: 40%;
 position : absolute ;
 bottom: 55%;
  left: 4%;


 opacity: 100%;
  background-color: transparent;
 z-index: 10;
}  

@media only screen and (max-width:767px) { 
    .wrapper .burkinafaso {
      width: 60%;
      position: absolute;
      /* border: 3px solid black; */
      top: 11%;
      left: 20%;
      opacity: 100%;
      background-color: transparent;
      
      z-index: 10;
  }
}

@media only screen and (max-width:600px) { 
    .wrapper .burkinafaso {
      width: 75%;
      position: absolute;
      /* border: 3px solid black; */
      top: 11%;
      left: 13%;
      opacity: 100%;
      background-color: transparent;
      
      z-index: 10;
  }
}

@media only screen and (min-width: 768px) and (max-width: 992px) { 
   .wrapper .burkinafaso {
      width: 60%;
      position: absolute;
      /* border: 3px solid black; */
      top: 11%;
      left: 20%;
      opacity: 100%;
      background-color: transparent;
      
      z-index: 10;
  }
}



.wrapper .switzerland {
  width: 49.3%;
 position: absolute;
left: 47%;
    top : 50%;
  -webkit-transform: translateX(-50%);
  -webkit-transform: translateY(-50%);
  opacity: 100%;
  background-color: transparent;
  transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
}
 
@media only screen and (max-width:767px) { 
    .wrapper .switzerland {
      width: 60%;
      position: absolute;
      top: 80%;
      left: 20%;
      opacity: 100%;
      background-color: transparent;
      z-index: 10;
  }
}

@media only screen and (max-width:600px) { 
    .wrapper .switzerland {
      width: 75%;
      position: absolute;
      top: 80%;
      left: 13%;
      opacity: 100%;
      background-color: transparent;
      z-index: 10;
  }
}



@media only screen and (min-width: 768px) and (max-width: 992px) { 
    .wrapper .switzerland {
      width: 60%;
      position: absolute;
      top: 76%;
      left: 20%;
      opacity: 100%;
      background-color: transparent;
      z-index: 10;
  }
}


.wrapper .togo {  
 width: 40%;
 position: absolute;
left: 4%;
top : 55%;

 opacity: 100%;
  background-color: transparent;
 z-index: 10;
}

@media only screen and (max-width:767px) { 
    .wrapper .togo {
      width: 60%;
      position: absolute;
      /* border: 3px solid black; */
    top : 50%;
-webkit-transform: translateX(-50%);
-webkit-transform: translateY(-50%);
      left: 20%;
      opacity: 100%;
      background-color: transparent;
      box-shadow: inset 0 0 0 0 gold;
      transition: all ease 2s;
      /* transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out; */
      z-index: 10;
  }
}

@media only screen and (max-width:600px) { 
    .wrapper .togo {
      width: 75%;
      position: absolute;
      /* border: 3px solid black; */
    top : 50%;
-webkit-transform: translateX(-50%);
-webkit-transform: translateY(-50%);
      left: 13%;
      opacity: 100%;
      background-color: transparent;
      box-shadow: inset 0 0 0 0 gold;
      transition: all ease 2s;
      /* transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out; */
      z-index: 10;
  }
}

@media only screen and (min-width: 768px) and (max-width: 992px) { 
    .wrapper .togo {
      width: 60%;
      position: absolute;
      /* border: 3px solid black; */
    top : 50%;
-webkit-transform: translateX(-50%);
-webkit-transform: translateY(-50%);
      left: 20%;
      opacity: 100%;
      background-color: transparent;
      box-shadow: inset 0 0 0 0 gold;
      transition: all ease 2s;
      /* transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out; */
      z-index: 10;
  }
}











/*WRAPPER DEUX*/

.wrapperdeux {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
  position: relative;
  background-color: #131313;
  background-image:url("../images/burkinafasotogosuissemap.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%;
   scroll-snap-align: start;

}

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

  .wrapperdeux {
  width: 100%;
  height: 100vh;
   overflow: scroll;
  position: relative;
  background-color: #131313;
  background-image:url("../images/burkinafasotogosuissemaphaut.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
   scroll-snap-align: start;

}}

.wrapperdeux .type {
  font-family: 'trajan';
  width: 100%;
  text-transform: uppercase; 
 
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(0%, -50%);
   color: transparent;
   opacity : 100%;
   z-index:100;
   
}





.wrapperdeux .type:nth-child(1) {
  position: absolute;
  font-size: 30vw;
  text-align: center ;
  top: 30%;
  left: 20%;
  /*background-color: gold;*/
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
   z-index : 10;
}

@media only screen and (max-width:767px) { 
.wrapperdeux .type:nth-child(1) {
  position: absolute;
  font-size: 90vw;
  text-align: center ;
  top: 33%;
  left: 20%;
}}

@media only screen and (min-width: 768px) and (max-width: 992px) { 
.wrapperdeux .type:nth-child(1) {
  position: absolute;
  font-size: 65vw;
  text-align: center ;
  top: 33%;
  left: 20%;
}}

.wrapperdeux .type:nth-child(2) {
  position: absolute;
  font-size: 13vw;
  top: 68%;
    text-align: center ;
  /*background-color: gold;*/
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
   z-index : 10;
}

@media only screen and (max-width:767px) { 
.wrapperdeux .type:nth-child(2) {
  position: absolute;
  font-size: 13vw;
  top: 72%;
    text-align: center ;
}}

@media only screen and (min-width: 768px) and (max-width: 992px) { 
.wrapperdeux .type:nth-child(2) {
  position: absolute;
  font-size: 13vw;
  top: 70%;
    text-align: center ;
  /*background-color: gold;*/
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
   z-index : 10;
}}

.wrapperdeux .type:nth-child(3) {
  position: absolute;
  font-size: 5vw;
  top: 87%;
text-align: center;
  /*background-color: gold;*/
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 10;
 }

@media only screen and (min-width: 768px) and (max-width: 992px) { 
.wrapperdeux .type:nth-child(3) {
  position: absolute;
  font-size: 7vw;
  top: 87%;
text-align: center;
  /*background-color: gold;*/
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 10;
 }}

@media only screen and (max-width:767px) { 
.wrapperdeux .type:nth-child(3) {
  position: absolute;
  font-size: 6vw;
  top: 88%;
text-align: center;
   z-index : 10;
}}

@media only screen and (max-width:600px) { 
.wrapperdeux .type:nth-child(3) {
  position: absolute;
  font-size: 6vw;
  top: 88%;
text-align: center;
  -webkit-text-stroke: 0.8px white;
   z-index : 10;
}}


@keyframes changedeux {
  from {
    left: 0%;
  }

  to {
    left: 0%;
  }
}


      

.wrapperdeux .enfantmine {
  width: 33.3%;
/*border: 1px solid black ;
*/
  position: absolute;
  cursor:none;
  left : 0%;
 opacity: 5%;
 top : 50%;
-webkit-transform: translateX(-50%);
-webkit-transform: translateY(-50%);
  background-color: transparent;
 transition: border-radius 1s ease-in-out, opacity 1.5s ease-in, transform 0.5s ease-in-out;
 z-index: 10;
}

.wrapperdeux .enfantmine:hover {
opacity : 80%;
}

@media only screen and (max-width:767px) { 
.wrapperdeux .enfantmine {
  width: 33%;
/*border: 1px solid black ;
*/
  position: absolute;
  top:20%;
  left : 0.3%;
 opacity: 5%;
 
-webkit-transform: translateX(-50%);
-webkit-transform: translateY(-50%);
  background-color: transparent;
 transition: border-radius 1s ease-in-out, opacity 1.5s ease-in, transform 0.5s ease-in-out;
 z-index: 10;
}
}

@media only screen and (max-width:600px) { 
.wrapperdeux .enfantmine {
  width: 100%;
/*border: 1px solid black ;
*/
  position: absolute;
  top:36%;
  left : 0%;
 opacity: 5%;
 
-webkit-transform: translateX(-50%);
-webkit-transform: translateY(-50%);
  background-color: transparent;
 transition: border-radius 1s ease-in-out, opacity 1.5s ease-in, transform 0.5s ease-in-out;
 z-index: 10;
}
}

.wrapperdeux .regardtransparentdeux {
    cursor:none;
  width: 33.3%;
/*border: 1px solid black ;*/
  position: absolute;
  top : 50%;
  left : 33.3%;
  -webkit-transform: translateX(-50%);
-webkit-transform: translateY(-50%);
 opacity: 5%;
  background-color: transparent;
  transition: border-radius 1s ease-in-out, opacity 1.5s ease-in, transform 0.5s ease-in-out;
    z-index :10;
}
@media only screen and (max-width:600px) {
.wrapperdeux .regardtransparentdeux {
  width: 100%;
/*border: 1px solid black ;*/
  position: absolute;
  top : 110%;
  left : 0%;
  -webkit-transform: translateX(-50%);
-webkit-transform: translateY(-50%);
 opacity: 5%;
  background-color: transparent;
  transition: border-radius 1s ease-in-out, opacity 1.5s ease-in, transform 0.5s ease-in-out;
    z-index :200;
}}

.wrapperdeux .regardtransparentdeux:hover {
opacity : 80%;
}

.wrapperdeux .raffinerie {
    cursor:none;
  width: 33.3%;
  /*border: 1px solid black ;*/
  position: absolute;
  top : 50%;
  left : 66.6%;
  -webkit-transform: translateX(-50%);
-webkit-transform: translateY(-50%);
 opacity: 5%;
  background-color: transparent;
  transition: border-radius 1s ease-in-out, opacity 1.5s ease-in, transform 0.5s ease-in-out;
    z-index :10;
}

.wrapperdeux .raffinerie:hover {
opacity : 80%;
}

@media only screen and (max-width:767px) { 
.wrapperdeux .raffinerie {
  width: 33%;
/*border: 1px solid black ;
*/
  position: absolute;
  top:80%;
  left : 66.6%;
 opacity: 5%;
 
-webkit-transform: translateX(-50%);
-webkit-transform: translateY(-50%);
  background-color: transparent;
 transition: border-radius 1s ease-in-out, opacity 1.5s ease-in, transform 0.5s ease-in-out;
 z-index: 10;
}
}

@media only screen and (max-width:600px) { 
.wrapperdeux .raffinerie {
  width: 100%;
/*border: 1px solid black ;
*/
  position: absolute;
  top:170%;
  left : 0%;
 opacity: 5%;
 
-webkit-transform: translateX(-50%);
-webkit-transform: translateY(-50%);
  background-color: transparent;
 transition: border-radius 1s ease-in-out, opacity 1.5s ease-in, transform 0.5s ease-in-out;
 z-index: 200;
}
}



.wrapperdeux .type:nth-child(4) {
  position: absolute;
  font-size: 5vw;
  top: 170%;
  margin-left : 17%;
     min-width: 50%;
    min-height: 50%;
    transform: translateX(-50%) translateY(-50%);
  -webkit-text-stroke: 1px white;
   z-index : 11;
}

@media only screen and (max-width:767px) { 
.wrapperdeux .type:nth-child(4) {
  position: absolute;
  font-size: 0vw;
 top: 180%;
  margin-left : 37%;

  /*background-color: gold;*/
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 11;
}}

@media only screen and (min-width: 768px) and (max-width: 992px) { 
.wrapperdeux .type:nth-child(4) {
  position: absolute;
  font-size: 7vw;
 top: 173%;
  margin-left : 17%;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 11;
}}

.wrapperdeux .type:nth-child(5) {
  position: absolute;
  font-size: 5vw;
  top: 148%;
margin-left : 65%;
 min-width: 50%;
    min-height: 50%;
    transform: translateX(-50%) translateY(-50%);
  /*background-color: gold;*/
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 11;
}

@media only screen and (max-width:767px) { 
.wrapperdeux .type:nth-child(5) {
  position: absolute;
  font-size: 0vw;
  top: 115%;
margin-left : 23%;
  /*background-color: gold;*/
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 11;
}}

@media only screen and (min-width: 768px) and (max-width: 992px) { 
.wrapperdeux .type:nth-child(5) {
  position: absolute;
  font-size: 7vw;
  top: 160%;
margin-left : 63%;
 min-width: 50%;
    min-height: 50%;
    transform: translateX(-50%) translateY(-50%);
  /*background-color: gold;*/
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 11;
}
}
.wrapperdeux .type:nth-child(6) {
  position: absolute;
  font-size: 5vw;
  top: 190%;
margin-left : 87%;
 min-width: 50%;
    min-height: 50%;
    transform: translateX(-50%) translateY(-50%);
  /*background-color: gold;*/
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 110;
}

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

.wrapperdeux .type:nth-child(6) {
  position: absolute;
  font-size: 0vw;
  top: 150%;
margin-left : 38%;
  /*background-color: gold;*/
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 110;
}}

@media only screen and (min-width: 768px) and (max-width: 992px) { 
.wrapperdeux .type:nth-child(6) {
  position: absolute;
  font-size: 7vw;
  top: 182%;
margin-left : 87%;
 min-width: 50%;
    min-height: 50%;
    transform: translateX(-50%) translateY(-50%);
  /*background-color: gold;*/
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 110;
}}

.wrapperdeux .type:nth-child(7) {
  position: absolute;
  font-size: 5vw;
  top: 215%;
text-align: center;
  color: transparent;
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 20;
}

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

  .wrapperdeux .type:nth-child(7) {
  position: absolute;
  font-size: 8vw;
  top: 215%;
text-align: center;
  color: transparent;
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 20;
}}

.wrapperdeux .type:nth-child(8) {
  position: absolute;
  font-size: 30vw;
  top: 248%;
  text-align : center;
  /*background-color: gold;*/
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
   z-index : 11;
}

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

.wrapperdeux .type:nth-child(8) {
  position: absolute;
  font-size: 30vw;
  top: 248%;
  text-align : center;
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
   z-index : 11;
}}

.wrapperdeux .type:nth-child(9) {
  position: absolute;
  font-size: 5vw;
  top: 288%;
  text-align : center;
  /*background-color: gold;*/
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   z-index : 11;
}

@media only screen and (max-width:767px) { 
.wrapperdeux .type:nth-child(9) {
  position: relative;
  font-size: 8vw;
  bottom: 288%;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1px white;
   }}


 .rond{
  width: 50%;
  position: absolute;
     min-width: 50%;
    min-height: 50%;
    transform: translateX(-50%) translateY(-50%);
  top : 150%;
  left : 60%;
  z-index: 150;
}

@media only screen and (max-width:767px) { 
.rond{
  width: 0%;
  opacity: 0%;
  position: absolute;
  top : 130%;
right : 135%;
  z-index: 150;
}}



  
.st0 {

   position: absolute;
  top : 10%;
  left : 50%;
}



.wrapperdeux .burkinafasotogosuissemap {
 width: 100%;
  position: absolute;
     min-width: 50%;
    min-height: 50%;
    transform: translateX(-50%) translateY(-50%);
  top : 150%;
  left : 50%;
 opacity: 10%;
/*  background-color: black;*/
  -webkit-text-stroke: 0px black;
   transition: border-radius 1s ease-in-out, opacity 1.5s ease-in, transform 0.5s ease-in-out;
    z-index :9;
}

@media only screen and (max-width:767px) { 
.wrapperdeux .burkinafasotogosuissemap {
 width: 0%;
 top : 100%;
 position : absolute;
 opacity: 0%;
/*  background-color: black;*/
  -webkit-text-stroke: 0px black;
   transition: border-radius 1s ease-in-out, opacity 1.5s ease-in, transform 0.5s ease-in-out;
    z-index :9;
}}

.wrapperdeux .burkinafasotogosuissemapmobile {
 width: 0%;
 top : 100%;
 position : relative;
 opacity: 0%;
  -webkit-text-stroke: 0px black;
    z-index :-100;
}

@media only screen and (max-width:767px) { 
.wrapperdeux .burkinafasotogosuissemapmobile {
 width: 80%;
 top : 100%;
 position : absolute;
left :10%;
 opacity: 100%;
  -webkit-text-stroke: 0px black;
    z-index :9;
}}


@media only screen and (max-width:600px) { 
.wrapperdeux .burkinafasotogosuissemapmobile {
 width: 80%;
 top : 120%;
 position : absolute;
left :10%;
 opacity: 100%;
  -webkit-text-stroke: 0px black;
    z-index :9;
}}











/*WRAPPER TROIS*/

.wrappertrois {
  width: 100%;
  height: 100vh;
   overflow: hidden;
  position: relative;
  background-color: #131313;

  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
 scroll-snap-align: start;
}

@media only screen and (min-width: 768px) and (max-width: 992px) { 
.wrappertrois {
  width: 100%;
  height: 100vh;
   overflow: hidden;
  position: relative;
  background-color: #131313;
  background-image:url("../images/burkinafasotogomap.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 160%;
 scroll-snap-align: start;
}}


@media only screen and (max-width:767px) { 
.wrappertrois {
  width: 100%;
  height: 100vh;
   overflow: hidden;
  position: relative;
  background-color: #131313;
  background-image:url("../images/burkinafasotogomap.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 190%;
 scroll-snap-align: start;
}}

.wrappertrois .type {
  font-family: 'timesnewroman';
  width: 100%;
  text-transform: uppercase; 
 
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(0%, -50%);
   color: transparent;
   opacity : 100%;
   z-index:100;
   
}
.wrappertrois .type:nth-child(1) {
  position: absolute;
  font-size: 13vw;
  text-align: center ;
  opacity:100%;
  background-color: ;
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 400;

}

 .wrappertrois .type:hover {
  opacity:0%;
}


@media only screen and (max-width:767px) { 
  .wrappertrois .type:nth-child(1) {
   position: absolute;
  
  font-size: 13vw;
top : 15%;
  opacity:100%;
  background-color: ;
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
  }}

.wrappertrois .burkinafaso {
  width: 101%;
position: absolute;
    top: 50%;
    left: 50%;
    min-width: 50%;
    min-height: 50%;
    transform: translateX(-50%) translateY(-50%);
 opacity: 100%;
  transition: all ease 2s;
 transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 10;
}
@media only screen and (max-width:767px) { 
.wrappertrois .burkinafaso {
  width: 100%;
position: absolute;
    top: 50%;
    left: 50%;
    min-width: 50%;
    min-height: 50%;
    transform: translateX(-50%) translateY(-50%);
 opacity: 100%;
  transition: all ease 2s;
 transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 10;
}}

 .wrappertrois .burkinafaso:hover {
  opacity:0%;
}
 


    .wrappertrois .burkinafasotogomap {
  width: 35%;
  position: absolute;
  top : 0%;
  left : 5%;
 opacity: 100%;
  background-color: transparent;
  transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
    z-index :11;
}

@media only screen and (max-width:992px) {
    .wrappertrois .burkinafasotogomap {
  width: 0%;
  position: absolute;
  top : 13%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
 opacity: 100%;
  background-color: transparent;
  transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
    z-index :1;
}}

video { 
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 50%;
    min-height: 50%;
  width:87%;
    opacity:100%;
    z-index: 2;
    transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  transition: 1s opacity;
  z-index: 2;
}
.stopfade { 
   opacity: 0%;
}

#burkinavideo { 
  font-family: 'timesnewroman';
  font-weight:100; 
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 1rem;
  width: 45%;
  height: 33%;
  margin:2rem;
 position : absolute;
  z-index: 400;
top:0%;
  font-size: 1.2rem;
}

@media only screen and (max-width:767px) {
#burkinavideo { 
  color: white;
  padding: 1rem;
  width: 100%;
  height: 43%;
  margin-top:40rem;
 position : absolute;
 top:55%;
margin:50%;
  z-index: 100;
      transform: translateX(-50%) translateY(-50%);
  font-size: 1.2rem;
}}

@media only screen and (max-width:600px) {
#burkinavideo { 
  color: white;
  padding: 2rem;
  width: 100%;
  height: 41%;
  margin-top:40rem;
 position : absolute;
 top:56%;
margin:50%;
  z-index: 0;
      transform: translateX(-50%) translateY(-50%);
  font-size: 1.2rem;
}}
@media only screen and (min-width: 768px) and (max-width: 992px) { 
#burkinavideo { 
  padding: 1rem;
  width: 80.5%;
  height: 33%;
  margin:2rem;
 position : absolute;
  z-index: 400;
top:15%;
left: 46%;
      transform: translateX(-50%) translateY(-50%);
  font-size: 1.2rem;
}}


h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .3rem;
   z-index: 100;
}
#burkinavideo button { 
  font-family : 'timesnewroman' ;
  display: block;
  width: 20%;
  padding: .2rem;
  border: none; 
  margin: .8rem auto; 
  font-size: 1.3rem;
  background: rgba(255,255,255,0.23);
  color: #fff;
  border-radius: 3px; 
  cursor: pointer;
  z-index: 300;
  transition: .3s background;
}
#burkinavideo button:hover { 
   background: rgba(0,0,0,0);
}
@media only screen and (max-width:767px) {
#burkinavideo button { 
  font-family : 'timesnewroman' ;
  /*display: block;*/
  width: 30%;
  padding: .2rem;
  border: none; 
  margin: .8rem auto; 
  font-size: 1.3rem;
  background: rgba(255,255,255,0.23);
  color: #fff;
  border-radius: 3px; 
  cursor: pointer;
  z-index: 100;
  transition: .3s background;
}}


@media screen and (max-width: 500px) { 
  
}
@media screen and (max-device-width: 10px) {
  html { background: url(https://thenewcode.com/assets/images/burkina.jpg) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}

.typevideo { 
  font-size: 5vw;
  opacity:100%;
  color:transparent;
  -webkit-text-stroke: 1.2px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;

}
@media only screen and (min-width: 768px) and (max-width: 992px) { 
.typevideo { 
  font-size: 7vw;
  opacity:100%;
  color:transparent;
  text-align: center;
  -webkit-text-stroke: 1px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;
}
}

@media only screen and (max-width:767px) {
.typevideo { 
  font-size: 6vw;
  opacity:100%;
  color:transparent;
  text-align: center;
  -webkit-text-stroke: 1px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;
}
}

@media only screen and (max-width:600px) {
.typevideo { 
  font-size: 6vw;
  opacity:100%;
  color:transparent;
  text-align: center;
  -webkit-text-stroke: 0.8px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;
}
}

.typevideoun { 
  font-size: 1.3rem;
  letter-spacing: auto;
  line-height: normal;
  text-align: justify;
  text-justify: inter-word;
  opacity:100%;
  color:white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;

}
@media only screen and (max-width:767px) {
.typevideoun { 
   text-align: justify;
  padding: 1rem;
font-size: 1rem;
  letter-spacing: .01rem;
  text-align: justify;
  text-justify: inter-word;
  opacity:100%;
  color:white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;

}}

@media only screen and (max-width:600px) {
.typevideoun { 
   text-align: justify;
  padding: 1rem;
font-size: 1rem;
  letter-spacing: .01rem;
  text-align: justify;
  text-justify: inter-word;
  opacity:100%;
  color:white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;

}}

.typeenfant { 
   font-family: 'timesnewroman';
  font-size: 5vw;
    position : absolute;
    top : 60%;
text-align: center;
margin-left: 5%;
margin-right: 5%;
  opacity:100%;
  color:transparent;
  -webkit-text-stroke: 1.2px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 1;

}

@media only screen and (max-width:767px) { 
  .typeenfant { 
    font-size: 5vw;
    position : absolute;
    top : 53%;
    -webkit-text-stroke: 1.2px white;
    transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
    z-index: 1;
  }
}

@media only screen and (max-width:600px) { 
  .typeenfant { 
    font-size: 6vw;
    position : absolute;
    top : 53%;
    -webkit-text-stroke: 0.8px white;
    transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
    z-index: 1;
  }
}













/*WRAPPER QUATRE*/

.wrapperquatre {
  width: 101%;
  height: 100vh;
   overflow: hidden;
  position: relative;
  background-color: #131313;

  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  scroll-snap-align: start;
}

@media only screen and (min-width: 768px) and (max-width: 992px) { 
.wrapperquatre {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: #131313;
  background-image:url("../images/togoburkinafasomap.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 130%;
  scroll-snap-align: start;
}}

@media only screen and (max-width:767px) { 
.wrapperquatre {
  width: 100%;
  height: 100vh;
   overflow: hidden;
  position: relative;
  background-color: #131313;
  background-image:url("../images/togoburkinafasomap.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 120%;
 scroll-snap-align: start;
}}

.wrapperquatre .type {
  font-family: 'trajan';
  width: 100%;
  text-transform: uppercase; 
 
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(0%, -50%);
   color: transparent;
   opacity : 100%;
   z-index:100;
   
}

.wrapperquatre .type:nth-child(1) {
  position: absolute;
  font-size: 13vw;
  text-align: center ;
  opacity:100%;
  background-color: ;
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 400;

}

 .wrapperquatre .type:nth-child(1):hover {
  opacity: 0%;}

@media only screen and (max-width:767px) {
.wrapperquatre .type:nth-child(1) {
  position: absolute;
  font-size: 13vw;
  text-align: center ;
  opacity:100%;
  top:15%;
  background-color: ;
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;

}}

.wrapperquatre .togoburkinafasomap {
  width: 25%;
  position: absolute;
  top : 6%;
  left : 5%;
 opacity: 100%;
  background-color: transparent;
  transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
    z-index :20;
}


@media only screen and (max-width:992px) {
 .wrapperquatre .togoburkinafasomap {
  width: 0%;
  position: absolute;
  top : 6%;
  right : 5%;
 opacity: 100%;
  background-color: transparent;
  transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
    z-index :20;
}}

.wrapperquatre .togo {
  width: 100%;
 position: absolute;
    top: 50%;
    left: 50%;
    min-width: 50%;
    min-height: 50%;
    transform: translateX(-50%) translateY(-50%);
 opacity: 100%;
  background-color: transparent;
  transition: all ease 2s;
 transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 10;
}
.wrapperquatre .togo:hover {
  opacity:0%;
}

@media only screen and (max-width:767px) {
.wrapperquatre .togo {
  width: 100%;
 position: absolute;
    top: 50%;
    left: 50%;
    min-width: 50%;
    min-height: 50%;
    transform: translateX(-50%) translateY(-50%);
 opacity: 100%;
  background-color: transparent;
  transition: all ease 2s;
 transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 10;
}}
      
.wrapperquatre .typeenfantdeux { 
   font-family: 'trajan';
  font-size: 5vw;
    position : absolute;
    top : 60%;
text-align: center;
margin-left: 5%;
margin-right: 5%;
  opacity:100%;
  color:transparent;
  -webkit-text-stroke: 1.2px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 1;

}

@media only screen and (max-width:600px) { 
 .wrapperquatre .typeenfantdeux { 
  font-size: 5vw;
    position : absolute;
    top : 80%;
  -webkit-text-stroke: 1.2px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 1;
}
}

@media only screen and (max-width:767px) { 
 .wrapperquatre .typeenfantdeux { 
  font-size: 5vw;
    position : absolute;
    top : 53%;
  -webkit-text-stroke: 1.2px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 1;
}
}

@media only screen and (max-width:600px) { 
 .wrapperquatre .typeenfantdeux { 
  font-size: 6vw;
    position : absolute;
    top : 40%;
  -webkit-text-stroke: 0.8px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 1;
}
}

@media only screen and (min-width: 768px) and (max-width: 992px) { 
.wrapperquatre .typeenfantdeux{
  font-size: 5vw;
    position : absolute;
    top : 56%;
text-align: center;
margin-left: 5%;
margin-right: 5%;
  opacity:100%;
  color:transparent;
  -webkit-text-stroke: 1.2px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 1;
}
}

#burkinavideo button { 
  display: block;
  width: 20%;
  padding: .2rem;
  border: none; 
  margin: .8rem auto; 
  font-size: 1.3rem;
  background: rgba(255,255,255,0.23);
  color: #fff;
  border-radius: 3px; 
  cursor: pointer;
  z-index: 100;
  transition: .3s background;
}
#burkinavideo button:hover { 
   background: rgba(0,0,0,0);
}












/*WRAPPER CINQ*/

.wrappercinq {
  width: 101%;
  height: 100vh;
   overflow: hidden;
  position: relative;
  background-color: #131313;

  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  scroll-snap-align: start;
}

@media only screen and (max-width:767px) { 
.wrappercinq {
  width: 100%;
  height: 100vh;
   overflow: hidden;
  position: relative;
  background-color: #131313;
    background-image:url("../images/suissemap.svg");
top:20%;
  background-repeat: no-repeat;
  background-size: 190%;
  scroll-snap-align: start;
}}

@media only screen and (min-width: 768px) and (max-width: 992px) { 
.wrappercinq {
  width: 100%;
  height: 100vh;
   overflow: hidden;
  position: relative;
  background-color: #131313;
    background-image:url("../images/suissemap.svg");
top:20%;
  background-repeat: no-repeat;
  background-size: 170%;
  scroll-snap-align: start;
}}

.wrappercinq .type {
  font-family: 'trajan';
  width: 100%;
  text-transform: uppercase; 
 
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(0%, -50%);
   color: transparent;
   opacity : 100%;
   z-index:100;
   
}

.wrappercinq .type:nth-child(1) {
  position: absolute;
  font-size: 13vw;
  text-align: center ;
  opacity:100%;
  background-color: ;
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 400;}

 .wrappercinq .type:nth-child(1):hover {
  opacity: 0%;


}
@media only screen and (max-width:767px) { 
.wrappercinq .type:nth-child(1) {
  position: absolute;
  font-size: 13vw;
  text-align: center ;
  opacity:100%;
  top:15%;
  background-color: ;
  animation-name: changedeux;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-text-stroke: 1.2px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 400;

}}


.wrappercinq .switzerland {
  width :100%;
  position: absolute;
    top: 50%;
    left: 50%;
    min-width: 50%;
    min-height: 50%;
    transform: translateX(-50%) translateY(-50%);
 opacity: 100%;
  background-color: transparent;
  transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
  z-index:10;
}

.wrappercinq .switzerland:hover {
  opacity: 0%;
}

@media only screen and (max-width:767px) { 
.wrappercinq .switzerland {
  width: 100%;
  position: absolute;
    top: 50%;
    left: 50%;
    min-width: 50%;
    min-height: 50%;
    transform: translateX(-50%) translateY(-50%);
 opacity: 100%;
  background-color: transparent;
  transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
}}


.wrappercinq .typesuisse{
 font-family: 'timesnewroman';
  font-size: 5vw;
  opacity:100%;
  text-align: center ;
  margin-top: 35%;
  margin-left: 5%;
  margin-right: 5%;
  color:transparent;
  -webkit-text-stroke: 1.2px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 400;

}

@media only screen and (max-width:767px) { 
.wrappercinq .typesuisse{
 font-family: 'timesnewroman';
  font-size: 5vw;
  opacity:100%;
  text-align: center ;
  margin-top: 60%;
  margin-left: 5%;
  margin-right: 5%;
  color:transparent;
  -webkit-text-stroke: 1.2px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;
}
}

@media only screen and (min-width: 768px) and (max-width: 992px) { 
.wrappercinq .typesuisse{
 font-family: 'timesnewroman';
  font-size: 5vw;
  opacity:100%;
  text-align: center ;
  margin-top: 55%;
  margin-left: 5%;
  margin-right: 5%;
  color:transparent;
  -webkit-text-stroke: 1.2px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;
}
}


@media only screen and (max-width:600px) { 
.wrappercinq .typesuisse{
 font-family: 'timesnewroman';
  font-size: 6vw;
  opacity:100%;
  text-align: center ;
  margin-top: 81%;
  margin-left: 5%;
  margin-right: 5%;
  color:transparent;
  -webkit-text-stroke: 0.8px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;
}
}


 .wrappercinq .suissemap {
  width: 35%;
  position: absolute;
  top : 6%;
  left : 5%;
 opacity: 100%;
  background-color: transparent;
  transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
    z-index :11;
}

@media only screen and (max-width:992px) {
 .wrappercinq .suissemap {
  width: 0%;
  position: absolute;
  top : 13%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
 opacity: 100%;
  background-color: transparent;
  transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
    z-index :1;
}}

















  /*WRAPPER SIX*/



.wrappersix {
    width: 100%;
  height: 100vh;
   overflow: hidden;
  position: relative;
  background-color: black;
    background-image:url("../images/garconcouleur.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  scroll-snap-align: start;
}



@media only screen and (max-width:767px) {
.wrappersix {
    width: 100%;
  height: 100vh;
   overflow: hidden;
  position: relative;
  background-color: black;
background-image:url("../images/garconcouleur.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 266%;
  scroll-snap-align: start;
}}

@media only screen and (max-width:600px) {
.wrappersix {
    width: 100%;
  height: 100vh;
   overflow: hidden;
  position: relative;
  background-color: black;
background-image:url("../images/garconcouleur.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 390%;
  scroll-snap-align: start;
}}

@media only screen and (min-width: 768px) and (max-width: 992px) { 
    .wrappersix {
    width: 100%;
  height: 100vh;
   overflow: hidden;
  position: relative;
  background-color: black;
    background-image:url("../images/garconcouleur.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 180%;
  scroll-snap-align: start;
}}

  .wrappersix .type {
  font-family: 'timesnewroman';
  width: 100%;
  text-transform: uppercase; 
 

  top: 50%;
  left: 100%;
  transform: translate(0%, -50%);
   color: transparent;
   opacity : 100%;
   z-index:100;
   
}

.agir{
  font-family: 'timesnewroman';
  position:absolute;
  top:11.7%;
  left :50%;
  font-size: 13vw;
  opacity:100%;
  color: transparent;

    transform: translateX(-50%) translateY(-50%);
  -webkit-text-stroke: 1.5px white;

 z-index: 40;
}

@media only screen and (max-width:767px) {
.agir{
  font-family: 'timesnewroman';
   position:absolute;
  top:5.5%;
  padding-top: 0rem;
  font-size: 13vw;
  opacity:100%;
  color: transparent;
  -webkit-text-stroke: 1px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;
}
}

@media only screen and (max-width:600px) {
.agir{
  font-family: 'timesnewroman';
   position:absolute;
 top:3.6%;
  padding-top: 0rem;
  font-size: 13vw;
  opacity:100%;
  color: transparent;
  -webkit-text-stroke: 1px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;
}
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
.agir{
  font-family: 'timesnewroman';
   position:absolute;
  top:5%;
  padding-top: 0rem;
  font-size: 7vw;
  opacity:100%;
  color: transparent;
  -webkit-text-stroke: 1px white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;
}
}

@media only screen and (max-width:767px) {
.typevideotrois { 
  font-size: 3vw;
  letter-spacing: .01rem;
  text-align: justify;
  text-justify: inter-word;
  opacity:100%;
  color:white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;

}}



.rectangleagir{
    position:absolute;
  top:5%;
  left :50%;
 width: 100%;
  height: 36%;
      transform: translateX(-50%) translateY(-50%);
 background: #131313;
    opacity:90%;
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .rectangleagir{
    position:absolute;
  top:5%;
  left :50%;
 width: 100%;
  height: 10%;
      transform: translateX(-50%) translateY(-50%);
 background: #131313;
    opacity:90%;
}}

@media only screen and (max-width:767px) {
.rectangleagir{
    position:absolute;
  top:5%;
  left :50%;
 width: 102%;
  height: 12%;
      transform: translateX(-50%) translateY(-50%);
 background: #131313;
    opacity:90%;
}}

@media only screen and (max-width:600px) {
.rectangleagir{
    position:absolute;
  top:0%;
  left :50%;
 width: 101%;
  height: 15%;
      transform: translateX(-50%) translateY(-50%);
 background: #131313;
    opacity:80%;
}}


#texteagir { 

   font-family: 'timesnewroman';
  font-weight:100; 
/*  background: #131313;*/
  text-justify: inter-word;
    text-align: justify;
       letter-spacing :auto;

      line-height: normal;
  color: white;
  padding: 1rem;
  width: 46.2%;
  height: 40%;
  font-size : 10rem;
  margin:2rem;
  opacity:80%;
 position : absolute;
 top:24%;
  z-index: 100;
  font-size: 1.3rem;
}


/*h4 {
  font-size: 1.2vw;
}

@media only screen and (max-width:767px) {
h4 {
  font-size: 1rem;
}}*/



#texteethique { 
  font-weight:100; 
 /* background: #131313;*/
  opacity:80%;
  color: white;
    text-align: justify;
  padding: 1rem;
  font-size : 1vw;
   line-height: normal;
   letter-spacing :auto;
  width: 46.2%;
  height: 40%;
  margin-top : 2rem;
  right : 2%;
 position : absolute;
top:24%;
  z-index: 100;
  font-size: 1.3rem;
}

@media only screen and (max-width:767px) {
#texteagir { 
   font-family: 'timesnewroman';
  font-weight:100; 
 /* background: #131313;*/
  text-align: justify;
  text-justify: inter-word;
  letter-spacing :auto;
  
  color: white;
  padding: 1rem;
  width: 100%;
  height: 20%;
  opacity:80%;
  top : 13%;
margin:50%;
 position : absolute;
      transform: translateX(-50%) translateY(-50%);
  z-index: 100;
  font-size: 1rem;
}


#texteethique { 
  font-weight:100; 
/*  background: #131313;*/
  opacity:80%;
  color: white;
  letter-spacing :auto;
  text-align: justify;
  padding: 1rem;
  width: 100%;
  height: 20%;
  top : 20%;
/*  font-size : 1rem;*/
left:50%;
 position : absolute;
      transform: translateX(-50%) translateY(-50%);
  z-index: 100;
  font-size: 1rem;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
#texteagir { 
   font-family: 'timesnewroman';
  font-weight:100; 
  /*background: #131313;*/
  text-align: justify;
  text-justify: inter-word;
    letter-spacing :auto;

  color: white;
  padding: .4rem;
  width: 92%;
  height: 29%;
  opacity:80%;
  top : 50%;
left:46.5%;
 position : absolute;
      transform: translateX(-50%) translateY(-50%);
  z-index: 100;
  font-size: 1.3rem;
}

#texteethique { 
  font-weight:100; 
  /*background: #131313;*/
  opacity:80%;
  color: white;
  text-align: justify;
  letter-spacing :auto;
  padding: .7rem;
  width: 92%;
  height: 29%;
  top : 20%;
/*  font-size : 1rem;*/
left:50%;
 position : absolute;
      transform: translateX(-50%) translateY(-50%);
  z-index: 100;
  font-size: 1.3rem;
}
}

@media only screen and (max-width:600px) {
#texteagir { 
   font-family: 'timesnewroman';
  font-weight:100; 
  /*background: #131313;*/
  text-align: justify;
  text-justify: inter-word;
    letter-spacing :auto;

  color: white;
  padding: .4rem;
  width: 104%;
  height: 29%;
  opacity:80%;
  top : 38%;
margin:50%;
 position : absolute;
      transform: translateX(-50%) translateY(-50%);
  z-index: 100;
  font-size: 1rem;
}

#texteethique { 
  font-weight:100; 
  /*background: #131313;*/
  opacity:80%;
  color: white;
  text-align: justify;
  letter-spacing :auto;
  padding: .7rem;
  width: 104%;
  height: 24%;
  top : 25%;
/*  font-size : 1rem;*/
left:50%;
 position : absolute;
      transform: translateX(-50%) translateY(-50%);
  z-index: 100;
  font-size: 1rem;
}
}

.typevideotrois { 
  font-size: 1.3vw;
  letter-spacing: .01rem;
  text-align: justify;
  text-justify: inter-word;
  opacity:100%;
  color:white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;

}
@media only screen and (max-width:767px) {
.typevideotrois { 
  font-size: 3vw;
  letter-spacing: .01rem;
  text-align: justify;
  text-justify: inter-word;
  opacity:100%;
  color:white;
   transition: border-radius 1s ease-in-out, opacity 1.3s ease-in-out, transform 0.5s ease-in-out;
 z-index: 40;

}}




  .wrappersix a{
  
   font-family: 'timesnewroman';
   color : transparent;
    display: flex;
  justify-content: center;
  align-items: center;
    padding: center;
    text-align: center ;
    text-transform: uppercase;
    opacity:80%; 
  }
    

.wrappersix .fade {

   background-color: black;
  position: absolute;
  bottom:0%;
  display: block;
 font-size: 5vw;
padding : 4.5%;
  height: 25%;
  width: 100%;
  opacity:100;
   -webkit-text-stroke: 1.2px white;
  z-index : 100;
  transition: border-radius 1s ease-in-out, opacity .4s ease-in-out, transform 0.5s ease-in-out;

}
.wrappersix .fade:hover{
opacity:0%;
}

.wrappersix .fadedeux {
   background-color: white;
  position: absolute;
  bottom:0%;
  display: block;
   padding : 4.5%;
 font-size: 5vw;
  height: 25%;
  width: 100%;
  opacity:100%;
   -webkit-text-stroke: 1.2px black;
  z-index : 100;
  transition: border-radius 1s ease-in-out, opacity .4s ease-in-out, transform 0.5s ease-in-out;}


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


  .wrappersix a{
  
   font-family: 'timesnewroman';
   color : transparent;
    display: flex;
  justify-content: center;
  align-items: center;
    padding: center;
    text-align: center ;
    text-transform: uppercase;
    opacity:80%; 
  }
    

.wrappersix .fade {

   background-color: black;
  position: absolute;
  bottom:0%;
  display: block;
 font-size: 13vw;
padding : 4.5%;
  height: 25%;
  width: 100%;
  opacity:100;
   -webkit-text-stroke: 1.2px white;
  z-index : 100;
  transition: border-radius 1s ease-in-out, opacity .4s ease-in-out, transform 0.5s ease-in-out;

}
.wrappersix .fade:hover{
opacity:0%;
}

.wrappersix .fadedeux {
   background-color: white;
  position: absolute;
  bottom:0%;
  display: block;
   padding : 4.5%;
 font-size: 13vw;
  height: 25%;
  width: 100%;
  opacity:100%;
   -webkit-text-stroke: 1.2px black;
  z-index : 100;
}}

@media only screen and (min-width: 768px) and (max-width: 992px) {

.wrappersix a{
  
   font-family: 'timesnewroman';
   color : transparent;
    display: flex;
  justify-content: center;
  align-items: center;
    padding: center;
    text-align: center ;
    text-transform: uppercase;
    opacity:80%; 
  }
    

.wrappersix .fade {

   background-color: black;
  position: absolute;
  top: 75%;
  display: block;
 font-size: 7vw;
padding : 10%;
  height: 25%;
  width: 100%;
  opacity:100;
   -webkit-text-stroke: 1.2px white;
  z-index : 100;
  transition: border-radius 1s ease-in-out, opacity .4s ease-in-out, transform 0.5s ease-in-out;

}
.wrappersix .fade:hover{
opacity:0%;
}

.wrappersix .fadedeux {
   background-color: white;
  position: absolute;
  top:75%;
  display: block;
   padding : 10%;
 font-size: 7vw;
  height: 25%;
  width: 100%;
  opacity:100%;
   -webkit-text-stroke: 1.2px black;
  z-index : 100;
}}



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


  .wrappersix a{
  
   font-family: 'timesnewroman';
   color : transparent;
    display: flex;
  justify-content: center;
  align-items: center;
    padding: center;
    text-align: center ;
    text-transform: uppercase;
    opacity:80%; 
  }
    

.wrappersix .fade {

   background-color: black;
  position: absolute;
  top: 80%;
  display: block;
 font-size: 13vw;
padding : 4.5%;
  height: 25%;
  width: 100%;
  opacity:100;
   -webkit-text-stroke: 1.2px white;
  z-index : 100;
  transition: border-radius 1s ease-in-out, opacity .4s ease-in-out, transform 0.5s ease-in-out;

}
.wrappersix .fade:hover{
opacity:0%;
}

.wrappersix .fadedeux {
   background-color: white;
  position: absolute;
  top:80%;
  display: block;
   padding : 4.5%;
 font-size: 13vw;
  height: 25%;
  width: 100%;
  opacity:100%;
   -webkit-text-stroke: 1.2px black;
  z-index : 100;
}}


#scrollarea-invalid {
overflow-y: scroll;
height: 300px;
}
#scrollarea-content{
  min-height:50%;
}

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

#scrollarea-invalid {
overflow-y: scroll;
height: 200px;
}
#scrollarea-content{
  min-height:100%;
}}

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

  #scrollarea-invalid {
overflow-y: scroll;
height: 180px;
}
#scrollarea-content{
  min-height:100%;
}}