/*//////////////  NAVIGATION STYLING   ////////////////////*/ 
/*#sidebar:hover
 {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}*/


.main_logo 
{
	width : 70%;
	float:left;
	margin-left:15%;
}


/*//////  FLAGS style  /////////*/
#flags
{	
	max-width : 100%;
	float: right;
	/*margin :2%;*/
}	
#flags > a , #flags > span
{		
    margin : 2% 0;
	float : right;
	display : inline-block;
}
#flags img
{	
	max-width :55%;	
}

/*////  SOCIAL LINKS ///////////////*/
#social_links{	
	text-align :center;
	float:left;
	margin-top :5%;
	width:100%;
}	
#social_links .elem{
	display: inline-block;
	margin: 0 5%;
	width : 10%;	
}

#social_links .elem img{
	box-shadow: 2px 2px 4px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.5); 
	-moz-box-shadow:  2px 2px 4px rgba(0,0,0,0.5); 
	-o-box-shadow: 2px 2px 4px rgba(0,0,0,0.5);   
}
/*/////////// NAVIGATION  ///// */
#nav-wrap 
{	
	float :left;
	width : 100%;
}
/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */	
}

#nav 
{
	display : block;	
}

#nav li {  
	margin:0 0 5% 0;
	list-style: none;	
}

/* nav link */
#nav a {	
	display: block;
	padding : 2%;	 
    background:url(../images/BackgroundTopBg.jpg) ;
    border-radius: 4px; 
	box-shadow: 4px 4px 4px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.5); 
	-moz-box-shadow:  4px 4px 4px rgba(0,0,0,0.5); 
	-o-box-shadow: 4px 4px 4px rgba(0,0,0,0.5);    
	
/*  border-top: 1px solid rgba(255, 255, 255, 0.15);
 border-bottom: 1px solid rgba(0, 0, 0, 0.2);*/
 
	/*-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	 color : #eee;*/
	/*
	color: #eeeeee;
	background: #555555;
	-webkit-border-radius: 2px; 
	-moz-border-radius: 2px; 
	-o-border-radius: 2px; 
	border-radius: 2px; 
	border-radius : 3px*/
}
#nav a:hover {
	background:  #59554d;	
}
#nav  a.current {
	background:  #59554d;	
}

/* nav dropdown */
/*
#nav ul {	
	position: absolute;		
	display: none; /* hide dropdown 
}
#nav ul li 
{
	float: none;
	
}
#nav li:hover > ul 
{
	display: block; /* show dropdown on hover 
	z-index : 1000000;
}*/
.enTete_menu
{
	display:none;
}


/*/////////BREAK POINT : mode horizontal  ratio > 1   //////////////////*/
/*/////////////////////////////////////////////////////////////*/

@media screen and (min-aspect-ratio: 1/1) {
	/* ensure #nav is visible on desktop version */
	#nav
	{
		display: block !important;
	}
	#nav > li
	{
		display: block !important;
	}	
	#sidebar {
	  position: fixed; 
	  float:left;  
	  left:5%;
	  width: 20%;	  
	  z-index:99999;
	  display : block;  
	 /* filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
	  opacity: 0.85;
	  -webkit-transition: opacity 0.2s;
	  -moz-transition: opacity 0.2s;
	  -ms-transition: opacity 0.2s;
	  -o-transition: opacity 0.2s;
	  transition: opacity 0.2s;*/
	  /*height : 95%;*/
	  /*overflow-y:auto;
	  overflow-x:visible; 
	  -webkit-overflow-scrolling: touch;*/
	}
}

/*///////  SCREEN MODE : SMALL   + RATIO >1   ///////////*/
@media only screen and (min-aspect-ratio: 1/1) and (max-width: 700px) { 	
	
	#sidebar {	
		 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	  opacity: 1;
		} 
		 
	#nav li {  
		margin:8% 0;		
		/*line-height :115%;*/
	}
	.main_logo
	{	
		width : 65%;		
		margin-left :0%;		
	}

	#flags
	{	
		max-width:30%;	
		margin-top : 3%;
	}

	#flags > a , #flags >span
	{	
			display : block;
	}
	
	#social_links
	{
			margin-top :3%;		
	}
	#social_links .elem
	{		
			width : 8%;		
	}
}

