/**** GLOBAL HELPERS****/

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

.block {display:block;}
.inline {display:inline-block;}
.width {width:100%;}


h1, h2, h3 {
	color:#ffd7a4;
	font-family:"Vollkorn";
	font-size:2.5em;
}

/** todo remove **/
@font-face {
	font-family: '8bit';
	src: url('../fonts/8-bit_wonder-webfont.eot');
	src: url('../fonts/8-bit_wonder-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/8-bit_wonder-webfont.woff2') format('woff2'),
		 url('../fonts/8-bit_wonder-webfont.woff') format('woff'),
		 url('../fonts/8-bit_wonder-webfont.ttf') format('truetype'),
		 url('../fonts/8-bit_wonder-webfont.svg#8bit_wondernominal') format('svg');
	font-weight: normal;
	font-style: normal;
}
/** todo remove **/
@font-face {
    font-family: 'big_bro';
    src: url('../fonts/big_brother-webfont.eot');
    src: url('../fonts/big_brother-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/big_brother-webfont.woff2') format('woff2'),
         url('../fonts/big_brother-webfont.woff') format('woff'),
         url('../fonts/big_brother-webfont.ttf') format('truetype'),
         url('../fonts/big_brother-webfont.svg#big_brotherregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/***** HEADER & NAVBAR ******/

.navbar-inverse {
    background-color: black ;
    border-color: black;
}

/***DEMO****/
.button_demo
{
    height: 100%;
    width: 350px;
    margin: auto;
    display: block;
    padding-top: 20px;
}
#demobtnrow {
	padding-bottom:20px; 
    background-color: rgba(0, 0, 0, 0.59);
}

img.headerBt {
	margin-right:10px;
	margin-top:-6px;
	vertical-align:baseline;
}
.screendemo{width: 100%; padding-bottom: 20px;}
.screencol
{padding-top:10px;}
/************/




.header-youtube {
    width: 40px;
}

.header-facebook, .header-twitter, .header-twitch {
    width: 30px;
}

/* LAYOUT */

body {
	height: 100%;
	img[src$=".gif"], img[src$=".png"] {
		image-rendering: pixelated;
		image-rendering:-moz-crisp-edges; 
		image-rendering: -o-crisp-edges; 
		-ms-interpolation-mode:nearest-neighbor;
	}
	form {
		padding:0px;
	}
}

.giflink
{
 width:100%;
      height:100%;
}

.bg {
	background-image:url("../img/faf_art.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat:no-repeat;
	background-position-y:-150px;
	margin:0px;
	padding:0px;
	height: 500px; 
	
	
}


.bgMenu {
	background-color:rgba(0,0,0,0.6);
	letter-spacing: normal;
}

.soon {
	margin-top:36%;
}

.menuBox {
	margin:0px;
	margin-left:10%;
}

a.menuItem, a.menuTitle {
	font-family: 'Vollkorn', serif;
	color:#ffd7a4;
	font-size:3em;
	text-align:center;
	transition: all 120ms ease-in;
	text-shadow:0px 3px 0px #231319, 3px 3px 0px #231319;
	text-decoration:none;
	display:inline-block;
	padding-top:10px;
	padding-bottom:5px;
	margin-right:2%;
	margin-top:3%;
}

img#tw_bt {
	image-rendering: auto;
	width: 80px;
}

.navbar-header{
	width:230px;
}

img.logo {
	width:100%;
	margin-top:-5px;
	image-rendering: auto;
}
a.menuItem:hover {
	color:white;
	text-decoration:none;
	transition: all 160ms ease-in;
	transform: rotate(-1deg);
}

img.mobile {
	width:100%;
	display:none;
}

/*GREENLIGHT + REGISTERING + SOCIAL NETWORKS*/

#networks {
	padding-top:10px;
}

#facebookfollow
{
      margin:25px 10px 0px 10px;
}

#twitterfollow
{
      margin-top: 30px;
	  margin-left:10px;
}

#discovering_row
{
      margin-top: 20px;
}

img.green_img
{
      min-height: 235px;
       width:100%;
      height:100%;
}
img.zombie 
{
 float: left;
 margin-left: 80px;
 margin-top: -330px;
 position: relative;
 z-index: 2;
 width:250px;
}

#tweetbtn
{
 float: left;
 padding-top: 20px;
      left:30px;

 position: absolute;
 z-index: 100;
}

.greenlightimg {
      width:300px;
}
#discovering_row
{
	min-height:235px;
}



#newsletter
{       
    margin-left:2%;
    padding: 10px 0px 15px 20px;
    min-height:235px;
    height:100%;
    float: left;
    width: 48%;
}

