html {
	overflow: hidden;
	touch-action: none;
	content-zooming: none;
}

body {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	background-image:  url('../assets/pizzasex.gif'), url('../assets/pizzasoul.gif');
	background-repeat: repeat;
	background-position: left top;
	/*background-size: cover;*/
	overflow: hidden;
}

#main {
	width: 100%;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.bad-container {
	width: 130px;
	height: 169px;
	position: relative;
	perspective: 700px;
	border: 1px solid #00ff00;
	overflow: hidden;
	display: inline-block;
	margin: 0 10px 10px;
	background-image: url('../assets/alien.gif');
	background-size: contain;
}

.bad-container .badboy {
	width: 100%;
	height: 200%;
	position: absolute;
	transform-style: preserve-3d;
	transition: transform 0.3s;
	transition-timing-function: cubic-bezier(0.57, 1.88, 0.21, 0.57);
	background-color: #;
	background-position: 46% 3%;
	background-repeat: no-repeat;
}
.bad-container .badboy .front {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}
.bad-container .badboy.flipped {
	transform: rotateX(90deg);
}
.bad-container .blood-gunshot {
	opacity: 0;
	width: 75px;
	height: 65px;
	position: absolute;
	background-repeat: no-repeat;
	background-position: 0 0;
	pointer-events: none;
	margin: 0;
}
.bad-container audio {
	pointer-events: none;
}
.bad-container .blood-gunshot {
	background-image: url(../assets/gunshot.png);
}
.bad-container .badboy {
	background-image: url(../assets/pizza.png);
	background-size: contain;
}

#poopscene {
	position: absolute;
	width:490px;
	height:415px;
	bottom: 0px;
	left: 0%;
	z-index: 41;
}

#poopscene2 {
	position: absolute;
	width:490px;
	height:415px;
	bottom: 0px;
	right: 0%;
	z-index: 41;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

#exercise {
	position: absolute;
	width:349px;
	height:327px;
	bottom: 0px;
	left: 0%;
	background: transparent url('../assets/exercise.gif') no-repeat center center;
	background-size: contain;
	z-index: 36;
}

#blackjesus {
	position: absolute;
	width:228px;
	height:272px;
	bottom: 160px;
	left: -40px;
	background: transparent url('../assets/blackjesus.gif') no-repeat center center;
	background-size: contain;
	z-index: 20;
}

#slug {
	position: absolute;
	width:338px;
	height:167px;
	bottom: 40px;
	left: 0px;
	background: transparent url('../assets/slug.gif') no-repeat center center;
	background-size: contain;
	z-index: 20;
}

#scope {
	position: absolute;
	width: 346px;
	height: 346px;
	background: transparent;
	background-image: url('../assets/scope.gif');
	background-repeat: no-repeat;
	background-position: center;
	background-size:contain;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: -160px;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	z-index: 15;
}

#cloud {
	position: absolute;
	width: 100%;
	height: 275px;
	width: 490px;
	background: transparent;
	background-image: url('../assets/pinksmoke.gif');
	background-repeat: repeat;
	background-position: center;
	background-size:contain;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: -140px;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	z-index: 10;
}

/* Change Background Image Based on Orientation */

@media all and (orientation:landscape) {

}

@media all and (orientation:portrait) {

	#poopscene {
		position: absolute;
		height:259px;
		bottom: 0px;
		left: 0%;
		z-index: 41;
	}

	#poopscene2 {
		position: absolute;
		height:259px;
		bottom: 0px;
		right: 0%;
		z-index: 41;
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
		filter: FlipH;
		-ms-filter: "FlipH";
	}

	#exercise {
		position: absolute;
		width:200px;
		height:187px;
		bottom: -20px;
		left: 0%;
		background: transparent url('../assets/exercise.gif') no-repeat center center;
		background-size: contain;
		z-index: 36;
	}

	#blackjesus {
		position: absolute;
		width:150px;
		height:179px;
		bottom: 60px;
		left: -40px;
		background: transparent url('../assets/blackjesus.gif') no-repeat center center;
		background-size: contain;
		z-index: 20;
	}

	#slug {
		position: absolute;
		width:200px;
		height:99px;
		bottom: 40px;
		left: 0px;
		background: transparent url('../assets/slug.gif') no-repeat center center;
		background-size: contain;
		z-index: 20;
	}

	.bad-container {
		width: 100px;
		height: 130px;
		position: relative;
		perspective: 700px;
		border: 1px solid #00ff00;
		overflow: hidden;
		display: inline-block;
		margin: 0 0px 0px;
		background-image: url('../assets/alien.gif');
		background-size: contain;
	}


}