/* ------------ COMMON ---------------- */

* { margin: 0; padding: 0; }
BODY, FORM, LABEL, INPUT, TEXTAREA {
	font: 12px Arial, 'Open Sans', Tahoma, Geneva, Helvetica, sans-serif;  color: #fff;
}
A, IMG, FORM, FIELDSET {border: none;}
A { color: #FFF; text-decoration: none; }
	A:hover { color: #FFF; }
	

H1, H2, H3, H4, H5, H6 { font-weight: normal;  }

/*#aboutgame-container H2, BODY, FORM, LABEL, INPUT, TEXTAREA { font-family: 'Libre Franklin', Arial, sans-serif; }*/
BODY { font-family: 'Libre Franklin', Arial, sans-serif; }
.btn-submit, #main-menu, H1, H2, H3, H4, H5, H6 { font-family: 'Michroma', Arial, sans-serif; }
#aboutgame-container H2  { font-family: 'Libre Franklin', Arial, sans-serif; }
H4 { text-align: center; font-size: 28px; padding: 10px; }
FORM{ margin: 10px; }

BODY { /*position: relative;*/ background: #12141d;  }

/* FXs */
	.fx-foggy { opacity: 0.1; }
	
	#preloader {
		position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%;
		overflow: visible; background: url('images/loading.gif') no-repeat center center;
		/*opacity: 0.7;*/
	}
	
/* HYPERLINKS INTERNAL */
	A.go2about{ width: 100%; height: 1px; display: block; position: absolute; bottom: 100px; }
	A.go2media{ width: 100%; height: 1px; display: block; }
	
/* ANIMATION SHINE HOVER FX */
	.shine::before {
	  position:absolute; top:0; left:-92%; display:block;
	  /*z-index:2;*/
	  content:'';
	  width:50%; height:100%;
	  background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);
	  background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);
	  -webkit-transform:skewX(-25deg);
	  transform:skewX(-25deg);
	}
	.shine img {
	  -webkit-transition:all 0.4s; -moz-transition:all 0.4s;
	  -o-transition:all 0.4s; transition:all 0.4s;
	}
	.shine:hover::before {
	  -webkit-animation:shine .75s;
	  animation:shine .75s;
	  display: block;
	}
	/*.shine:hover img { transform:scale(1.2); -webkit-transform:scale(1.2); }*/
		@-webkit-keyframes shine { 100% { left:125%; } }
		@keyframes shine { 100% { left:125%; } }
	
	
	
/* ------------ HEADER ---------------- */

#header-container{ top: 0; z-index: 5; width: 100%; float: left;  }
	.header-normal { position: absolute; background: url('images/headerbg.png') no-repeat top; }
	.header-normal2 { position: absolute; background: url('images/headerbg.png') no-repeat top; animation: pulse-header-in 0.3s; }
	.header-fixed { position: fixed; background: url('images/headerbg_fixed.png') no-repeat bottom left; animation: pulse-header-out 0.5s; }
		@keyframes pulse-header-in {/* ANIMATION */
			0% { background: url('images/headerbg_fixed.png') no-repeat top left; min-height: 85px; }
			100% { background: url('images/headerbg.png') no-repeat top; min-height: 175px; }
		}
		@keyframes pulse-header-out {
			0% { background: url('images/headerbg.png') no-repeat top; min-height: 175px; }
			100% { background: url('images/headerbg_fixed.png') no-repeat top left; min-height: 85px; }
		}
		
	#header-inner{ }
		.header-normal #header-inner, .header-normal2 #header-inner{ max-width: 1600px; min-height: 175px;  margin: 0 auto; }
		.header-fixed #header-inner{ max-width: 100%; min-height: 85px;  float: left; margin: 0; }
		
		#logo-box { display: block; background: url('images/allogo.png') no-repeat center; }
			.header-normal #logo-box, .header-normal2 #logo-box { width: 100%; height: 100px; }
			.header-fixed #logo-box { width: 430px; height: 80px; float: left; background-size: 100%; }
		#main-menu { }
			.header-normal #main-menu, .header-normal2 #main-menu { width: 560px; margin: 12px auto 0; }
			.header-fixed #main-menu { float: left; margin: 22px 0 0 65px; }
			#main-menu LI {
				float: left; margin: 0 5px;
				font-size: 16px; text-transform: uppercase; color: #FFF;
				list-style-type: none;
			}
				#main-menu LI A{ padding: 8px 10px; float: left; }
					#main-menu LI A:hover, #main-menu LI.active A { text-shadow:0px 0px 3px #52b4de, 0px 0px 5px #52b4de, 0px 0px 7px #52b4de, 0px 0px 12px #52b4de;  }
				
	
/* ------------ SLIDE ---------------- */

	
	
