/*  CSS METRO LOADER  */
/*  © Microsoft  */
/*  Edited by Martijn van Berkel  */


/* Common */

.c_loadingDots {
	line-height:0;
	white-space:nowrap;
	position:relative;
	visibility:hidden;
}

.c_loadingText {
	vertical-align:bottom;
	margin-left:5px;
}

div.c_loadingDots.c_dotsPlaying {
	visibility:visible;
}

div.c_loadingDots div.c_loadingDot {
	position:absolute;
	left:0;
	bottom:0;
}

div.c_loadingDots div.c_loadingFallback {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:transparent url(../images/flyingdots.gif) no-repeat center center;
	background-size:100% 3px;
	opacity:1;
	filter:alpha(opacity=100);
	-moz-animation:hidedotsfallback .3s linear .1s 1 normal;
	-ms-animation:hidedotsfallback .3s linear 0 1 normal;
	-webkit-animation:hidedotsfallback .3s linear 0 1 normal;
	animation:hidedotsfallback .3s linear 0 1 normal;
	-moz-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

@-moz-keyframes hidedotsfallback {
	0% {
		opacity:0;
	}

	100% {
		opacity:0;
	}
}

@-ms-keyframes hidedotsfallback {
	0% {
		opacity:0;
	}

	100% {
		opacity:0;
	}
}

@-webkit-keyframes hidedotsfallback {
	0% {
		opacity:0;
	}

	100% {
		opacity:0;
	}
}

@keyframes hidedotsfallback {
	0% {
		opacity:0;
	}

	100% {
		opacity:0;
	}
}


/* Horizontal loader */

div.c_flyingDots {
	width:100%;
	height:3px;
	font-size:0;
	overflow:hidden;
}

div.c_flyingDots div.c_loadingTracks {
	position:absolute;
	left:-10%;
	top:0;
	right:-15%;
	bottom:0;
}

div.c_flyingDots div.c_loadingTrack {
	position:absolute;
	left:0;
	top:0;
	right:0;
	height:3px;
}

div.c_flyingDots div.c_loadingDot {
	width:3px;
	height:3px;
	background-color:#4F6228;
}

div.c_flyingDots.c_dotsPlaying div.c_loadingDot {
	-moz-animation:makedotfly 3.3s linear .1s infinite normal;
	-ms-animation:makedotfly 3.3s linear 0 infinite normal;
	-webkit-animation:makedotfly 3.3s linear 0 infinite normal;
	animation:makedotfly 3.3s linear 0 infinite normal;
}

@-moz-keyframes makedotfly {
	0% {
		left:0;
		-moz-animation-timing-function:cubic-bezier(.01, .55, 1, 1);
	}

	32% {
		left:40%;
	}

	62% {
		left:58%;
		-moz-animation-timing-function:cubic-bezier(.3, .1, 1, 1);
	}

	80% {
		left:105%;
	}

	100% {
		left:105%;
	}
}

@-ms-keyframes makedotfly {
	0% {
		left:0;
		-ms-animation-timing-function:cubic-bezier(.01, .55, 1, 1);
	}

	32% {
		left:40%;
	}

	62% {
		left:58%;
		-ms-animation-timing-function:cubic-bezier(.3, .1, 1, 1);
	}

	80% {
		left:105%;
	}

	100% {
		left:105%;
	}
}

@-webkit-keyframes makedotfly {
	0% {
		left:0;
		-webkit-animation-timing-function:cubic-bezier(.01, .55, 1, 1);
	}

	32% {
		left:40%;
	}

	62% {
		left:58%;
		-webkit-animation-timing-function:cubic-bezier(.3, .1, 1, 1);
	}

	80% {
		left:105%;
	}

	100% {
		left:105%;
	}
}

@keyframes makedotfly {
	0% {
		left:0;
		animation-timing-function:cubic-bezier(.01, .55, 1, 1);
	}

	32% {
		left:40%;
	}

	62% {
		left:58%;
		animation-timing-function:cubic-bezier(.3, .1, 1, 1);
	}

	80% {
		left:105%;
	}

	100% {
		left:105%;
	}
}

div.c_flyingDots div.c_loadingTrack0 {
	left:-18%;
	margin-left:90px;
}

div.c_flyingDots div.c_loadingTrack0 div.c_loadingDot {
	-moz-animation-delay:.15s;
	-ms-animation-delay:.15s;
	-o-animation-delay:.15s;
	-webkit-animation-delay:.15s;
	animation-delay:.15s;
	opacity:0;
	filter:alpha(opacity=0);
}

div.c_flyingDots div.c_loadingTrack1 {
	left:-15%;
	margin-left:75px;
}

div.c_flyingDots div.c_loadingTrack1 div.c_loadingDot {
	-moz-animation-delay:.3s;
	-ms-animation-delay:.3s;
	-webkit-animation-delay:.3s;
	animation-delay:.3s;
}

div.c_flyingDots div.c_loadingTrack2 {
	left:-12%;
	margin-left:60px;
}

div.c_flyingDots div.c_loadingTrack2 div.c_loadingDot {
	-moz-animation-delay:.45s;
	-ms-animation-delay:.45s;
	-webkit-animation-delay:.45s;
	animation-delay:.45s;
}

div.c_flyingDots div.c_loadingTrack3 {
	left:-9%;
	margin-left:45px;
}

div.c_flyingDots div.c_loadingTrack3 div.c_loadingDot {
	-moz-animation-delay:.6s;
	-ms-animation-delay:.6s;
	-webkit-animation-delay:.6s;
	animation-delay:.6s;
}

div.c_flyingDots div.c_loadingTrack4 {
	left:-6%;
	margin-left:30px;
}

div.c_flyingDots div.c_loadingTrack4 div.c_loadingDot {
	-moz-animation-delay:.75s;
	-ms-animation-delay:.75s;
	-webkit-animation-delay:.75s;
	animation-delay:.75s;
}

div.c_flyingDots div.c_loadingTrack5 {
	left:-3%;
	margin-left:15px;
}

div.c_flyingDots div.c_loadingTrack5 div.c_loadingDot {
	-moz-animation-delay:.9s;
	-ms-animation-delay:.9s;
	-webkit-animation-delay:.9s;
	animation-delay:.9s;
}

div.c_flyingDots div.c_loadingFallback {
	height:3px;
}