/* =============================================================================
   HEADER
   ========================================================================== */
#header {	
	position:fixed;
	top:0px;
	z-index: 100;
	width: 100%;
	color: #fff;
	/* transition: all 0.2s ease; */
}
#header-content {	
	position: relative;
	margin:auto;  
	width: 100%;
	display:none;
}

/* =============================================================================
   NAV
   ========================================================================== */
#nav {
	position: absolute;
	font-family: 'fritzquadrata', Arial, "Helvetica CY", Helvetica, sans-serif;
	text-transform: uppercase;
	background-color: #000;
  	background-image:url(../img/nav/nav_bg.png);
  	background-position: 0 -5px;
    background-size: 100% 135%;
}
#nav ul {
	position: relative;
	z-index:2;
	float:left;
	display:inline-block;
}
#nav ul {	
	margin:0;
	padding:0;
}
#nav ul:before, #nav ul:after {
  content: "";
  display: table;
}
#nav ul:after {
  clear: both;
}
#nav li {
	padding: 0;
	list-style: none;
	display: inline-block;
}
#nav li a {
	position:relative;
	display: block;
	color: #fff;
	text-shadow: 1px 2px 2px rgba(0,0,0,.8);
}

/* =============================================================================
   NAV LOGO
   ========================================================================== */
#nav-logo {  
	display:none;
	position: absolute;
	z-index:22;
	left:-50px;
	top:-10px;
	width:400px;
	transition: all 0.2s ease;
}
#nav-logo img { 
	width:100%;
}

/* =============================================================================
   NAV LEFT & RIGHT
   ========================================================================== */
.nav-left {  
	position:absolute;
	z-index:1;
	width:62px;
	height:42px;
	top:0px;
	left:0px;
	/*background: transparent url(../img/nav/nav_left.png) top left no-repeat;*/
}
.nav-right {  
	position:absolute;
	z-index:1;
	width:62px;
	height:42px;
	top:0px;
	right:0px;
	/*background: transparent url(../img/nav/nav_right.png) top right no-repeat;*/
}

/* =============================================================================
   OVERLAY ELEMENTS
   ========================================================================== */
#overlay-open {	
	position:absolute;
	cursor:pointer;
	z-index:2;
	top:0px;
	right:0px;
	width:100%;
	height:45px;
	width:100%;
	/*background-image:url(../img/nav/nav_bg.png);*/
	background: #000 url(../img/nav/nav_bg.png) top center repeat-x;	
}

#overlay-open span {				
	display: inline-block;
	position: relative;
	float: right;
	z-index:3;
	width:94px;	
	height:32px;
	margin: 14px 2px 6px 0px;
	padding: 6px;
	font-size:14px;
	line-height:14px;
	letter-spacing:1px;
	text-align:center;		
	text-transform: uppercase;
	text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px black;
		filter:
			progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=0,strength=2)
			progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=90,strength=2)
			progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=180,strength=2)
			progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=260,strength=2);
	font-family: 'fritzquadrata', Arial, "Helvetica CY", Helvetica, sans-serif;
	/* background: rgba(0,0,0,.5); */	
	color:#e6e6e6;
}
#overlay-open #nav-icon {
	font-size: 15px;
	line-height:20px;
}	
#overlay-logo { 
	position: relative;
	float:left;
	width:160px;
	z-index:3;
	margin:-5px 0px 0px -5px;
}
#overlay-logo img { 
	width:100%;
}
#overlay-close {
	display:none;
	width: 40px;
	height: 40px;
	position: absolute;
	right: 20px;
	top: 20px;
	overflow: hidden;
	border: none;
	background: url(../img/nav/overlay-close.png) no-repeat center center;
	text-indent: 200%;
	color: transparent;
	outline: none;
	z-index: 100;
	cursor:pointer;
}



/* =============================================================================
   NAV LANGUES
   ========================================================================== */
#nav-lang { 
	position: relative;
	width:30px;
	height:33px;
	cursor: pointer;	
	color: #fff;
	z-index:13;
}
#nav-lang-current { 
	float: left;
	z-index:3;
}
#nav-lang-snav { 
	position: relative;
	overflow:hidden;
	float: left;
	z-index:1;
	width:40px;	
	height:0px;
	margin-top:10px;
	transition:all 0.3s ease;	
}
#nav-lang-snav.open { 
	height:105px;
}
#nav-lang-snav a { 
	position:relative;
	z-index:1;
	display:inline-block;
	float: left;	
	margin:0;
	padding:0; 
	margin-bottom:5px;	
}
 


/* =============================================================================
   NAV STICKY
   ========================================================================== */
