* {
    box-sizing: border-box;


}

body {
    color: black;
    background: white;
    font-family: "Cardo", serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    margin: 0;

}


.main_h {
    position: fixed;
    top: 0px;
    left: 0px;
    text-align: center;
    max-height: 80px;
    z-index: 999;
    width: 100%;
    background: none;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
    top: -100px;
    padding-bottom: 6px;
    font-family: "Montserrat", sans-serif;
    border: 2px solid green;



}




.sticky {
    background-color: black;
    opacity: 1;
    top: 0px;


}

.logo {
    width: 50px;
    font-size: 25px;
    color: white;
    text-transform: uppercase;
    float: left;
    display: block;
  
    line-height: 1;
    margin-top: 30px;
    margin-left: 40px;
    border: 1px solid blue;
}



#menu {
    float: right;
    width: 50%;
    background-color: black;

    margin-bottom: 50px;
    color: white;
    text-align: center;


}



#menu ul {
    list-style: none;
    overflow: hidden;
    text-align: center;

    color: white;
    margin-right: 3Opx;
    font-family: 'Bebas Neue', cursive;




}



#menu ul li {
    display: inline-block;
    line-height: 1.5;

    margin-left: 25px;
    margin-top: 20px;


    color: white;



}



#menu ul a {
    color: white;
    text-transform: uppercase;
    font-size: 29px;


}


#menu a {
    text-decoration: none;
    color: black;

}




a {
    text-decoration: underline;
    color: black;

}


a:hover {
    text-decoration: overline;


}











.content {
    padding: 50px 2% 250px;


}

.hero {

    padding-top: 20px;
    /*  min-height: 500px;*/
    letter-spacing: 1px;
    font-family: "Montserrat", sans-serif;


}





.hero h3 {
    font-size: 30px;
    line-height: 1.3;
    margin-bottom: 350px;
    margin-left: 260px;
    margin-right: 260px;

    font-family: 'Akshar', sans-serif;

}
























.container_12 .grid_2 img {
    width: 315px;
    height: 550px;
    margin-top: 45px;
}



.container_12 .grid_2 .gif img {

    width: 300px;
    height: 550px;
    position: absolute;
    left: 0px;
    right: 150px;
    )
}








.container_12 .grid_2 .bras img {

    width: 450px;
    height: 1800px;
    margin-right: 60px;
  
    padding-right:280px;
    margin-top: 60px;
    
  
}













.container_12 .grid_3 h2 {

    text-align: right;
  font-family: 'Patua One', cursive;
     color: black;
    font-size: 30px;
    line-height: 1.3;
    
}







.container_12 .grid_3 {
    margin: 0px;
    padding-right: 40px;
    margin-top: 20px;
}


.container_12 .grid_3 h4 {
    color: black;
    font-size: 50px;
    text-align: center;
    font-family: 'Koulen', cursive;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 20px;
    text-align: left;
}

.container_12 .grid_3 h5 {
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 27px;
    text-align: center;
    font-family: 'Akshar', sans-serif;
    margin-bottom: 0px;
    margin-right: 20px;
    text-align: left;
}

.container_12 .grid_3 p {
    color: black;
    font-size: 21px;
    text-align: center;
    font-family: 'Akshar', sans-serif;
    margin-right: 20px;
    text-align: left;
}

.container_12 .grid_3 .inverse {
    margin: 0px;
    padding-right: 40px;
    margin-top: 20px;
}

.container_12 .grid_3 p {
    color: black;
    font-size: 21px;
    text-align: center;
    font-family: 'Akshar', sans-serif;
    margin-right: 20px;
    text-align: left;
}
.container_12 .grid_3 img {
    height: 100%;
    /*500px;*/
    width: auto;
    margin-top: 70px;
    
}

.container_12 .grid_3 figure figcaption {
    font-family: 'Akshar', sans-serif;
}


.container_12 .grid_3 .vie img {
    height: 720px;
    /*500px;*/
    width: 410px;
    /*325px;*/
   padding-right: 0px;
   margin-top: 10px;
    
}


