body {
	background-color: black;
	overflow-x: hidden;
	position: relative;
	width: 100vw;
	height: 100vh;
}

img {
	width: 100vw;
	position: absolute;
	display: inline-block;
	top: 0;
	bottom: 0;
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

a {
	color: #FFF;
	text-decoration: none;
}

#container {
	position: relative;
	width: 100vw;
	height: 100vh;
	display: none;
	opacity: 0;
}

#wrapper {
	position: absolute;
	width: 100vw;
	display: inline-block;
}

#kuso-load {
	position: absolute;
	width: 100vw;
	height: 100vh;
}

#kuso-load-img {
	position: absolute;
	width: auto;
	height: 100vh;
	left: 0;
	right: 0;
	margin: auto;
}

#assets {
	/*position: absolute;*/
}

#sparkles, #rainbow {
	animation: shine .7s linear infinite alternate;
	-webkit-animation: shine .7s linear infinite alternate;
	-moz-animation: shine .7s linear infinite alternate;

	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
}

#sways {
	animation: sway 1s linear infinite alternate;
	-webkit-animation: sway 1s linear infinite alternate;
	-moz-animation: sway 1s linear infinite alternate;

	perspective: 1000;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

#top-sky {
	animation: float 1.2s linear infinite alternate;
	-webkit-animation: float 1.2s linear infinite alternate;
	-moz-animation: float 1.2s linear infinite alternate;

	perspective: 1000;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

#kuso-logo {
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

#chicken-pig {
	position: absolute;
	right: -100vw;
	background-color: transparent;

	animation: fly 8s infinite;
	-webkit-animation: fly 8s infinite;
	-moz-animation: fly 8s infinite;

	animation-delay: 2s;
	-webkit-animation-delay: 2s;
}

#characters1a {
	animation: grow .5s linear infinite alternate;
	-webkit-animation: grow .5s linear infinite alternate;
	-moz-animation: grow .5s linear infinite alternate;

	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

#horsedog {
	animation: shake .1s linear infinite alternate;
	-webkit-animation: shake .1s linear infinite alternate;
	-moz-animation: shake .1s linear infinite alternate;

	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

#characters1b {
	animation: grow .8s linear infinite alternate;
	-webkit-animation: grow .7s linear infinite alternate;
	-moz-animation: grow .7s linear infinite alternate;

	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

#hole-container {
	position: relative;
}

#firthroach {
	animation: jump .5s linear infinite alternate;
	-webkit-animation: jump .5s linear infinite alternate;
	-moz-animation: jump .5s linear infinite alternate;

	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}


#sinkhole, #characters2a {
	animation: bob .2s linear infinite alternate;
	-webkit-animation: bob .2s linear infinite alternate;
	-moz-animation: bob .2s linear infinite alternate;

	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

#dangler {
	animation: fall 3s linear forwards;
	-webkit-animation: fall 3s linear forwards;
	-moz-animation: fall 3s linear forwards;


	animation-delay: 6s;
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;

	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

#granny-container {
	position: relative;

	perspective: 1000;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

#granny {
	top: 0;
	left: 0;
	position: absolute;

	width: 10%;
	animation: spin 3s linear infinite;
	-webkit-animation: spin 3s linear infinite;
	-moz-animation: spin 3s linear infinite;

	transform-origin: 0% 100%;
	animation-delay: 4s;
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;

	perspective: 1000;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;

}

#hole {
	position: absolute;
	bottom: 0;
}

#hole, #characters3 {
	animation: bob .3s linear infinite alternate;
	-webkit-animation: bob .3s linear infinite alternate;
	-moz-animation: bob .3s linear infinite alternate;

	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

#quakebaby {
	animation: shake .4s linear infinite alternate;
	-webkit-animation: shake .4s linear infinite alternate;
	-moz-animation: shake .4s linear infinite alternate;

	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

#nav {
	height: 100vh;
	width: 100vw;
	font-family: 'Open Sans', sans-serif;
	position: fixed;
	z-index: 999;

	-webkit-perspective: 1000;
 	-webkit-backface-visibility: hidden;
}

#mobile-nav-container {
	position: fixed;
	height: 100vh;
	width: 100vw;
	display: none;
	opacity: 0;
}

#mobile-nav-text {
	color: #FFF;
	line-height: 1;
}

