/* =============================================================================
   CONTENT
   ========================================================================== */
#home {
  position:relative;
	float:left;	
	width: 100%;
	height:auto;
	z-index:3;
	margin-top:10px;
	padding:0px 0px 20px 10px; 	
  /* padding: top right bottom left; */
}

/* =============================================================================
   BLOCS
   ========================================================================== */
#home .normal-content {display:block;}
#home .mobile-content {display:none;}

#home .bloc {
	position: relative;
	float:left;
	display: inline-block;
	width: 33%;
	padding: 0px 1.2%;
}
#home .bloc_content {
	width: 100%;
	height: 100%;
	position: relative;
}
#home .bloc-left {	
	position: absolute;
	top:9px;
	left:-8px;
	display:none;
}
#home .bloc-texte {
	position:absolute;
	z-index:0;
	right: 8px;
	width:100%;
	font-family: 'marcellus', Arial, "Helvetica CY", Helvetica, sans-serif;	
	text-transform:uppercase;
	text-align: right;
	padding: 10px 10px 10px 5px;
	background: -moz-linear-gradient(left,  rgba(0,0,0,0) 10%, rgba(0,0,0,0.67) 35%, rgba(0,0,0,0.7) 36%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(10%,rgba(0,0,0,0)), color-stop(35%,rgba(0,0,0,0.67)), color-stop(36%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 10%,rgba(0,0,0,0.67) 35%,rgba(0,0,0,0.7) 36%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(0,0,0,0) 10%,rgba(0,0,0,0.67) 35%,rgba(0,0,0,0.7) 36%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(0,0,0,0) 10%,rgba(0,0,0,0.67) 35%,rgba(0,0,0,0.7) 36%); /* IE10+ */
	background: linear-gradient(to right,  rgba(0,0,0,0) 10%,rgba(0,0,0,0.67) 35%,rgba(0,0,0,0.7) 36%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=1 ); /* IE6-9 */
	text-shadow: 2px 2px 2px rgba(0,0,0,.8);
}
#home h2 {	
	color: #ea8f00;
	font-size:18px; 
	line-height:25px;
	margin:0;
	padding:0;
	text-shadow: 2px 2px 2px rgba(0,0,0,.8);
}
#home .bloc:hover h2 {
	color: #fff;
}
#home p {	
	color: #fff;
	font-size: 12px;
	margin:0;
	padding:0;
}

#home .normal-content {
	display: block;
}
#home .mobile-content {
	display: none;
}


/* =============================================================================
   BLOCS 1ERE LIGNE
   ========================================================================== */ 
#hgame, 
#hstory, 
#hshop,
#hearlyaccess, 
#hwiki{
	height:160px;
	margin-top: 20px;
	margin-bottom: 20px;
	width: 100%;
	text-align: center;
}
	 
/* =============================================================================
   BLOC GAME
   ========================================================================== */ 
#hgame .bloc_content {
	background: #000 url(../img/home/bloc_game.jpg) no-repeat center;
}
#hgame .bloc_left {
	position: absolute;
	top: -22px;
	left: -41px;
	z-index: 10;
}
#hgame .bloc_right {
	position: absolute;
	top: -29px;
	right: -9px;
	z-index: 9;
}
#hgame .bloc-texte {
	bottom:15px;
	z-index: 11;
}

/* =============================================================================
   BLOC L'UNIVERS
   ========================================================================== */ 
#hstory .bloc_content {
	background: #000 url(../img/home/bloc_story.jpg) no-repeat center;
}
#hstory .bloc_left {
	position: absolute;
	top: -35px;
	left: -19px;
}
#hstory .bloc_right {
	position: absolute;
	top: -8px;
	right: -9px;
}
#hstory .bloc-texte {
	bottom:15px;
}

/* =============================================================================
   BLOC EARLY ACCESS
   ========================================================================== */ 
