/* =============================================================================
   NAV
   ========================================================================== */
#header {	
	position:fixed;
	top:0px;
	z-index: 100;
	width: 100%;
	height:92px;
	color: #fff;
	transition: all 0.2s ease;
}
#header-content {	
	position: relative;
	margin:auto;  
	width: 100%;
}
#header.sticky {	
	top:-22px;
}


/* =============================================================================
   LOGO
   ========================================================================== */
#nav-logo {  
	position: absolute;
	z-index:5;
	left:40px;
	top:-2px;
	width:305px;
	transition: all 0.2s ease;
}
#nav-logo img {
	width:100%;
}

#nav-logo.sticky {
	left:60px;
	top:15px;
	width:250px;
}
#nav-logo-desktop, 
#nav-logo-tablet, 
#nav-logo-mobile {  
	display:none;
}

/* =============================================================================
   SNAV HEADER
   ========================================================================== */
#snav-header { 
	position:absolute;
	top:98px;
	right:75px;	
	height:21px;
	width:460px;
	border-top: 1px solid #000;
	background: transparent url(../img/nav/nav_social_pattern.png) repeat top left;
	padding: 0px;
}
#snav-header-corner { 
	position:absolute;
	top:98px;
	right:535px;	
	height:20px;
	width:39px;
	border-top: 1px solid #000;
}

/* NAV SOCIAL */
#socialnav { 
	width:340px;
	color: #fff;
	float: left;
}
#socialnav .icons { 
	display:inline-block;
	float: left;
	font-family: 'Marcellus', Arial, "Helvetica CY", Helvetica, sans-serif;
	text-transform:uppercase;	
	font-size:14px;
	line-height:12px;
	letter-spacing:0.5px;
	text-shadow: 1px 2px 1px #000000;
	filter: dropshadow(color=#000000, offx=1, offy=2);
	padding-right:10px;
}
#socialnav .icons a { 
	color:#fff;
	transition: all 0.3s ease;
}
#socialnav .icons a:hover { 
	color: rgba(255, 255, 255, 0.8);
	text-shadow: -1px 1px 8px #7aff61, 1px -1px 8px #43df26;
}
#socialnav .icons img { 
	float:left;
}
#socialnav .icons span { 
	float:left;
	margin-top:4px;
	margin-left:2px;
}

/* NAV LANGUES */
#langnav { 
	position: relative;
	float: right;
	z-index:10;
	width:116px;
	height:20px;
	cursor: pointer;	
	font-family: 'Marcellus', Arial, "Helvetica CY", Helvetica, sans-serif;
	text-transform:uppercase;	
	font-size:13px;
	font-weight: normal;
	font-style: normal;
	text-shadow: 1px 2px 1px #000000;
	filter: dropshadow(color=#000000, offx=1, offy=2);
	color: #fff;
}
#langnav img { 
	display:block;
	float:left;
	opacity:0.6;
	margin:3px 0px 0px 1px;
}
#langcurrent:hover img, 
#langsnav a:hover img { 
	opacity:1;
}
#langnav span { 
	margin:0;
	padding:0;
	float:left;
	padding:1px 0px 0px 7px;
}
#langnav .icon-sort-down { 
	display:inline-block;
	float: right;
	font-size:19px;
	color: #fff;
	margin:-7px 6px 0px 0px;
}
#langcurrent { 
	overflow: auto;
	padding-left:4px;
}
#langcurrent:hover { 
	color: rgba(255, 255, 255, 0.8);
	text-shadow: -1px 1px 8px #7aff61, 1px -1px 8px #43df26;
}
#langsnav { 
	display: none;
	position: absolute;
	top:20px;
	left:0px; 
	background: transparent url(../img/nav/nav_social_flagselect.png) repeat top left;
	overflow: auto;		
	width: inherit;
	border-top: 1px solid #444;
}
#langsnav a { 
	display: block;
	clear: both;
	height:20px;
	padding-left:5px;
	color: #fff;
	border-bottom: 1px solid #444;
}
#langsnav span { 
	height:20px;	
}
#langsnav a:hover { 
	color: rgba(255, 255, 255, 0.8);
	text-shadow: -1px 1px 8px #7aff61, 1px -1px 8px #43df26;
}   


/* =============================================================================
   NAV
   ========================================================================== */
