@font-face {
  font-family: EndOfLiner;
  src: url("EndofLiner.eot") /* EOT file for IE */
}
@font-face {
  font-family: EndOfLiner;
  src: url("EndofLiner.ttf") /* TTF file for CSS3 browsers */
}

@font-face {
  font-family: GenxFiveBlock;
  src: url("gx-fiveblock.eot") /* EOT file for IE */
}
@font-face {
  font-family: GenxFiveBlock;
  src: url("gx-fiveblock.ttf") /* TTF file for CSS3 browsers */
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

p,img,div,a,body,table,td,tr {
  padding:0px;
  margin:0px;
}

html, body {
  background-color: #000;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#siteHeader{
  position: fixed;
  top: 0;
  z-index: 10;

  width: 100%;
  height: 100px;

  opacity: 0;
  animation: 1s fadein forwards;
  -webkit-animation: 1s headerFade forwards;
}


#siteHeader:before{
  content: " ";
  position: fixed;
  width: 100%;
  height: 110px;
  left: 0;
  background: url('../imgs/menubg.png');
  z-index: 9;
  opacity:.9;
}

#menuBox {
  position:relative;
  top:20px;
  left:50%;
  margin-left:-495px;
  width:990px;
  height:70px;
  z-index:10;
}

#menu ul{
  position: relative;
}

#menu li{
  padding: 0px;
  list-style: none;
  position: absolute;
  top: 0;
  margin-top:12px;
}

#menu li, #menu a {
  display: block;
  text-indent: -9999px;
/*-webkit-transition: opacity .15s;*/
}

#menu a{
  /*border:1px #fff solid;*/
  padding:14px;
  margin:-16px 0 0 0;
}

#menu a:hover{
  cursor: hand;
}

#menuItemGame{
  left:62px;
  width:69px;
  height: 15px;
  background: url('../imgs/sheet.png') no-repeat -2px -2px;
}

#menuItemGame:hover{
  background-position: -2px -20px;
}

#menuItemFeatures{
  left: 178px;
  width: 141px;
  height: 15px;
  background: url('../imgs/sheet.png') no-repeat -2px -38px;
}

#menuItemFeatures:hover{
  background-position: -2px -56px;
}

#menuItemScreenshots{
  left: 366px;
  width: 195px;
  height: 15px;
  background: url('../imgs/sheet.png') no-repeat -2px -74px;
}

#menuItemScreenshots:hover{
  background-position: -2px -92px;
}

#menuItemDevblog{
  left: 608px;
  width: 123px;
  height: 15px;
  background: url('../imgs/sheet.png') no-repeat -2px -110px;
}

#menuItemDevblog:hover{
  background-position: -2px -128px;
}

#menuItemGifs{
  left: 778px;
  width: 57px;
  height: 15px;
  background: url('../imgs/sheet.png') no-repeat -142px -110px;
}

#menuItemGifs:hover{
  background-position: -142px -128px;
}

#menuItemTwitter{
  left: 877px;
  width: 42px;
  height: 36px;
  margin-top:0px! important;
  background: url('../imgs/sheet.png') no-repeat -44px -146px;
}

#menuItemTwitter:hover{
  background-position: -89px -146px;
}


#logo{
  position: relative;
  left:50%;
  margin-left:-180px;
  margin-top:40px;
}

#logoTop {
  /* 182x49 */
  position: relative;
  left:50%;
  margin-left:-273px;
  margin-top:40px;
  width: 546px;
  height: 147px;
  background: url('../imgs/sheet.png') no-repeat -2px -184px;
}


p, input, .button {
  font-family: EndofLiner, 'Helvetica', 'Arial', sans;
  font-size:12pt;
  color: #5b8eaf;
  font-smooth: never;
  -webkit-font-smoothing : none;
  line-height: 25px;
}

a {
  color:#becedc;
  transition: color .5s;
  -webkit-transition: color .5s;
}

a:hover{
  color:#fff;
  transition: color .5s;
  -webkit-transition: color .5s;
}

.description{
  position: relative;
  left:50%;
  margin: 50px 0 50px -295px;
  text-align:center;
  letter-spacing: 1px;
  width:620px;
}

.indev{
  color: #dc9c09;
  position: relative;
  left:50%;
  margin: 0 0 0 -135px;
  text-align:center;
  letter-spacing: 1px;
  padding-top:5px;
  width:270px;
  height:30px;
  background: url('../imgs/sheet.png') no-repeat -200px -2px;
  z-index:2;
}