#mobile-about-button {
	color: #FFF;
	line-height: 1;
}

#mobile-nav-button, #x, #x2 {
	position: fixed;
	top: 3vh;
	left: 3vw;
	width: 7vw;
}

#x, #x2 {
	display: none;
}

#mobile-overlay {
	position: fixed;
	text-align: center;
	background-color: rgba(85,95,97,.7);
	left: 0;
	top: 0;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	display: none;

	-webkit-transition: opacity 0.25s ease-out;
	-moz-transition: opacity 0.25s ease-out;
	transition: opacity 0.25s ease-out;
}

#mobile-about-overlay {
	position: absolute;
	text-align: center;
	background-color: rgba(85,95,97,.7);
	left: 0;
	top: 0;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	display: none;

	-webkit-transition: opacity 0.25s ease-out;
	-moz-transition: opacity 0.25s ease-out;
	transition: opacity 0.25s ease-out;
}

#nav-text {
	font-family: 'Open Sans', sans-serif;
	font-size: 2em;
	color: white;
	vertical-align: middle;
	display:inline-block; 
}

span {
	line-height: 100vh;
}

#desktop-kuso-nav {
	top: 0;
	width: 20vw;
	position: relative;
}

#mobile-kuso-about {
	top: 2vh;
	width: 20vw;
	position: relative;
}

#mobile-kuso-nav {
	width: 20vw;
	top: 80vh;
	left: 40vw;
	right: 40vw;
}

#desktop-nav {
	position: fixed;
	width: 100vw;
	height: 100vh;
}

#desktop-socials {
	position: fixed;
	top: 3vh;
	right: 1vw;
}

#facebook, #instagram, #twitter {
	width: 3vw;
}

#facebook {
	right: 9vw;
}

#twitter {
	right: 5vw;
}

#instagram {
	right: 1vw;
}

#desktop-about-button {
	position: fixed;
	bottom: 3vh;
	left: 2vw;
	text-align: left;
	vertical-align: top;

	font-family: 'Open Sans', sans-serif;
	color: #FFF;
	font-size: 2em;
	font-weight: bold;
	cursor: pointer; 
	cursor: hand;
}

#desktop-about {
	position: relative;
	margin: 1.5em;
	line-height: 2;
	text-align: left;
	font-size: 1.5em;
	color: #FFF;
}

#mobile-about {
	position: relative;
	margin: .75em;
	line-height: 2;
	text-align: left;
	font-size: 1.25em;
	color: #FFF;
}

#about-overlay {
	position: absolute;
	overflow: hidden;
	text-align: center;
	background-color: rgba(85,95,97,.7);
	height: 100vh;
	width: 100vw;
	top: 0;
	display: none;
}

#desktop-trailer-button {
	position: fixed;
	bottom: 3vh;
	right: 2vw;
	text-align: right;
	vertical-align: top;

	font-family: 'Open Sans', sans-serif;
	color: #FFF;
	font-size: 2em;
	font-weight: bold;
	cursor: pointer; 
	cursor: hand;
}

#trailer-overlay {
	position: absolute;
	overflow: hidden;
	text-align: center;
	background-color: rgba(85,95,97,.7);
	height: 90vh;
	width: 100vw;
	top: 0;
	display: none;
}

#player {
	position: fixed;
	top: 0;
	left: 0;
}

.noanimation {
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  animation: none !important;
}

@keyframes shine {
	from {opacity: 0;}
	to {opacity: 1;}
}

@keyframes wane {
	from {opacity: 1;}
	to {opacity: 0;}
}

@keyframes float {
	from {transform: translateY(0px); }
	to {transform: translateY(-25px);}
}

@keyframes sway {
	from {transform: translateX(3px);}
	to {transform: translateX(-3px);}
}