#nav {
	position: absolute;
	top:0px;
	right:0px;	
}
#nav ul {
	position: relative;
	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;
	font-family: 'windlass', Arial, "Helvetica CY", Helvetica, sans-serif;
	outline: none;
	color: #eee;
	/* text-shadow: 2px 2px 2px rgba(0,0,0,.8); */
	text-shadow: 1px 1px 0 rgb(103, 108, 109), 4px 4px 0 rgba(0, 0, 0, 0.25);
	transition: color 0.3s ease, text-shadow 0.3s ease;
}
#nav li a span {
	color: rgba(255, 255, 255, 0.3);
	position: absolute;
	display: block;
	width: 100%;
	transition: color 0.3s ease, text-shadow 0.3s ease;
}
/* HOVER & CURRENT */
#nav li a:hover span,  
#nav li.current a span {
	color: rgba(255, 255, 255, 0.8);
	text-shadow: -1px 1px 8px #7aff61, 1px -1px 8px #43df26;
}

/* EFFET SOUSLIGNÉ TRAIT SIMPLE
#nav li a span:before {	
	content: "";
	position: absolute;
	width:75%;	
	height:2px;
	bottom:-5px;
	left:15%;
	background-color: rgba(255,255,255,0.8);
	visibility: hidden;
	transform: scaleX(0);
	transition: all 0.3s ease-in-out 0s;
	box-shadow: -1px 1px 8px #7aff61, 1px -1px 8px #43df26;
}
#nav li a span:hover:before {
	visibility: visible;
	transform: scaleX(1);
}
#nav li.current a span:before {
	visibility: visible;
	transform: scaleX(1);
}
*/
/* EFFET SOUSLIGNÉ IMAGE */
#nav li a span:before {	
	content: "";
	position: absolute;
	width:0%;	
	height:17px;
	bottom:-10px;
	left:5%;	
	background: transparent url(../img/nav/nav_over.png) repeat-x top left;
	visibility: hidden;
	transition: all 0.3s ease-in-out 0s;
}
#nav li a span:hover:before {
	visibility: visible;
	width:85%;	
}
#nav li.current a span:before {
	visibility: visible;
	width:85%;	
}

/* COMING NOVEMBER */
#nav-shop-coming {
	position: absolute;	
	top:10px;
	right:30px;
	width:200px;
	height:46px;
}


/* EARLY ACCESS */
#nav li.nav-shop a {
	text-shadow: 1px 1px 0 rgb(0, 0, 0), 4px 4px 0 rgba(0, 0, 0, 0.25);
	transition: all 0.3s ease;
}
#nav li.nav-shop span { 
	color: #ff9a00; 
}
#nav li.nav-shop a:hover span {
	color: rgba(255, 255, 255, 0.8);
	text-shadow: -1px 1px 8px #7aff61, 1px -1px 8px #43df26;
}

/* =============================================================================
   ELÉMENTS VISIBLE UNIQUEMENT POUR LA VERSION MOBILE
   ========================================================================== */
#nav-btn {
  display: none;
}


/* =============================================================================
   NAV MOBILE ICONES SOCIAL
   ========================================================================== */