#hearlyaccess .bloc_content {
	background: #000 url(../img/home/bloc_earlyaccess.jpg) no-repeat center;
}
#hearlyaccess .bloc_left {
	position: absolute;
	top: -8px;
	left: -9px;
}
#hearlyaccess .bloc_right {
	position: absolute;
	top: -8px;
	right: -9px;
}
#hearlyaccess .early-top {
	position: relative;
	display: inline-block;
	margin-top: -25px;
	z-index: 10;
}
#hearlyaccess .early-top img {
	opacity:1 !important;
}
#hearlyaccess .early-bottom {
	position: relative;
	display: inline-block;
	margin-top: 50px;
	z-index: 11;
}
@media screen and (max-width: 580px) {
	#hearlyaccess .early-top img,
	#hearlyaccess .early-bottom img {
		width: 100%;
	}
}

/* EARLYACCESS FORM */
#earlyaccess-form {
	position:absolute;
	top:55px;
	left:0px;
	z-index:4;
	width:100%;	
	text-align:center;
	padding:0px 15px;
}
p#earlyaccess-txt, p#earlyaccess-txt-thx {
	font-family: 'windlass', Arial, "Helvetica CY", Helvetica, sans-serif;
	text-shadow: 1px 2px 1px #000000;
	text-transform:uppercase;
	font-size:14px;
	color: #fff;
	padding:0;
	margin:0px auto 5px auto;
}
/*
.earlyaccess-es  p#earlyaccess-txt {
	font-size:11px;
}
.earlyaccess-de  p#earlyaccess-txt {
	font-size:11px;
	margin-top:-8px;
}
*/
p#earlyaccess-txt-thx {
	font-size:12px;	
}
#earlyaccess-email {
	position:relative;
	display: inline-block;
	float: left;
	width:80%;	
	height:30px;		
}
#earlyaccess-form input {
	width:100%;
	height:100%;
	padding:6px 8px 8px 8px;
	font-size:15px;
	color: #333;
	background: #f1eae8;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
	border: 1px solid rgba(0,0,0,0.2);
}
::selection {
  background: #f1eae8; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #f1eae8; /* Gecko Browsers */
}
#earlyaccess-form input:focus{ 
	border: 1px solid rgba(0,0,0,0.2);
}
#earlyaccess-form input:hover { 
	border: 1px solid #2DB317;
}
#earlyaccess-form input#submit {
	position:relative;
	display: inline-block;
	float: left;
	width:20%;
	height:32px;
	margin-top:-1px;
	cursor: pointer;
	font-family: 'marcellus', Arial, "Helvetica CY", Helvetica, sans-serif;	
	font-size:17px;
	font-weight:bold;
	color: #fff;
	text-transform:uppercase;
	text-decoration:none;	              
	background:#245916;  
	text-shadow: 0 1px 0 #245916;
	padding-top:4px;

}
#earlyaccess-form input#submit:hover {
	background: #2DB317;
	box-shadow: 0 0 9px 1px #2DB317;
	color:#fff;
}
#earlyaccess-email-error {
	position:relative;
	float:left;
	width:100%;
	text-align:center;
	color:#ff0000;
	font-family: 'marcellus', Arial, "Helvetica CY", Helvetica, sans-serif;
	font-size:14px;
	line-height:14px;
	font-weight:bold;
	margin-top:5px;
}


/* =============================================================================
   BLOC SHOP
   ========================================================================== */ 
