/* SMARTPHONES */
@media only screen and (min-width: 320px) {
	a#menu-toggle{
		display: block;
		width: 50%;
		margin: 1% 5%;
		text-align: left;
		text-transform: uppercase;
		padding: 5px 0 5px 40%;
		height: 30px;
		line-height: 30px;
		border-radius: 3px;
		text-decoration: none;
		background: #cc0000  url('img/menu_blanc.png') no-repeat 38% 4px;
		box-shadow: 0 3px 2px #ccc;
		font-family: 'Exo 2', sans-serif;
		color:#fff
	}
	#nav{
		padding:0;
		list-style-type: none;
		width: 90%;
		margin: 0 5% 1% 5%;
		display:none;
	}
	#nav > li > ul{
		margin: 0;
		padding: 0;
		list-style-type: none;
		width: 100%;
	}
	#nav > li{
		position:relative;
		margin: 1% 0; 
		background:#cc0000;
		
	}
	#nav li a{
		display: block;
		padding: 1% 0;
		text-align: center;
		text-decoration: none;
		border-radius: 3px;
		box-shadow: 0 3px 2px #ccc;
		font-size: 1.2em; 
		color:#fff
		
	}
	
	#nav > li > ul li a{
	background: #ded7d3 none repeat scroll 0 0;
    border-radius: 0 0 3px 3px;
    border-top: 1px solid #eee;
    color: #72b100;
    font-size: 13px;
	}
	
	#nav li:hover a {color:#fff}
	#nav li:hover li a {color: #fff;}
	#nav li:hover li a:hover   {color: #fff; }


	#nav li a:hover, a#menu-toggle:hover {
		color:#fff !important;
	}

	#nav li  span:hover, li.selected a span {
		color:#fff !important;
	}
	
}

/* TABLETTES */
@media only screen and (min-width: 768px) {

	a#menu-toggle{
		width: 38%;
		padding: 5px 0 5px 32%;
		margin: 1% 15%;	
	}
	#nav{
		width: 70%;
		margin: 0 15% 1% 15%;
	}
}

/* ORDINATEURS */
@media only screen and (min-width: 1024px) {
	a#menu-toggle{
		display: none;	
	}
	#nav, #nav ul{
		margin:0;
		padding:0;
		list-style-type:none
	}
	
	#nav{ 
	     display: block;
    float: left;
    height: 46px;
    left: 344px;
    position: absolute;
    top: 151px;
    width: 678px;
	}
	
	#nav > li{
		position:relative;
		float:left;
		background:none; 
		margin:0;
		height:46px;
	}
	
	#nav ul{
		position:absolute;
		display:none
	}
	
	#nav > li > ul{
		top:100%;
		left:-25%; 
		width:150%;
		z-index:1000;
	}
	
	#nav > li > ul > li > ul{
		top:0;
		left:100%;
		 width: 100%;
	}
	
	#nav ul li{
		padding-top:0
	}
	
	
	
	
	#nav li span{
		 display: block;
    left: 0;
	font-weight:normal; 
	font-size:12px; 
    position: absolute;
    top:20px;
    width: 100%;
	font-family: 'Exo 2', sans-serif;
		
	}
	
	
	
	#nav li a{
		color:#fff;
		display:block;
		line-height:12px;
		text-align:center; 
		text-decoration:none;
		width:100px;
		font-weight:normal; 
		height:46px;
		border-radius: 0;
		box-shadow: none; 
		text-transform:uppercase;
		position:relative;
		font-family: 'Exo 2', sans-serif;}
		
#nav > li.nav1.first:hover, #nav > li.nav1.first.selected a{background:url(../../themes/default_3_columns/img/roll_05.png) no-repeat center top; color:#fff;}

#nav > li.nav10:hover, #nav > li.nav10.selected a{ background:url(../../themes/default_3_columns/img/roll_05.png) no-repeat center top;color:#fff;}

#nav > li.nav2:hover, #nav > li.nav2.selected a{ background:url(../../themes/default_3_columns/img/roll_05.png) no-repeat center top;color:#fff;}

#nav > li.nav11:hover, #nav > li.nav11.selected a{ background:url(../../themes/default_3_columns/img/roll_05.png) no-repeat center top;color:#fff;} 


#nav > li.nav12:hover, #nav > li.nav12.selected a{ background:url(../../themes/default_3_columns/img/roll_05.png) no-repeat center top;color:#fff;}

#nav > li.nav4:hover, #nav > li.nav4.selected a{ background:url(../../themes/default_3_columns/img/roll_05.png) no-repeat center top;color:#fff; }

#nav > li.nav3:hover, #nav > li.nav3.selected a{ background:url(../../themes/default_3_columns/img/roll_05.png) no-repeat center top;color:#fff; }

 #nav > li.nav1.first {width:106px;}
 #nav > li.nav1.first a{width:106px;}
 
 
 #nav > li.nav10{width:96px;}
 #nav > li.nav10 a{width:96px;}
 
  #nav > li.nav2 {width:114px;}
 #nav > li.nav2 a{width:114px;}
 
   #nav > li.nav11 {width:99px;}
 #nav > li.nav11 a{width:99px;}
 
  #nav > li.nav12 {width:99px;}
 #nav > li.nav12 a{width:99px;}
 
 #nav > li.nav3 {width:139px;}
#nav > li.nav3  a{width:126px;}
 
  #nav ul li{background-color:#833d25 !important; height:30px!important; width:100%;  border-top: 1px solid #fff; text-align:center !important;}

#nav ul li a{ height:31px !important; margin-top:0px !important; line-height:31px; padding-top:0px !important; text-align:center !important; width:100% !important; font-size:12px; background:none !important;}

#nav ul li a:hover{ height:31px !important; width:100%; font-size:12px;} 
	
	#nav li:hover > ul{
		display:block
	}
	#nav > li > ul li a{
		border-radius: 0;
		border: 0;
	}
	
	/* pour fixer le menu lorsqu'on scrolle */
	/*
	#nav.fixed{
		position: fixed;
		top:0;
		left:0;
		z-index: 1000;	
		width:100%;
		background: rgba(196,196,196,0.9);
		margin:0;
		padding:10px;
		box-shadow: 0 0 5px #333;
		-moz-transition: box-shadow 0.8s, background 0.5s;
		-webkit-transition: box-shadow 0.8s, background 0.5s;
		-o-transition: box-shadow 0.8s, background 0.5s;
		-ms-transition: box-shadow 0.8s, background 0.5s;
		transition: box-shadow 0.8s, background 0.5s;
	}
	*/

}


/* thème smartphone (osbolète) */

.smartphone #nav > li{
	float:none;
}

.smartphone #nav{
	width: auto;
	float: right;
}

.smartphone .smartli {
	margin: 0;
}

/* ORDINATEURS */
@media only screen and (min-width:1170px) {
	
	#nav{ 
	     position:absolute; 
	    top:151px; 
	    left:444px; 
		float:left;
		width:912px;
		display:block; 
		height:46px;
	}
	}


	@media only screen and (min-width:1366px) {
	
	#nav{ 
	     position:absolute; 
	    top:151px; 
	    left:auto; 
	    right: 0;
		float:left;
		width:810px;
		display:block; 
		height:46px;
	}
	}