﻿div#preloader {

	position: fixed;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background-color: #fff;

	z-index: 99999;

}

.loader {

	position: absolute;

	left: 45%;

	top: 41%;

}

.loader span {

	width: 16px;

	height: 16px;

	border-radius: 50%;

	display: inline-block;

	position: absolute;

	left: 50%;

	margin-left: -10px;

	-webkit-animation: 3s infinite linear;

	-moz-animation: 3s infinite linear;

	-o-animation: 3s infinite linear;

}

.loader h1 {

	color: #525866;

	font-size: 36px;

	letter-spacing: 1px;

	font-weight: 400;

	text-align: center;

}

.loader span:nth-child(2) {

	background: #525866;

	-webkit-animation: kiri 1.2s infinite linear;

	-moz-animation: kiri 1.2s infinite linear;

	-o-animation: kiri 1.2s infinite linear;

}

.loader span:nth-child(3) {

	background: #02ADC6;

	z-index: 100;

}

.loader span:nth-child(4) {

	background: #525866;

	-webkit-animation: kanan 1.2s infinite linear;

	-moz-animation: kanan 1.2s infinite linear;

	-o-animation: kanan 1.2s infinite linear;

}

 @-webkit-keyframes kanan {

 0% {

-webkit-transform:translateX(20px);

}

 50% {

-webkit-transform:translateX(-20px);

}

 100% {

-webkit-transform:translateX(20px);

 z-index:200;

}

}

@-moz-keyframes kanan {

 0% {

-moz-transform:translateX(20px);

}

 50% {

-moz-transform:translateX(-20px);

}

 100% {

-moz-transform:translateX(20px);

 z-index:200;

}

}

@-o-keyframes kanan {

 0% {

-o-transform:translateX(20px);

}

 50% {

-o-transform:translateX(-20px);

}

 100% {

-o-transform:translateX(20px);

 z-index:200;

}

}

 @-webkit-keyframes kiri {

 0% {

-webkit-transform:translateX(-20px);

 z-index:200;

}

 50% {

-webkit-transform:translateX(20px);

}

 100% {

-webkit-transform:translateX(-20px);

}

}

 @-moz-keyframes kiri {

 0% {

-moz-transform:translateX(-20px);

 z-index:200;

}

 50% {

-moz-transform:translateX(20px);

}

 100% {

-moz-transform:translateX(-20px);

}

}

@-o-keyframes kiri {

 0% {

-o-transform:translateX(-20px);

 z-index:200;

}

 50% {

-o-transform:translateX(20px);

}

 100% {

-o-transform:translateX(-20px);

}

}
 
