* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding-right: 0px;
  padding-left: 0px;

  height: 100%;
  /* background-color: black; */
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  text-rendering: optimizeLegibility;
  background-color:white;
}


::selection {
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
}

::-moz-selection {
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
}

ol, ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

a :hover {
  z-index: 10000000;
}

.hidden {
  display: none;
}




@font-face {
  font-style: normal;
  font-weight: bold;
  font-family: 'ArialGroteskkBold';
  src:
    /* url(../fonts/ChicagoFLF.woff2) format('woff2'),
    url(../fonts/ChicagoFLF.woff) format('woff'), */
    url(../fonts/AGBold.otf) format('truetype');
}
@font-face {
  font-style: normal;
  font-family: 'AGMedium';
  src:
    /* url(../fonts/ChicagoFLF.woff2) format('woff2'),
    url(../fonts/ChicagoFLF.woff) format('woff'), */
    url(../fonts/AGMedium.otf) format('truetype');
}
@font-face {
  font-style: normal;
  font-weight: normal;
  font-family: 'AGReg';
  src:
    /* url(../fonts/ChicagoFLF.woff2) format('woff2'),
    url(../fonts/ChicagoFLF.woff) format('woff'), */
    url(../fonts/AGReg.otf) format('truetype');
}
@font-face {
  font-style: normal;
  font-family: 'AGThin';
  src:
    /* url(../fonts/ChicagoFLF.woff2) format('woff2'),
    url(../fonts/ChicagoFLF.woff) format('woff'), */
    url(../fonts/AGThin.otf) format('truetype');
}








::-webkit-scrollbar{
  width: 5px;
  height: 10px;
  
}


::-webkit-scrollbar-thumb{
  border-radius: 0%;
  background-color: black;
  height: 0.1px;
  position:absolute;
  z-index: 200;
  
}

::-webkit-scrollbar-track{
  z-index: 800;
}







.HeadContainer{
  position: relative;
  padding-top: 8px;
    padding-left: 17px /*!main_margin*/;
    padding-right: 17px /*!main_margin*/;
    margin-bottom: 90px;
    z-index: 5000;

}




/*TITRE*/

h1 {
  font-size: 43pt;
  font-style: normal;
  font-weight: medium;
  font-family: 'AGMedium';

  color: black;
  margin: 0;
  z-index: 5000;
  cursor:default;

}







/*PARAGRAPHE COURANT*/
h5{
  font-family: 'AGReg';
  font-style: normal;
  font-weight: normal;
  position: relative;
  font-size: 20px;
  color: white;
  z-index: 5000;
  text-align: center;
  vertical-align: center;

margin: auto;

padding: auto;
padding-right: 70px;
padding-left: 70px;

  
  line-height: 1.3;
  
}


/*PANNEL INFO*/
.p2 {
  font-family: 'AGReg';
  font-style: normal;
  font-weight: normal;
  position: relative;
  font-size: 16.5px;
  color: white;
  line-height: 1.3;
  padding-right: 390px;
  padding-left: 20px /*!main_margin*/;
  padding-top: 15px;
  padding-bottom: 30px;
  opacity: 1;
  z-index: 9000;
  cursor: default;

}




span{
  text-decoration: underline;
}
span:hover{
  color:#1ff9f9 ;
}




.panel2{

  position: relative;
  width: 100%;
  height: 28vh;
  background-color: black;
  padding-top: 5px;
  margin-top: 40px;


}




/*FOOTER*/

p {
  font-family: 'AGMedium';
  font-style: normal;
  font-weight: medium;
  position: relative;
  font-size: 28px;
  color: black;
  line-height: 1.3;
  padding-top: 40px;

  /*
  letter-spacing: 0.04rem;
  */
  
}


.footer {
  text-align: center;
  padding-bottom: 5px;
  padding-top: 20px;
  
}





.row::after {
  content: "";
  clear: both;
  display: table;
  z-index: 5000;

  
}

[class*="col-"] {
  float: left;
  padding-top: 5px;
  padding-bottom: 9px;
  padding-left: 14px;
  padding-right: 14px;
}






.menu2 {
  position: relative;

}



.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}











/*LIGNE 1*/