#hshop .bloc_content {
	background: #000 url(../img/home/bloc_shop.jpg) no-repeat center;
}
#hshop .bloc_left {
	position: absolute;
	top: -8px;
	left: -9px;
}
#hshop .bloc_right {
	position: absolute;
	top: -34px;
	right: -25px;
}
#hshop .bloc-download {	
	position: absolute;
	font-family: 'marcellus', Arial, "Helvetica CY", Helvetica, sans-serif;	
	text-align: center;
	background-color:#f39100;
	padding:10px 15px 10px 15px;
	color: #000;
	z-index:10;
	top: 45px;
	right:30px;
	font-size:12px;
	text-transform: uppercase;
}
#hshop:hover .bloc-download {
	background: #fff;
	color: #000;
}
#hshop .bloc-pack {	
	position: absolute;
	top:-9px;
	left:0px;
}
#hshop .bloc-pack img {	
	width: 120px;
}
#hshop .bloc-logo {	
	position: absolute;
	top:40px;
	right:26px;
	width:55%;
}
#hshop .bloc-logo img {	
	width:100%;
}
#hshop .bloc-texte {
	bottom:15px;
	right: 5px;
	color: #fff;
	font-size: 18px;
}


/* =============================================================================
   BLOCS 2EME LIGNE
   ========================================================================== */ 
#home .bloc-social {	
	position: relative;
	margin:auto;
	width: 100%;
	margin-top: 5px;
}
#home .bloc-top {
	height: 40px;
	width: 100%;
	font-family: 'marcellus', Arial, "Helvetica CY", Helvetica, sans-serif;	
	text-transform: uppercase;
	padding: 6px 3px 0px 0px;
	text-shadow: 1px 1px 5px #000000;
	display: block;
	margin-bottom: 7px;
}
#home .bloc-top img {
	float:left;
}

#hfacebook .bloc-content,
#hyoutube .bloc-content,
#hdevblog .bloc-content {
	overflow:hidden;
	width: 100%;
	height:155px;
	background: #1E1E1E;
	border: #484848 1px solid;
	border-top: none;
}


#hfacebook .texte,
#hyoutube .texte,
#hdevblog .texte {
	height: 28px;
	float: left;
	display: block;
	padding: 2px 10px 0px 50px; 
	position: relative;
	color: #fff;
	font-size: 20px;
}
#hfacebook .bloc-top:hover,
#hyoutube .bloc-top:hover,
#hdevblog .bloc-top:hover {
	color: rgba(255, 255, 255, 0.8);
	text-shadow: -1px 1px 8px #7aff61, 1px -1px 8px #43df26;
}
#hfacebook .bloc-top:hover img,
#hyoutube .bloc-top:hover img,
#hdevblog .bloc-top:hover img {
	opacity: 1 !important;	
}

.bloc_social_top,
.bloc_social_bottom,
.bloc_social_left,
.bloc_social_right {
	position: absolute;
}

.bloc_social_top {
	top: 38px;
	left: 0px;
	width: 100%;
	height: 10px;
	background: transparent url(../img/social_top.png) no-repeat top left;
}

.bloc_social_bottom {
	bottom: -6px;
	left: 0px;
	width: 100%;
	height: 9px;
	background: transparent url(../img/social_bottom.png) no-repeat top left;
}

.bloc_social_left {
	top: 38px;
	left: -2px;
	width: 7px;
	height: 164px;
	background: transparent url(../img/social_left.png) no-repeat top center;
}

.bloc_social_right {
	top: 38px;
	right: -2px;
	width: 7px;
	height: 164px;
	background: transparent url(../img/social_right.png) no-repeat top center;
}

/* =============================================================================
   BLOC FACEBOOK
   ========================================================================== */ 
#hfacebook .bloc-content {
	background: rgba(255,255,255,0.80);
	padding:70px 0px 0px 0px;
}

#hfacebook .bloc-top {
	position: relative;
}

#hfacebook .social_icon {
	position: absolute;
	top: -4px;
	left: 0px;
}

#hfacebook .bloc-content {
	padding:80px 0px 0px 0px;
}

/* FLUX FACEBOOK */
#fb-root {  
	display: none;
}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
	margin-top:-50px !important;
	width: 102% !important;
}
.shareSubtext{
	border:none;
}
.profileLink {  
	color: #1E1E1E;
}

/* =============================================================================
   BLOC YOUTUBE
   ========================================================================== */

