@font-face { font-family: metaguFont; src: url('../Fonts/EurostileTBlaExt.eot'); src: url('../Fonts/EurostileTBlaExt.eot?#iefix') format('embedded-opentype'), url('../Fonts/EurostileTBlaExt.ttf') format('truetype'); font-weight: normal; font-style: normal; }


#metaguNameContainer { position: absolute; top: 0; left: 0; width: 360px; height: 79px; }
#metaguNameTop       { position: absolute; top: 0; left: 0; width: 360px; height: 79px; z-index: 2; }
#metaguNameBot 		 { position: absolute; top: 0; left: 0; width: 360px; height: 79px; z-index: 1; }
p#metaguShineTop, p#metaguShineBot {
    font-size: 79px; font-family: metaguFont, Verdana; text-shadow: none;
    width: 360px; margin: 0 auto 0 auto; transform: translateY(1%); -ms-transform: translateY(1%); -webkit-transform: translateY(1%); -o-transform: translateY(1%); /* fixes iPad Mini pixel line issue */
}
#metaguShineTop {
	background: rgba(0, 251, 255, 0.0) -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1)), color-stop(0.5, #fff)) 0 0 no-repeat;
    color: rgba(0, 251, 255, 1); -webkit-text-fill-color: transparent;	/* due to IE */
	background-size: 79px; /*280px 46px;*/ background-clip: text;
    animation-name: shineLeftRight; animation-duration: 3.7s; animation-iteration-count: infinite;
	-webkit-background-size: 79px; /*280px 46px;*/ -webkit-background-clip: text;
    -webkit-animation-name: shineLeftRight; -webkit-animation-duration: 3.7s; -webkit-animation-iteration-count: infinite;
}
#metaguShineBot {
	/*background-image: linear-gradient(to right, rgba(0, 251, 255, 1), rgba(0, 146, 250, 1));*/	/* changed to webkit to prevent IE using it */
	background-image: -webkit-linear-gradient(left, rgba(0, 251, 255, 1), rgba(0, 146, 250, 1));
	color: rgba(0, 251, 255, 1); -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

#metaguLongNameContainer { position: absolute; top: 79px; left: 0; width: 360px; height: 46px; }
#metaguLongName          { position: absolute; top: 0; left: 0; width: 360px; height: 46px; }
p#metaguLongShine {
    font-size: 14px; font-family: metaguFont, Verdana; text-shadow: none;
    width: 360px; margin: 0 auto 0 auto; transform: translateY(1%); -ms-transform: translateY(1%); -webkit-transform: translateY(1%); -o-transform: translateY(1%); /* fixes iPad Mini pixel line issue */
}
#metaguLongShine {
	background: #C0BEC0 -webkit-gradient(linear, left top, right top, from(#C0BEC0), to(#C0BEC0), color-stop(0.5, #fff)) 0 0 no-repeat;
    color: rgba(192, 190, 192, 1); -webkit-text-fill-color: transparent;
	background-size: 46px; /*280px 46px;*/ background-clip: text;
    animation-name: shineLeftRight; animation-duration: 3.7s; animation-iteration-count: infinite;
	-webkit-background-size: 46px; /*280px 46px;*/ -webkit-background-clip: text;
    -webkit-animation-name: shineLeftRight; -webkit-animation-duration: 3.7s; -webkit-animation-iteration-count: infinite;
}

@keyframes shineLeftRight { 0% { background-position: top left; } 100% { background-position: top right; } }









#loadingScreen { background-color: black; width: 100%; height: 100%; z-index: 10; position: absolute; top: 0; left: 0; text-align: center; transform-style: preserve-3d; }
#loadingScreenContent { position: relative; top: 50%; width: 100%; height: 232px; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); margin: -4% 0 0 0;}

#logoScreen { background-color: black; width: 100%; height: 100%; z-index: 10; position: absolute; top: 0; left: 0; text-align: center; transform-style: preserve-3d; }
#logoScreenContent { position: relative; top: 50%; width: 100%; height: 232px; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); margin: -4% 0 0 0;}


