body {
	-webkit-tap-highlight-color: transparent;
	background-image: linear-gradient(-45deg, #000, #151515);
	font-size: 100%;
	font-family: open sans;
	font-weight: 100;
	height: 100%
}

.loader {
	position: fixed;
	z-index: 100;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-mos-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	text-align: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default
}

.loader {
	width: 80%;
	height: 36px;
	overflow: visible
}

.loader div {
	position: absolute;
	width: 30px;
	height: 36px;
	margin: 0 10px;
	opacity: 0;
	animation: move 2s linear infinite;
	-o-animation: move 2s linear infinite;
	-moz-animation: move 2s linear infinite;
	-webkit-animation: move 2s linear infinite;
	transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	color: #fff;
	font-size: 4em
}
.loader1{
    color: #fff!important;
}
.loader2{
    color: #fff!important;
}
.loader3{
    color: #fff!important;
}
.loader4{
    color: #fff!important;
}
.loader5{
    color: #fff!important;
}
.loader6{
	color: #fff!important;
}
.loader7{
	color: #fff!important;
}
.loader8{
	color: #fff!important;
}
.loader div:nth-child(8):before {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 0;
	width: 30px;
	height: 30px;
	background: #db2f00;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%
}

.loader div:nth-child(9):before {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 0;
	width: 30px;
	height: 30px;
	background: #f2f2f2;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%
}

.loader div:nth-child(10):before {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 0;
	width: 30px;
	height: 30px;
	background: #13a3a5;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%
}

.loader div:after {
	content: '';
	position: absolute;
	bottom: -55px;
	left: 0;
	width: 40px;
	height: 5px;
	background: #fff;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%
}

.loader div:nth-child(2) {
	animation-delay: .2s;
	-o-animation-delay: .2s;
	-moz-animation-delay: .2s;
	-webkit-animation-delay: .2s
}

.loader div:nth-child(3) {
	animation-delay: .4s;
	-o-animation-delay: .4s;
	-webkit-animation-delay: .4s;
	-webkit-animation-delay: .4s
}

.loader div:nth-child(4) {
	animation-delay: .6s;
	-o-animation-delay: .6s;
	-moz-animation-delay: .6s;
	-webkit-animation-delay: .6s
}

.loader div:nth-child(5) {
	animation-delay: .8s;
	-o-animation-delay: .8s;
	-moz-animation-delay: .8s;
	-webkit-animation-delay: .8s
}

.loader div:nth-child(6) {
	animation-delay: 1s;
	-o-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-webkit-animation-delay: 1s
}

.loader div:nth-child(7) {
	animation-delay: 1.2s;
	-o-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	-webkit-animation-delay: 1.2s
}

.loader div:nth-child(8) {
	animation-delay: 1.4s;
	-o-animation-delay: 1.4s;
	-moz-animation-delay: 1.4s;
	-webkit-animation-delay: 1.4s
}

.loader div:nth-child(9) {
	animation-delay: 1.6s;
	-o-animation-delay: 1.6s;
	-moz-animation-delay: 1.6s;
	-webkit-animation-delay: 1.6s
}

.loader div:nth-child(10) {
	animation-delay: 1.8s;
	-o-animation-delay: 1.8s;
	-moz-animation-delay: 1.8s;
	-webkit-animation-delay: 1.8s
}

@keyframes move {
	0% {
		right: 0;
		opacity: 0
	}

	35% {
		right: 41%;
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1
	}

	65% {
		right: 59%;
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1
	}

	100% {
		right: 100%;
		-moz-transform: rotate(-180deg);
		-webkit-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		transform: rotate(-180deg);
		opacity: 0
	}
}

@-moz-keyframes move {
	0% {
		right: 0;
		opacity: 0
	}

	35% {
		right: 41%;
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1
	}

	65% {
		right: 59%;
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1
	}

	100% {
		right: 100%;
		-moz-transform: rotate(-180deg);
		transform: rotate(-180deg);
		opacity: 0
	}
}

@-webkit-keyframes move {
	0% {
		right: 0;
		opacity: 0
	}

	35% {
		right: 41%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1
	}

	75% {
		right: 59%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1
	}

	100% {
		right: 100%;
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
		opacity: 0
	}
}

@-o-keyframes move {
	0% {
		right: 0;
		opacity: 0
	}

	35% {
		right: 41%;
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1
	}

	65% {
		right: 59%;
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1
	}

	100% {
		right: 100%;
		-o-transform: rotate(-180deg);
		transform: rotate(-180deg);
		opacity: 0
	}
}
@media (max-width: 767px) {
    .loader{
        width: 100%;
    }
    .loader div{
        font-size: 2em;
    }
    .loader div:after{
        bottom: -20px;
        width: 22px;
        height: 3px;
    }
}