@charset "UTF-8";

@media only screen and (min-width: 641px){
/***********************************************
			MENU MEDIA QUERIES BIG		
*************************************************/
		.menu-toggle {display: none;}
		.top-bar label {display:none}
		.menu{width:1200px;margin: 0 auto 0 auto;max-width:1200px;background: rgba(37, 37, 37, 0.9);box-shadow: 0 5px 10px rgba(0,0,0,0.3);line-height:0.5;font-size: 1.2em;}
		nav {
			display: block;  
			width: 100%;
			position: absolute;
			z-index: 5;
			;
		}
		nav ul ul {display: none;}
		nav ul li:hover > ul {display: block;}
		nav ul {
			list-style: none;
			position: relative;
			display: inline-table;
			padding: 0;
			/*border-bottom: solid 1px #899097;*/
		}
		nav ul:after {content: ""; clear: both; display: block;}
		nav ul li {float: left;}
		nav ul li:hover {background: rgba(106, 106, 106, 0.3);
			-webkit-transition: all 0.3s ease-in-out 0s;
			-moz-transition: all 0.3s ease-in-out 0s;
			-o-transition: all 0.3s ease-in-out 0s;
			transition: all 0.3s ease-in-out 0s;}
		nav ul li:hover a {color: #F4F4F4;}
		nav ul li a {
			display: block; padding: 10px 15px;/*taille barre menu*/
			color: #F4F4F4; text-decoration: none;
		}
		nav ul ul {
			background: rgba(58, 58, 58, 1); padding: 0;
			position: absolute; top: 100%;
			z-index: 100;
		}
		nav ul ul li {
			float: none; 
			border-top: 1px solid #899097;
		}
		nav ul ul li a {
			padding: 10px 15px;
			color: #F4F4F4;
		}	
		nav ul ul li a:hover {
			background: #rgba(60, 68, 81, 0.3);
			color: #F4F4F4;
		}	
		nav ul ul ul {position: absolute; left: 100%; top:0;}
	}
	
/*******************************************
		MENU MEDIA QUERIES SMALL  48em			
*******************************************/
@media only screen and (max-width: 640px){		
		html, body { overflow-x: hidden; }		
		nav {overflow-y: auto;
		  position: fixed;
		  top: 0;
		  left: 0;
		  height: 100%;
		  background: #252525;
		  z-index: 0;
		  width: 200px;
		}
::-webkit-scrollbar {width: 16px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;}
::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(239,239,138,0.5); }		
/*	pour masquer LE SOUS-MENU et l'afficher AU SUVOL
		nav ul li:hover > ul {display: block;}
			OU AU CLICK
		nav ul ul {display: none;}
		nav ul li:focus  ul {display: block;}
*/
		nav ul {
		  list-style: none;
		  margin: 0;
		  padding: 0;
		}
		#content {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  -webkit-transition: -webkit-transform 0.2s linear;
		  -moz-transition: -moz-transform 0.2s linear;
		  -o-transition: -o-transform 0.2s linear;
		  -ms-transition: -ms-transform 0.2s linear;
		  transition: transform 0.2s linear;
		}
		.top-bar {
		  position: top;/*absolute*/
		  width: 100%;
		  z-index: 5;
		}
		.top-bar label {
		  display: block;
		  width: 100%;
		  position: inherit;
		  padding: 10px 20px;
		  color: #F4F4F4;
		  background: #2d333d;
		  font-size: 1.6em;
		  text-align: left;
		}
		.top-bar label span{
			font-size: 0.9em;
			display: block;
			position:absolute;
			top: 25px; left: 50px;
		}
		#menu-toggle:checked ~ #content {
		  -webkit-backface-visibility: hidden;
		  -webkit-perspective: 1000;
		  -webkit-transform: translate3d(200px,0,0);
		  -moz-transform: translate3d(200px,0,0);
		  -ms-transform: translate3d(200px,0,0);
		  -o-transform: translate3d(200px,0,0);
		  transform: translate3d(200px,0,0);
		}
		#menu-toggle ~ #content {
		  -webkit-transform: translate3d(0,0,0);
		  -moz-transform: translate3d(0,0,0);
		  -ms-transform: translate3d(0,0,0);
		  -o-transform: translate3d(0,0,0);
		  transform: translate3d(0,0,0);
		}
		nav ul li a {
		  color: #F4F4F4;
		  font-size: 1.1em;
		  display: block;
		  padding: 0 5px 0 25px;
		  text-decoration: none;
		  line-height: 2.2em;
		  overflow: hidden;
		  border-bottom: 1px solid #222222;
		}
		nav ul li {border-top: 1px solid #505050;}		
		nav ul li:hover a{color: #fff;cursor: pointer;background: rgba(106, 106, 106, 0.6);}		
		nav ul ul li a {padding: 0 5px 0 45px;margin: 0;} 
		nav ul ul li a:hover {background: rgba(37, 37, 37, 0.9);color: #fff;}
		
}