@keyframes glow {
	from {box-shadow: 0 0 0px #F9EC37;}
	to {box-shadow:0 0 20px #F9EC37;}
}

@keyframes bob {
	from {transform: translateY(0px);}
	to {transform: translateY(5px);}
}

@keyframes fly {
	99% {transform: translateX(-200%);}
	100% {transform: translateY(-100%);}
}

@keyframes shake {
	from { transform: rotate(-1deg);}
	to {transform: rotateY(1deg);}
}

@keyframes spin {
	0% { transform: rotate(0deg);}
	20% { transform: rotate(75deg);}
	21% {transform: translateX(-1000%);}
	100% {transform: rotate(0deg);}
}

@keyframes fall {
	0% {transform: translateY(0%);}
	5% {transform: translateX(1%);}
	7% {transform: translateX(-1%);}
	9% {transform: translateX(1%);}
	11% {transform: translateY(0%);}
	13% {transform: translateX(1%);}
	15% {transform: translateX(-1%);}
	17% {transform: translateX(1%);}
	18% {transform: translateX(-1%);}
	80% {transform: translateY(30%);}
	81% {transform: translateX(-660%);}
	100% {transform: translateX(-400%);}
}

@keyframes jump {
	from {transform: translateY(0px)}
	to {transform: translateY(-15px);}
}

@keyframes grow {
	from {transform: scale(1);}
	to {transform: scale(1.01);} 
}

@-webkit-keyframes shine {
	from {opacity: 0;}
	to {opacity: 1;}
}

@-webkit-keyframes wane {
	from {opacity: 1;}
	to {opacity: 0;}
}

@-webkit-keyframes float {
	from {transform: translateY(0px); }
	to {transform: translateY(-25px);}
}

@-webkit-keyframes sway {
	from {transform: translateX(3px); }
	to {transform: translateX(-3px);}
}

@-webkit-keyframes glow {
	from {box-shadow: 0 0 0px #F9EC37;}
	to {box-shadow:0 0 20px #F9EC37;}
}

@-webkit-keyframes bob {
	from {transform: translateY(0px); }
	to {transform: translateY(10px);}
}

@-webkit-keyframes bob2 {
	from {transform: translateY(0px); }
	to {transform: translateY(-10px);}
}

@-webkit-keyframes fly {
	99% {transform: translateX(-200%);}
	100% {transform: translateY(-100%);}
}

@-webkit-keyframes shake {
	from { transform: rotate(-1deg);}
	to {transform: rotateY(1deg);}
}

@-webkit-keyframes spin {
	20% { transform: rotate(0deg);}
	21% { transform: rotate(75deg);}
	51% {transform: translateX(-1000%);}
	100% { transform: rotate(0deg);}
}

@-webkit-keyframes fall {
	0% {transform: translateY(0%);}
	5% {transform: translateX(1%);}
	7% {transform: translateX(-1%);}
	9% {transform: translateX(1%);}
	11% {transform: translateY(0%);}
	13% {transform: translateX(1%);}
	15% {transform: translateX(-1%);}
	17% {transform: translateX(1%);}
	18% {transform: translateX(-1%);}
	80% {transform: translateY(30%);}
	81% {transform: translateX(-400%);}
	100% {transform: translateX(-400%);}
}

@-webkit-keyframes jump {
	from {transform: translateY(0px)}
	to {transform: translateY(-50px);}
}

@-webkit-keyframes grow {
	from {transform: scale(1);}
	to {transform: scale(1.01);} 
}

@media only screen 
and (min-device-width: 1px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) { 
	html, body{
		max-width:100%;
		max-height:100%;
		overflow:hidden;
	}

	#kuso-load-img {
		width: 100vw;
		height: auto;
	}


	#top-sky  { animation-play-state: paused; }
	#hole { animation-play-state: paused; }
	#sinkhole  { animation-play-state: paused; }
	#granny { animation-play-state: paused; display: none; }
	#quakebaby  { animation-play-state: paused; }
	#horsedog  { animation-play-state: paused; }

	#desktop-nav { display: none; }

	#characters2a { 
		animation: grow .5s linear infinite alternate;
		-webkit-animation: grow .5s linear infinite alternate;

		-webkit-perspective: 1000;
		-webkit-backface-visibility: hidden;

	}

	#characters2b { 
		animation: grow .5s linear infinite alternate;
		-webkit-animation: grow .5s linear infinite alternate;

		-webkit-perspective: 1000;
		-webkit-backface-visibility: hidden;

	}

	#characters3  {
		animation: grow .5s linear infinite alternate;
		-webkit-animation: grow .5s linear infinite alternate;

		-webkit-perspective: 1000;
		-webkit-backface-visibility: hidden;
	}

	#mobile-nav-container {
		display: block;
		opacity: 1;
		text-align: center;
	}

	#mobile-overlay {
		font-size: 2em;
		font-family: 'Open Sans', sans-serif;
		font-weight: bold;;
	}
}