﻿#pageSpinnerMask {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 9999;
	display: none;
}

	#pageSpinnerMask .mask-background {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		opacity: 0.8;
		filter: alpha(opacity = 80);
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	}

	#pageSpinnerMask .win8spinner {
		position:absolute;
		top:100px;
		left:50%;
		margin-left:-50px;
	}

	#pageSpinnerMask .loader-text {
		color: white;
		font-size: 3em;
		left: 20px;
		position: absolute;
		right: 20px;
		text-align: center;
		text-shadow: 0 0 10px #FF7F00;
		top: 200px;
	}

.win8spinner {
	background-color: transparent;
	height: 100px;
	width: 100px;
	position: relative;
	overflow: hidden;
}

	.win8spinner .spot {
		position: absolute;
		width: 100%;
		height: 10px;
		top: 50%;
		margin-top: -5px;
		opacity: 0;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
		-webkit-animation-duration: 6s;
		-moz-animation-duration: 6s;
		-o-animation-duration: 6s;
		animation-duration: 6s;
		-webkit-animation-name: spin;
		-moz-animation-name: spin;
		-o-animation-name: spin;
		animation-name: spin;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
		-o-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
	}

		.win8spinner .spot:after {
			position: absolute;
			content: " ";
			height: 10px;
			width: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			background-color: #ffe600;
		}

@keyframes spin {
	from {
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
		-webkit-animation-timing-function: cubic-bezier(.18,.81,.84,.3);
		-moz-animation-timing-function: cubic-bezier(.18,.81,.84,.3);
		-o-animation-timing-function: cubic-bezier(.18,.81,.84,.3);
		animation-timing-function: cubic-bezier(.18,.81,.84,.3);
		opacity: 1;
	}

	35% {
		-webkit-transform: rotate(270deg);
		-moz-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		transform: rotate(270deg);
		-webkit-animation-timing-function: cubic-bezier(.18,.81,.84,.3);
		-moz-animation-timing-function: cubic-bezier(.18,.81,.84,.3);
		-o-animation-timing-function: cubic-bezier(.18,.81,.84,.3);
		animation-timing-function: cubic-bezier(.18,.81,.84,.3);
	}

	70% {
		-webkit-transform: rotate(630deg);
		-moz-transform: rotate(630deg);
		-o-transform: rotate(630deg);
		transform: rotate(630deg);
		-webkit-animation-timing-function: linear;
		-moz-animation-timing-function: linear;
		-o-animation-timing-function: linear;
		animation-timing-function: linear;
		opacity: 1;
	}

	71% {
		opacity: 0;
	}

	to {
		-webkit-transform: rotate(630deg);
		-moz-transform: rotate(630deg);
		-o-transform: rotate(630deg);
		transform: rotate(630deg);
		opacity: 0;
	}
}

@-webkit-keyframes spin {
	from {
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
		-webkit-animation-timing-function: cubic-bezier(.18,.81,.84,.3);
		-moz-animation-timing-function: cubic-bezier(.18,.81,.84,.3);
		-o-animation-timing-function: cubic-bezier(.18,.81,.84,.3);
		animation-timing-function: cubic-bezier(.18,.81,.84,.3);
		opacity: 1;
	}

	35% {
		-webkit-transform: rotate(270deg);
		-moz-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		transform: rotate(270deg);
		-webkit-animation-timing-function: cubic-bezier(.18,.81,.84,.3);
		-moz-animation-timing-function: cubic-bezier(.18,.81,.84,.3);
		-o-animation-timing-function: cubic-bezier(.18,.81,.84,.3);
		animation-timing-function: cubic-bezier(.18,.81,.84,.3);
	}

	70% {
		-webkit-transform: rotate(630deg);
		-moz-transform: rotate(630deg);
		-o-transform: rotate(630deg);
		transform: rotate(630deg);
		-webkit-animation-timing-function: linear;
		-moz-animation-timing-function: linear;
		-o-animation-timing-function: linear;
		animation-timing-function: linear;
		opacity: 1;
	}

	71% {
		opacity: 0;
	}

	to {
		-webkit-transform: rotate(630deg);
		-moz-transform: rotate(630deg);
		-o-transform: rotate(630deg);
		transform: rotate(630deg);
		opacity: 0;
	}
}

.win8spinner .spot:nth-child(1) {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-o-animation-delay: 0s;
	animation-delay: 0s;
}

.win8spinner .spot:nth-child(2) {
	-webkit-animation-delay: .3s;
	-moz-animation-delay: .3s;
	-o-animation-delay: .3s;
	animation-delay: .3s;
}

.win8spinner .spot:nth-child(3) {
	-webkit-animation-delay: .6s;
	-moz-animation-delay: .6s;
	-o-animation-delay: .6s;
	animation-delay: .6s;
}

.win8spinner .spot:nth-child(4) {
	-webkit-animation-delay: .9s;
	-moz-animation-delay: .9s;
	-o-animation-delay: .9s;
	animation-delay: .9s;
}

.win8spinner .spot:nth-child(5) {
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	-o-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