/*/////////BREAK POINT : mode vertical  ratio < 1   //////////////////*/
/*/////////////////////////////////////////////////////////////*/
@media only screen and (max-aspect-ratio: 1/1) {

	#sidebar 
	{
		/*filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity: 1;*/
		float:left;
		position: relative;		
		width: 100%;		
		margin:0;
		z-index:99999;
	}
	.enTete_menu
	{
		display:block;
	}
	
	#social_links
	{
		margin-top :3%;		
	}
	#social_links .elem
	{		
		width :6%;		
	}	
	
/* BACK BOUTON */
	#back-btn{
		display:block;	
		cursor: pointer;
		position :fixed ;
		z-index : 999;
		left : -4px;
		top : 3%;
		width : 50px;
		height : 45px;
		background:url(../images/prev_icon.png) ;		
		border-radius: 4px;
		/* border-bottom-right-radius:4px;
		border-top-right-radius:4px;*/
		 /* background-repeat:repeat-x repeat-y;	*/
		 box-shadow: 4px 4px 4px rgba(0,0,0,0.5); 
		 -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.5); 
		 -moz-box-shadow:  4px 4px 4px rgba(0,0,0,0.5); 
		 -o-box-shadow: 4px 4px 4px rgba(0,0,0,0.5);    
		 /*border-top: 1px solid rgba(255, 255, 255, 0.15);
		 border-bottom: 1px solid rgba(0, 0, 0, 0.4);*/		
		 cursor: pointer;		
	}

	.main_logo
	{	
		width : 25%;		
		margin-left : 37%;		
		display: inline-block;
	}	
	#flags
	{	
		max-width:15%;
		margin-right:15%;
		margin-top : 3%;
	}
	#flags > a , #flags >span
	{	
		display : block;
		clear:both;
	}	 
/* nav-wrap */
	#nav-wrap 
	{
		/*position: relative;*/
		float :left;
		width : 100%;
		margin :0;		
	}
	
	#close_btn
	{
		position :absolute;
		background:url(../images/close.png) ;	
		width : 27px;
		height :27px;
		top :3%;
		right:3%;
		cursor: pointer;
	}
	/* menu icon */
	#menu-icon 
	{	
		display:block;
		position :fixed ;
		z-index : 999;
		right : -4px;
		top : 3%;
		width : 50px;
		height : 45px;
		background:url(../images/menu-icon.png) ;		
		 border-bottom-left-radius:4px;
		border-top-left-radius:4px;
	 /* background-repeat:repeat-x repeat-y;	*/
		box-shadow: 4px 4px 4px rgba(0,0,0,0.5); 
		-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.5); 
		-moz-box-shadow:  4px 4px 4px rgba(0,0,0,0.5); 
		-o-box-shadow: 4px 4px 4px rgba(0,0,0,0.5);    
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		border-bottom: 1px solid rgba(0, 0, 0, 0.4);		
		cursor: pointer;		
	}
	
	#menu-icon:hover 
	{
		background-color: #888888;
	}
	#menu-icon.active 
	{
		color : #eeeeee;
		background-color: #555555;
	}	
	/* main nav */
	#nav {
		/*clear: both;*/
		position: fixed;
		text-align :center;		
		bottom : 0;
		width : 100%;		
		z-index: 10000;
		/*margin : 0 5% ;	*/	
		box-shadow: 8px -8px 4px rgba(0,0,0,0.5); 
	   -webkit-box-shadow:  8px -8px 4px rgba(0,0,0,0.5);  
	   -moz-box-shadow:   8px -8px 4px rgba(0,0,0,0.5); 
	   -o-box-shadow: 8px -8px 4px rgba(0,0,0,0.5);  
		background:url(../images/bodyback2.png) ;
		background-repeat:repeat-x repeat-y;		
		display: none;	
		padding : 5% 0;
		/* visibility will be toggled with jquery */		
		/*border-top-right-radius:8px;
		border-top-left-radius:8px;		*/
		/*border-style: dashed ; 
		border-collapse: separate;
		border-color: #eee;		
		border-width:2px;*/
	}		
	#nav li {
						
		margin :2% 0;
		width:100%;
		display: inline-block;
		white-space: nowrap;		
	}
	#nav  a {			
		
		background: none;	
		padding: 1% 2%;	
		display : inline-block;
		border-style: dashed ; 
	/*	border-style: solid; */
		border-collapse: separate;
		border-color: #eee;		
		border-width:1px;		
		box-shadow: 0 0 0 rgba(0,0,0,0.5); 		
		-webkit-box-shadow:0 0 0 rgba(0,0,0,0.5); 
		-moz-box-shadow: 0 0 0 rgba(0,0,0,0.5); 
		-o-box-shadow:0 0 0 rgba(0,0,0,0.5); 
		font-size:1.2em;
	}		
	}
	
}