/* Caractéristiques principales du site       */

body {
  background : #a8c8f7; 
  font-family: 'Faune', sans-serif;  
  color: #1d45b0;   
  font-size: 30px; 
  line-height: 125%;  
    
}

                                                                                                                                                                               
.tablette{  
background: url(../images/background.jpg) repeat center center;
background-size: cover;
width : 100%;
height : 100%;
display : block;

position:absolute; /*it can be fixed too*/
left:0; right:0;
top:0; bottom:0;
margin:auto;

/*this to solve "the content will not be cut when the window is smaller than the content": */
max-width:100%;
max-height:100%;
overflow:auto;
}

#tablette-empty{  
background: #a8c8f7;
}


.texte{
width : 574px;
height : 195px;
/*background : #EEEEEE;*/
display : block;

position:absolute;
left:0; right:0;
top:0; bottom:0;
margin:auto;

max-width:100%;
max-height:100%;
overflow:auto;

}  

.gif{
background: url(../images/gif.gif) no-repeat center center;  
width : 130vh;
height : 50vh;
display : block;

position:absolute;
left:0; right:0;
top:0; bottom:0;
margin:auto;

max-width:100%;
max-height:100%;
overflow:auto;

z-index: 1;

}

.texte-4{
width : 574px;
height : 155px;
/*background : #EEEEEE;*/
display : block;

position:absolute;
left:0; right:0;
top:0; bottom:0;
margin:auto;

max-width:100%;
max-height:100%;
overflow:auto;

}

.texte-3{
width : 574px;
height : 115px;
/*background : #EEEEEE;*/
display : block;

position:absolute;
left:0; right:0;
top:0; bottom:0;
margin:auto;

max-width:100%;
max-height:100%;
overflow:auto;

}

.texte-2{
text-align : center;
width : 574px;
height : 84px;
/*background : #EEEEEE;*/
display : block;

position:absolute;
left:0; right:0;
top:0; bottom:0;
margin:auto;

max-width:100%;
max-height:100%;
overflow:auto;

}

.texte-1{
text-align : center;
width : 574px;
height : 45px;
/*background : #EEEEEE;*/
display : block;

position:absolute;
left:0; right:0;
top:0; bottom:0;
margin:auto;

max-width:100%;
max-height:100%;
overflow:auto;

}

.button-prev {
    width : 50vh;
    height : 100%;
    border: none !important;
    font-size:0;
    float: left; 
}

.button-next {
    width : 50vh;
    height : 100%;
    background: transparent;
    border: none !important;
    font-size:0;
    float: right;   
}

.icon-next {
text-align : center;
width : 70px;
height : 35px;
/*background : #EEEEEE;*/
display : block;

position:absolute;
right:60px;
top:0; bottom:0;
margin:auto;

max-width:100%;
max-height:100%;
overflow:auto;
}

.title{  
text-align:center;
margin:12vh auto;
z-index: 5;

max-width:100%;
max-height:100%;
overflow:auto;
}

.butBegin{
text-align : center;
display : block;

position:absolute;
left:0; right:0;
bottom:12vh;
margin:auto;

max-width:100%;
max-height:100%;
overflow:auto;

}


/*MENU*/
.menu-section{  
width: calc(100% / 3);
height : 100%;
display : block;

position:absolute; /*it can be fixed too*/
left:0; right:0;
top:0; bottom:0;

/*this to solve "the content will not be cut when the window is smaller than the content": */
max-width:100%;
max-height:100%;
overflow:auto;
}
       
#section-1{
background: url(../images/C03VN02.jpg) no-repeat center center;
background-size: cover;
height: 100%; 
}

#section-2{
background: url(../images/C02CA03.jpg) no-repeat center center;
background-size: cover;
height: 100%; 
margin:auto;
}

#section-3{
background: url(../images/C01NA01.jpg) no-repeat center center;
background-size: cover;
height: 100%; 
left:calc(100% / 1.5); right:0;
top:0; bottom:0;
}

.border-1{  
width: 0.5%;
height : 100%;
display : block;
background: #ecf2fc; 
z-index: 5;

position:absolute;
left:calc(100% / 1.5); right:0;
top:0; bottom:0;

max-width:100%;
max-height:100%;
overflow:auto;
}