.newsletter_input
{
 margin-top:10px;     
}

.newsletter_input > label
{
    float:left;
    width:100%;
}
.newsletter_input > input
{
    float:left;
    width:67%;
    height:38px;
}

#mc-embedded-subscribe
{
    height:40px;
    float:right;
    width:30%;
}

#networks
{
    padding-left: 20px;
    float:left;
    width:48%;
    min-height:235px;
}

.vote {
	position:absolute;
	margin-left:20px;
	z-index:1;
}

/*******************/
/*STORY BANDCAMP*/
/*******************/

.darkbg {
	background-color:rgba(0,0,0,0.8);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
	color:#ca875b;
}

#story
{
    margin-top:10px;
    border-style: solid;      
    border-width: 30px;
    border-image: url("../img/patch_ui.png") 20 fill repeat;
    padding:1px 30px 15px 30px;
	font-size:1.5em;
}

#bandcamp
{
    margin-top:10px;
    padding:1px 30px 15px 30px;
}

.news_head
{
      font-size:2em;
}
div.morelinks
{
      margin-top:10px;   
}
p.morelinks
{
      text-align: center;
      font-size: 2.5em;
      font-family: "Vollkorn";
      margin-top:7px;
}
p.morelinks > a
{
      color: #ffd7a4;
}

/**********CHARACTERS & SCREENS*********/

.padding_characters
{   
      padding-left:5px;
}
#snake_art
{
      padding-left:0px;
      margin-right:5px;     
}
img.postcards {
      width:100%;
      margin-top:10px;
}

#train_gif {
      width:100%;
      height: 100%;
      margin-top:10px;
}

img.gifx3 {
      width:100%;
      height:100%;
      margin-top:10px;
}

img.gifx2 {
      width:100%;
      height:100%;
      margin-top:10px;
}

.padding0 {
    padding: 0;
}

/********** FOOTER ******************/

.footer {
	margin-top:20px;
	font-size:1em;
	text-align:center;
	font-family:"Vollkorn";
	background-color:rgba(0,0,0,0.8);
	color:#ca875b;
	padding-bottom:5px;
}

footer a{
	color:#e06862;
}

footer a:hover{
	color:white;
	text-decoration:none;
}

.store_container .col-sm-4{
	display:inline-block;
}

@media (max-width:1200px) {
	#newsletter, #networks {
		margin-top:20px;
	}
}

@media (max-width: 992px) {
	
	#newsletter, #networks {
		float:none;
		display:block;
		width:100%;
		margin-left:0px;
		padding:15px;
	}
	.padding0 {
		padding-left: 15px;
		padding-right: 15px;
	}
	.navbar-header{
		width:100%;
	}
	.box {
		width:100%;
		float:none;
	}
	
	img.logo {
		width:100%;
		margin:auto;
		text-align:center;
		image-rendering: pixelated;
		image-rendering:-moz-crisp-edges; 
		image-rendering: -o-crisp-edges; 
		-ms-interpolation-mode:nearest-neighbor;
	}
}

@media (max-width: 768px) {
	.col-xs-6 {
		width:100%;
	}
	.navbar-toggle{
		margin-right:0px;
	}
	a.menuItem {
		display:block;
		text-align:left;
	}
	a.menuItem:hover {
		transform: rotate(0deg);
	}
	.menuBox:hover {
		transform: rotate(0deg);
	}
	.postcards {
		margin-bottom:20px;
	}
	
	.store_container .col-sm-4{
		width:49%;
	}
	
	#story{
		font-size:1em;
	}
}
	
	
}


img
{      
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
}

img.postcards{
	image-rendering: auto;
	-ms-interpolation-mode: bicubic;
}

/* OTHER PAGES */

.button_gallery
{
      width: 100%;
      margin-top:10px;
}

.gal_desc
{
      color:white;
      font-size: 1.5em;
      padding:10px;
      margin-top:5Px;
}
.screen_gal
{
      width: 100%;
      margin-top:20px;
    border: 3px dotted #a93b35;
}

.contactlink
{
 background-color: #ffd7a4;
      border-color: #ffd7a4;
}

.modal-content {
    background: #551e1b;
}
.modal-title {
    font-family: 'Vollkorn', serif;
    color: white;
    font-size: 4em;
    text-align: center;
}
.modal-header
{
      border:none;
}
.modal-footer {
    border: none;
    color: white;
    font-family: verdana;
}

.greenimg{
	width:100%;
    height:100%;
}

html{
	scroll-behavior: smooth;
	height: 100%
}

.screenbox{
	padding:8px;
	
}

img.screenshot {
	
}

.store_logo{
	object-fit: cover;
}