#hyoutube .bloc-content, #hyoutube_mobile .bloc-content {
	background: #000 url(../img/home/video.jpg) no-repeat center;
	display: block;
	text-align:center;
}

#hyoutube .bloc-content img, #hyoutube_mobile .bloc-content img {
	margin:auto;
}

#hyoutube .social_icon, #hyoutube_mobile .social_icon {
	position: absolute;
	top: -3px;
	left: 0px;
}

/* =============================================================================
   BLOC DEVBLOG
   ========================================================================== */

#hdevblog .social_icon {
	position: absolute;
	top: -4px;
	left: 0px;
}
/* FLUX TUMBLR */
#hdevblog .bloc-content {
	background: #1e1e1e;
	width: 100%;
	height:155px;
}
#hdevblog #tumblr_posts {
	width:99%;
	height:155px;
	overflow:hidden;
	font-size:12px;	
}
#hdevblog #tumblr_posts .loading img{
	margin-top:60px;
}
#hdevblog #tumblr_posts ul, #tumblr_posts li {
	list-style: none;
	margin:0;
	padding:0;
}
#hdevblog #tumblr_posts li {	
	padding-top:5px;
	margin-top:0px;
	padding-bottom:10px;
	margin-bottom:5px;
	border-bottom: 1px solid #3d3d3d;
	padding-left:10px;
	padding-right:10px;
}
#hdevblog #tumblr_posts a {
	color: #ff9d00;
}
#hdevblog #tumblr_posts a:hover {
	color: #fff; 
}
#hdevblog #tumblr_posts .tumblr_desc {
	display:none;
}
#hdevblog #tumblr_posts .tumblr_time {
	color:#808080;
	font-size:10px;
	text-transform:uppercase;	
}


/* =============================================================================
   BLOC WIKI GAMEPEDIA
   ========================================================================== */
#hwiki  {
	position: relative;
	float:left;
	display:inline-block;
}
#hwiki  a {
	position: relative;
	display:block;
	margin:0;
	padding:0;
}
#hwiki .bloc_title {
	position: relative;
	display:inline-block;
	height:30px;
	width: 100%;
	text-align:left;
	z-index:6;
}
#hwiki .bloc_title h2 {
	font-family: 'marcellus', Arial, "Helvetica CY", Helvetica, sans-serif;	
	text-transform: uppercase;	
	font-size: 20px;
	text-shadow: 1px 1px 5px #000000;
	color: #fff;
	font-weight:normal;
	padding: 0px 0px 0px 33px;
	margin-top:-8px;
}
#hwiki .bloc_title:hover h2 {
	color: rgba(255, 255, 255, 0.8);
	text-shadow: -1px 1px 8px #7aff61, 1px -1px 8px #43df26;
}
#hwiki .social_icon {
	position: absolute;
	top: -14px;
	left:-10px;
}
#hwiki .bloc_content {
	background: #000 url(../img/home/wiki.jpg) no-repeat top right;
	height:160px;
	margin-top:-4px;
}
#hwiki .bloc_social_top {
	top: -7px;
	left: 0px;
}
#hwiki .bloc_social_bottom {
	bottom: -4px;
	left: 0px;
}
#wiki_left {
	position: absolute;
	top: -12px;
	left: -9px;
}
#wiki_right {
	position: absolute;
	top: -12px;
	right: -9px;
}

#wiki_logo {
	position: absolute;
	top:5px;
	left:5px;
}
#wiki_perso {
	position: absolute;
	top:-14px;
	right:-14px;
}
#wiki_texte {
	position: absolute;
	width:100%;
	height:40px;
	top:100px;
	left:-5px;
	z-index:6;
	background: url(../img/home/wiki_text.png) no-repeat center;
}
#wiki_texte p {
	margin:0;
	padding:0;
	font-family: 'marcellus', Arial, "Helvetica CY", Helvetica, sans-serif;	
	text-transform: uppercase;	
	font-size:17px;
	line-height:40px;
}