@font-face {
  font-family: 'Ailerons';
    src:url("../fonts/Ailerons-Regular.woff2")format('woff2'),
       url("../fonts/Ailerons-Regular.woff")format('woff'),
        url("../fonts/Ailerons-Regular.svg")format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "alteDin";
  font-weight: 100;
  src: url("../fonts/Alte DIN 1451 Mittelschrift.eot");
  src: url("../vAlte DIN 1451 Mittelschrift.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/Alte DIN 1451 Mittelschrift.woff2") format("woff2"),
    url("../fonts/Alte DIN 1451 Mittelschrift.woff") format("woff"),
    url("../fonts/Alte DIN 1451 Mittelschrift.ttf") format("truetype"),
    url("../fonts/Alte DIN 1451 Mittelschrift.otf") format("opentype"),
    url("../fonts/Alte DIN 1451 Mittelschrift.svg#Alte DIN 1451 Mittelschrift")
      format("svg");
}

  
@font-face {
    font-family: mypol2;
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/TradeGothicLT-BoldCondTwenty.eot")
      format("embedded-opentype");
    src: url("../fonts/TradeGothicLT-BoldCondTwenty.ttf") format("truetype"),
      url("../fonts/TradeGothicLT-BoldCondTwenty.svg#TradeGothicLT-BoldCondTwenty")
        format("svg");
  }
  

  
@font-face {
    font-family: "Didot LT Std";
    src: url("../fonts/DidotLTStd-Roman.woff2") format("woff2"),
      url("../fonts/DidotLTStd-Roman.woff") format("woff");
    font-weight: normal;
    font-style: normal;
  
  }




@font-face {
    font-family: 'Consolas';
    src: url('../fonts/Consolas.woff2') format('woff2'),
    url('../fonts/Consolas.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPro-Regular.woff2') format('woff2'),
    url('../fonts/DINPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body {
overflow-x: hidden;
  width   : 101%;
  height  : 100%;
  margin  : 0;
  padding : 0;
  background: black;
}

.titre{
  font-family: "alteDin";
font-size: 9px;
text-transform: uppercase;
color: white;
top: 30%;
left: 50%;
line-height: 0px;
transform: translate(-50%,-50%);
letter-spacing: 1px;
font-weight: lighter;
}

.preload{
position: absolute;
width   : 100%;
height  : 100%;
overflow-x: hidden;
z-index: 999999999999999999;
background: black;
}

.main{
position: absolute;

height:100%;
z-index: 1;
opacity:0;
top:00%;
width:1%;




}

h3 {
position: fixed;
top: 45px;
left: 50px;
z-index: 50;
padding: 9px;
text-transform: uppercase;
font-size: 10px;
font-weight: 100;
letter-spacing: 2px;
color:
white;
font-family: "alteDin";
cursor: none;
}

#renderCanvas {
position: fixed;
width   : 100%;
height  : 100%;
touch-action: none;
background:rgba(189, 56, 56, 0);
z-index: 0;   
}

#re {
position: fixed;
width   : 100%;
height  : 100%;
opacity:0.7
}

#image{
position: absolute;
background: url(img/Moon2.jpg) 50% 50%;
background-size: cover;
z-index: -55;
mix-blend-mode: overlay;
width:100%;
height: 100%;
bottom:0%;
}

h1{position: absolute;
z-index: 1;
color:antiquewhite
}

.sousGroupeGauche {
opacity: 0;
position: fixed;
z-index: 999999;
width: 390px;
text-align: left;
bottom: 45px;
left: 50px;
}

.sousGroupeGauche .bt {
text-transform: uppercase;
font-size: 10px;
border: 1px solid 
white;
padding: 8px;
letter-spacing: 0.1em;
cursor: pointer;
transition: 0.5s;
}

.sousGroupeGauche p {
font-size: 7px;
font-weight: 100;
letter-spacing: 0px;
color: 
#ffffffbf;
font-family: "alteDin";
letter-spacing: 0.05em;
margin: 1em;
display: inline-block;
line-height: 1.4em;
text-transform: none;
}

