
@media screen and (max-width: 1268px) and (min-width: 915px) {
	@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: #444;
		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: absolute;
		background-color: #ccc;
		width: 90%;
		height: 100%;
		top: 0;
		//margin-top: -2px;
		left: 50%;
		margin-left: calc(-45% - 2px);
		overflow: hidden;
		
		border: 2px solid #000;
		border-bottom: none;
		border-top: none; 
		/* 	border-radius: 25px 25px;
		-webkit-border-radius: 25px 25px;
		-moz-border-radius: 25px 25px;
		-ms-border-radius: 25px 25px;
		-o-border-radius: 25px 25px; */
	}
	#backgroundImage{
		position: absolute;
		background:url("iMGS/mechanix.png");
		background-position: 50%  10px;
		background-repeat: no-repeat;
		background-size: cover;
		left: 50%;
		width: 102%;
		margin-left: -51%;
		bottom: 0;
		height: 100%;
		z-index: 896;	
		//overflow: hidden;
		opacity: 1;
		border: 2px solid #000;
		border-top: none;
		border-bottom: none;
		
		/*1268x915 */
	}
	
	#bigPlayButton{
		position: absolute;
		color: #000;
		line-height: 32px;
		font-size: 2em;
		top: 200px;
		left: 50%;
		margin-left: -25%;
		width: 50%;
		height: 300px;
		z-index: 908;
		overflow:hidden;
		opacity: .2;
			transform: scale(.8);
		-webkit-transform: scale(.8);
		-moz-transform: scale(.8);
		-ms-transform: scale(.8);
		-o-transform: scale(.8);
	}
	
	#bigPlayButton:hover{
		opacity: .9;
		padding-top: 8px;
		cursor: grabbing;

			transform: scale(.9);
		-webkit-transform: scale(.9);
		-moz-transform: scale(.9);
		-ms-transform: scale(.9);
		-o-transform: scale(.9);

	}
	
	#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;
	}

	#videoCloseX{
		position:absolute;
		background:url("iMGS/closeX.png");
		background-position: -1px -1px;
		background-repeat: none;
		right: 1px;
		top: 1px;
		width: 45px;
		height: 45px;
		z-index: 999;
		overflow:hidden;
		opacity: .3;
		cursor: grabbing;
		display: none;
		border: 1px solid #000;
			border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
			box-shadow: 4px 4px 12px #000;
		-webkit-box-shadow: 4px 4px 12px #000;
		-moz-box-shadow: 4px 4px 12px #000;
		-ms-box-shadow: 4px 4px 12px #000;
		-o-box-shadow: 4px 4px 12px #000;
	}
	#videoCloseX:hover{
		opacity: 8!important;
	}

	#artCloseX{
		position:absolute;
		background:url("iMGS/closeX.png");
		background-position: -1px -1px;
		background-repeat: none;
		right: 1px;
		top: 1px;
		width: 45px;
		height: 45px;
		z-index: 999;
		overflow:hidden;
		opacity: .3;
		cursor: grabbing;
		display: none;
		border: 1px solid #000;
			border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
			box-shadow: 4px 4px 12px #000;
		-webkit-box-shadow: 4px 4px 12px #000;
		-moz-box-shadow: 4px 4px 12px #000;
		-ms-box-shadow: 4px 4px 12px #000;
		-o-box-shadow: 4px 4px 12px #000;
	}
	#artCloseX:hover{
		opacity: 8!important;
	}

	#blogContainer{
		display: none;
		position: absolute;
		background-color: #0ED111;
		width: 80%!important;	
		left: 50%;
		margin-left: -40%!important;
		height: 100%;
		top: 0;
		z-index: 897;
		overflow: hidden;
		border-left: 1px solid #7adb4b;
		border-right: 1px solid #7adb4b;
			box-shadow: 2px 2px 40px #7adb4b;
		-webkit-box-shadow: 2px 2px 40px #7adb4b;
		-moz-box-shadow: 2px 2px 40px #7adb4b;
		-ms-box-shadow: 2px 2px 40px #7adb4b;
		-o-box-shadow: 2px 2px 40px #7adb4b;
	}
	#blogCloseX{
		position: absolute;
		background:url("iMGS/closeX.png");
		background-repeat: none;
		background-position: -1px -1px;
		right: 18px;
		top: 2px;
		width: 45px;
		height: 45px;
		z-index: 999;
		overflow:hidden;
		opacity: .2;
		cursor: grabbing;
		display: none;
		border: 1px solid #000;
			border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
			box-shadow: 4px 4px 12px #000;
		-webkit-box-shadow: 4px 4px 12px #000;
		-moz-box-shadow: 4px 4px 12px #000;
		-ms-box-shadow: 4px 4px 12px #000;
		-o-box-shadow: 4px 4px 12px #000;
	}
	#blogCloseX:hover{
		opacity: .8;
	}

	#campaignContainer{
		display: none;
		position: absolute;
		background-color: #fc0;
		width: 80%;	
		left: 50%;
		margin-left: -40%;
		height: 100%;
		top: 0;
		z-index: 897;
		overflow: hidden;
		border-left: 1px solid #FFCC00;
		border-right: 1px solid #FFCC00;
			box-shadow: 2px 2px 40px #FFCC00;
		-webkit-box-shadow: 2px 2px 40px #FFCC00;
		-moz-box-shadow: 2px 2px 40px #FFCC00;
		-ms-box-shadow: 2px 2px 40px #FFCC00;
		-o-box-shadow: 2px 2px 40px #FFCC00;
	}
	#campaignButton{
		position: fixed;
		background-image: url(iMGS/campaignButton.png);
		width: 300px;
		height: 64px;
		bottom: 16px;
		left: 50%;
		margin-left: -150px;
		cursor: default;	/*change to 'pointer' after campaign is launched*/
		z-index: 999;
		opacity: 0;
	}
	#campaignCloseX{
		position: absolute;
		background:url("iMGS/closeX.png");
		background-repeat: none;
		background-position: -1px -1px;
		right: 18px;
		top: 2px;
		width: 45px;
		height: 45px;
		z-index: 999;
		overflow:hidden;
		opacity: .2;
		cursor: grabbing;
		display: none;
		border: 1px solid #000;
			border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
			box-shadow: 4px 4px 12px #000;
		-webkit-box-shadow: 4px 4px 12px #000;
		-moz-box-shadow: 4px 4px 12px #000;
		-ms-box-shadow: 4px 4px 12px #000;
		-o-box-shadow: 4px 4px 12px #000;
	}
	#campaignCloseX:hover{
		opacity: .8;
	}

	/* BLUE choice image gallery for small displays*/
	#imageGalleryMask{
		position: absolute;
		width: 560px;
		height: 310px;
		left: 50%;
		margin-left: -280px;
		top: 80px;
		z-index: 897;
		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 #1F88E2;
		-webkit-box-shadow: 2px 2px 40px #1F88E2;
		-moz-box-shadow: 2px 2px 40px #1F88E2;
		-ms-box-shadow: 2px 2px 40px #1F88E2;
		-o-box-shadow: 2px 2px 40px #1F88E2;
	}
	#imageGallery{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}


	#videoMask{
		display: none;
		position: absolute;
		width: 640px;
		height: 360px;
		left:50%;
		margin-left: -320px;
		top: 80px;
		z-index: 897;
		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 #DA0909;
		-webkit-box-shadow: 2px 2px 40px #DA0909;
		-moz-box-shadow: 2px 2px 40px #DA0909;
		-ms-box-shadow: 2px 2px 40px #DA0909;
		-o-box-shadow: 2px 2px 40px #DA0909;
	}
	#videoInsert{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	iframe{
		border: none!important;
		padding: 0!important;
		z-index: 897;
	}


	

	#embMetal{
		display: none;
	}
	#embAltMetal{
		display: none;
	}
	/* goat... */
	#goatcage{
		position: absolute;
		left: 50%;
		bottom: 0px;	
		width: 1px;
		height: 100%;
		z-index: 899;

	}
	#goat{
		position: absolute;
		background:url("iMGS/KK.png");
		background-position: center -550px;
		background-repeat: no-repeat;
		bottom: -350px;
		left:50%;
		margin-left:-205px;
		width:431px;
		height: 612px;
		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: 899;
		overflow:hidden;
		opacity:.95;
		border-right: 2px solid white;
		border-top: 2px solid #0F0;
		border-bottom: 2px solid #CF0;
		border-radius: 24px;
	}

	#guns{
		position: fixed;	
		background:url("iMGS/guns.png");
		background-position: top center;
		background-repeat: no-repeat;
		z-index: 899;
		top: 0;
		margin-top: -34px;
		left: 50%;
		margin-left: -330px;
		width: 660px;
		height: 270px;
		overflow: hidden;
		opacity: 1;
	}
	.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);
	}
	.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);
	}

	#ospreysm{
		position: absolute;
		background:url("iMGS/osprei_ver1335.png");
		background-repeat: no-repeat;
		top: 150px;
		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: 130px;
		right: 0px;
		margin-right: -2000px;
		width:621px;
		height: 387px;
		z-index: 895;
		opacity: 1;
		display: none;
	}

	.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;
	}



	/*externalcrunkmetal*/
	#msg{
		position: absolute;
		background-image: url('iMGS/m.png');	
		opacity: .5;
		right: 1px;
		bottom: 8px;
		width: 40px;
		height: 56px;
		overflow: hidden;
		z-index: 999;
	}
	#msg:hover{
		cursor: grabbing;
	}
	.putonghua{
		font-color: #fff;
		font-size: 14px;
		font-family: tahoma;
		word-wrap: break-word;
		text-decoration:none;
	}
	/* STOPWATCH*/
	.stopwatch .controls {
		font-size: 20px;
		position: absolute;
		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: absolute;
		top: 2px;
		right: 10px;
		margin-right:-70px;
		width:250px;
		height: 40px;
		z-index: 999;
		opacity:.85;
		font-size: 2em;
		font-family: DigitalReadout;
		color: red;1
	}

	#footer{
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 2px;
		padding-bottom: 0;
		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;
	}
}