.container_12 .grid_3 .viee img {
    height: 720px;
    /*500px;*/
    width: 410px;
    /*325px;*/
  margin-left: 35px;
   margin-top: 70px;
    
}










.container_12 .grid_3 .exe img {
    height: 500px;
    /*500px;*/
    width: auto;
 margin-right: 40px;
    margin-top: 50px;
 
    /*325px;*/
}

















.container_12 .grid_4 figure figcaption {
    font-family: 'Akshar', sans-serif;
}





.container_12 .grid_4 .laura img {

    width: auto;
    height: 650px;
    margin-left: 40px;
}

.container_12 .grid_4 .laura figure figcaption {
    font-family: 'Akshar', sans-serif;

}


.container_12 .grid_4 img {

    width: auto;
    height: 450px;
}



.container_12 .grid_4{
    margin-top: 50px;



}

.container_12 .grid_4 .inverse h4 {
    color: black;
    font-size: 50px;
    text-align: right;
    line-height: 1.1;
    font-family: 'Koulen', cursive;
  margin-right: 20px;
    margin-bottom: 15px;
    margin-left: 0;
    margin-top: 150px;
}

.container_12 .grid_4 .inverse h5 {
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 27px;
   letter-spacing: 0px;
    font-family: 'Akshar', sans-serif;
    margin-bottom: 36px;
    margin-right: 30px;
    text-align: right;
    
}

.container_12 .grid_4 .inverse p {
    color: black;
    font-size: 22px;
    text-align: right;
    font-family: 'Akshar', sans-serif;
   
    margin-bottom: 100px;
    margin-right: 0;
    line-height: 1.3;
    margin-right: 30px;

}

.container_12 .grid_4 {
    margin-right: 0;
}

.container_12 .grid_4 h2 {

    color: black;
    font-size: 57px;
    text-align: right;
     font-family: 'Koulen', cursive;
    line-height: 1.1;
    margin-top: 80px;
}

.container_12 .grid_4 .groupe p {
    color: black;
    font-size: 20px;
    text-align: right;
    font-family: 'Akshar', sans-serif;
    padding-left: 40px;
    margin-bottom: 100px;
    margin-right: 0;

}


.container_12 .grid_4 p {
    color: black;
    font-size: 23px;
    text-align: center;
    font-family: 'Akshar', sans-serif;
    margin-right: 40px;
    text-align: right;
    margin-left: 30px;



}



.container_12 .grid_4 audio {
 
   
    margin-left: 60px;

}



.container_12 .grid_4 .ok {
 
    border-left: solid 5px black;
    margin-bottom: 50px;  

}


.container_12 .grid_4 .reglage img {
   
    width: 580px;
    height: auto;
    margin-top:     0px;
}

.container_12 .grid_4  figcaption {
    font-family: 'Akshar', sans-serif;
    margin-bottom: 60px;
}


.container_12 .grid_4 .asy p {
    color: black;
    font-size: 22px;
    text-align: left;
    font-family: 'Akshar', sans-serif;
   
 margin-left: 02px;
 margin-top: 0px;
    line-height: 1.3;
    margin-right: 30px;

}




















.container_12 .grid_5 .photo img {
  
    width: auto;
    height: 578px;
    margin: 0px;
}

.container_12 .grid_5  figcaption {
    font-family: 'Akshar', sans-serif;
    margin-bottom: 60px;
}



.container_12 .grid_5 .tof img {
  
    width: 100%;
    height: auto;
   
    margin-top: 50px;
 
    
}


.container_12 .grid_5 .tof p {
  
    width: 100%;
    height: auto;
   
    margin-top: 50px;
    margin-left: 90px;
    text-align:left;
  font-family: 'Patua One', cursive;
    font-size: 22px;
    line-height: 1.2
    
}








.container_12 .grid_5 .diff p {
    color: black;
    font-size: 22px;
    text-align: left;
    font-family: 'Akshar', sans-serif;
    margin-top: 80px;
    margin-right: 0;
}