p {
text-transform: uppercase;
font-size: 12px;
font-weight: 300;
letter-spacing: 0px;
color: white;
font-family: "alteDin";
cursor: none;
letter-spacing: 0.2em;
margin: 1.5em;
display: inline-block;
}

.sousGroupeGauche a {
font-size: 9px;
font-weight: 100;
letter-spacing: 0px;
color: 
#ffffffd4;
font-family: "alteDin";
cursor: none;
letter-spacing: 0.1em;
margin: 1em;
display: inline-block;
text-transform: uppercase;
}

.sousGroupeGauche a {
font-size: 9px;
font-weight: 100;
letter-spacing: 0px;
color: 
#ffffffd4;
font-family: "alteDin";
cursor: none;
letter-spacing: 0.1em;
margin: 1em;
display: inline-block;
text-transform: uppercase;
}

.menu {
overflow: hidden;
height: 200%;
display: none;
}

.menu {
position: fixed;
right: 70px;
top: -4vh;
width: 100%;
z-index: 9999;
}

.menuIn {
position: absolute;
text-align: right;
right: 17px;
top: 18vh;
}

.menu h2 {
opacity: 1;
text-transform: uppercase;
font-family: Ailerons;
font-size: 18vh;
line-height: 100px;
word-spacing: -50px;
font-weight: 100;
letter-spacing: -4vh;
margin-top: -100px;
color:white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color:
rgba(255, 255, 255, 0.1);
cursor: pointer;
}

.glow {
animation: glow 2s ease-in-out alternate forwards;
}
.glow2 {
animation: glow2 1s ease-in-out alternate;
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 4px #fff, 0 0 4px rgb(245, 206, 214);
}
to {
text-shadow: 0 0 2px #fff, 0 0 2px #cccccc;
}
}
@-webkit-keyframes glow2 {
from {
text-shadow: 0 0 5px #fff, 0 0 4px rgb(245, 206, 214);
}
to {
text-shadow: 0 0 2px #fff, 0 0 2px #cccccc;
}
}

.pageCache{
position:  absolute;
width:1%;
height: 10%;
background:#835803;
z-index: -5001;    pointer-events: none;

}

.chiffreB {
position:absolute;
top:20vh;
width:30vw;
left:50px;
z-index: 999;
font-family: "alteDin";
font-size: 9px;
font-weight: 100;
letter-spacing: 0px;
color:
#ffffffd4;
font-family: "alteDin";
text-transform:uppercase;
letter-spacing: 0.1em;
margin: 1em;
}

.hh3Box {
display: inline-block;
margin:1em;
}

.number-no {
font-size: 20px;
font-weight: 400;
}

.buttonMenu {
position: fixed; 
top:40px;
right:40px;
height: 40px;
width: 35px;
z-index: 9999;
}

.petitTexte {
font-size: 9px;
font-weight: 100;
letter-spacing: 0px;
color: #ffffffd4;
font-family: "alteDin";
letter-spacing: 0.1em;
margin: 1em;
display: inline-block;
text-transform: uppercase;
}

.petitTexte:hover {
color: #a02b2bd4;
}

h5{
font-size:20px;
color:white;
position: absolute;
z-index: 99999999999999999999999999999999;
text-align: center;
}

.preload h4 {
position:absolute;
top:45vh;
left:50%;
display:inline-block;
transform: translate(-50%,-50%);
z-index: 999;
font-family: "alteDin";
font-size: 50px;
font-weight: 100;
letter-spacing: 0px;
color:#ffffffd4;
font-family: "alteDin";
text-transform:uppercase;
letter-spacing: 0.1em;
}

