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/cat.gif'), url('../assets/.gif');
	background-repeat: repeat;
	background-position: left top;
	overflow: hidden;
}
#canvas {
	position:absolute;
	width:100%;
	height:100%;
	background: none;
	z-index: 50;
}

#crookedfinger {
	position: absolute;
	width: 352px;
	height: 242px;
	top: 5%;
	left: 0%;
	background: transparent url('../assets/crookedfinger.gif') no-repeat center center;
	background-repeat: none;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	z-index: 35;
}

#crookedfinger2 {
	position: absolute;
	width: 352px;
	height: 242px;
	top: 5%;
	right: 0%;
	background: transparent url('../assets/crookedfinger.gif') no-repeat center center;
	background-repeat: none;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	z-index: 35;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

#center {
	position: absolute;
	margin: auto;
	bottom: 350px;
	left: 0;
	right: 0;
	width: 500px;
	height: 340px;
	z-index: 46;
	background-image: url('../assets/doritos.gif');
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}

#tornado {
	position: absolute;
	margin: auto;
	bottom: 100px;
	left: 0;
	right: 0;
	width: 494px;
	height: 349px;
	z-index: 47;
	background-image: url('../assets/tornado.gif');
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}

#enginehead {
	position: absolute;
	bottom: -50px;
	left: 10%;
	width: 488px;
	height: 380px;
	z-index: 48;
	background-image: url('../assets/enginehead.gif');
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}

#enginehead2 {
	position: absolute;
	bottom: -50px;
	right: 10%;
	width: 488px;
	height: 380px;
	z-index: 48;
	background-image: url('../assets/enginehead.gif');
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}


#catrocker {
	position: absolute;
	bottom: 0px;
	left: 0%;
	width: 269px;
	height: 386px;
	z-index: 49;
	background-image: url('../assets/catrocker.gif');
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
}

#catrocker2 {
	position: absolute;
	bottom: 0px;
	right: 0%;
	width: 269px;
	height: 386px;
	z-index: 49;
	background-image: url('../assets/catrocker.gif');
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

/* Change Background Image Based on Orientation */

@media all and (orientation:landscape) {

}

@media all and (orientation:portrait) {

	#crookedfinger {
		position: absolute;
		width: 150px;
		height: 103px;
		top: 45%;
		left: 0%;
		background: transparent url('../assets/crookedfinger.gif') no-repeat center center;
		background-repeat: none;
		user-select: none;
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-o-user-select: none;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		z-index: 35;
	}

	#crookedfinger2 {
		position: absolute;
		width: 150px;
		height: 103px;
		top: 45%;
		right: 0%;
		background: transparent url('../assets/crookedfinger.gif') no-repeat center center;
		background-repeat: none;
		user-select: none;
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-o-user-select: none;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		z-index: 35;
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
		filter: FlipH;
		-ms-filter: "FlipH";
	}

	#center {
		position: absolute;
		margin: auto;
		bottom: 250px;
		left: 0;
		right: 0;
		width: 300px;
		height: 204px;
		z-index: 46;
		background-image: url('../assets/doritos.gif');
		background-repeat: no-repeat;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
	}

	#tornado {
		position: absolute;
		margin: auto;
		bottom: 100px;
		left: 0;
		right: 0;
		width: 300px;
		height: 212px;
		z-index: 47;
		background-image: url('../assets/tornado.gif');
		background-repeat: no-repeat;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
	}

	#enginehead {
		position: absolute;
		bottom: -50px;
		left: 10%;
		width: 244px;
		height: 190px;
		z-index: 48;
		background-image: url('../assets/enginehead.gif');
		background-repeat: no-repeat;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
	}

	#enginehead2 {
		position: absolute;
		bottom: -50px;
		right: 10%;
		width: 244px;
		height: 190px;
		z-index: 48;
		background-image: url('../assets/enginehead.gif');
		background-repeat: no-repeat;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
		filter: FlipH;
		-ms-filter: "FlipH";
	}


	#catrocker {
		position: absolute;
		bottom: 0px;
		left: 0%;
		width: 135px;
		height: 193px;
		z-index: 49;
		background-image: url('../assets/catrocker.gif');
		background-repeat: no-repeat;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
	}

	#catrocker2 {
		position: absolute;
		bottom: 0px;
		right: 0%;
		width: 135px;
		height: 193px;
		z-index: 49;
		background-image: url('../assets/catrocker.gif');
		background-repeat: no-repeat;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
		filter: FlipH;
		-ms-filter: "FlipH";
	}

}