@media screen and (max-width: 411px){
	@charset "utf-8";
	@font-face{
		font-family: 'HanyiSentyTang';
		src: url('font/HanyiSentyTang.ttf');
	}
	@font-face{
		font-family: 'SentyTEA-20190904';
		src: url('font/SentyTEA-20190904.ttf');
	}
	@font-face{
		font-family: 'DigitalReadout';
		src: url('font/digitalreadout.ttf');
	}
	@font-face{
		font-family: 'SentyGoldenBell';
		src: url('font/SentyGoldenBell.ttf');
	}

	@font-face{
		font-family: 'roboto';
		src: url('font/Roboto-Black.ttf');
	}

	/* CSS Document 
			-webkit-
			-moz-
			-ms-
			-o-
	*/


		body{
			background-color: #fc0;
			margin: 0;
			border: 0;
			padding: 0;
			text-align:center;
			font-family: roboto, Tahoma, Geneva, sans-serif;
			font-size: .6em;
			color: #CCC!important;
			overflow: hidden;
		}
		#backgroundContainer{
			position: fixed;
			background-color: #ccc;
			left: 50%;
			margin-left:-50%;
			width: 100%; 
			top: 0;
			height: 100%;
			color: #CCC!important;
			overflow: hidden;
			border: none!important;
		}
		#backgroundImage{
			position:absolute;
			background:url("iMGS/mechanix.png");
			background-position-x: 50%;
			background-position-y: 100%;
			background-repeat: no-repeat;
			background-size: contain;
			left:50%;
			width:0%;
			bottom: 0;
			margin-bottom: 0;
			height: 100%;
			z-index: 896;
			overflow:hidden;
			opacity:.95;
		}
		#bigPlayButton{
			position:fixed;
			background:url("iMGS/StartButton.png");
			bottom: 140px;
			left: 50%;
			margin-left:-140px;
			width:280px;
			height: 277px;
			z-index: 908;
			overflow:hidden;
			opacity: .7;
				transform: scale(.6);
			-webkit-transform: scale(.6);
			-moz-transform: scale(.6);
			-ms-transform: scale(.6);
			-o-transform: scale(.6);
		}
		#bigPlayButton:hover{
			transform: scale(.8);
			-webkit-transform: scale(.8);
			-moz-transform: scale(.8);
			-ms-transform: (.8);
			-o-transform: (.8);
			opacity: 1;
			cursor: grabbing;
		}
		#ospreysm{
			position: absolute;
			background:url("iMGS/osprei_ver1335.png");
			background-repeat: no-repeat;
			top: 110px;
			right: -1000px;
			margin-right: -150px;
			width:150px;
			height: 96px;
			z-index: 894;
			opacity: 1;
			display:none;
		}
		#ospreylg{
			position: absolute;
			background:url("iMGS/osprei_ver150.png");
			background-repeat: no-repeat;
			top: -60px;
			right: 0px;
			margin-right: -1500px;
			width:621px;
			height: 387px;
			z-index: 895;
			opacity: 1;
			display: none;
		}
		#msg{
			position: absolute;
			background-image: url('iMGS/m.png');	
			opacity: .75;
			right: 1px;
			bottom: 1px;
			margin-bottom: 20px;
			width: 40px;
			height: 56px;
			overflow: hidden;
			z-index: 999;
		}
		#msg:hover{
			cursor: grabbing;
		}
		#guns{
			position: fixed;	
			background:url("iMGS/guns.png");
			background-position: top center;
			background-repeat: no-repeat;
			z-index: 899;
			top: 0;
			margin-top: -14px;
			left: 50%;
			margin-left: -400px;
			width: 800px;
			height: 270px;
			overflow: hidden;
			opacity: 1;
			
				transform: scale(.4);
			-webkit-transform: scale(.4);
			-moz-transform: scale(.4);
			-ms-transform: scale(.4);
			-o-transform: scale(.4);
		}
		#stfu{
			position:fixed;
			background:url("iMGS/STFU.png");
			background-position: center center;
			background-repeat: no-repeat;
			bottom: 0;
			margin-bottom: 20px;
			left: 50%;
			margin-left:-65px;
			width:129px;
			height: 54px;
			z-index: 908;
			overflow:hidden;
			opacity:.85;
				transform: scale(.85);
			-webkit-transform: scale(.85);
			-moz-transform: scale(.85);
			-ms-transform: scale(.85);
			-o-transform: scale(.85);
		}
		#stfu:hover{
			background:url("iMGS/STFUclk.png");
			cursor: grabbing;
		}

		.sizepointfour{
				transform: scale(.4);
			-webkit-transform: scale(.4);
			-moz-transform: scale(.4);
			-ms-transform: scale(.4);
			-o-transform: scale(.4);
		}
		.sizepointsix{
				transform: scale(.6);
			-webkit-transform: scale(.6);
			-moz-transform: scale(.6);
			-ms-transform: scale(.6);
			-o-transform: scale(.6);
		}
		.sizepointeight{
			  transform: scale(.85);
			-webkit-transform: scale(.85);
			-moz-transform: scale(.85);
			-ms-transform: scale(.85);
			-o-transform: scale(.85);
		}



		#CEED{
			position:absolute;
			background:url("iMGS/cheenchgi.jpg");
			background-position-x: 50%;
			background-position-y: 100%;
			background-repeat: no-repeat;
			background-color: #fff;
			background-size: cover;
			left:0;
			width:100%;
			bottom: 0;
			height: 100%;
			z-index: 4;
			overflow:hidden;
			opacity: 1;
			display: none;
			/*	2048x1721  	*/
		}

		#videoMask{
			display: none;
			position: absolute;
			background-color: #fc0;
			width: 560px;	
			left:50%;
			margin-left: -280px;
			height: 310px;
			top: 80px;
			overflow: hidden;
			z-index: 901;
			border: 2px solid #111;
			overflow: hidden;
				border-radius: 6px 6px;
			-webkit-border-radius: 6px 6px;
			-moz-border-radius: 6px 6px;
			-ms-border-radius: 6px 6px;
			-o-border-radius: 6px 6px;
				box-shadow: 2px 2px 40px #fff;
			-webkit-box-shadow: 2px 2px 40px #fff;
			-moz-box-shadow: 2px 2px 40px #fff;
			-ms-box-shadow: 2px 2px 40px #fff;
			-o-box-shadow: 2px 2px 40px #fff;
		}
		#videoInsert{
			position: absolute;	
			background-color: #000;
			background: contain;
			left:50%;
			margin-left: -280px;
			top: 50%;
			margin-top: -160px;
			width: 560px;
			height: 315px;
			//z-index: 998;
			text-align: center;
			overflow: hidden;
		}
		
		iframe{
		border: none!important;
		padding: 0!important;
		z-index: 897;
	}
	
		#embMetal{
			display: none;
		}
		/* goat... */
		#goatcage{
			position: fixed;
			left: 50%;
			margin-left:-22px;
			bottom: 0px;	
			width: 45px;
			height: 100%;
			z-index: 897;
			display: none;
		}
		#goat{
			position:fixed;
			background:url("iMGS/KK.png");
			background-position: center -550px;
			background-repeat: no-repeat;
			bottom: -350px;
			left:50%;
			margin-left:-205px;
			width:431px;
			height: 612px;
			z-index: 897;
			opacity: 1;
		}
		#beamblast{
			position: absolute;
			background:url("iMGS/_JUKIbeamblastrayleft.jpg");
			background-position: right center;
			background-repeat: no-repeat;
			background-color: #dbff9f;
			background-size: contain;
			top: 90px;
			left: 50%;
			margin-left: -2220px;
			width: 2000px;
			min-width:2000px;
			height: 40px;
			z-index: 901;
			overflow:hidden;
			opacity:.95;
			border-right: 2px solid white;
			border-top: 2px solid #0F0;
			border-bottom: 2px solid #CF0;
			border-radius: 24px;
		}
		.gunsHide{
			top: -220px;
		}
		#gunsStarterButton:hover{
			opacity: .95;
			margin-top:-16px;
			transform: scale(.66);
			-webkit-transform: scale(.66);
			-moz-transform: scale(.66);
			-ms-transform: scale(.66);
			-o-transform: scale(.66);
		}
		#wordbox{
			display: none;
			position:absolute;
			top: 120px;
			left: 0;
			width:100%;
			height: 100px;
			z-index: 902;
			overflow:hidden;
			opacity: 1;
			overflow: hidden;	
			text-align: bottom;
			font-family: roboto, Verdana, Geneva, sans-serif;
			font-weight: bold;
			font-size: 2.0em;	
			color: black;		
		}
		#wordtop{
			display: none;
			top: 0;
			margin-top: -4px;
			font-family: Tahoma, roboto, Geneva, sans-serif;
			font-weight:;
			font-size: 1em;
			letter-spacing: 2px;
			opacity: .2;
		}
		#wordmiddle{
			font-family: Tahoma, roboto, Verdana, Geneva, sans-serif;
			font-size: 3em;
			top: 50%;
			margin-top: 13px;
			height: 60px;
			opacity: .8;
		}
		#wordbottom{
			display: none;
			font-size: 1em;
			bottom: 0;
			margin-bottom: -4px;
			font-family: roboto, Tahoma, Courier, Geneva, sans-serif;
			font-weight: bold;
			font-size: 1.2em;
			letter-spacing: 2px;
			opacity: .4;
		}
		.translationaid{	
			position: relative;
			left: 0;
			width:100%;
			text-align: center;
			color: black;
			z-index: 4;
		}

		/* OPTION ANIM SEQ BUTTON SETUP BEGINS */
		#introButtonStart{
			position: absolute;	
			top: 0;
			left: 0;	
			width: 110px;
			height: 110px;
			cursor: hand;
			z-index: 895;
				border-radius: 15px 15px;
			-webkit-border-radius: 15px 15px;
			-moz-border-radius: 15px 15px;
			-ms-border-radius: 15px 15px;
			-o-border-radius: 15px 15px;
		}
		#introButtonStart:hover{
			cursor: cell;
		}
		/* Start button... */
		#buttonStartContainer{
			position: absolute;	
			top: 40%;
			left:50%;
			margin-left: -55px;
			width: 110px;
			height: 110px;
			z-index:894;
				border-radius: 15px 15px;
			-webkit-border-radius: 15px 15px;
			-moz-border-radius: 15px 15px;
			-ms-border-radius: 15px 15px;
			-o-border-radius: 15px 15px;

			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-o-transform: rotate(45deg);

			transform-origin: 50% 50%;
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			
			transform: scale(.6);
			-webkit-transform: scale(.6);
			-moz-transform: scale(.6);
			-ms-transform: scale(.6);
			-o-transform: scale(.6);
		}
		.bSCShadow{
			box-shadow: -40px -40px 155px #ccc;
			-webkit-box-shadow: -40px -40px 155px #ccc;
			-moz-box-shadow: -40px -40px 155px #ccc;
			-ms-box-shadow: -40px -40px 155px #ccc;
			-o-box-shadow: -40px -40px 155px #ccc;
		}
		.buttonStart{
			position: absolute;
			width: 96px;
			height: 94px;
			opacity: .85;
			border: 1px solid #ccc;
			  border-radius: 20px 20px;
			-webkit-border-radius: 20px 20px;
			-moz-border-radius: 20px 20px;
			-ms-border-radius: 20px 20px;
			-o-border-radius: 20px 20px;
		}
		#redQuarter{
			background-image: url('iMGS/butts.png');
			background-position: -127px -8px;
			transform: translateX(25px) translateY(25px);
			-webkit-transform: translateX(25px) translateY(25px);
			-moz-transform: translateX(25px) translateY(25px);
			-ms-transform: translateX(25px) translateY(25px);
			-o-transform: translateX(25px) translateY(25px);
		}
		#blueQuarter{
			background-image: url('iMGS/butts.png');
			background-position: -13px -8px;
			transform: translateX(-25px) translateY(-25px);
			-webkit-transform: translateX(-25px) translateY(-25px);
			-moz-transform: translateX(-25px) translateY(-25px);
			-ms-transform: translateX(-25px) translateY(-25px);
			-o-transform: translateX(-25px) translateY(-25px);
		}
		#yellowQuarter{
			background-image: url('iMGS/butts.png');
			background-position: -244px -8px;
			transform: translateX(-25px) translateY(25px);
			-webkit-transform: translateX(-25px) translateY(25px);
			-moz-transform: translateX(-25px) translateY(25px);
			-ms-transform: translateX(-25px) translateY(25px);
			-o-transform: translateX(-25px) translateY(25px);
		}
		#greenQuarter{
			background-image: url('iMGS/butts.png');
			background-position: -359px -8px;
			transform: translateX(25px) translateY(-25px);
			-webkit-transform: translateX(25px) translateY(-25px);
			-moz-transform: translateX(25px) translateY(-25px);
			-ms-transform: translateX(25px) translateY(-25px);
			-o-transform: translateX(25px) translateY(-25px);
		}

		/*externalcrunkmetal*/

		.putonghua{
			font-color: #fff;
			font-size: 14px;
			font-family: tahoma;
			word-wrap: break-word;
			text-decoration:none;
		}
		/* STOPWATCH*/
		.stopwatch .controls {
			font-size: 20px;
			position:fixed;
			background:url("iMGS/STFU.png");
			background-position: center center;
			background-repeat: no-repeat;
			top: 50%;
			left: 50%;
			margin-left:-65px;
			width:129px;
			height: 54px;
			overflow:hidden;
			opacity:.85;
		}
		.stopwatch .controls .button{
			padding: 5px 15px;
			border: 3px solid #06C;
			border-radius: 5px;
		}
		.stopwatch .time {
			position:fixed;
			top: 0px;
			margin-top: -10px;
			right: 0;
			margin-right:-95px;
			width:250px;
			height: 40px;
			z-index: 999;
			opacity:.85;
			font-size: 2em;
			font-family: DigitalReadout;
			color: red;
			
				transform: scale(.5);
			-webkit-transform: scale(.5);
			-moz-transform: scale(.5);
			-ms-transform: scale(.5);
			-o-transform: scale(.5);
		}
		/* PLAYER */
		#playerContainer{
			position: absolute;	
			background:url("iMGS/guns.png");
			background-position: top center;
			background-repeat: no-repeat;
			z-index: 905;
			top: 0;
			margin-top: -20px;
			left: 50%;
			margin-left: -400px;
			width: 800px;
			height: 270px;
			overflow: hidden;
			opacity: 1;
			transform: scale(.6);
			-webkit-transform: scale(.6);
			-moz-transform: scale(.6);
			-ms-transform: scale(.6);
			-o-transform: scale(.6);
		}
		#player{
			position: absolute;
			background:url("iMGS/playerButtons.png");
			background-position: 30px -53px;
			background-color: #fe0000;
			background-repeat: no-repeat;
			text-align: center;
			height: 50px;
			top: 124px;
			width: 280px;
			left: 50%;
			margin-left: -120px;
			padding-right: 2px;
			padding-left: 20px;
			z-index: 995;
			overflow: hidden;
		}
		.button{
			position: absolute;
			top: 0;
			margin-top: -7px;
			width: 44px;
			height: 50px;
			padding: 2px;
			overflow: hidden;
		}

		#playSong{
			opacity: 0;
			left: 125px;
			background-image: url('iMGS/playerButtons.png');
			background-position: -96px 0;
			/*OVER background-position: -121px 73px; */
		}
		#playSong:hover{
			opacity: 1;
		}
		#stopSong{
			opacity: 0;
			left: 81px;
			background-image: url('iMGS/playerButtons.png');
			background-position: -52px 0;
			/*OVER background-position: -121px 73px; */
		}
		#stopSong:hover{
			opacity: 1;
	}
	#pauseSong{
			opacity: 0;
			left: 37px;
			background-image: url('iMGS/playerButtons.png');
			background-position: -8px 0; /*actual pause button */
			/*OVER background-position: -180px 73px; */
	}
	#pauseSong:hover{
			opacity: 1;
	}
	#nextSong{
			opacity: 0;
			left: 170px;
			background-image: url('iMGS/playerButtons.png');
			background-position: -141px 0;
		/*OVER background-position: -4px 73px; */
	}
	#nextSong:hover{
			opacity: 1;
	}
	#prevSong{
			opacity: 0;
			left: 214px;
			background-image: url('iMGS/playerButtons.png');
			background-position: -186px 0;
			/*OVER background-position: -239px 73px; */
	}
	#prevSong:hover{
			opacity: 1;
	}
		
	#footer{
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 2px;
		line-height: 12px;
		width: 100%;
		height: 12px;
		background-color: #333;
		border-top: 1px solid #fc0;
		overflow: hidden;
		opacity: .75;
		z-index: 999;
	}
	#update{
		text-align: right;
		padding-right: 16px;
		line-height:11px;
		color: white;
		font-size: 11px;	
		font-family: Segoe UI, Tahoma, Arial Rounded MT Bold, sans-serif;
		color: #ccc;
	}
	#crunkmetalWebLogo{
		position: absolute;
		background-image: url('superbeastcampaign/iMGS/crunklogoSm.png');
		background-repeat: no-repeat;
		bottom: 2px;
		right: 0;
		margin-right: 170px;
		width: 115px;
		height: 14px;
		opacity: .9;
		z-index: 999;
	}
}
}