.buttonsLeft, .buttonsRight{
  width: 450px;
  /*height: 200px;*/
  /*background-color: #999;*/
}

.buttonsLeft{
  border: 9px solid transparent;
  border-image: url('../imgs/border2.gif') 9 round;
  float: left;
  padding:10px 0 8px 0;
}

.buttonsRight
{
  float: right;
}

.preorderBtn{
  width: 450px;
  height: 90px;
  cursor: pointer;
}

.main-content {
	height: 800px;
	width: 1000px;
	margin: 0 auto;
}

.overlay-bg {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	height:100%;
	width: 100%;
	cursor: pointer;
	z-index: 1000; /* high z-index */
	background: #000; /* fallback */
	background: rgba(0,0,0,0.85);
}

.overlay-content {
	display: none;
	width: 700px;
  height: 620px;
	position: absolute;
	left: 50%;
	margin: 65px 0 0 -310px; /* add negative left margin for half the width to center the div */
	cursor: default;
	z-index: 10001;
  border: 12px solid transparent;
  border-image: url('../imgs/border1.png') 12 round;
}

.close-btn {
  width: 15px;
  height: 15px;
	cursor: pointer;
  background: url('../imgs/sheet.png') no-repeat -851px -2391px;
  border: none;
  text-indent:9999px;
}

.close-btn:hover {
  background: url('../imgs/sheet.png') no-repeat -851px -2407px;
}

#itchioEmbed{
  background: #101010;
  width: 552px;
  height: 167px;
  top:382px;
  position: absolute;
  left:50%;
  margin: 0 0 0 -276px;
}

#humbleEmbed{
  background: #101010;
  width: 634px;
  height: 322px;
  position: absolute;
  left:50%;
  margin: 0 0 0 -317px;
}


/* media query for most mobile devices */
@media only screen and (min-width: 0px) and (max-width: 480px){

	.overlay-content {
		width: 96%;
		margin: 0 2%;
		left: 0;
	}
}

.highlight {
  color:#becedc;
}

.widthcutter{
  width:100%;
  overflow: hidden;
}



#lines1, #lines2{
  position:relative;
  left:50%;
  margin-left:-270px;
  margin-top:70px;
  width: 540px;
  height: 174px;
}

#lines1{
  background: url('../imgs/sheet.png') no-repeat -504px -2570px;
}

#lines2{
  background: url('../imgs/sheet.png') no-repeat -504px -2746px;
}

.divider1, .divider2{
  position:relative;
  left:50%;
  margin-left:-495px;
  width:990px;
  height:30px;
  margin-top:9px;
  margin-bottom:9px;
}

.divider1:before, .divider2:before {
  position:relative;
  display: block;
  top:0px;
  left: -140px;
  width: 375px;
  height: 30px;
  content: " ";
  background: url('../imgs/sheet.png') no-repeat -200px -34px;
}

.divider1:after, .divider2:after {
  position: absolute;
  display: block;
  top:0px;
  right: -140px;
  width: 375px;
  height: 30px;
  content: " ";
  background: url('../imgs/sheet.png') no-repeat -200px -34px;

  -webkit-transform:scaleX(-1);
  -moz-transform:scaleX(-1);
  -ms-transform:scaleX(-1);
  -o-transform:scaleX(-1);
  transform:scaleX(-1);
}

.divider2{
  -webkit-transform:scaleY(-1);
  -moz-transform:scaleY(-1);
  -ms-transform:scaleY(-1);
  -o-transform:scaleY(-1);
  transform:scaleY(-1);
}

#trailer{
  position:relative;
  left:50%;
  margin-left:-512px;
  width:1024px;
  height: 586px;
  padding-left:12px;
  padding-top:12px;
}

#trailer:after{
  pointer-events: none;

  position: absolute;
  display: block;
  top:0px;
  right: 0px;
  content: " ";
  width:1024px;
  height:586px;
  background: url('../imgs/sheet.png') no-repeat 0px -334px;
  z-index:1;
}


#fullDescrAll{
  position:relative;
  left:50%;
  margin-left:-495px;
  width:100%;
}

/* boxes */
#fullDescr1 div, #fullDescr2 div, #fullDescr3 div{
  /*border:1px #fff solid;*/
  left:0px;
  height:500px;
  width:990px;
}

/* image outlines */
#fullDescr1 div.img, #fullDescr2 div.img, #fullDescr3 div.img{
  margin-left:300px;
  top:0px;
  width: 870px;
  height: 489px;
}
#fullDescr1 div.img{
  background:url('../imgs/sheet.png') no-repeat 0px -920px, url('../media/featured-screenshot1.jpg') no-repeat 50% 50%;
}