.container_12 .grid_5 h2 {
    font-size: 120px;
    line-height: 1.8;
    margin-left: 50px;
    font-family: 'Bebas Neue', cursive;
    color: black;
    
}

.container_12 .grid_5 p {
    color: black;
    font-size: 23px;
    text-align: center;
    font-family: 'Akshar', sans-serif;
  
    text-align: left;
   
    margin-top: 70px;



}





.container_12 .grid_2 p {
    color: black;
    font-size: 22px;
    text-align: left;
    font-family: 'Akshar', sans-serif;
    margin: 0;
  
}






.container_12 .grid_6 img {
    margin-top: 50px;
    margin-left: 40px;
    width: auto;
    height: 450px;
}






.container_12 .grid_6 .groupe h2 {
    font-size: 60px;
    font-family: 'Bebas Neue', cursive;
    line-height: 1.0;

    text-align: left;
    margin-left: 45px;
}


.container_12 .grid_6 figure figcaption {
    font-family: 'Akshar', sans-serif;
}

.container_12 .grid_6 p {
    font-size: 27px;
    line-height: 1.1;
    margin-left: 50px;
    font-family: 'Akshar', sans-serif;
    color: black;
    margin-right: 40px;
    margin-top: 90px;
    text-align: center;

}














.container_12 .grid_7 {

    line-height: 1.8;
    width: 60.333%;
    /*autre taille de grid7 pour correspondre à ce que tu veux faire*/
    background-color: white;
    color: black;
    font-family: 'Bebas Neue', cursive;
}

.container_12 .grid_7 p {
    font-size: 22px;
   
    line-height: 1.3;
    margin-left: 20px;
    margin-top: 60px;
    font-family: 'Akshar', sans-serif;
    color: black;
   

}


.container_12 .grid_12 .test p {
        color: black;
    font-size: 19px;
    line-height: 1.3;
    text-align: center;
    font-family: 'Roboto Slab', serif;
    padding-left: 40px;
    
    margin-left:200px;
        margin-right:200px;
    margin-top: -100px;
    margin-bottom: 40px;
    





}


.container_12 .grid_8 .fin p {
      font-size: 30px;
    color: white;
    font-family: 'Akshar', sans-serif;
   
   color: black;
    line-height: 1.1;
  
}




.container_12 .grid_8 img {
    height: auto;
    /*500px;*/
    width: 100%;
    /*325px;*/
    margin-top: 175px;
    margin-right: 50px;
}

.container_12 .grid_8 .spe {

    background-color: black;
    text-align: center;
    margin-left: 150px;
    padding-top: 0px;
    padding-bottom: 40px;
    padding-left: 60px;
    padding-right: 60px;
    height: 550px;
    width: 995px;
    margin-left: 100px;
    margin-top: 61px;
}

.container_12 .grid_8 .spe h2 {
    font-size: 100px;
    color: white;
    font-family: 'Fira Sans Condensed', sans-serif;
    letter-spacing: 7px;
    margin-top: 60px;
    padding-top: 70px;
    margin-bottom: 30px;
    
    
    margin-bottom: 0px;
}


.container_12 .grid_8 .spe p {
    font-size: 30px;
    color: white;
    font-family: 'Akshar', sans-serif;
    text-align: center;
    margin-right: 50px;
    
    
    padding-bottom: 60px;
    
}


.container_12 .grid_8 img {
    height: auto;
    /*500px;*/
    width: 100%;
    /*325px;*/
}


.container_12 .grid_8 figure figcaption {
    font-family: 'Akshar', sans-serif;
}

.container_12 .grid_8 .vid video {

    width: 1050px;
    height: auto;
    margin-top: 210px;
}



.container_12 .grid_8 .fin p {
      font-size: 23px;
    color: white;
    font-family: 'Akshar', sans-serif;
   
   color: black;
    line-height: 1.3;
    text-align: left;
    margin-top: 160px;
    
    

    
}




