.leanderMobAlert {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: none;
	z-index: 9997;
}

/* fade in & out animation */
@-webkit-keyframes LeanderMobAlertPreloadFadeIn{
	0%   {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes LeanderMobAlertPreloadFadeOut{
	0%   {opacity: 1; display: block;}
	100% {opacity: 0; display: none;}
}
@keyframes LeanderMobAlertPreloadFadeIn{
	0%   {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes LeanderMobAlertPreloadFadeOut{
	0%   {opacity: 1; display: block;}
	100% {opacity: 0; display: none;}
}
.leanderMobAlert .fade-in {
	-webkit-animation: LeanderMobAlertPreloadFadeIn 0.5s linear;
	-moz-animation: LeanderMobAlertPreloadFadeIn 0.5s linear;
	-ms-animation: LeanderMobAlertPreloadFadeIn 0.5s linear;
	-o-animation: LeanderMobAlertPreloadFadeIn 0.5s linear;
	animation: LeanderMobAlertPreloadFadeIn 0.5s linear;
}

.leanderMobAlert .fade-out {
	-webkit-animation: LeanderMobAlertPreloadFadeOut 0.5s linear;
	-moz-animation: LeanderMobAlertPreloadFadeOut 0.5s linear;
	-ms-animation: LeanderMobAlertPreloadFadeOut 0.5s linear;
	-o-animation: LeanderMobAlertPreloadFadeOut 0.5s linear;
	animation: LeanderMobAlertPreloadFadeOut 0.5s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.leanderMobAlert .preloadWindow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: rgba(0,0,0,0.75);
	pointer-events: none;
}

.leanderMobAlert .preloadWindow {
	padding: 1.2em 0;
	background-color: #000000;
	color: #CACACA; 
}

.leanderMobAlert .preloadWindow .text {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	font-family: leanderPrimaryFont, Arial, Verdana, Helvetica !important;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}

.leanderMobAlert .preloadWindow .perc {
	color: #262626;
	font-size: 5.5em;
	text-align: center;
	text-transform: none;
	font-weight: normal;
}

.leanderMobAlert .preloadWindow .tagline {
	color: #FFFFFF;
	font-size: 4em;
	width: 100%;
	text-align: center;
	text-transform: none;
	font-weight: normal;
	cursor: default;
}

.leanderMobAlert .preloadWindow .signposting {
	position: absolute;
	top: 85%;
	width: 100%;
	height: 10%;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	font-size: 1.5em;
	text-align: center;
	text-transform: none;
	font-weight: normal;
	cursor: default;
}

.leanderMobAlert .preloadWindow .tagline .play {
	font-size: 1.5em;
	color: #FF0000;
	font-weight: bold;
	text-align: center;
	text-transform: none;
}

.leanderMobAlert .preloadWindow .preloadHexagon {
	position: relative;
	top: 50%;
	margin: 1em auto;
	width: 8em; height: 13.5em;
	-webkit-border-radius: 1em/.5em;
	-moz-border-radius: 1em/.5em;
	-ms-border-radius: 1em/.5em;
	-o-border-radius: 1em/.5em;
	border-radius: 1em/.5em;
	background: #454545;
	-webkit-transform: rotate(90deg) translateX(-100%);
	-moz-transform: rotate(90deg) translateX(-100%);
	-ms-transform: rotate(90deg) translateX(-100%);
	-o-transform: rotate(90deg) translateX(-100%);
	transform: rotate(90deg) translateX(-100%);
	text-align: left;
	text-transform: none;
	font-weight: normal;
}

.leanderMobAlert .preloadWindow .preloadHexagon:before, .leanderMobAlert .preloadWindow .preloadHexagon:after {
	position: absolute;
	width: inherit; height: inherit;
	-webkit-border-radius: inherit;
	-moz-border-radius: inherit;
	-ms-border-radius: inherit;
	-o-border-radius: inherit;
	border-radius: inherit;
	background: inherit;
	content: '';
}

.leanderMobAlert .preloadWindow .preloadHexagon:before {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	transform: rotate(60deg);
}

.leanderMobAlert .preloadWindow .preloadHexagon:after {
	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	-ms-transform: rotate(-60deg);
	-o-transform: rotate(-60deg);
	transform: rotate(-60deg);
}

/* MOBILE RESPONSIVE FONT SETTINGS */

@media screen and (min-width: 1200px) {
	.leanderMobAlert { font-size: 12px; }
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
	.leanderMobAlert { font-size: 11px; }
}
@media screen and (min-width: 800px) and (max-width: 1023px) {
	.leanderMobAlert { font-size: 9px; }
}
@media screen and (min-width: 640px) and (max-width: 799px) {
	.leanderMobAlert { font-size: 8px; }
}
@media screen and (min-width: 320px) and (max-width: 639px) {
	.leanderMobAlert { font-size: 6px; }
}
@media screen and (max-width: 319px) {
	.leanderMobAlert { font-size: 5px; }
}