#playPauseBTN1{
  position: relative;
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 35px;
  -webkit-transition: 0.8s;

  transition: 0.8s;
  border: 2px solid black;
  background-color: #8e9191;
  box-shadow: inset 0px 0px 0px;
  z-index: 100;
}

#playPauseBTN1.active{
  position: relative;
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 35px;
  -webkit-transition: 0.8s;

  transition: 0.8s;
  z-index: 100;

  background: transparent;

  box-shadow: inset 0px 0px 15px gainsboro;
  



}


#playPauseBTN1 .indicator{
 position: absolute;
 cursor: pointer;
 width: 70px;
 height: 70px;
 top: 0;
 left: 0%;
 right: 0%;
 bottom: 0;

 /*
 background-color: #879292;
 */
 
 background-color: none;
 border: 2px solid black;

 border-radius: 50%;
 -webkit-transition: 1.3s;
 transition: 1.3s;
 z-index: 12000;
 transform: translate(-2%, -3%);


}


#playPauseBTN1 .indicator:hover{

  background-color:#1ff9f9;

}








#playPauseBTN1.active .indicator {
left: 100%;
right: 100%;
transform: translate(-98%, -3%);
background-color: black;


}



/*DISPARITION TXT*/
.square1{
  display: block;
}
    
.square1.active{
    transition: 1;
    opacity: 1;
}

h5.active{
  opacity: 0;

}






/*BACKGRND ANIMATION*/

.shape1{
  position: fixed;
  z-index: 15000;
  align-items: center;
  height: 50%;
  width: 50%;
  opacity: 1;
    
  animation-name: animateRotation;
  animation-duration: 7s;
  animation-timing-function:ease-in-out;
  animation-iteration-count: infinite;


}
  

.shape1.active{
  opacity: 1;
  z-index: 2000;

  display:block;
  width: 550px;
  height: 550px;
  min-height: 10em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  display: table-cell;
  box-shadow: inset 0px 0px 0px #1ff9f9 ;
  
  animation-name: animateRotation, animateBgColor3;
  animation-duration: 6s;
  animation-timing-function:ease-in-out;
  animation-iteration-count: infinite;
  }
  







/*LIGNE 2*/


#playPauseBTN2{
  position: relative;
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 35px;
  transition: 0.8s;
  border: 2px solid black;
  background-color: #8e9191;
  z-index: 100;
}

#playPauseBTN2.active{
  position: relative;
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 35px;
  transition: 0.8s;
  z-index: 100;
  background: transparent;

  box-shadow: inset 0px 0px 15px gainsboro;
  



}


#playPauseBTN2 .indicator{
  position: absolute;
  cursor: pointer;
  width: 70px;
  height: 70px;
  top: 0;
  left: 0%;
  right: 0%;
  bottom: 0;
  background-color: none;
  border: 2px solid black;
  border-radius: 50%;
  -webkit-transition: 1.3s;
  transition: 1.3s;
  z-index: 12000;
  transform: translate(-2%, -3%);

}

#playPauseBTN2 .indicator:hover{

  background-color: white;

}

#playPauseBTN2.active .indicator {
  left: 100%;
  right: 100%;
  transform: translate(-98%, -3%);
  background-color: black;

}





/*DISPARITION TXT*/
.square2{
  display: block;
}
    
.square2.active{
    transition: 1;
    opacity: 1;
}

h5.active{
  opacity: 0;

}











/*BACKGRND ANIMATION*/

.shape2{
  opacity: 1;
  z-index: 1;
  align-items: center;
  height: 50%;
  width: 50%;
  border: none;
  border-radius:20px;
  animation-name: animateRotation,
}
  
.shape2.active{
  display:block;
  opacity: 1;
  width: 350px;
  height: 350px;
  border: 2px solid black;
  border-radius:100%;
  
  animation-name: animateRotation, animateBgColor2;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-delay: 0.5s;
  animation-iteration-count: infinite ;
  animation-direction: reverse;
  } 







/*LIGNE 3*/

#playPauseBTN3{
  position: relative;
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 35px;
  transition: 0.8s;
  border: 2px solid black;
  background-color: #8e9191;
  z-index: 1000;
}