.nav-social-facebook i {
	background-image: -moz-linear-gradient(top, #5f7cb6, #3b5998);
	background-image: -ms-linear-gradient(top, #5f7cb6, #3b5998);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5f7cb6), to(#3b5998));
	background-image: -webkit-linear-gradient(top, #5f7cb6, #3b5998);
	background-image: -o-linear-gradient(top, #5f7cb6, #3b5998);
	background-image: linear-gradient(top, #5f7cb6, #3b5998);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#466fa9', endColorstr='#466fa9', GradientType=0);
	border-color: #466fa9 #466fa9 #802420;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	*background-color: #466fa9;
	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.nav-social-youtube i {
	background-color: #bd362f;
	background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
	background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: linear-gradient(top, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
	border-color: #bd362f #bd362f #802420;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	*background-color: #bd362f;
	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.nav-social-tumblr i {
	background-color: #304e6c;
	background: rgb(72,118,163); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(72,118,163,1) 1%, rgba(48,78,108,1) 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(72,118,163,1)), color-stop(99%,rgba(48,78,108,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(72,118,163,1) 1%,rgba(48,78,108,1) 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(72,118,163,1) 1%,rgba(48,78,108,1) 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(72,118,163,1) 1%,rgba(48,78,108,1) 99%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(72,118,163,1) 1%,rgba(48,78,108,1) 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4876a3', endColorstr='#304e6c',GradientType=0 ); /* IE6-9 */

}



/* =============================================================================
   NAV DESKTOP
   ========================================================================== */
@media screen and (min-width: 601px) {		
	#header-content {	
		height:115px;   
		max-width:1130px;
		background-image:url('../img/nav/nav.png');
		background-repeat: no-repeat;
		background-position: top center;
	}	
	#nav {
		top:33px;
		width:68%;
		padding-right:1%;
		height:50px;		
		/* border: 2px solid rgba(255, 255, 255, 0.2); */
	}
	#nav ul {	
		width:94%;
		text-align:right;
	}
	#nav li {
		display: inline-block;
		float:left;		
		text-align:left;
		max-height:50px;
		padding-top:10px;
  }
	#nav li a {				
		font-size:26px;
		line-height:26px;
		height:50px;
		text-align:center;
  }	
	#nav li.nav-home {
		display:none;
  }		
	#nav li.nav-social {
		display:none;
  }	
	#nav li.nav-shop {
		background: transparent;
  }	
	#nav-shop-coming {
		display:block;
	}
	#nav-logo-desktop {  
		display:block;
	}
	/* LARGEUR DES RUBRIQUES POUR LE FR */
	#nav li.nav-news.nav-fr {	width:11%; }
	#nav li.nav-game.nav-fr {	width:16%; }
	#nav li.nav-media.nav-fr { width:13%;	}
	#nav li.nav-community.nav-fr { width:28%; }
	#nav li.nav-forum.nav-fr { width:13%; }
	#nav li.nav-shop.nav-fr { width:19%; /* margin-top: -10px; */ }	
	
	/* LARGEUR DES RUBRIQUES POUR LE EN */
	#nav li.nav-news.nav-en {	width:10%; }
	#nav li.nav-game.nav-en {	width:22%; }
	#nav li.nav-media.nav-en { width:12%; }	
	#nav li.nav-community.nav-en { width:25%; }
	#nav li.nav-forum.nav-en { width:13%; }
	#nav li.nav-shop.nav-en { width:18%; /* margin-top: -10px; */}
	
	/* LARGEUR DES RUBRIQUES POUR LE DE */
	#nav li.nav-news.nav-de {	width:10%; }
	#nav li.nav-game.nav-de {	width:20%; }
	#nav li.nav-media.nav-de { width:15%; }	
	#nav li.nav-community.nav-de { width:24%; }
	#nav li.nav-forum.nav-de { width:13%; }
	#nav li.nav-shop.nav-de { width:18%; /* margin-top: -10px; */ }
	
	/* LARGEUR DES RUBRIQUES POUR LE ES */
	#nav li.nav-news.nav-es {	width:16%; }
	#nav li.nav-game.nav-es {	width:17%; }
	#nav li.nav-media.nav-es { width:12%;	}
	#nav li.nav-community.nav-es { width:24%; }
	#nav li.nav-forum.nav-es { width:11%; }
	#nav li.nav-shop.nav-es { width:18%; /* margin-top: -10px; */ }
	
}


/* =============================================================================
   NAV TABLET
   ========================================================================== */
@media screen and (min-width: 601px) and (max-width: 1030px) {
	#header, #header.sticky {	
		height:70px;
		top:0px;
	}
	#header-content {	
		height:70px;
		background-position: center center;
	}
	#nav-logo, #nav-logo.sticky {
		left:5px;
		top:0px;	
		width:190px;
	}
	#snav-header { 		
		right:0px;	
		top:68px;
	}
	#snav-header-corner { 
		right:460px;
		top:68px;
	}
	#nav {
		top:10px;
		width:76%;
		padding-right:0%;		
		text-align:right;
	}
	#nav ul {	
		width:100%;
		text-align:right;
	}
	#nav li.nav-home {
		display:none;
  }
	#nav-shop-coming {
		display:none;
	}	
	#nav-logo-desktop {  
		display:none;
	}
	#nav-logo-tablet {  
		display:block;
	}
}
@media screen and (min-width: 601px) and (max-width: 849px) {
	#nav {
		width:72%;
	}
	#nav li {
		padding-top:12px;