#orbVid { 
	position: absolute; top: 17px; left: 50%; /*margin: -8px 0 0 0;*/
	transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); 
	width: 124px; height: 124px;
	background-image: url("../Mobile/Loading/LogoOrb/Orb_124x124.gif");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#metagu { 
	position: absolute; top: 126px; left: 50%; /*margin: -8px 0 0 0;*/
	transform: translate(-50%,-1%); -ms-transform: translate(-50%,-1%); -webkit-transform: translate(-50%,-1%); -o-transform: translate(-50%,-1%); 
	/*width: 269px; height: 46px;*/
	width: 360px; height: 92px;
	/*background-image: url("../Loading/Metagu_Blue_White_Strapline_SD.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;*/
}



#loadingBarBg { 
	position: absolute;
	top: 228px;
	left: 50%;
	transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); 
	background: #5f5f5f;
	width: 264px;
	height: 8px;
	/*border:10px solid #282828;*/
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 0px 5px 17px rgba(40, 40, 40, 0.5);
	margin: 0 auto;
}

#loadingBar {
	height: 8px;
	/*width: 264px;*/
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-image: url('../Mobile/Loading/Loading_Bar_SD_pixel3a.png');
	background-repeat: repeat-y;
	background-size: 264px 100%;
	width: 0;
}

#loadingBarFill {
	width: 100%;
	height: 100%;
	border-radius: 3px;
	-webkit-animation: progress 1.5s linear infinite;
	-moz-animation: progress 1.5s linear infinite;
	animation: progress 1.5s linear infinite;
	background-repeat: repeat-x;
	background-size: 30px 30px;
	background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);
}

@-webkit-keyframes progress { to { background-position: 30px 0; } }
@-moz-keyframes progress { to {background-position: 30px 0; } }
@keyframes progress { to {background-position: 30px 0; } }











#videoScreen { position: absolute;  left: 50%; width: 960px; height: 540px; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); z-index: 7; }

#videoSkip {
	position: absolute;
	top: 458px;
	width: 60px;
	left: 50%;
	transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); 
	text-shadow: -1px 0 grey, 0 1px grey, 1px 0 grey, 0 -1px grey;
	font-size: 20px; font-family: Verdana;
	color: rgba(255,255,255,0.8);
	z-index: 8;
}
#behindVideo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; }









#featuresScreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:black; }

/*#loading_background {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url("../Mobile/Background/Generic/Super_Eight_BG.jpg"); background-size: 100% 100%; background-repeat: no-repeat; }*/
#loading_background {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url("../Mobile/Background/Generic/black.png"); background-size: 100% 100%; background-repeat: no-repeat; }


#featuresAll {
	z-index: 4;
	margin: 0 auto;
	width: 100%;
	height: 540px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); 
}

#featuresAnimatedBackgroundCanvas {
	position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0;
}

@keyframes animationFeaturesGameLogo {
	  0% { width: 0; height: 0; opacity: 0; }
	 45% { width: 390px ; height: 250px; opacity: 1; }
	 /*45% { width: 100%; height: 100%; opacity: 1; }*/
	 /*60% { width: 100%; height: 100%; }*/
	/*100% { width: 30%; height: 30%; }*/	/* #4269 removing this fixes Edge/IE issue and it still works for others */
}


@keyframes animationFeatureBox {
	  0% { opacity: 0; }
	 50% { opacity: 0; }
	100% { opacity: 1; }
}

#loadingGameLogo {
	position: absolute; top: 76px; left: 50%;
	transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); 
	width: 220px; height: 140px;
	background-image: url("../Mobile/Loading/Super_Eight_Logo.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	animation: animationFeaturesGameLogo 3.8s linear forwards;
}

#featuresCashpot, #featuresWildMultiplier, #featuresScatter, #featuresFreeSpins {
	position: absolute;
	top: 120px;
	transform: translate(0,0); -ms-transform: translate(0,0); -webkit-transform: translate(0,0); -o-transform: translate(0,0);
	height: 310px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	animation: animationFeatureBox 4s linear forwards;
}