#header.sticky {	
	top:-60px;
}
#header.sticky #nav-logo {
	left:-5px;
	width:160px;
	top:55px;
}
#header.sticky #nav {
	width:100%;
	left:0px;
	padding-left:160px;
}

/* =============================================================================
   NAV DESKTOP
   ========================================================================== */

@media screen and (min-width: 781px) {		
	#header-content {
		display:block;
		height:100px; 
		max-width:1200px;
	}	
	/* Overlay boutons */
	#overlay-open {
		display:none;
	}
	#overlay-close {
		display:none;
	}	
	/* Logo */
	#nav-logo {  
		display:block;
	}
	/* Nav */
	#nav {
		bottom:-15px;
		width:95%;
		height:42px;		
		text-align:right;
		left:5%;
		padding-left:23%;
		padding-top:5px;		
	}
	#nav ul {	
		width:100%;
	}
	#nav li {
		display: inline-block;
		float:left;		
		text-align:center;
		height:30px;
		border-right:1px solid rgba(255,255,255,0.5);
		transition:all 0.2s ease;
	}
	#nav li:last-child {
		border-right:none;
	}
	#nav li a {				
		font-size:16px;
		line-height:30px;
		height:100%;
		text-align:center;
		font-weight: normal;
		font-style: normal;
		letter-spacing:1px;
		outline: none;		
		transition:all 0.2s ease;
		text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px black;
		filter:
			progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=0,strength=2)
			progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=90,strength=2)
			progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=180,strength=2)
			progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=260,strength=2);
  }		
	#nav li a span {
		position: absolute;
		display: block;
		width: 100%;
	}
	
	/* HOVER & CURRENT */
	#nav li:hover a,
	#nav li.current a {		
		color:#fff;
	}
	
	
	/* EFFET SOUSLIGNÉ TRAIT SIMPLE */
	#nav li a:before {	
		content: "";
		position: absolute;
		width:70%;	
		height:1px;
		left:15%;
		bottom:4px;
		background-color:#fff;
		visibility: hidden;
		transform: scaleX(0);
		transition: all 0.3s ease-in-out 0s;
		
	}
	#nav li:hover a:before, 
	#nav li.current a:before {
		visibility: visible;
		transform: scaleX(1);
	}	
			
		
	/* RUBRIQUES */
	#nav li#nav-home {
		display:none;
	}
			
	/* LARGEUR DES RUBRIQUES POUR LE FR */
	#nav li#nav-tips.nav-fr {	width:12%; }
	#nav li#nav-game-modes.nav-fr { width:13%; }
	#nav li#nav-faction.nav-fr {	width:13%; }
	#nav li#nav-combat.nav-fr { width:12%;	}
	#nav li#nav-fleet.nav-fr { width:22%; }
	#nav li#nav-gothic-war.nav-fr { width:15%; }
	#nav li#nav-glossary.nav-fr { width:12%; }
	
	/* LARGEUR DES RUBRIQUES POUR LE EN */
	#nav li#nav-tips.nav-en {	width:12%; }
	#nav li#nav-game-modes.nav-en { width:13%; }
	#nav li#nav-faction.nav-en {	width:13%; }
	#nav li#nav-combat.nav-en { width:12%;	}
	#nav li#nav-fleet.nav-en { width:22%; }
	#nav li#nav-gothic-war.nav-en { width:15%; }
	#nav li#nav-glossary.nav-en { width:12%; }
	
	/* LARGEUR DES RUBRIQUES POUR LE DE */
	#nav li#nav-tips.nav-de {	width:12%; }
	#nav li#nav-game-modes.nav-de { width:13%; }
	#nav li#nav-faction.nav-de {	width:12%; }
	#nav li#nav-combat.nav-de { width:19%;	}
	#nav li#nav-fleet.nav-de { width:16%; }
	#nav li#nav-gothic-war.nav-de { width:15%; }
	#nav li#nav-glossary.nav-de { width:12%; }

	/* LARGEUR DES RUBRIQUES POUR LE ES */
	#nav li#nav-tips.nav-es {	width:12%; }
	#nav li#nav-game-modes.nav-es { width:13%; }
	#nav li#nav-faction.nav-es {	width:13%; }
	#nav li#nav-combat.nav-es { width:12%;	}
	#nav li#nav-fleet.nav-es { width:22%; }
	#nav li#nav-gothic-war.nav-es { width:15%; }
	#nav li#nav-glossary.nav-es { width:12%; }
	
	/* LARGEUR DES RUBRIQUES POUR LE IT */
	#nav li#nav-tips.nav-it {	width:12%; }
	#nav li#nav-game-modes.nav-it { width:13%; }
	#nav li#nav-faction.nav-it {	width:13%; }
	#nav li#nav-combat.nav-it { width:12%;	}
	#nav li#nav-fleet.nav-it { width:22%; }
	#nav li#nav-gothic-war.nav-it { width:15%; }
	#nav li#nav-glossary.nav-it { width:12%; }
	
	/* LARGEUR DES RUBRIQUES POUR LE PL */
	#nav li#nav-tips.nav-pl {	width:12%; }
	#nav li#nav-game-modes.nav-pl { width:13%; }
	#nav li#nav-faction.nav-pl {	width:13%; }
	#nav li#nav-combat.nav-pl { width:12%;	}
	#nav li#nav-fleet.nav-pl { width:22%; }
	#nav li#nav-gothic-war.nav-pl { width:15%; }
	#nav li#nav-glossary.nav-pl { width:12%; }

	/* LARGEUR DES RUBRIQUES POUR LE KR */
	#nav li#nav-tips.nav-kr {	width:12%; }
	#nav li#nav-game-modes.nav-kr { width:13%; }
	#nav li#nav-faction.nav-kr {	width:13%; }
	#nav li#nav-combat.nav-kr { width:12%;	}
	#nav li#nav-fleet.nav-kr { width:22%; }
	#nav li#nav-gothic-war.nav-kr { width:15%; }
	#nav li#nav-glossary.nav-kr { width:12%; }

	/* LARGEUR DES RUBRIQUES POUR LE JP */
	#nav li#nav-tips.nav-jp {	width:12%; }
	#nav li#nav-game-modes.nav-jp { width:13%; }
	#nav li#nav-faction.nav-jp {	width:13%; }
	#nav li#nav-combat.nav-jp { width:12%;	}
	#nav li#nav-fleet.nav-jp { width:22%; }
	#nav li#nav-gothic-war.nav-jp { width:15%; }
	#nav li#nav-glossary.nav-jp { width:12%; }
		
}


