* {
    font-smooth: never;
	-webkit-font-smoothing: none;
}

html { 
	font-smooth: never;
	-webkit-font-smoothing: none;
}

@font-face {
    font-family: "Jackey";
    src: url(../img/jackeyfont.ttf);
}

@font-face {
    font-family: "Apple";
    src: url(../img/apple.ttf);
}
body {
    margin: 0px;
	font-family: Arial, Open Sans, sans-serif;
	font-weight: 400;
	background: teal;
	color: white;
	cursor: url("../img/cursor.png"),  default;
}

.container a{
	color: white;
}

.container a:hover{
	color: pink;
}

.vid{
	position: relative;
	padding-bottom: 56.25%;
	width: 100%;
	height: 0;
	overflow: hidden;
	margin: 45px 0;
}

.vid iframe, 
.vid embed {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}

.presskit {
	position: fixed;
  right: 16px;
  top: 16px;
}

.presser {
  text-transform: uppercase;
  font-weight:bold;
  text-align: center;
  font-size:18px;
  line-height:32px;
  font-style: italic;
  box-shadow: 8px 8px #000;
  height: 38px;
  min-width: 140px;
  max-width: 420px;
  z-index: 10;
  border: 2px solid black;
  background: blue;
  border: 2px solid white;
  color:#FFF;
}




.presser:hover {
  transform: translate(0,0px);
  transition:0.1s;
  border: 2px solid blue;
  color: blue;
  background: #FFF;
  box-shadow: 8px 8px #000;
  cursor: url("../img/hand.png"),  default;
}

.presser:active {
  border: 2px solid black;
  transform: translate(0,8px);
  transition:0.1s;
  color: #FFFFE9;
  background: #1F4F05;
  box-shadow: 2px 2px black;
  cursor: url("../img/hand.png"),  default;
}

.pressbox {
	margin-top: 24px;
	width: 100%;
	max-width: 960px;
	color: black;
	line-height: 30px; 
	  font-size:20px;
	  font-family: Open Sans, sans-serif;
}	
.pressbox a{
	color: blue;
	text-decoration: none;
}
.pressbox a:hover{
	color: red;
}

.pressbox hr {
	border-bottom: 2px dashed #bcbcbc;
}
.pressbox button#submit  {
	border: 2px solid black;
}

.linkbox{
	width: 95%;
	max-width: 420px;
	min-width: 320px;
	margin: 0 auto;
	padding: 0;
}

.steam {
	background: #9fade3 url(../img/steam_icon.png) left no-repeat; 
	background-size: contain;
	width: 100%;
	padding: 12px 0px 48px 48px;
	font-size: 2em;  
	border: black solid 2px;
}
.steam:hover {
	background: #E06C9B url(../img/steam_icon.png) left no-repeat; 
	background-size: contain;
	border: white solid 2px;
	color: white;
}
.steam:active {
	background: #ADC500 url(../img/steam_icon.png) left no-repeat; 
	background-size: contain;
	border: white solid 2px;
	color: white;
}


.news{
	text-align: left;
	padding: 8px;
	margin: 0 auto;
	font-size: 1.25em;
	width:100%;
	max-width: 560px;
	text-align: left;
    margin: 2% auto 2%;
}



.main{
	text-align: center;
}

.about2{
		font-size: 1em;
		padding: 24px 32px 0;
		line-height: 1.1em;
		text-align: justify;
}

.box_img{
	background: black;
}

.box_img2{
	padding: 4px 0px 0;
	background: black;
}
.discord{
	margin: 0px auto 64px;
    width:100%;
    max-width: 800px;
	text-align: left;
}

.box_discord{
	border:white 2px solid;
	text-align: center;
	width: 100%;
	max-width: 600px;
	background: black;
	margin: 0px auto;
	box-shadow: 8px 8px #000;
}

.links{
	margin: 0 auto;
	padding: 8px 0;
}