#featuresCashpot {
	width: 216px;
	background-image: url("../Mobile/MessageBoxes/Display_Panel.png");
	left: 36px;
}

#featuresWildMultiplier {
	width: 216px;
	background-image: url("../Mobile/MessageBoxes/Display_Panel.png");
	left: 261px;
}

#featuresScatter {
	width: 216px;
	background-image: url("../Mobile/MessageBoxes/Display_Panel.png");
	left: 485px;
}

#featuresFreeSpins {
	width: 216px;
	background-image: url("../Mobile/MessageBoxes/Display_Panel.png");
	left: 709px;
}

#featuresCashpotTitle, #featuresWildMultiplierTitle, #featuresScatterTitle, #featuresFreeSpinsTitle {
	position: absolute;
	width: 168px;
	color: #eee1ec;
	text-shadow: none;
	top: 172px; left: 25px;
}

#featuresCashpotTitle 				{ text-shadow: 0px 0px 8px #014af8, 0px 0px 8px #014af8, 0px 0px 8px #014af8; font-size: 1.4em; }
#featuresWildMultiplierTitle 		{ text-shadow: 0px 0px 8px #fdf900, 0px 0px 8px #fdf900, 0px 0px 8px #fdf900; font-size: 1.2em; }
#featuresScatterTitle  		{ text-shadow: 0px 0px 8px #07ff0b, 0px 0px 8px #07ff0b, 0px 0px 8px #07ff0b; font-size: 1.4em; }
#featuresFreeSpinsTitle   	{ text-shadow: 0px 0px 8px #ff2306, 0px 0px 8px #ff2306, 0px 0px 8px #ff2306; font-size: 1.4em; }

#featuresCashpotText, #featuresWildMultiplierText, #featuresScatterText, #featuresFreeSpinsText {
	position: absolute;
	width: 170px;
	color: #f4c024;
	text-shadow: none;
	top: 203px; left: 22px;
}

#featuresCashpotText 				{ font-size: 1em; }
#featuresWildMultiplierText   		{ font-size: 1em; }
#featuresScatterText 		 	{ font-size: 1em; }
#featuresFreeSpinsText  	{ font-size: 1em; }


#featuresCashpotImage, #featuresWildMultiplierImage, #featuresScatterImage, #featuresFreeSpinsImage {
	position: absolute;
	left: 37px;
	top: 26px;
	-ms-transform: translate(0,0); -webkit-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);
	width: 152px;
	height: 143px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#featuresCashpotImage {
	background-image: url("../Mobile/Loading/features_cashpot.png");
}

#featuresWildMultiplierImage {
	background-image: url("../Mobile/Symbols/SymWildX5/SYM_X5_Win_Static.png");
}

#featuresScatterImage {
	background-image: url("../Mobile/Symbols/SymScatter/SYM_Scatter_Static.png");
}

#featuresFreeSpinsImage {
	background-image: url("../Mobile/Symbols/SymFreeSpins/SYM_Free_Spins_Static.png");
}



#featuresPlayButton { display: block; position: absolute; left: 50%; top: 0; -ms-transform: translateX(-49%); -webkit-transform: translateX(-49%); -o-transform: translateX(-49%); transform: translateX(-49%); animation: animationFeatureBox 4s linear forwards; }

#featuresMetaGULogo {
	position: absolute;
	right: 1%; top: 2%;
	width: 10%; height: 5%;
	background-image: url("../Mobile/Loading/metagu_logo.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	animation: animationFeatureBox 4s linear forwards;
}


#featuresRotate { display: block; position: absolute; top: 0; right: 30px; animation: animationFeatureBox 4s linear forwards; }
#featuresRotateImage { display: block; position: absolute; width: 137px; height: 92px; top: 0; right: 0; }
#featuresRotateText { display: block; position: absolute; width: 240px; top: 0; right: 10px; font-size: 0.8em; font-family: Verdana; color: #f4c024; text-shadow: none; text-align: right; }