.hh3{
font-size: 9px;
font-weight: 100;
letter-spacing: 0px;
color:
#ffffffd4;
font-family: "alteDin";
text-transform: uppercase;
letter-spacing: 0.1em;
}
.appear {
  opacity:0
}
.groupeInfoMapTitre {
  display:none;
  opacity: 1;
  position: absolute;
  z-index: 999999999999999999999;
  top:18vh;
  text-align: left;
  left: 10vw;
  height: 50px;
  width:500px;
  color: white;
  font-family: "alteDin";
  }
  .groupeInfoMapTitre  h1 {
    opacity: 1;
    text-transform: uppercase;
    font-family: Ailerons;
    font-size: 2vw;
    line-height: 2vw;
   
    font-weight: 100;
    letter-spacing: -0.2vh;
    margin-top: 0px;
    color: 
white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color:
    rgba(255, 255, 255, 0.1);
    cursor: pointer;
 
    position: relative;
    left:-0.3vw;
}
.groupeInfoMapTitre  h4 {

    font-size: 9px;
    font-weight: 100;
    letter-spacing: 0px;
    color: 
    #ffffffd4;
    font-family: "alteDin";
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: -10px;


}


.groupeInfoMap {
opacity: 1;
position: absolute;
z-index: 999999999999999999999;
top:35vh;
text-align: left;
left: 10vw;
height: 50px;
width:500px;
color: white;
font-family: "alteDin";
}


.groupeCharte {
  opacity: 1;
  position: absolute;
  z-index: 999999999999999999999;
  top:20vh;
  text-align: left;
  left: 12vw;
  height: 50px;
  width:500px;
  color: white;
  font-family: "alteDin";
  }

  .groupeCharte h1{
    opacity: 1;
    text-transform: uppercase;
    font-family: Ailerons;
    font-size: 2vw;
    line-height: 2vw;
   
    font-weight: 100;
    letter-spacing: -0.2vh;
    margin-top: 0px;
    color: 
white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color:
    rgba(255, 255, 255, 0.1);
    cursor: pointer;
 
    position: relative;
    left:-0.3vw;
    }
  
  
    .groupeCharte h4{
      font-size: 9px;
      font-weight: 100;
      letter-spacing: 0px;
      color: 
      #ffffffd4;
      font-family: "alteDin";
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: -10px;
      }
    

      .groupeCharte p {
        text-transform: uppercase;
        font-size: 42px;
        font-weight: 300;
        letter-spacing: 0px;
        color: 
        white;
        font-family: "alteDin";
        cursor: none;
        letter-spacing: 0.03em;
        margin: 0em;
            margin-top: 0em;
        display: inline-block;
        width: 300px;
        line-height: 48px;
      
        margin-top: 30px;
    }


.groupeInfoMap .hh3 {
font-size: 8px;
}

.groupeInfoMap .number-no {
font-size: 33px;
letter-spacing: 1px;
width:50px;
}

.groupeInfoMap hr {
color: 
white;
margin-top: 0px;
width: 30px;
}

.groupeInfoMap p {
text-transform: none;
font-size: 8px;
font-weight: 100;
letter-spacing: 1px;
margin: 0;
font-family: arial;
text-transform: uppercase;
width: 200px;
}

.cache {
opacity:0
}

/* .hexagon {
position: absolute;
width: 30px; 
height: 17.32px;
background-color:#64C7CCAD;;
margin: 8.66px 0;
left: 237px;
top: 10px;
}

.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}

.hexagon:before {
bottom: 100%;
border-bottom: 8.66px solid #64C7CCAD;;
}

.hexagon:after {
top: 100%;
width: 0;
border-top: 8.66px solid #64C7CCAD;;
} */


.hexagon {
position: absolute;
width: 29.4px;
height: 16.7px;
margin: 14px 0;
border-left: solid 1px 
#ffffff;
border-right: solid 1px
#ffffff;
top:10px;
left:234px;
}


.hexagon::before, .hexagon::after {
content: "";
position: absolute;
z-index: 1;
width: 21.1px;
height: 21.1px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 3.5px;
}

.hexagon::before {
top: -11px;
border-top: solid 1.4142px 
#ffffff;
border-right: solid 1.4142px
#ffffff;
}

.hexagon:after {
bottom: -11.1px;
border-bottom: solid 1.4142px #ffffff;
border-left: solid 1.4142px #ffffff;
}

#cross {
background: 
white;
height: 10px;
position: relative;
width: 1px;
left: 14px;
top: 3px;
transform: rotate(45deg);
transition: 0.5s;
}

#cross:hover {
transform: rotate(0deg);
}

