/*
http://goetter.fr/nav/
Auteur :<a href="http://goetter.fr/">Raphaël Goetter</a>, Alsacréations
*/

/* Responsive Navigation styles begin here */
button#toggle-nav:hover{ border:none; outline:none;}
@media (max-width:991px){
	[id=menu_bottom] + *{ position:relative; }
	/* Theming opened nav */	
	[id=menu_bottom] ul{ margin:0; padding:0; list-style:none;
	/* translate with hardware acceleration */
	-webkit-transform:translateZ(0); 
	-ms-transform:translateZ(0);
	transform:translateZ(0);
	-webkit-transition:max-height .4s;
	transition:max-height .4s;}
	[id=menu_bottom] a{ display:block; padding:1.2rem 0; text-decoration:none; margin-bottom:2px; }
	/* Theming closed nav */
	[id=menu_bottom].is-closed ul{ max-height:0; overflow:hidden; }
	/* Global styling nav button */	
	[id="toggle-nav"]{ position:relative; top:0; right:0; z-index:1; height:35px; width:100%; background-color:transparent; padding:0; outline:0; cursor:pointer; border:none; text-align:left; border-radius:0; font-size:1em;}
	/*  Removing Firefox's dotted outline on button */	
	[id="toggle-nav"]::-moz-focus-inner{ border:0; }
	[id="toggle-nav"]::after{ font-family:FontAwesome; font-size:20px; display:block; content:"\f055"; position:absolute; top:7px; right:15px; }
	/*[id="toggle-nav"]::before{ top:40%; right:15%; bottom:40%; left:15%; }*/
	/* Hide alternate text except from screen readers */
	.visually-hidden{ /*position:absolute !important;*/ /*clip:rect(1px, 1px, 1px, 1px);*//* overflow:hidden;*/ /*height:1px; width:1px;*/ padding-left:15px;}
	
	#menu_bottom ul{ margin:0; padding:0 15px; list-style-type:none; text-align:left; }
	#menu_bottom li{ display:inline; padding:5px 0; margin:0; position:relative; }
	#menu_bottom li a{ text-decoration:none; padding:5px 0; margin:0; }
	#menu_bottom ul li ul{ display:none; position:relative; left:0; text-align:left; width:150px; top:28px; z-index:2; }
	#menu_bottom ul li:hover ul{ display:block; }
	#menu_bottom li:hover ul li{ display:block; width:100%; padding:0; }
	#menu_bottom li:hover ul li a{ display:block; padding:5px 10px; }
}

@media (min-width:992px){
	#menu_bottom ul{ margin:0; padding:10px 0; list-style-type:none; text-align:center; }
	#menu_bottom li{ display:inline-block; padding:0; margin:0; position:relative; }
	#menu_bottom li a{ text-decoration:none; padding:0 5px; margin:0; }
	#menu_bottom ul li ul{ display:none; position:absolute; left:0; text-align:left; width:150px; top:28px; z-index:2; }
	#menu_bottom ul li:hover ul{ display:block; }
	#menu_bottom li:hover ul li{ display:block; width:100%; padding:0; }
	#menu_bottom li:hover ul li a{ display:block; padding:5px 10px; }
}