/********************************************************************************/
/* LOADER
/********************************************************************************/


#site-loader {
	position: fixed;
	z-index: -9999;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #170000;
	opacity: 0;
	-webkit-transition: opacity 0.35s ease 0s, z-index 0s ease 0.35s;
		-ms-transition: opacity 0.35s ease 0s, z-index 0s ease 0.35s;
			transition: opacity 0.35s ease 0s, z-index 0s ease 0.35s; 
}
#site-loader.on {
	z-index: 9999;
	opacity: 1;
	-webkit-transition: opacity 0.35s ease 0s;
		-ms-transition: opacity 0.35s ease 0s;
			transition: opacity 0.35s ease 0s; 
}


.loading-animation {
	position: absolute;
	top: 33.3333%;
	left: 50%;
	width: 100px;
	height: 100px;
	margin-left: -50px;
	opacity: 0;
	-webkit-transition: opacity 0.35s ease 0.65s;
		-ms-transition: opacity 0.35s ease 0.65s;
			transition: opacity 0.35s ease 0.65s; 
}
.loader.animated .loading-animation {
	opacity: 1;
}

.loading-animation span {
	display: block;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
		-ms-border-radius: 50%;
		 -o-border-radius: 50%;
	border-radius: 50%;
	border: 4px solid #8b8080;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		 -o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
}
.loading-animation span:first-child {
	width: 100%;
	height: 100%;
	border-left-color: transparent;
	top: 0;
	left: 0;
}
.loader.animated .loading-animation span:first-child {
	-webkit-animation: effect-1-1 4s infinite linear;
	   -moz-animation: effect-1-1 4s infinite linear;
		-ms-animation: effect-1-1 4s infinite linear;
		 -o-animation: effect-1-1 4s infinite linear;
			animation: effect-1-1 4s infinite linear;	
}
.loading-animation span:nth-child(2) {
	width: 75%;
	height: 75%;
	border-right-color: transparent;
	top: 12.5%;
	left: 12.5%;
}
.loader.animated .loading-animation span:nth-child(2) {
	-webkit-animation: effect-1-2 3s infinite linear;
	   -moz-animation: effect-1-2 3s infinite linear;
		-ms-animation: effect-1-2 3s infinite linear;
		 -o-animation: effect-1-2 3s infinite linear;
			animation: effect-1-2 3s infinite linear;
}
.loading-animation span:last-child {
	width: 50%;
	height: 50%;
	border-bottom-color: transparent;
	top: 25%;
	left: 25%;
}
.loader.animated .loading-animation span:last-child  {
	-webkit-animation: effect-1-1 2s infinite linear;
	   -moz-animation: effect-1-1 2s infinite linear;
		-ms-animation: effect-1-1 2s infinite linear;
		 -o-animation: effect-1-1 2s infinite linear;
			animation: effect-1-1 2s infinite linear;
}
@-webkit-keyframes effect-1-1 {
	from {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes effect-1-1 {
	from {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-webkit-keyframes effect-1-2 {
	from {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes effect-1-2 {
	from {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.loading-message {
	position: absolute;
	top: 33.3333%;
	left: 0;
	width: 100%;
	margin-top: 100px;
	padding: 50px;
	text-align: center;
	color: #8b8080;
	opacity: 0;
	-webkit-transition: opacity 0.35s ease 0.65s;
		-ms-transition: opacity 0.35s ease 0.65s;
			transition: opacity 0.35s ease 0.65s; 
}
.loader.animated .loading-message {
	opacity: 1;
}

/********************************************************************************/