#loading {
	background-color: #000;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 10001
}

#loading .dot {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 20px;
	top: 50%;
	background-color: #0097FB;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	-webkit-animation: 3s linear loader infinite;
	animation: 3s linear loader infinite
}

#loading .dot:nth-of-type(1) {
	left: 0px
}

#loading .dot:nth-of-type(2) {
	left: -10px;
	-webkit-animation-delay: 0.15s;
	animation-delay: 0.15s
}

#loading .dot:nth-of-type(3) {
	left: -20px;
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s
}

#loading .dot:nth-of-type(4) {
	left: -30px;
	-webkit-animation-delay: 0.45s;
	animation-delay: 0.45s
}

#loading .dot:nth-of-type(5) {
	left: -40px;
	-webkit-animation-delay: 0.60s;
	animation-delay: 0.60s
}

#loading.closed {
	-webkit-animation: fadeOut 0.3s;
	-moz-animation: fadeOut 0.3s;
	animation: fadeOut 0.3s
}

@-webkit-keyframes loader {
	0%,20% {
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
		opacity: 0
	}

	35% {
		-webkit-transform: translate(45vw, -50%);
		transform: translate(45vw, -50%);
		opacity: 1
	}

	65% {
		-webkit-transform: translate(55vw, -50%);
		transform: translate(55vw, -50%);
		opacity: 1
	}

	80%,100% {
		-webkit-transform: translate(100vw, -50%);
		transform: translate(100vw, -50%);
		opacity: 0
	}
}

@keyframes loader {
	0%,20% {
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
		opacity: 0
	}

	35% {
		-webkit-transform: translate(45vw, -50%);
		transform: translate(45vw, -50%);
		opacity: 1
	}

	65% {
		-webkit-transform: translate(55vw, -50%);
		transform: translate(55vw, -50%);
		opacity: 1
	}

	80%,100% {
		-webkit-transform: translate(100vw, -50%);
		transform: translate(100vw, -50%);
		opacity: 0
	}
}