#fullDescr2 div.img{
  margin-left:-240px !important;
  background: url('../imgs/sheet.png') no-repeat 0px -1409px, url('../media/featured-screenshot2.jpg') no-repeat 50% 50%;
}

#fullDescr3 div.img{
  background: url('../imgs/sheet.png') no-repeat 0px -1898px, url('../media/featured-screenshot3.jpg') no-repeat 50% 50%;
}

/* images */
#fullDescr1 div.img:after, #fullDescr2 div.img:after, #fullDescr3 div.img:after {
display: block;
content: " ";
width:870px;
height:489px;
/*background:*/
z-index:-12;
}

/* headers */
#fullDescr1 p:before, #fullDescr2 p:before, #fullDescr3 p:before{
  /*border:1px #fff solid;*/
  position: absolute;
  content: " ";
  margin-top:-101px;
  width: 435px;
  height: 81px;
  background: url('../imgs/sheet.png') no-repeat -2px -2430px;
}

#fullDescr2 p:before{
  width:472px !important;
  height:167px !important;
  margin-left:-100px !important;
  margin-top:-203px !important;
  background-position: -2px -2515px !important;
}

#fullDescr3 p:before{
  width:471px !important;
  height:89px !important;
  margin-top:-109px !important;
  background-position: -2px -2690px !important;
}


/* texts */
#fullDescr1 p,#fullDescr2 p,#fullDescr3 p{
  position: absolute;
  margin-top:-310px;
  width:390px;
  height:160px;
}

#fullDescr2 p{
  margin-top:-250px !important;
}

#fullDescr2 p{
  margin-left:600px;
}

#featuresAll{
  /*border:1px #fff solid;*/
  position:relative;
  left:50%;
  margin-left:-512px;
  width:1024px;
}

.divider3{
  margin-top:70px;
  margin-bottom:40px;
  position:relative;
  left:50%;
  height:15px;
}

#divFeatures{
  width:141px;
  margin-left:-70px;
  background: url('../imgs/sheet.png') no-repeat -660px -2px;
}

#divScreenshots{
  width:195px;
  margin-left:-97px;
  background: url('../imgs/sheet.png') no-repeat -660px -19px;
}

#divDev{
  width:159px;
  margin-left:-79px;
  background: url('../imgs/sheet.png') no-repeat -660px -36px;
}

#divGif{
  width:57px;
  margin-left:-28px;
  background: url('../imgs/sheet.png') no-repeat -660px -53px;
}

.divider3:before {
  position: absolute;
  display: block;
  top:-16px;
  left: -585px;
  width: 453px;
  height: 45px;
  content: " ";
  background: url('../imgs/sheet.png') no-repeat -200px -66px;
}

.divider3:after{
  position: absolute;
  display: block;
  top:-16px;
  right: -585px;
  width: 453px;
  height: 45px;
  content: " ";
  background: url('../imgs/sheet.png') no-repeat -200px -66px;

  -webkit-transform:scaleX(-1);
  -moz-transform:scaleX(-1);
  -ms-transform:scaleX(-1);
  -o-transform:scaleX(-1);
  transform:scaleX(-1);
}

.featureHeader{
  font-family:GenxFiveBlock, 'Helvetica', 'Arial', sans;
  font-size:20px;
  color:#becedc;
  margin-top:43px;
  margin-bottom:20px;
}

.feature{
  width:256px;
  text-align: center;
  display: table-cell;
  padding-bottom:40px;
}

p.feature{
  margin:0px! important;
  padding:0px! important;
}

#ftRandom, #ftEnemies,#ftWeapons,#ftRetro,#ftDeath,#ftPlatformer,#ftGamepad,#ftSecret {
  width:256px;
  height:100px;
}

#ftRandom{background: url('../imgs/iconRandom.gif') no-repeat 50% 100%;}
#ftEnemies{background: url('../imgs/iconEnemies.gif') no-repeat 50% 100%;}
#ftWeapons{background: url('../imgs/iconWeapons.gif') no-repeat 50% 100%;}
#ftRetro{background: url('../imgs/iconRetro.gif') no-repeat 50% 100%;}
#ftDeath{background: url('../imgs/iconDeath.gif') no-repeat 50% 100%;}
#ftPlatformer{background: url('../imgs/iconPlatformer.gif') no-repeat 50% 100%;}
#ftGamepad{background: url('../imgs/iconGamepad.gif') no-repeat 50% 100%;}
#ftSecret{background: url('../imgs/iconSecret.gif') no-repeat 50% 100%;}