.border-2{  
width: 0.5%;
height : 100%;
display : block;
background: #ecf2fc; 
z-index: 5;

position:absolute;
left:calc(100% / 3); right:0;
top:0; bottom:0;

max-width:100%;
max-height:100%;
overflow: auto;
}

#title{
    display: block;
    z-index: 2;
    
    position:absolute;
    left:0; right:0;
    top: 0; bottom:0;
    margin: 15vh auto;
    
    max-width:100%;
    max-height:100%;
    overflow:auto;}
    
#play{
    display: block;
    z-index: 2;
    
    position:absolute;
    left:0; right:0;
    top: 0; bottom:0;
    margin: auto auto 1vh auto;
    
    max-width:100%;
    max-height:100%;
    overflow:auto;}
    


/*BUTTONS SYSTEMS*/

.space-button-left{
    width : 10vh;
    height : 10vh;  
    position:absolute;
    left:0; right:0;
    top:0; bottom:0;
    z-index: 5;
    background-size:cover;
} 

.button {
    width: 5vh;
    height: 5vh;
    display: block;
    position:absolute;
    left:0; right:0;
    top:0; bottom:0;
    margin: auto;
    }


    .burger{
        width : 10vh;
        height : 10.5vh;  
        position:absolute;
        left:0; right:0;
        top:0; bottom:0;
        z-index: 5;
        background: url(../images/Formes/Forme_Menu.png) no-repeat;
        background-size:cover;
    } 

    .butBurger {
        width: 5vh;
        height: 5vh;
        display: block;
        color: #001c51;
        position:absolute;
        left:0; right:0;
        top:0; bottom:0;
        margin: auto;
        background: url(../images/Icons_System/Menu_Blue-900_24px.svg) center center no-repeat;}
        
    .butBurger a:hover, .overlay a:focus {
      color: #2c81f5;
    }  
    
    #butReturn{
        background: url(../images/Icons_System/Fleche-Retour_Blue-900_24px.svg) center center no-repeat;}      


    
/*OVERLAY BURGER*/
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #ecf2fc;
  /*background: url(../images/Boutons/Plan de travail-1.png) no-repeat;*/
  overflow-x: hidden;
  transition: 0.5s;
}
         
.overlay-content { 
  width: 80%;
  height:20vh;
  text-align: center;
  /*background: #1d45b0;*/
  display: block;
  position: absolute;
  left:0; right:0;
  top:0; bottom:0;
  margin:auto auto 10vh auto; 
  
  color: #aacbfa;
  font-variant: small-caps;
  font-size: 5vh; 
  line-height: 120%;
  transition: 0.3s;
  
  
  max-width:100%;
  max-height:100%;
  overflow:auto; 
}

.overlay a {  
  text-decoration: none;
  color: #001c51;
  display: block;
}

.overlay a:hover, .overlay a:focus {
  color: #2c81f5;
}

.overlay .closebtn {
  position: absolute;
  top:1vh;
  right: 3vh;
  font-size: 50px;
}

/*@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }       *
}*/   


/*360*/
       
.audio{
z-index: 99;
position: fixed;
text-align:center;
left:0; right:0;
bottom:3vh;
margin:auto;}        

#03VN02{
z-index: 0;}
  
  
/*PARALLAX*/ 

.wrapper{
    display:block;
    width : 81707px;
    
    position:absolute;
    left:0; right:0;
    top:0; bottom:0;
    
    max-height:100%;
    overflow:auto;
    z-index: 0;
}
      .Plan1{
      position:relative;
      background: #ffffff;
      height:100%;
      width: auto; 
      float:left;
      z-index: 1;
      }
      
      #Plan1_1{
      z-index: 2;
      
      position:absolute;
      left:0;
      }
      
      .Plan2{
      position:relative;
      background: #aa25dd;
      height:100%;
      width: auto;
      float:left; 
      z-index: 1;
      }
      
      #Plan2_6_J{
      z-index: 4;
      position:absolute;
      left:calc(100% / 200);
      }