.container_12 .grid_8 p {
      font-size: 23px;
    color: white;
    font-family: 'Akshar', sans-serif;
   
   color: black;
    line-height: 1.3;
    text-align: left;
    margin-left: 40px;
    margin-bottom: 100px;
    
}

















.container_12 .grid_9 video {
    margin-left: 30px;
    margin-bottom: 20px;
    margin-top: 40px;
    width: 1150px;
    height: 100%;

}



.container_12 .grid_9 .regle video {
    margin-left: 30px;
    margin-bottom: 40px;
    margin-top: 40px;
    width: 1160px;
    height: 70%;

}












.container_12 .cit {

    color: black;
    font-size: 19px;
    line-height: 1.1;
    text-align: right;
 font-family: 'Roboto Slab', serif;
 text-align: right;
    margin-right: -40px;
}

.container_12 .grid_12 .long p {
    font-size: 24px;
    color: black;
    font-family: 'Akshar', sans-serif;
    margin-top: 0;
    line-height: 1.3;
    text-align: center;
    margin-right: 50px;
    margin-bottom: 0;
    padding-left: 30px;

padding-right: 30px;
}


.container_12 .grid_12 h1 {
    background-image: url("titre.png");
    color: black;
    width: 100%;
    font-size: 115px;
    text-align: center;
    padding-top: 170px;
    font-family: 'Koulen', cursive;
    letter-spacing: 15px;
    margin-bottom: 20px;

}


.container_12 .grid_12 p {
    font-size: 22px;
    margin-left: 60px;
    line-height: 1.8;
    font-family: 'Akshar', sans-serif;
    color: black;
    margin-bottom: 200px;

}


.container_12 .grid_12 .mention h3 {
    font-size: 27px;
    
    line-height: 1.3;
  font-family: 'Patua One', cursive;
    color: black;
   
    margin-left: 50px;
   text-align: left;
    margin-top: 0px;
    margin-bottom: 0

}










.container_12 .grid_12 h2 {
    font-size: 27px;
    
    line-height: 1.3;
  font-family: 'Patua One', cursive;
    color: black;
    margin-bottom: 200px;
    margin-left: 50px;
   text-align: center;
    margin-top: 0px;
    margin-bottom: 0

}
.container_12 .grid_12 h4 {
    font-size: 25px;
    margin-left: 60px;
    line-height: 1.8;
    font-family: 'Patua One', cursive;
    color: black;
    margin-bottom: 20px;

}

.container_12 .grid_12 .pre h4 {
    font-size: 25px;
    margin-left: 60px;
    line-height: 1.8;
    font-family: 'Patua One', cursive;
    color: black;
    margin-bottom: 20px;
    text-align: center;
    margin-top: 90px;

}



.container_12 .grid_12 img {
    margin-top: 40px;
}


.container_12 .grid_12 figure figcaption {
    font-family: 'Akshar', sans-serif;

}

.container_12 .grid_12 img {
    width: 100%;
    height: auto;

}



.container_12 .grid_12 .baton img {
    width: 1200px;
    height: auto;
    margin-left: 200px;
    margin-bottom: -10px;
    margin-top: 0px;

}



.container_12 .grid_12 h5 {
    font-size: 57px;
    line-height: 1.8;
  font-family: 'Fira Sans Condensed', sans-serif;
    color: black;
   margin: 0;

  
}



.container_12 .grid_12 h6 {
    font-size: 22px;
    margin-left: 60px;
    line-height: 1.8;
    font-family: 'Akshar', sans-serif;
    color: black;
  
    text-align: center;
    margin-top: -20px;
    margin-right: 60px;

}




.container_12 .grid_12 .fin h2 {

    color: black;
    font-size: 45px;
    text-align: center;
     font-family: 'Koulen', cursive;
    line-height: 1.2;
    margin-top: 60px;
    margin-right: 190px;
    margin-left: 190px;
    margin-bottom: 20px;
}


































