.loader-wrapper{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1;
    top: 0;
    background-color: rgba(100, 100, 100, .6);
}

#deleteAfterLoad {
  background-color: #000;
}

/*Horizontal circles as bars loader-3 */

.loader-3 #loader{
	position: absolute;
	width: 2vw;
	height: 2vw;
	background: rgb(255,0,0);
	top: 40%;
   transform: translateX(40vw);
	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 ;
}

.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% {
		transform: translateX(40vw);
		opacity: 0;
      filter: hue-rotate(70deg) brightness(5);
	}
	10% {
		transform: translateX(45vw);
		opacity: 1;
	}
	90% {
		transform: translateX(55vw);
		opacity: 1;
	}
	100% {
		transform: translateX(62vw);
		opacity: 0;
	}
}

@-moz-keyframes forward {
	0% {
		transform: translateX(40vw);
		opacity: 0;
      filter: hue-rotate(70deg) brightness(5);
	}
	10% {
		transform: translateX(45vw);
		opacity: 1;
	}
	90% {
		transform: translateX(55vw);
		opacity: 1;
	}
	100% {
		transform: translateX(62vw);
		opacity: 0;
	}
}

@-o-keyframes forward {
	0% {
		transform: translateX(40vw);
		opacity: 0;
      filter: hue-rotate(70deg) brightness(5);
	}
	10% {
		transform: translateX(45vw);
		opacity: 1;
	}
	90% {
		transform: translateX(55vw);
		opacity: 1;
	}
	100% {
		transform: translateX(62vw);
		opacity: 0;
	}
}

@keyframes forward {
	0% {
		transform: translateX(40vw);
		opacity: 0;
      filter: hue-rotate(70deg) brightness(5);
	}
	10% {
		transform: translateX(45vw);
		opacity: 1;
	}
	90% {
		transform: translateX(55vw);
		opacity: 1;
	}
	100% {
		transform: translateX(62vw);
		opacity: 0;
	}
}