/* =============================================================================
   NAV TABLET
   ========================================================================== */
	 
@media screen and (min-width: 701px) and (max-width: 999px) {
	#header, #header.sticky {	
		position:fixed;
		top:0px;
		height:45px;
	}	
	#header-content {
		width:100%;
		height:45px;
	}	
	#nav-logo, 
	#header.sticky #nav-logo {
		left:-5px;
		width:160px;
		top:-5px;
	}	
	#nav {
		width:100%;
		top:0px;
		left:0px;
		padding-left:160px;
	}
	#nav ul {	
		width:100%;
		text-align:right;
	}
}



/* =============================================================================
   NAV MOBILE
   ========================================================================== */
@media screen and (min-width: 781px) and (max-width: 1080px) {
   #nav li a{
		font-size: 12px;
	}
}
@media screen and (max-width: 780px) {

	#header, #header.sticky {		
		position:fixed;
		top:0px;	
		height:auto;
		background:#fff;
	}	
	#header-content .nav-left, 
	#header-content .nav-right {
		display:none;
	}
	/* Overlay style */
	#header-content.overlay {
		display:none;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index:5;
		/*background: rgba(25,50,105,0.85);*/
		background:url('../img/pattern/pattern_bluelight.gif') repeat;
	}
	
	/* Overlay boutons */
	#overlay-open {
		display:block;
	}
	#overlay-close {
		display:none;
	}
	/* Effects */
	#header-content.overlay-scale {
		visibility: hidden;
		opacity: 0;
		transform: scale(0.9);
		transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	}
	#header-content.overlay-scale.open {
		visibility: visible;
		opacity: 1;
		transform: scale(1);	
		transition: transform 0.4s, opacity 0.4s;
	}
	#header-content.overlay-scale.open #overlay-close {
		display:block;
	}	
	#nav-logo, #header.sticky #nav-logo {		
		display:none;
	}
	/* Nav */
	#nav {
		width:100%;
		height:100%;
		padding-top:0;
		padding-left:0;
		background:none;		
		text-align:center;
		transform-style: preserve-3d;
  }
	#nav ul {
		width:100%;
		list-style: none;
		padding: 0;
		margin: 0 auto;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}
	#nav li {
    display: inline-block;
		float:left;		
		text-align:center;
		width:100%;
		height:40px;		
  }	
	#nav li a {
		font-size:20px;
		line-height:40px;
		letter-spacing:1px;
		text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px black;
  }
	#nav li.current {
		background:#eee;
	}
	#nav li.current a {
		color:#000;
		text-shadow: 0px 0px 0px black, 0 0 0px black, 0 0 0px black;
  }
	#nav li#nav-home {
		display:blok;
	}	
	
}