#autre h3 {
    font-size: 22px;

    line-height: 1.3;
    font-family: 'Patua One', cursive;
    text-align: left;
    color: black;
    margin-top: 70px;
    padding-left: 40px;

    margin-left: 0px;
    margin-bottom: 50px;

}


#autre p {
    font-size: 22px;

    line-height: 1.3;
    font-family: 'Akshar', sans-serif;
    text-align: left;
    color: black;
    margin-top: 10px;
    padding-left: 40px;

    margin-left: 0px;
    

}


#autre img {
    margin-top: 60px;
    width: 690px;
    ;
    height: 100%;
    margin-right: 50px;
}


#autre figure figcaption {

    font-family: 'Akshar', sans-serif;
    margin-left: 38px;




}


#autre video {

    width: 690px;
    height: 100%;
    margin-top: 20px;

    margin-left: 75px;
    margin-right: 50px;

}

#autre figure figcaption {

    font-family: 'Akshar', sans-serif;




}







#encore p {
    margin-top: 0px;
    font-size: 22px;
    font-family: 'Patua One', cursive;
    line-height: 1.3;

    text-align: center;
    color: black;
    margin-bottom: 90px;
    padding-left: 130px;
    padding-right: 150px;


}




#encore h3 {
    font-size: 24px;
    margin-top: 30px;
    line-height: 1.3;
    font-family: 'Akshar', sans-serif;
    text-align: left;
    color: black;
    padding-left: 150px;
    padding-right: 150px;
    text-align: center;



}


















































   footer nav {
       width: 600px;
       margin: auto;





   }

   footer nav ul {
       list-style-type: none;
       text-align: center;
          margin-right: 100px;

   }

   footer nav ul li {
       display: inline;


   }

   footer nav ul li a {
 font-family: 'Akshar', sans-serif;
       font-size: 20px;
       color: black;
       text-decoration: none;
    

   }

   footer nav ul li a:hover {
       color: black;
       border-bottom: solid 1px black;
   }




/* Pour le one page */ 
@-webkit-keyframes scroll {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}

@keyframes scroll {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }
}







.open-nav {
    max-height: 400px !important;
}

.open-nav .mobile-toggle {
    margin-top: 20px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

.mobile-toggle {
    display: none;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    right: 22px;
    top: 20px;
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}



.mobile-toggle span {
    width: 30px;
    height: 4px;
    margin-bottom: 6px;
    border-radius: 1000px;
    background: #8f8f8f;
    display: block;
}

















@media only screen and (max-width: 766px) {
    nav {
        width: 100%;
    }





 body {
        
        
        background-color: bisque;
    }
    
     nav ul li {
        width: 100%;
        padding: 7px 0;

    }
    nav ul {
        padding-top: 10px;
        margin-bottom: 22px;
        float: left;
        text-align: center;
        width: 100%;

    }
     .mobile-toggle {
        display: block;
    }
    
     .main_h {
        padding-top: 25px;
      

    }
    
    
    
    
    
    .logo {
          margin-top: 0;
        
        
        
        
    }
    
    
    .hero .grid_12 h1 {
        
      width:100%;
        font-size: 50px;
        
        

    letter-spacing: 1px;
  
        
        
        
      }   
     .hero .grid_12 h3 {
        
      width:100%;
         margin-left: 0px;
           font-size: 18px;
         margin-left: 30px;
       padding-right: 30px;
        
      }   
    
    .container_12 .grid_9 {
        
        width:100%;
    }    
    
    .container_12 .grid_3 {
        
        width:100%;
        margin-left: 23px;
    }  
    
.container_12 .grid_9 video {
  
     width: 90%;
    margin-left: 23px;
    
   

}
    
    
    
  .container_12 .grid_3 h4 {
    color: black;
    font-size: 30px;
    text-align: center;
    font-family: 'Koulen', cursive;
   
    text-align: left;
}

.container_12 .grid_3 h5 {
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 18px;
    text-align: center;
    font-family: 'Akshar', sans-serif;
 
    text-align: left;
}  
    
    
    
    
    
    
    
    
    
}