/*Horizontal circles as bars loader-3 */
#loader-3 #loader{
	position: absolute;
	width: 2vw;
	height: 2vw;
	background: rgb(37, 118, 148);
	top:50%;
	left: 50%;
	border-radius: 50%;
    z-index: 1500;
    -webkit-animation: forward 2.3s linear infinite;
    -moz-animation: forward 2.3s linear infinite;
    -o-animation: forward 2.3s linear infinite;
    animation: forward 2.3s linear infinite ;
}
@media screen and (min-width: 1024px) {
	#loader-3 #loader {
		gap: 0px;
		width: 2vw;
		height: 2vw;
	}
}

#loader-3 > #loader:nth-of-type(1) {
	-webkit-animation-delay: -0.46s;
	-moz-animation-delay: -0.46s;
	-o-animation-delay: -0.46s;
		animation-delay: -0.46s;
}

#loader-3 > #loader:nth-of-type(2) {
	-webkit-animation-delay: -0.92s;
	-moz-animation-delay: -0.92s;
	-o-animation-delay: -0.92s;
		animation-delay: -0.92s;
}
#loader-3 > #loader:nth-of-type(3) {
	-webkit-animation-delay: -1.38s;
	-moz-animation-delay: -1.38s;
	-o-animation-delay: -1.38s;
		animation-delay: -1.38s;
}
#loader-3 > #loader:nth-of-type(4) {
	-webkit-animation-delay: -1.84s;
	-moz-animation-delay: -1.84s;
	-o-animation-delay: -1.84s;
		animation-delay: -1.84s;
}

/*keyframes for forward animations*/

@-webkit-keyframes forward {
	0% {
		left: 40%;
		opacity: 0;
		background: rgb(0, 204, 255);
	}
	10% {
		left: 45%;
		opacity: 1;
	}
	90% {
		left: 55%;
		opacity: 1;
	}
	100% {
		left: 62%;
		opacity: 0;
	}
}

@-moz-keyframes forward {
	0% {
		left: 40%;
		opacity: 0;
		background: rgb(0, 204, 255);
	}
	10% {
		left: 45%;
		opacity: 1;
	}
	90% {
		left: 55%;
		opacity: 1;
	}
	100% {
		left: 62%;
		opacity: 0;
	}
}

@-o-keyframes forward {
	0% {
		left: 40%;
		opacity: 0;
		background: rgb(0, 204, 255);
	}
	10% {
		left: 45%;
		opacity: 1;
	}
	90% {
		left: 55%;
		opacity: 1;
	}
	100% {
		left: 62%;
		opacity: 0;
	}
}

@keyframes forward {
	0% {
		left: 40%;
		opacity: 0;
		background: rgb(0, 204, 255);
	}
	10% {
		left: 45%;
		opacity: 1;
	}
	90% {
		left: 55%;
		opacity: 1;
	}
	100% {
		left: 62%;
		opacity: 0;
	}
}