#cross::after {
background: 
white;
content: "";
height: 1px;
left: -4.5px;
position: absolute;
top: 4.5px;
width: 10px;
}

.taille {
position:absolute;
text-transform: none;
font-size: 10px;
font-weight: 100;
letter-spacing: 1px;
margin: 0;
font-family: mypol2;
text-transform: uppercase;
z-index: 999;
height:50%;
pointer-events: none;
}


.groupeInraci {

  top: 25vh;
  left: 12vw;
  width: 680px;


}

.groupeSecondary {

  top: 22vh;
  left: 10vw;
  width: 750px;


}
.groupeInraci h1{

  opacity: 1;
  text-transform: uppercase;
  font-family: Ailerons;
  font-size: 2vw;
  line-height: 100px;

  font-weight: 100;
  letter-spacing: 1vh;
  margin-top: 0px;
  color: 
white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color:
  rgba(255, 255, 255, 0.1);
  cursor: pointer;
  margin-left: -0.3vw;
position:initial
 

}

.groupeSecondary h1{

  opacity: 1;
  text-transform: uppercase;
  font-family: Ailerons;
  font-size: 2vw;
  line-height: 100px;

  font-weight: 100;
  letter-spacing: 1vh;
  margin-top: 0px;
  color: 
white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color:
  rgba(255, 255, 255, 0.1);
  cursor: pointer;
  margin-left: -0.3vw;
position:initial
 

}

.groupeSecondary .autourP {

  height: 385px;


}

.secVideo {

  pointer-events: visible;
  font-size: 9px;
font-weight: 100;
letter-spacing: 0px;
color: 
#ffffffd4;
font-family: "alteDin";
text-transform: uppercase;
letter-spacing: 0.1em;
position: relative;
top:35px;
}


.secVideo h5 {
  font-size: 10px;
  color: 
  #e5faf6;
  position: absolute;
  z-index: 99999999999999999999999999999999;
  text-align: center;
  font-weight: 100;
  letter-spacing: 0.3vh;
  cursor: crosshair;
}
.groupeInraci p {

  text-transform: none;
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 1px;
  color: 

  white;
  font-family: arial;
  margin: 0;
      margin-top: 0px;
      margin-bottom: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-top: 0px;
  margin-top: 16px;
  margin-bottom: 20px;
  line-height: 20px;



  
}


.groupeSecondary p {

  text-transform: none;
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 1px;
  color: 

  white;
  font-family: arial;
  margin: 0;
      margin-top: 0px;
      margin-bottom: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-top: 0px;
  margin-top: 16px;
  margin-bottom: 20px;
  line-height: 20px;



  
}

.groupeInraci .hh3  {

  height: 22px;
  overflow: hidden;
    }
.groupeGreensat {

  top: 30vh;
  left: 12vw;
  width: 680px;

}

.groupeGreensat h1 {
  opacity: 1;
  text-transform: uppercase;
  font-family: Ailerons;
  font-size: 2vw;
  line-height: 80px;
  word-spacing: -50px;
  font-weight: 100;
  letter-spacing: 5vh;
  margin-top: 0px;
  color: 
white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color:
  rgba(255, 255, 255, 0.1);
  cursor: pointer;
  margin-left: -0.2vw;;
  position: relative;
}

.deki{

  position: fixed;
  width: 140px;
  height: 28px;
  top:51px;
  left: 110px;
  background: url("../deki.png");
  background-size: cover;
  z-index: 999;
  OPACITY:0.9



}
.blc1 {



    display: inline-block;
    width: 40%;
    margin-right: 9%;


}
.groupeGreensat .hh3  {

height: 22px;
overflow: hidden;
  }
.grand {
color: 
white;
font-size: 2vh;
line-height: 1vh;
margin-top: 0;
letter-spacing: 5vh;
}

.deux {
margin-left:4vh
}

.petit {
font-size: 9px;
font-weight: 100;
letter-spacing: 0px;
color: 
#ffffffd4;
font-family: "alteDin";
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 0px;
}


#autour  {
  overflow:hidden;

  height: 15px;
}
#autour3  {
  overflow:hidden;

  height: 85px;
}