.screenshotsAll{
  width:1050px;
  position:relative;
  left:50%;
  margin: 80px 0 40px -525px;
}

.screenshot{
  width:350px;
  height:162px;
  display: table-cell;
  padding-bottom:40px;
  text-align:center;
}

.screenshot a:before{
  position:absolute;
  display:block;
  content:" ";
  margin-top:-7px;
  margin-left:24px;
  width:303px;
  height:177px;
  /*border:1px #fff solid;*/
  background: url('../imgs/sheet.png') no-repeat -512px -2391px;
  opacity:0;
  transition: opacity .25s;
  -webkit-transition: opacity .25s;
}


.screenshot a:hover:before{
  opacity:1;
  transition: opacity .25s;
  -webkit-transition: opacity .25s;
}

.gifsAll{
  width:1100px;
  position:relative;
  left:50%;
  margin: 80px 0 40px -550px;
}


.gif{
  width: 460px;
  padding: 0 45px;
  display: table-cell;
  padding-bottom: 40px;
  text-align: center;
  vertical-align: top;
}


#tunnelWrap{
  width:100%;
  height:110px;
  margin: 60px 0;
  overflow:hidden;
}

#tunnel{
  /*2080x110*/
  width:4160px;
  height:110px;
  background: url('../imgs/tunnel.jpg') 0px 0px;
  animation: 34.6666s tunnelAnim linear infinite ;
  -webkit-animation: 34.6666s tunnelAnim linear infinite;
}

.wrapper{
  width:990px;
  position:relative;
  left:50%;
  margin-left:-495px;
}


#mc_embed_signup
{
  width:380px;
  position:relative;
  margin-left:-190px;
  left:50%;
}

#mce-EMAIL {
  padding:5px 10px 0;
  color: #becedc;
  outline: none;
  border: none;
  width: 270px;
  height: 45px;
  background: url('../imgs/email-background.gif');
  letter-spacing: 1px;
}


input[type=email]:focus {
  outline: none;
  border: none;
  background: url('../imgs/email-background-static.gif') !important;
  }


 ::-webkit-input-placeholder { /* WebKit browsers */
     color: #006c54;
 }
 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #006c54;
    opacity:  1;
 }
 ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #006c54;
    opacity:  1;
 }
 :-ms-input-placeholder { /* Internet Explorer 10+ */
   color: #006c54;
 }

input[type=submit] {
  margin: 0px 0 0 5px;
  background-color: #000;
  border: none;
  outline: none;
  height: 45px;
  text-decoration: underline;
  color:#becedc;
  transition: color .5s;
  -webkit-transition: color .5s;
  letter-spacing: 1px;
}


input[type=submit]:hover {
  color:#fff;
  transition: color .5s;
  -webkit-transition: color .5s;
  cursor: pointer;
 }


#mc_embed_signup:before{
    position: absolute;
    display: block;
    top:-40px;
    left: -100px;
    width: 39px;
    height: 93px;
    content: " ";
    background: url('../imgs/sheet.png') no-repeat -565px -184px;
  }

#mc_embed_signup:after{
    position: absolute;
    display: block;
    top:-40px;
    right: -100px;
    width: 39px;
    height: 93px;
    content: " ";
    background: url('../imgs/sheet.png') no-repeat -623px -184px;

  }








.fadein {
  opacity: 0;
  animation: 0.5s fadein forwards;
}

@-webkit-keyframes tunnelAnim {
  from { -webkit-transform:translateX(0px);}
  to   { -webkit-transform:translateX(-2080px);}
}

@keyframes tunnelAnim {
  from { transform:translateX(0px);}
  to   { transform:translateX(-2080px);}
}

@-webkit-keyframes fadein {
  from { opacity: 0; -webkit-transform:translateX(-30px);}
  to   { opacity: 1; -webkit-transform:translateX(0px);}
}

@keyframes fadein {
  from { opacity: 0; transform:translateX(-30px);}
  to   { opacity: 1; transform:translateX(0px);}
}

@-webkit-keyframes headerFade {
  from { opacity: 0; -webkit-transform:translateY(-30px);}
  to   { opacity: 1; -webkit-transform:translateY(0px);}
}

@keyframes headerFade {
  from { opacity: 0; transform:translateY(-30px);}
  to   { opacity: 1; transform:translateY(0px);}
}