.screenshots{
	margin: 0 auto;
	width:100%;
	max-width: 860px;
    text-align: center;
}
.screenshots img{
  margin: 4px;
  position: relative;
  max-width: 160px !important;
  border: 2px solid black;
  }
	          
.screenshots img:hover{
 transform: translate(0,-4px);
transition:0.025s;
  }

  
.assets{
	margin: 0 auto;
	width:100%;
	max-width: 800px;
    text-align: center;
}
  
.assets img{
  margin: 4px;
  position: relative;
  max-width: 160px !important;
  border: 0px solid black;
  }
	 
.box_screen{
	border:white 2px solid;
	text-align: center;
	width: 66%;
	background: url(http://knucklesandwich.biz/img/grid.png);
	margin: 24px auto;
	box-shadow: 8px 8px #000;
}
.box_about{
	margin: 24px auto;
	min-height: 262px;


	border:white 2px solid;
	width: 60%;
	color: #bababa;
	background: #333;
	float:left;
	box-shadow: 8px 8px #000;
	margin-right: 12px;	
}

.about{
		font-size: 1.33em;
		padding: 40px 32px 0;
		line-height: 1.1em;
		text-align: justify;
}

.box_about_img{
	margin: 64px auto 24px;
	border:white 2px solid;
	width: 324px;
	background: green;
	float:right;
	min-height: 240px;
	box-shadow: 8px 8px #000;
}


.box_container{
	height: 230px;
}


.box_about2{
	border:white 2px solid;
	width: 44%;
	background: #bcbcbc;
	color: #333;
	float:right;
	box-shadow: 8px 8px #000;
	margin-right: 12px;
}


.box_about_img2{
	border:white 2px solid;
	max-width: 424px;
	width: 100%;
	background: black;
	float:left;
	box-shadow: 8px 8px #000;
	margin-left: 32px;
}

.break{
    border-bottom: solid 0px black;
    max-width:640px;
    width: 100%;
    margin: 7% auto 9%;
}

.container{
    width: 75%;
    margin: 30px auto;
    padding: 20px;
}

.bignews{
		text-align: center;
		text-weight:600;
}

.logo{
    background: url(../img/logo.png) center center no-repeat;
    background-size: contain;
    width: 90%;
    height: 90%;
    max-width:767px;
    min-height:530px;
    margin: 40px auto;
	animation-name: logo;
    animation-duration:	2s; 
	animation-iteration-count: infinite;
	animation-direction: alternate;
    animation-timing-function: cubic-bezier(0.445, 0.150, 0.850, 0.950);
}

    @keyframes logo {
        0% {
            -webkit-transform: translate3d(0px, 0px, 0px);
            -moz-transform: translate(0px, 0px);
        }
        100% {
            -webkit-transform: translate3d(0px, -10px, 0px);
            -moz-transform: translate(0px, -10px);
        }
    }
.discord{
	font-family: "Apple";
	font-size: 16px;
	text-align: center;
	margin: 0 auto;
}

.discord a{
	color: pink;
}
.discord a:hover{
	color: yellow;
}



.bar{
	background: blue;
	border-bottom:white 2px solid;
    font-size: 8px;    
	font-variant: uppercase;
	font-smooth: none;
	-webkit-font-smoothing: none;
	color: white;
  font-family: Apple,Jackey, sans-serif;
  height:14px;
}

.bar_right{
	float:right;
	width:16px;
  height:14px;
  font-size: 8px;
	border-left: 2px solid white;
	text-align: center;
}

.bar_left{
	float:left;
  height:14px;
	padding-left: 6px;
	text-align: left;
}

a{
text-decoration: none;
color: #333;
	cursor: url("../img/hand.png"),  default;
}

a img, img a, a img: hover{
    background: transparent !important;
	cursor: url("../img/hand.png"),  default;
}

::selection {
	background: #00F;
    color:#FFF;
	}
::-moz-selection {
	background: #00F;
    color:#FFF;
}
::-webkit-scrollbar {
    background: white;
    padding:2px;
}
::-webkit-scrollbar-button {
    background: white;
}
::-webkit-scrollbar-thumb {
    background: blue;
    border:2px solid white;
}

.minipete {
    background: url(http://knucklesandwich.biz/img/minipete.png) center center no-repeat;
    background-size: contain;
    width: 185px;    
    height: 432px;
    margin: 0 auto 10px;
    image-rendering: crisp-edges;
}

.footer {
    image-rendering: crisp-edges;
    width: 100%;
    padding: 32px 0 0;
    margin: 0;
    text-align: center;
    color: white;
    font-weight: 400;
    font-size: 2rem;
    text-transform: full-width;
}

.filmvic img{
    width:100%;
    max-width: 420px;
    min-height: 89px;
    margin: 2% auto 1%;
}

.nope{display:none;}





button#submit {
  text-transform: uppercase;
  font-weight:bold;
  padding:0px 10px 1px;
  font-size:20px;
  font-family: Open Sans, sans-serif;
  line-height:32px;
  transition:0.1s;
    margin: 0 10px;
  font-style: italic;
  box-shadow: 8px 8px #000;
  width:160px;
  height: 48px;
  
  background: #FEA2A5;
  border: 2px solid black;
  color:#000;
  position: relative;
  background: blue;
  border: 2px solid white;
  color:#FFF;
  border-radius:0 !important; 
}

.signup{
font-size: .9em;
  text-align: center;
    margin: 2% auto 2%;
}

.news a{
	color: black;
	text-decoration: underline;
}
.news a:hover{
	background: black;
	color: rgba(0,0,0,0) !important;
}

.news a:active{
	background: red;
	color: red;
}

a.green:hover { background-color: #ADC500; }
a.purple:hover { background-color: #4767FF; }
a.gold:hover { background-color: #FFCC3A }
a.pink:hover { background-color: #E06C9B }

a.green:active { background-color: #000; }
a.purple:active { background-color: #000; }
a.gold:active { background-color: #000; }
a.pink:active { background-color: #000; }



button#submit:hover {
  transform: translate(0,0px);
  transition:0.1s;
  
  
  border: 2px solid blue;
  color: blue;
  background: #FFF;
  box-shadow: 8px 8px #000;
	cursor: url("../img/hand.png"),  default;
}

button#submit:active {
  border: 2px solid black;
  transform: translate(0,8px);
  transition:0.1s;
  color: #FFFFE9;
background: #1F4F05;
  box-shadow: 2px 2px black;
	cursor: url("../img/hand.png"),  default;
}




.footer a, .header a{
    text-transform: uppercase;
    background: none;
    color: deeppink;
}


.footer a:hover, .header a:hover{;
    font-weight: 200;
    color: orangered;
}

.credit {
    image-rendering: crisp-edges;
    width: 100%;
    margin: 0;
    text-align: center;
    color: white;
    font-size: .9rem;
}


.credit a{
    background: none;
    color: deeppink;
}

.credit a:hover r{;
    font-weight: 200;
    color: orangered;
}




a.green:hover { color: var(--c_lime); }
a.purple:hover { color: #4767FF; }
a.gold:hover { color: #FFCC3A }
a.pink:hover { color: #E06C9B }

a.green:active { color: #000; }
a.purple:active { color: #000; }
a.gold:active { color: #000; }
a.pink:active {color: #000; }



.desc {
    position: relative; 
    top: -2px;
    left: 8px;
    float: left;
    padding:0 4px;
    background-color: white;
    color: black;
    font-size: .666em;
    width:52px;
    
    
    width:70px;
    top: -1px;
    font-family: Apple, sans-serif;
    font-size: 8px;
    font-kerning: auto;
}

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






.box{
    background: url(../img/box.png) center center no-repeat;
    background-size: contain;
    width:100%;
    max-width: 640px;
    height: 100%;
    min-height:480px;
    margin: 2% auto 4%;   
}




 /*LIGHTBOX*/
 
 * {
  box-sizing: border-box;
}
/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  transition: 0.6s ease;
  background: url(../img/grid_dark.png);
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 90%;
  height: 100%;
  text-align: center;
  max-width: 1200px;
}

/* The Close Button */
.close {

}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  
}

.mySlides {
  display: none;
}

.cursor {

	cursor: url("../img/hand.png"),  default;
}

/* Next & previous buttons */
.prev,
.next {
  
  position: absolute;
  top: 50%;
  width: auto;
  padding: 64px;
  margin-top: -50px;
  color: white;
  background: none;
	font-family: "Apple", sans-serif;
	font-size: 32px;
	margin: 0 auto;
}

/* Position the "next button" to the right */
.next {
  right: 0;
}

.prev {
left: 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
	color: yellow;
  background: none;
	cursor: url("../img/hand.png"),  default;
}



/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.closebutton {
  position:fixed;
  right: 400px;
  top: 100px;
  min-width: 40px;
  width: 40px;
  font-size: 2em;
  font-style: default;
}

.modal img{
margin:5% auto;
width: 50%;
max-width: 960px;
image-rendering: pixelated;
	cursor: url("../img/hand.png"),  default;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 0;
}

img.hover-shadow {
  transition: 0.3s;
	cursor: url("../img/hand.png"),  default;;
  
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4)
	cursor: url("../img/hand.png"),  default;
}

/* Responsive */

@media (max-width: 1200px) {
	
.box_about_img,
.box_about,
.box_about_img2,
.box_about2
{
	margin: 24px auto;
	float: none;
}

.box_container{
	height: initial;
}
	.screenshots{		
		margin: 12px auto;
	}
	
	.break{
		margin: 0;
	}
	
}

hr{
	border: 0;
	height: 16px;
}

h4 {
	font-size: 1.25em;
}

.trailer{
		width: 90%; 
		max-width: 800px;
		box-shadow: 8px 8px 0px black;
}

input#email {
  background: white;
  border: teal 2px solid;
  padding:20px 10px;
  margin-bottom:10px;
  border-radius: 0;
  width: 80%;
  max-width: 300px;
    font-size: 16px;    
	font-variant: uppercase;
	font-smooth: none;
	-webkit-font-smoothing: none;
	color: black;
  font-family: Apple, Jackey, sans-serif;
  
	cursor: url("../img/cursor_type.png"),  default;
}
input#email:active, input#email:hover {
	background: white;
	color: blue;
	border: blue 2px solid;
}

@media (max-width: 800px) {
	.box_about,
	.box_about2,
	.box_screen,
	.box_discord{
		width:95%;
	}
	
	.logo{
		width:100%;
		margin: 80px auto 32px;
		min-height:240px;
	}
	
	.container{
		width: 90%;
		margin: 30px auto;
		padding: 0px;
	}
}

@media (max-width: 600px) {
	.box_about,
	.box_about2,
	.box_screen,
	.box_discord{
		width:100%;
	}
	
	
}

@media (max-width: 500px) {
	.steam {
	font-size: 1.5em;
	width:100%;
	}
}

@media (max-width: 382px) {
	
	hr{
		height: 12px;
	}
	
	.container{
		width: 95%;
		margin: 30px auto;
		padding: 0px;
	}
	
	.screenshots img{
	  margin: 2px;
	  position: relative;
	  max-width: 320px !important;
	  }
	  
	 .box_about_img{
			display: none;
	 }
	 input#email {
		 width: 95%;
	 }
	 
	 .modal {
		 height: 0px;
	 }
}


table{
}

tr {
	padding: 16px;
	
}

td {
padding: 10px;
text-align: left;
border: 1px solid black;	
}