.ligne {
height: 1px;
background: white;
width:270px;
color:white;top: 8px;

position: relative;
}

#logo {
position: fixed;
background: url("../img/canw.png")50% 50%;
top: 10px;
left: 40px;
height: 120px;
width: 50px;
z-index: 4;
background-size: cover;
}

#project2 {
position: fixed;
bottom: 35px;
left: 40px;
z-index: 4;
}

#para{

    font-size: 9px;
    font-weight: 100;
    letter-spacing: 0px;
    color: 
    #ffffffbf;
    font-family: "alteDin";
    letter-spacing: 0.05em;
    margin: 1em;
    display: inline-block;
    line-height: 1.2em;
    text-transform: none;
    width:340px;


}

#project11 {
position: fixed;
bottom:95px;
z-index: 4;
background: transparent;
border: 1px solid snow;
width: 60px;
height: 30px;
left: 50px;
}

#casque {
position: fixed;
background: url("../img/casque.png")50% 50%;
right: 40px;
bottom: 40px;
height: 20px;
width: 25px;
background-size: cover;
z-index: 4;
}

#resx {
position: fixed;
right: -85px;
top: 50%;
text-align: center;
height: 20px;
width: 250px;
z-index: 4;
cursor: pointer;
transform: rotate(90deg);
}

#rsx {
font-family: 'DINPro';
font-size: 8px;
text-transform: uppercase;
color: white;
letter-spacing: 5px;
word-spacing: 10px;
}

.facebook {
color: snow;
text-decoration: none;
}

.youtube {
color: snow;
text-decoration: none;
}

#project22 {
position: fixed;
bottom:95px;
z-index: 4;
left: 125px;
background: transparent;

width: 60px;
height: 30px;
}


  .groupeGreensat p {

    text-transform: none;
    font-size: 11px;
    font-weight: 100;
    letter-spacing: 1px;
    color: 

    white;
    font-family: arial;
    margin: 0;
        margin-top: 0px;
        margin-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-top: 0px;
    margin-top: 16px;
    margin-bottom: 20px;
    line-height: 20px;


}

.ol {
position: fixed;
background-color: white;
right: 40px;
height: 1px;
z-index: 4;
}

#menu1 {
top: 47px;
width: 25px;
}

#menu2 {
top: 54px;
width: 25px;
}

#menu3 {
top: 61px;
width: 16px;
}

.groupeGreensat .number-no {
margin-top: -5px;
}

.app{
  
  width:500px;
}

#Calque_1{
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 50px;
  height: 12.5px;
  z-index: 100;
stroke-dasharray:200;
        stroke-dashoffset:400;
        pointer-events: none;
 

        
       

}

#svg_hover {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 50px;
  height: 25px;
  z-index: 100;
  

}



.log{
  position: fixed;
  stroke-dashoffset: 600;
  stroke-dasharray: 590;
  top: 50px;
  left:50px;
  z-index:999;
  width: 32px;
height: 29.5px;
fill:white;

stroke: white;
stroke-width: 10px;

}


.logStart {

  animation: soso 1s normal ease-out forwards;

}


.logOut {

  animation: soso2 1s normal ease-in-out forwards;

}






@keyframes soso{

0%{
  
  stroke-dashoffset: 600;
  fill:white
 }

20%{
  fill:rgba(255, 255, 255, 0);


}


54%{

  stroke-dashoffset: 00;

}

55%{  
  stroke-dashoffset: 00;

}

100%{
  stroke-dashoffset: 590;
  

  
}  

}



@keyframes soso2{

  0%{
    
    stroke-dashoffset: 590;
    fill:rgba(255, 255, 255, 0);
   }

   


   55%{
    
    stroke-dashoffset: 90;
  
   }

  
  99%{
    stroke-dashoffset: 590;
  
    
  }  
  100%{    stroke-dashoffset: 590;}
  
  }
  
  