#playPauseBTN3.active{
  position: relative;
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 35px;
  transition: 0.8s;
  z-index: 100;
  background: transparent;

  box-shadow: inset 0px 0px 15px gainsboro;

}




#playPauseBTN3 .indicator{
  position: absolute;
  cursor: pointer;
  width: 70px;
  height: 70px;
  top: 0;
  left: 0%;
  right: 0%;
  bottom: 0;
  background-color: none;
  border: 2px solid black;
  border-radius: 50%;
  -webkit-transition: 1.3s;
  transition: 1.3s;
  z-index: 12000;
  transform: translate(-2%, -3%);

}

#playPauseBTN3 .indicator:hover{

  background-color: #70a9a9;

}


#playPauseBTN3.active .indicator {
  left: 100%;
  right: 100%;
  transform: translate(-98%, -3%);
  background-color: black;

  
  }
  
  
  
  /*DISPARITION TXT*/
  .square3{
    display: block;
  }
      
  .square3.active{
      transition: 1;
      opacity: 1;
  }



/*BACKGRND ANIMATION*/

.shape3{
  opacity: 1;
  z-index: 1;
  align-items: center;
  height: 50%;
  width: 50%;
  animation-name: animateRotation;
  border: none;
}
  
.shape3.active{
  opacity: 1;
display:block;
width: 150px;
height: 150px;
box-shadow: inset 0px 0px 15px #70a9a9;


border-radius: 30px;


animation-name: animateRotation;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: infinite ;
animation-direction: reverse;
}





/* GREAT */

/*LIGNE 4*/

#playPauseBTN4{
  position: relative;
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 35px;
  transition: 0.8s;
  border: 2px solid black;
  background-color: #8e9191;
  z-index: 1000;
}

#playPauseBTN4.active{
  position: relative;
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 35px;
  transition: 00.8s;
  z-index: 100;

  background: transparent;

  box-shadow: inset 0px 0px 15px gainsboro;



}


#playPauseBTN4 .indicator{
  position: absolute;
  cursor: pointer;
  width: 70px;
  height: 70px;
  top: 0;
  left: 0%;
  right: 0%;
  bottom: 0;
  background-color: none;
  border: 2px solid black;



  background-color: transparent;
  
  
  border-radius: 50%;
  -webkit-transition: 1.3s;
  transition: 1.3s;
  z-index: 12000;
  transform: translate(-2%, -3%);

}

#playPauseBTN4 .indicator:hover{

  background-color: #1ff9f9 ;

}


#playPauseBTN4.active .indicator {
  left: 100%;
  right: 100%;
  transform: translate(-98%, -3%);
  background-color: black;

  
  }
  
  
  
  /*DISPARITION TXT*/
  .square4{
    display: block;
  }
      
  .square4.active{
      transition: 1;
      opacity: 1;
  }

/*BACKGRND ANIMATION*/

.shape4{
  opacity: 1;
  z-index: 1;
  align-items: center;
  height: 50%;
  width: 50%;
  border: none;
border-radius:100%;


animation-name: animateRotation;
}
 
.shape4.active{
  display:block;
opacity: 1;
width: 90px;
height: 90px;
border: 2px solid #1ff9f9 ;
background-color: #1ff9f9 ;
border-radius:100%;


animation-name: animateRotation, animateBgColor4;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
animation-delay: 1.8s;
animation-iteration-count: infinite ;
animation-direction: reverse;
}

 







/*LIGNE 5*/


#playPauseBTN5{
  position: relative;
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 35px;
  transition: 0.8s;
  border: 2px solid black;
  background-color: #8e9191;
  z-index: 100;
}

#playPauseBTN5.active{
  position: relative;
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 35px;
  transition: 0.8s;
  z-index: 100;
  background: transparent;

  box-shadow: inset 0px 0px 15px gainsboro;




}


#playPauseBTN5 .indicator{
  position: absolute;
  cursor: pointer;
  width: 70px;
  height: 70px;
  top: 0;
  left: 0%;
  right: 0%;
  bottom: 0;


  background-color: none;
  border: 2px solid black;



  background-color: transparent;
  border-radius: 50%;
  -webkit-transition: 1.3s;
  transition: 1.3s;
  z-index: 12000;
  transform: translate(-2%, -3%);

}