text-align:right;		
  }
	#nav li a {				
		font-size:22px;
		line-height:20px;
  }
}

@media screen and (min-width: 601px) and (max-width: 699px) {
	#nav {
		width:68%;
	}
	#nav li a {				
		font-size:20px;
		line-height:20px;
  }
}


/* =============================================================================
   NAV MOBILE
   ========================================================================== */
@media screen and (max-width: 600px) {
		
	#header, #header.sticky {		
		position:fixed;
		top:0px;
		height:45px;
		background: url(../img/nav/nav_mobile.jpg) no-repeat top left;
		/* border-bottom:1px solid #b81c09; */
		width:100%;
	}	
	#nav {
		width:100%;
		right:0px;
	}
	#nav-btn {
		display: block;
		position:absolute;
		cursor:pointer;
		z-index:2;
		top:0px;
		right:0px;
		width:60%;
		height:45px;
	}
	#nav-btn span {				
		background: url(../img/nav/nav_btn.jpg) no-repeat top left;
		display: inline-block;
		position: relative;
		float: right;
		width:90px;
		height:32px;
		margin: 6px;
		padding: 6px;
		font-family: 'optimusprinceps', Arial, "Helvetica CY", Helvetica, sans-serif;	
		font-weight:bold;
		font-size:19px;
		line-height:19px;
		vertical-align: top;
		text-align:center;			
		color:#000;
	}
	#nav-btn #nav-icon {
		font-size: 16px;
		line-height:18px;
	}
	
	#nav-logo, #nav-logo.sticky {
		position:absolute;
		z-index:1;
		top:-3px;
		left:8px;
		display:block;
		width:160px;
	}
	
	#nav-left, #nav-right {
		display:none;
	}
	#nav ul {
		width:100%;
		background:none; 
		position: absolute;		
		top:0px;
		left:0px;
		min-height:50px;
		padding:0;
		margin:0;
	}
	#nav li {
		display: none; /* hide all <li> items */
		width:auto;
		margin: 0;
		min-height:0px;		
	}
	
	#snav-header, 
	#snav-header-corner	{ 
		display: none;
	}
	
	#nav-shop-coming {
		display:none;
	}
	#nav-logo-mobile {  
		display:block;
	}
	
	#nav.mobile ul {
		background-image:url(../img/nav/nav_mobile.jpg);
		background-repeat: no-repeat;
		background-position:0px 0px;
		padding-bottom:20px;
		padding-top:45px;
	}	
	#nav.mobile ul li {
		display: block;
		width:auto;
		height:40px;
	}
	#nav.mobile li a {		
		width:100%;		
		display: block;
		text-align: left;
		padding:8px 5px 5px 40px;
		font-size: 22px;
		line-height:30px;
		color: #fff;
	}
	#nav.mobile ul li.current {
		display: block;
		/*
		background-image:url('../img/nav/current_mobile.png');
		background-repeat: repeat-x;
		background-position:0px 7px;	
		*/		
	}	
	#nav.mobile ul li.current a {
		color: #fff;
		background-image:url('../img/nav/current_mobile_icone.png');
		background-repeat:no-repeat;
		background-position: 4px 7px;
	}
	#nav li a span:before {	
		display:none;	
	}
	
	#nav.mobile ul li.nav-social {			
		margin-top:10px;
		height:45px;
	}	
	#nav.mobile ul li.nav-social a {			
		color:#fff;
		float:left;
		display:inline-block;		
		border-bottom:none;
		width:35px;
		height:35px;
		padding-right:15px;
	}	
	#nav.mobile ul li.nav-social a.nav-social-facebook i, 
	#nav.mobile ul li.nav-social a.nav-social-tumblr i, 
	#nav.mobile ul li.nav-social a.nav-social-youtube i {
		font-size:21px;
		width:35px;
		height:35px;	
		padding: 2px 6px 0px 6px;
	}
	#nav.mobile ul li.nav-social a.nav-social-youtube i {
		font-size:23px;	
	}

}

@media screen and (max-width: 520px) {		
	#nav-logo, #nav-logo.sticky {
		width:130px;
	}
	#nav-logo-tablet {  
		display:block;
	}
	#nav-logo-mobile {  
		display:none;
	}
}