.hh3Box {
  
      


  display: inline-block;
  margin:1em;
  
  }
  
  .hh3BoxBouton {
    
      top: -8px;
  
  position: relative;
  
  
    display: inline-block;
    width:50%;
    margin:1em;text-align: right;
    text-align: right;
    }
  
    .hh3BoxBouton .bt {
  
      
  text-transform: uppercase;
  font-size: 10px;
  border: 1px solid 
  white;
  padding: 9px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: 0.5s;
  
  }
    .number-no {
  
          font-size: 20px;
  font-weight: 400;
        
      }

      .chiffreC {
        position: absolute;
        top: 21vh;
        width: 50vw;
        display: none;
        left: 50%;
        z-index: 999;
        font-family: "alteDin";
        font-size: 9px;
        font-weight: 100;
        letter-spacing: 0px;
        color: 
        #ffffffd4;
        opacity: 0;
        font-family: "alteDin";
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin: 1em;
        margin-left:-20vw
    }

    .hh3{
      font-size: 9px;
      font-weight: 100;
      letter-spacing: 0px;
      color:
      #ffffffd4;
 
      text-transform: uppercase;
      letter-spacing: 0.1em;
      }
      
      .groupeInfoMap {
      opacity: 1;
      position: absolute;
      z-index: 999999999999999999999;
      top:35vh;
      text-align: left;
      left: 10vw;
      height: 50px;
      width:500px;
      color: white;
      font-family: "alteDin";
      }
      
      .groupeInfoMap .hh3 {
      font-size: 8px;
     
      }
      
      .groupeInfoMap .number-no {
      font-size: 28px;
      width:50px;
      }
      
      .groupeInfoMap hr {
      color: 
      white;
      margin-top: 0px;
      width: 30px;
      }
      
      .groupeInfoMap p {
      text-transform: none;
      font-size: 9px;
      font-weight: 100;
      letter-spacing: 1px;
      margin: 0;
      font-family:'Consolas';
      text-transform: uppercase;
      width: 190px;
      }
      
      .cache {
      opacity:0

      }
      .video {

        position: relative;
        top: 30%;
        left: 40%;
        width: 50%;
        height: 50%;
        z-index: 99;
        mix-blend-mode: soft-light;
        opacity: 00;
        display: none;
        pointer-events: none;
        overflow: hidden;
    
    }

     .yoyo{
      position: absolute;

      top: 20%;
      
      left: 93%;

    }
    
      #vid1{

        min-width:100%;
        min-height:100%;
      
      }



        .imgIntro {
          position: fixed;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 100%;
          z-index: 99;
     
          transform: translate(-50%,-50%);
          opacity: 0;
          pointer-events: none;
          overflow: hidden;
          z-index: 999999999;
          background: url('../img/introfu.jpg');
          background-size: cover;
      }
    
    

    #vid2{

      min-width:100%;
      min-height:100%;
    
    }
.autourP {


    overflow:hidden;
    height: 305px;
    position: relative;
    top: 20px;
}

.preload{
  position: absolute;
  width   : 100%;
          height  : 100%;
          overflow-x: hidden;
          z-index: 999;
          background: black;
}

.preload p {
  position: absolute;
top: 80px;
display: inline-block;
z-index: 999;
font-family: "Ailerons";
font-size: 50px;
font-weight: 100;
color:white;
text-transform: uppercase;
letter-spacing: 0.1em;
left: 150px;


}

#loading {
  position: absolute;
  bottom: 280px;
  left: 3px;
  font-family:'DINPro' ;
  font-size: 10px;
  text-transform: uppercase;
  color: white;
  letter-spacing: 0.7px;
  opacity: 1;
}

#score {
  position: absolute;
  bottom: 210px;
  left: 3px;
  font-family: "alteDin";
  font-size: 30px;
  color: white;
}

#bar {
  position: absolute;
  bottom: 170px;
  left: 3px;
  height: 2px;
  width: 12px;
  background-color: white;
}

#bloc {
  position: absolute;
  left: 234px;
  bottom: 0;
  width:530px;
  height: 70%;
  z-index: 20;
  overflow: hidden;
  font-family: "alteDin";
}