#playPauseBTN5 .indicator:hover{

  background-color:black;

}

#playPauseBTN5.active .indicator {
  left: 100%;
  right: 100%;
  transform: translate(-98%, -3%);
  background-color: black;

  
  }
  
  
  

  
  /*DISPARITION TXT*/
  .square5{
    display: block;
  }
      
  .square5.active{
      transition: 1;
      opacity: 1;
  }

/*BACKGRND ANIMATION*/

.shape5{
  opacity: 1;
  z-index: 1;
  align-items: center;
  height: 50%;
  width: 50%;
  border: none;
border-radius: 30px;

animation-name: animateRotation,
}
  
.shape5.active{
  display:block;
  opacity: 1;

width: 50px;
height: 50px;
border: 0px solid black;
border-radius: 30px;

/*(Triangle)
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 60px solid black;
*/


animation-name: animateRotation, animateBgColor;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
animation-delay: 1.5s;
animation-iteration-count: infinite ;
animation-direction: reverse;


}







/* BONUS */

.h51{
  font-family: 'AGReg';
  font-style: normal;
  font-weight: normal;
  position: relative;
  font-size: 20px;
  color: white;
  z-index: 5000;
  text-align: center;
  vertical-align: center;
  margin: auto;
  padding: auto;
  padding-right: 70px;
  padding-left: 70px;
  line-height: 1.3;
    
  }
  
  .h51.active{
  opacity: 0;  
  }
  

.h52{
  font-family: 'AGReg';
  font-style: normal;
  font-weight: normal;
  position: relative;
  font-size: 20px;
  color: white;
  z-index: 5000;
  text-align: center;
  vertical-align: center;
  margin: auto;
  padding: auto;
  padding-right: 70px;
  padding-left: 70px;
  line-height: 1.3;
    
  }
  
  .h52.active{
  opacity: 0;  
  }
  
.h53{
  font-family: 'AGReg';
  font-style: normal;
  font-weight: normal;
  position: relative;
  font-size: 20px;
  color: white;
  z-index: 5000;
  text-align: center;
  vertical-align: center;
  margin: auto;
  padding: auto;
  padding-right: 70px;
  padding-left: 70px;
  line-height: 1.3;
    
  }
  
  .h53.active{
  opacity: 0;  
  }
  
.h54{
  font-family: 'AGReg';
  font-style: normal;
  font-weight: normal;
  position: relative;
  font-size: 20px;
  color: white;
  z-index: 5000;
  text-align: center;
  vertical-align: center;
  margin: auto;
  padding: auto;
  padding-right: 70px;
  padding-left: 70px;
  line-height: 1.3;
    
  }
  
  .h54.active{
  opacity: 0;  
  }
  























/*BACKGROUND ANIMATIONS*/


.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position:absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 1;

}




@keyframes animateRotation {


100%
{
transform: rotateZ(360deg);

}

}










@keyframes animateBgColor {
0%
{
background-color: black;
}

25%
{
  background-color:g§;

}

50%
{
  background-color:#1ff9f9


}

75%
{
  background-color: gray    
}

100%
{
  background-color: black    
}

}

@keyframes animateBgColor2 {
  0%
  {
  background-color: black;
  }
  
  25%
  {
      background-color:white;
  
  }
  
  50%
  {
      background-color:black

  
  }
  
  75%
  {
      background-color: white    
  }
  
  100%
  {
      background-color:black   
  }
  
  }


@keyframes animateBgColor3 {
  0%
  {

    box-shadow: inset 0px 0px 12px #1ff9f9;
    border-radius: 50%;
  
  }




  15%
  {



  }

 
45%{
  border-radius: 0px;
  border: 0px;


}


  
  75%
  {
    border: 0px;

    box-shadow: inset 0px 0px 120px ;
  
  }
 
  
  80%{
    border-radius: 0px;
  
  }



  85%
  {
    border: 0px;



 
  
  }
 
  

 
  100%
  {
    border: 0px solid;


    box-shadow: inset 0px 0px 12px #1ff9f9;

    border-radius: 50%;

  
  }
  
}

