/*** LOADING ANIMATION ***/
div.loadAnim {
	position: absolute;
	z-index: 9999;
	width: 100px;
	height: 100px;
	left: 50%;
	margin-left: -50px;
	top: 35%;
	margin-top: -50px;
	opacity: 0;
	overflow: visible;
	border-radius: 50px;
	background-color: hsl(0, 0%, 96%);
	pointer-events: none;
}

div.loadAnimFadeIn {
	opacity: 1;
	transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
}

div.loadAnimFadeOut {
	opacity: 0;
	transition: opacity 0.25s;
	-webkit-transition: opacity 0.25s;
}

img.loadAnim {
	position: absolute;
	z-index: 3;
	display: block;
	width: 50px;
	left: 50%;
	margin-left: -25px;
	height: 37px;
	top: 50%;
	margin-top: -19px;
}

div.loadAnimSpinner {
	position: absolute;
	z-index: 2;
	left: 4px;
	top: 4px;
	width: 92px;
	height: 92px;
	border-radius: 46px;
	border-top: solid 4px hsl(205, 100%, 55%);
	border-bottom: solid 4px hsl(205, 100%, 55%);
	border-left: solid 4px hsla(0, 0%, 0%, 0);
	border-right: solid 4px hsla(0, 0%, 0%, 0);
}

.animateSpin {
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
	100% {-webkit-transform: rotate(360deg);}
}

@keyframes spin {
	100% {transform:rotate(360deg);}
}

div.progressBarFrame {
	position: absolute;
	z-index: 1;
	display: none;
	left: 0px;
	width: 100%;
	bottom: -30px;
	padding: 4px;
	background-color: hsl(0, 0%, 96%);
}

div.progressBarGroove {
	position: relative;
	height: 4px;
	background-color: hsla(0, 0%, 0%, 0.75);
}

div.progressBar {
	position: absolute;
	left: 0px;
	width: 0%;
	height: 4px;
	background-color: hsl(205, 100%, 55%);
}