/* Preload css */
#loader-wrapper {
	position: fixed;
	display: grid;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #2b3143;
	z-index: 1002;
}

@keyframes clockwise {
	to {
		transform: rotate(360deg) translateZ(0);
	}
}

@-webkit-keyframes clockwise {
	to {
		transform: rotate(360deg) translateZ(0);
	}
}

@-moz-keyframes clockwise {
	to {
		transform: rotate(360deg) translateZ(0);
	}
}

#loader-collection {
	position: absolute;
	top: 50%;
	left: 50%;

	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%,-50%);
}

#loader{
	display: block;
	margin-right: auto;
	margin-left: auto;
	background-color: transparent;
	width:  8px;
	height: 8px;
	border-radius: 100%;
	box-shadow:
	     12px -12px rgba(242, 21, 41, 0.125),
	     17px     0 rgba(242, 21, 41, 0.250),
	     12px  12px rgba(242, 21, 41, 0.375),
	        0  17px rgba(242, 21, 41, 0.500),
	    -12px  12px rgba(242, 21, 41, 0.625),
	    -17px     0 rgba(242, 21, 41, 0.750),
	    -12px -12px rgba(242, 21, 41, 0.875),
	        0 -17px rgba(242, 21, 41, 1.000);

	-webkit-animation: clockwise 0.74s steps(8, end) infinite;
	-moz-animation: clockwise 0.74s steps(8, end) infinite;
	animation: clockwise 0.75s steps(8, end) infinite;
}

#loader-collection {
	display: block;
}

#loader-running {
	display: block;
	margin-top: 35px;
}

#loader-collection #loader-pic {
	max-width: 120px;
}

#loader-collection #loader-pic .image-loader {
	display: block;
	width: 100%;
}

/*#loader-wrapper .loader-section {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #2b3143;
	z-index: 1000;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}
*/
.loaded #loader-wrapper .loader-section {
	opacity: 0;

	-webkit-transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	-moz-transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-pic,
.loaded #loader {
	transform: scale(0,0) rotate(35deg);

	opacity: 0;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	transition: all .3s ease-out;
}

.loaded #loader-wrapper {
	visibility: hidden;

	transform: translateY(100%);
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);

	-webkit-transform-origin: bottom;
	-moz-transform-origin: bottom;
	transform-origin: bottom;
	/*opacity: 0;*/

	-webkit-transition: all .3s 1s ease-out;
	-moz-transition: all .3s 1s ease-out;
	transition: all .3s 1s ease-out;
}

/* Javascript Turn Off */
.no-js #loader-wrapper {
	display: none;
}