@keyframes animateBgColor4 {
  0%
  {
    border: none;

    box-shadow: inset 0px 0px 15px #70a9a9 ;
    border-radius: 0%;
  
  }




  15%
  {
    box-shadow: #70a9a9 ;

    border-radius: 30%;
    border: none;


  }

 

  50%{
    border-radius: 50%;
    border: none;
    background-color: transparent;

  }

  
  75%
  {
    border: none;

    box-shadow: inset 0px 0px 35px #1affff ;
    background-color: transparent;

  
  }
 
  




 
  

 
  100%
  {
    border: none;

    box-shadow: inset 0px 0px 15px #70a9a9 ;
    border-radius: 0%;

  
  }
  
}






























/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}


@media only screen and (min-width: 700px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}



/* MEDIA QUERRY PANEL INFO*/

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

  .panel.switch-on {
    transform: translate3d(0%, 170%, 0);
  }
}


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

  h5 {
    font-size: 15px;

    padding-right: 40px;
  } 

  .h51 {
    font-size: 15px;

    padding-right: 40px;
  } 

  .h52 {
    font-size: 15px;

    padding-right: 40px;
  } 

  .h53 {
    font-size: 15px;

    padding-right: 40px;
  } 

  .h54 {
    font-size: 15px;

    padding-right: 40px;
  } 


  .p2 {
    font-size: 15px;
    padding-right: 50px;
  }

  .panel.switch-on {
    transform: translate3d(0%, 180%, 0);
  }

}




@media screen and (max-width: 676px){
  
  h5 {
    font-size: 15px;
  
    padding-right: 40px;
    }
  

  .p2 {
    font-size: 15px;
    padding-right: 30px;
  }

  .panel.switch-on {
    transform: translate3d(0%, 175%, 0);
  }


  p {

    font-size: 20px;

    padding-top: 40px;
    padding-left: 17px;
    padding-right: 17px;
  
    /*
    letter-spacing: 0.04rem;
    */
    
  }



}


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

  h5 {
      font-size: 15px;
      padding-right: 10px;

  }

  .h51 {
      font-size: 15px;
      padding-right: 10px;

  }
  .h52 {
      font-size: 15px;
      padding-right: 10px;

  }
  .h53 {
      font-size: 15px;
      padding-right: 10px;

  }
  .h54 {
      font-size: 15px;
      padding-right: 10px;

  }
  

  .p2 {
    font-size: 15px;
    padding-right: 30px;
  }

.panel.switch-on {
  transform: translate3d(0%, 160%, 0);
}

}





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

    h5 {
        font-size: 13px;

    }
    .h51 {
        font-size: 13px;

    }
    .h52 {
        font-size: 13px;

    }
    .h53 {
        font-size: 13px;

    }
    .h54 {
        font-size: 13px;

    }



    .p2 {
      font-size: 15px;
      padding-right: 20px;

  }
  .panel.switch-on {

  transform: translate3d(0%, 30%, 0);
  height: 600px;}

}


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



h5 {
        font-size: 3vw;
        padding-right: 9px;
        padding-left: 60px;
}

.h51 {
        font-size: 3vw;
        padding-right: 9px;
        padding-left: 60px;
}

.h52 {
        font-size: 3vw;
        padding-right: 9px;
        padding-left: 60px;
}

.h53 {
        font-size: 3vw;
        padding-right: 9px;
        padding-left: 60px;
}

.h54 {
        font-size: 3vw;
        padding-right: 9px;
        padding-left: 60px;
}



.p2 {
      font-size: 15px;
      padding-right: 20px;
}

.panel {
    transition: transform 1s ease-in-out;
    height: 600px;
    transform: translate3d(0%, 600%, 0);
}

.panel.switch-on {
    transform: translate3d(0%, 30%, 0);
    height: 600px;
}
}


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

    h1 {
        font-size: 25px;
        line-height: 1
    }

    h5 {
      display: none;

  }

    .h51 {
      display: none;

  }

    .h52 {
      display: none;

  }

    .h53 {
      display: none;

  }

    .h54 {
      display: none;

  }


    .p2 {
      display: none;
    }

  .panel.switch-on {
    transform: translate3d(0%, 0%, 0);
    height: 100%;
  }
}