#expl1 {
  position: absolute;
  bottom: 29%;
  left: -505px;
  height: 40px;
  width: 600px;
  font-family: 'DINPro';
  font-weight: 100;
  font-size: 13px;
  color: white;
  font-weight: 100;
}

#expl2 {
  position: absolute;
  bottom: 29%;
  left: -525px;
  font-family: 'DINPro';
  font-weight: 100;
  font-size: 13px;
  color: white;
  height: 40px;
  width: 600px;
}

#can {
  position: absolute;
  background: url("../img/can-blanc.png")50% 50%; 
  bottom: 210px;
  left: 90px;
  width: 15px;
  height: 35px;
  background-size: cover;
  opacity: 1;
}

#LogoInraci {
  position: absolute;
  background: url("../img/aaa-1.png")50% 50%;
      background-size: auto;
  top: 56px;
  left: 900px;
  width: 85px;
  height: 18px;
  background-size: cover;
  opacity: 1;
  z-index: 999999999999999999999;
}

#crossi {
  position: absolute;
  background: url("../img/1111.png")50% 50%;
  top: 270px;
  left: 234px;
  width: 20px;
  height: 23px;
  background-size: cover;
  z-index: 10;

}

#elec {
  position: absolute;
top: 225px;

z-index: 999;
font-family: "alteDin";
font-weight: 100;
font-size: 9px;
color:white;
text-transform: uppercase;
letter-spacing: 3px;
left: 233px;
}

#aa {
  position: absolute;
top: 244px;

z-index: 999;
font-family: "alteDin";
font-weight: 100;
font-size: 9px;
color:white;
text-transform: uppercase;
letter-spacing: 3px;
left: 234px;
}










#btn{
  opacity: 0;
  position: fixed;
  height: 30px;
  width: 300px;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
          display: inline-block;
  }
      
          #btn p {display: inline-block;
          
      
          }
          #pre {
                 border: solid 1px white ;
                 height: 15px;
                 width: 80px;
                 text-align: center;
                 padding: 2px;
                 transition: 1s;
                 }
  
  #pre:hover {background: white;
              color:black;    }
  
  
  #nxt {position: fixed; right: 0 ;
        border: solid 1px white ;
        height: 15px;
        width: 50px;
        text-align: center;
        transition: 1s;
        }
  
  
    #nxt:hover {background: white;
              color:black;    }
  
   #blctxt{
  position: fixed;
  bottom: 3%;
  left: 52%;
  
  overflow: hidden;
  transform: translateX(-50%);
  z-index: 99999999999999999999;
  height: 144px;
  width: 870px;
  }
  
  
  #blctxt1{ position: fixed;
                   
                    margin-top: -122px;
                    z-index: 999999999999999999999999;
                   top: 0;
                    overflow: hidden;
                    width: 405px;
          }
  #blctxt2{ position: fixed;
      margin-top: -122px;
                    z-index: 999999999999999999;
                   right: 0;
                    width: 405px;
                    top: 0;
          }
          #noms{font-size: 10pt;
          margin-left: 0;
          margin-top: auto;
          width: 460px;
          }
          #noms2{font-size: 10pt;
          margin-left: 0;
          margin-top: auto;
          
          }
          #ligne {height: 1px;
                  width: 0px;
              background: white;
          position: absolute;
          left: 0px;
              top: 25px;
          }
          #ligne2 {height: 1px;
                  width: 0px;
              background: white;
          position: absolute;
          left: 0;
              top: 25px;
          }
         
      #txt1{
        text-transform: none;
          font-size: 11px;
          font-weight: 100;
          letter-spacing: 1px;
          color: 
          white;
          font-family: arial;
          margin: 0;
              margin-top: 0px;
         
         line-height: 18px;
      }
      #txt2{
        
          text-transform: none;
          font-size: 11px;
          font-weight: 100;
          letter-spacing: 1px;
          color: 
          white;
          font-family: arial;
          margin: 0;
              margin-top: 0px;
         
         line-height: 18px;
      
      }
  .ElementGalerie {display: none};
      @media all and (min-width: 200px) and (max-width: 700px) {
  
          #blctxt{
  
  
  height: 50px;
  width: 460px;
  }
  
  
  
      }