#slide-banner{
    display: block; margin-top: 52px;
    position: relative; width: 100%; overflow: hidden;
}
	#slide-banner IMG { width: 100%;  }
	#slide-banner H2 { position: absolute; bottom: 60px; width: 30%; padding: 0 35%; text-align: center; font-size:46px;}

			
/* ------------ PAGE ------------------------------- */
.simple-page { width: 100%; min-height: 600px; padding: 180px 0 50px; float: left; background: url('images/bg1.jpg') no-repeat bottom; } }

/* ------------ POSTS BOX / CONTENT ---------------- */		
	.post-container { width: 100%; }
	.post-container-first { padding-top: 180px; }
	.post-container-last { padding-bottom: 150px; }
	.post-inner{ max-width: 1260px; min-height: 100px; margin: 0 auto; padding: 50px 0 50px; }
	.post-separator {
		max-width: 1260px; height: 5px; margin: 50px auto 0;
		/*border-top: 1px solid #4ed2ff;*/
		background-image: linear-gradient(to left, rgba(208,210,212,0), rgba(208,210,212,0.3), rgba(208,210,212,0));
		}
			.post-container H2, .post-container H3 { padding: 10px 10px 10px; font-size: 32px; /*font-weight: bold;*/ text-transform: uppercase; }
				.post-container H3  { font-size: 22px; } 
			.post-container P { padding: 20px 10px 0; font-size: 16px; line-height: 26px; color: #CCC; }
	
			/*.post-inner-list { border-bottom: 1px solid #333; padding-bottom: 100px; }*/
				.post-container-last .post-inner-list { border: none; }
			.post-inner-thumb { float: right; padding-left: 20px; }
				.post-inner-thumb IMG { width: 400px; border: 1px solid #aaa; }
			P.bullet { margin: 10px 0 0 50px; /*color: #fff;*/ }
				P STRONG { color: #FFF; /*color: #0595c4;*/ font-weight: normal; }
	
	
	.showroom , .mediaroom  { padding: 0;}
	.showroom  .post-inner, .mediaroom  .post-inner { padding: 0;}
	.showroom {  height: 500px; background: url('images/media-showroom1.jpg') no-repeat center; }
	.mediaroom { /*position: reltive;*/ height: 500px; /*background: #292b32;*/ background: url('images/media-container_bg.jpg') no-repeat center; }
		.mediagrp { width: 1260px; margin: 0 auto; }
		.mediabtn, .mediabtn-soon {
			width: 405px; height: 290px; float: left; overflow: hidden; position: relative;
			margin: 105px 6px 0; background: #0b222e /*#142f3e*/; border: 1px solid #2f5f7a;
			box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 4px rgba(82, 168, 236, 0.6);
		}
		.mediabtn-soon { opacity: 0.4; }
			.mediabtn:hover {
				background: #194455; border-color: #FFF; cursor: pointer;
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
				animation: pulse-mediagrp-fx  0.5s;
			}
				@keyframes pulse-mediagrp-fx {/* ANIMATION */
					0% { background: #0b222e; border-color: #2f5f7a; }
					100% { background: #194455; border-color: #FFF; }
				}
			.mediabtn:hover IMG { opacity: 1; }
				.mediabtn IMG, .mediabtn-soon IMG { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6); opacity: 1; }
			.mediabtn H3, .mediabtn-soon H3 { font-size: 18px; font-weight: normal; padding: 20px 0 0 20px; color: #b6bdc1;}
				.mediabtn:hover H3 { color: #fff;}
			
		.btn-indiegogo {  width: 281px; height: 66px; float: left; margin: 10px 0 50px 5px; background: url('images/indiegogo_btnbig.png') no-repeat top; }
			.btn-indiegogo:hover {  background-position: bottom; }


/* ------------ GENERAL STUFF / BOXES / BUTTONS / TITLES ---------------- */		
	/*.box-standard-main { width: 100%; float: left; }
		.box-standard-inner { width: 100%; float: left;  }*/
		.contentbox { width: 100%; float: left; }
		.contentbox-inner {
			max-width: 460px; padding: 12px 15px; margin: 20px auto; display: table;
			background: #555; border: 1px solid #555; border-radius: 8px;
			font-size: 16px;
			box-shadow:0px 0px 8px #000;
		}
			.contentbox-error .contentbox-inner { background: #5e0508;  }
			.contentbox-tip .contentbox-inner { background: #1e3645;  }
			.contentbox-message .contentbox-inner { background: #234428;  }
			.contentbox-warning .contentbox-inner { background: #594815;  }
				.contentbox-content { float: left; padding: 10px 10px 10px 50px; text-align: left;  background: url('images/icon_error.png') no-repeat left; }
					.contentbox-tip .contentbox-content  { background-image: url('images/icon_tip.png'); }
					.contentbox-message .contentbox-content  { background-image: url('images/icon_message.png'); }
					.contentbox-warning .contentbox-content  { background-image: url('images/icon_warning.png'); }
		.post-inner P {}
			.post-inner P A { color: #60dbf9;  }
				.post-inner P A:hover { color: #bdf0fc;  }
	
	.thumb-pic1 { float: left; margin: 10px 10px 10px 0; }
	
	.team-box {
		float: left; width: 30%; margin: 15px 1%;
		background-image: linear-gradient(to left, rgba(208,210,212,0), rgba(208,210,212,0.3), rgba(208,210,212,0.1));
	}
		.team-box P { padding: 15px; margin: 0; }
	
	INPUT { font-size: 18px; color: #444; padding: 12px 15px; background: #c7c7c7; border: 1px solid #c7c7c7; border-radius: 7px; }
		INPUT:hover { border-color: #317b93; color: #111; } 
		textarea:focus, input:focus{ outline: none; }
		.btn-submit { margin-left: 10px; background: #317b93; border-color: #317b93; color: #FFF; text-transform: uppercase; }
			.btn-submit:hover { cursor: pointer; color: #FFF; background: #77aaba; }
			
	
	
			
/* ------------ BOTTOM / ICONS / LINKS / SOCIAL  ---------------- */
			
		.section-columns { float: left; }
			.section-col1{ width: 35%; float: left; }
			.section-col2 { width: 65%; float: right; }
				.section-col1 H3 { padding-left: 5px; text-align: left; }
				.section-col2 H3{ padding-right: 15px; text-align: right; }
					
			.btn-social { width: 64px; height: 64px; float: left; background-position: top; }
				.section-col2 .btn-social { float: right; }
				A.btn-social:hover { background-position: bottom; }
				.btn-social-fb { background-image: url('images/icon-fb.png'); }
				.btn-social-tw { background-image: url('images/icon-tw.png'); }
				.btn-social-yt { background-image: url('images/icon-yt.png'); }
				.btn-social-steam { background-image: url('images/icon-steam.png'); }
				.btn-social-win { width: 180px; background: url('images/icon-win.png'); }
				
			.cybertopia-logo-box { width: 155px; height: 45px; float: right; background: url('images/icon-cybertopia.png') no-repeat top;  }
				.cybertopia-logo-box:hover { background-position: bottom; }


			
/* ------------ FOOTER ---------------- */
#footer-container{
    width: 100%; float: left;
}
	#footer-inner{
		max-width: 1260px; min-height: 80px;  margin:  auto;
	}
		#footer-inner P { font-size: 14px; color: #ccd4dc; line-height: 20px;}
			#footer-inner P A { color: #60dbf9; }
				#footer-inner P A:hover { color: #bdf0fc; }
	#footer-inner  .column1 { float: left; margin-top: 10px; }
	#footer-inner  .column2 { float: right; margin-top: 20px; }

	

	
	
	
/* ------------ MOBILE ---------------- */
@media screen and (max-width: 1300px) 
{
	#slide-banner IMG { width: 120%; margin-left: -10%;  }
	#footer-inner  .column1, #footer-inner  .column2 { margin: 5px; }
}

@media screen and (max-width: 1200px) 
{	
	.post-container-first { padding-top: 10px; }
	#slide-banner { margin: 0;  }
		#slide-banner IMG { width: 140%; margin-left: -20%;  }
	/* IPAD FIXING */
		A.go2about, A.go2media { display: none; }
		
		#header-container { }
		.header-normal, .header-fixed { background: url(images/headerbg_mobile.png) repeat-x top; width: 100%; /*height: 100px !important;*/  }
		.header-normal #header-inner, .header-normal2 #header-inner { width: 100%; min-height: auto !important; } 
		
		.header-normal2 { animation: none; }	
		.header-fixed { animation: none; }
		
			.header-normal, .header-normal2 { position: inherit; width: 100%; float: left; }
			.header-fixed  { display: none; }
			.header-normal #logo-box, .header-normal2 #logo-box{ background-size: auto; width: 100%; }
				/*#main-menu  { display: none; }
					#main-menu .crowdfunding { display: none; }*/
				/*.header-normal #main-menu, .header-normal2 #main-menu { width: 100%; }*/

	.simple-page { padding: 50px 0 50px; }
	/*  --------------------- */
}


@media screen and (max-width: 1100px) 
{
	.header-fixed #main-menu LI {display: none; }
	.post-container-first { padding-top: 0px; }
	
}

@media screen and (max-width: 800px) 
{   
	/*A.go2about, A.go2media { display: none; }
	
	#header-container {  }
	.header-normal, .header-fixed { background: url(images/headerbg_mobile.png) repeat-x top; width: 100%; height: 100px;  }
	.header-normal #header-inner, .header-normal2 #header-inner { width: 100%; min-height: auto !important; } 
	
	.header-normal2 { animation: none; }	
	.header-fixed { animation: none; }
	
		.header-normal, .header-normal2 { position: inherit; width: 100%; float: left; }
		.header-fixed  { display: none; }*/
		
	.post-container P  { float: left; width: 90%; padding: 10px 5%; }
	P.bullet { float: left; padding: 0; margin: 20px 5% 10px; }
	.thumb-pic1 {float: inherit; margin: 30px 0 0px;}
	.post-container { width: 100%; float: left; margin: 0 0 0px; }
	.post-separator { width: 100%; float: left; }
	.post-container H4 { margin: 40px 0 10px; }
	
		.header-normal #logo-box, .header-normal2 #logo-box{ width: 100%; background-size: 100%; }
		.header-normal #main-menu, .header-normal2 #main-menu { width: 416px; }
		#main-menu LI { font-size: 12px; margin: 0; }
			/*#main-menu  { display: none; }*/
			
	.team-box  { width: 90%; margin: 10px 5%;}
		
	.post-inner { padding: 20px 0 20px; }
	 .post-container H3 { padding: 10px 5px 0; }
	.post-container H2 { width: 100%; padding: 15px 0 30px; text-align: center; }
	.post-inner-thumb { width: 100%; float: left; margin: 0 0 20px; padding: 0; }
		.post-inner-thumb IMG { width: 100%; border: none; }
	/*.post-container P { padding: 10px 5px 0;}*/
	FORM { width: 100%; float: left; margin: 10px 0 20px; text-align: center; }
		INPUT { width: 90%; padding: 12px 0; margin: 5px 0; text-align: center; }
		.btn-submit { width: 60%; margin: 5px 0; }
		
	#footer-inner  .column1, #footer-inner  .column2 { width: 100%; float: left; margin: 0; text-align: center; }
		.cybertopia-logo-box { width: 100%; }
				
}
@media screen and (max-width: 700px) 
{
	#slide-banner IMG { width: 160%; margin-left: -30%;  }
	#slider1 ul li,#slider2 ul li,#slider3 ul li  { height: 450px; }
}
@media screen and (max-width: 600px) 
{
	#slider1 ul li,#slider2 ul li,#slider3 ul li  { height: 400px; }
}
@media screen and (max-width: 500px) 
{
	.header-normal #main-menu, .header-normal2 #main-menu { width: 350px; }
		#main-menu LI { }
			#main-menu LI A { padding: 8px 5px;}
	/*.header-normal, .header-fixed { height: 70px !important;  }
	.header-normal #logo-box, .header-normal2 #logo-box{ height: 70px; }*/
	
	#slide-banner IMG { width: 200%; margin-left: -50%;  }
	
	/*.post-container H2, .post-container H3 { font-size: 24px; }*/
	.mediabtn H3, .mediabtn-soon H3 { font-size: 11px; }
	/**/
	.mediaroom { width: 100%; height: auto; padding: 0; }
		.mediagrp { width: 100%;}
			.mediabtn, .mediabtn-soon { width: 100%; height: 200px; margin: 0; padding: 5px 0; text-align: center; border: none; box-shadow: none; }
			.mediabtn IMG, .mediabtn-soon IMG { height: 160px; margin: 0; }
			#slider1 ul li,#slider2 ul li,#slider3 ul li  { height: 350px; }
	
	.section-col1, .section-col2 { width: 100%; float: left; margin: 0 0 20px;  }
		.section-col2 H3 { text-align: left; }
		.section-col2 .btn-social { float: left;
}
@media screen and (max-width: 400px) 
{
	/*
        .clock-horizontal { width: 100% !important; height: auto !important; padding: 0 !important; background-image: none !important; }
        #clockdiv.clock-horizontal > div{ margin-top: 10px !important; }*/
        
	/*.header-normal, .header-fixed { height: 60px !important;  }
	.header-normal #logo-box, .header-normal2 #logo-box{ height: 60px; }*/
	.groupbtn .btn-l, .groupbtn .btn-r { width: 5px; background-image: none; }
	.groupbtn .btn-m { background-image: none; }
		.active .groupbtn .btn-l { width: 22px; background-image: url('images/playbtn-l_active.png');}
		.active .groupbtn .btn-m {  background-image: url('images/playbtn-m_active.png');}
		.active .groupbtn .btn-r { width: 22px; background-image: url('images/playbtn-r_active.png');}
	.groupbtn .btn-m SPAN { display: block; width: 35px; height: 75px; }
	.about-icon1, .about-icon2, .about-icon3, .about-icon4, .about-icon5 { width: 35px; height: 60px; background-position: center 35px ; background-size: 24px;  }
	#slider1 ul li,#slider2 ul li,#slider3 ul li  { height: 250px; }
}