/********************************************************************
    Couleurs utilisées:     #000000 : Noir 
                            #242424 : Gris très foncé
                            #3A3A3A : Gris foncé
                            #CCCCCC : Gris
                            #FFFFFF : Blanc
**********************************************************************
    Polices utilisées : 'Berkshire Swash', cursive; : pour le logo
                        'Muli', sans-serif; : pour le reste
    avec les CDN de google
*********************************************************************/

@media screen and (max-width: 1200px) { /* si la largeur d'écran fait moins de 1200px */
#content {
    width: 980px;
    border: 0;
  }

}

@media screen and (max-width: 992px) { /* si la largeur d'écran fait moins de 992px ecrans moyen et tablettes */
#content {
    width: 100%;
    border: 0;
    }
    
#col2a{
     width: 62%;
    }
    
#col2b{
     width: 38%;
	}
    
aside, main, header, nav, footer {
     width: 100%
    }    
   
#menu1{
    margin-top: 40px;;
    } 

#menu2 li{
    background-color: #CCCCCC;       
    text-indent: 0px;
    display: inline-block;
    text-align: center;      
    }
    
#menu3 ul{
    margin-left: 0px;
    margin-top: 0px;
    text-align: center;
    }

#menu3 li{
    text-align: center;
    display: inline-block;
    }
      
#menu3 li{
    background-color: #CCCCCC;     
    text-indent: 0px;
    display: inline-block;
    text-align: center;
    }
    
#numero{
    margin-top: 0px;
    }      
       
}


@media screen and (max-width: 768px) { /* si la largeur d'écran fait moins de 768px smartphone*/
#content {
    width: 100%;
    border: 0;
    }
aside, main, #col2a, #col2b, header, #reseaxsociaux, nav, footer, menu1, menu2, menu3{
     width: 100%;
	}
header{
	height: 300px; 
    }
    
#logo{
    width: 100%;
    float: left;
    } 
        
#menu1{
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    margin-top: 25px;
    }
    
#menu1 nav ul li{
    width: 100%;
    }
    
#menu1 nav ul li a{
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    } 
     
#menu2{
    margin: 0;
    width:100%
    } 
    
#menu2 nav ul{
    display: inline-block;
    width: 100%;
    
    
    }

#menu2 nav ul li{
    display: inline-block;
    width: 100%;
    background-color: #3A3A3A;
    }
    
#menu2 nav ul li a{
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    }     
    
#menu3{
    margin: 0;
    background-color: #3A3A3A;
    } 
    
#menu3 ul{
    width: 100%;
    }
    
#menu3 nav ul li{
    width: 100%;
    background-color: #3A3A3A;
    }   
    
#menu3 nav ul li a{
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    }     
    
#numero{
    margin-top: 15px;
    }  
    
#reseignement #numero h2, #reseignement #numero h3{
    margin-left: 0px;
    margin-bottom: 0px;
    }
    
#reseignement #numero{  
    width: 100%;
    }
    
input#validation{
    margin-left: 160px;
}

form{
    width: 100%;
    }
    
.menus{
    max-width: 100%;
    height: auto;
    }
    
#bouton img{
    max-width: 100%;
    height: auto;
    }
    
}