#loader{
	background-color: var(--loader-bg);
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 999999;
	margin-top: 0px;
	top: 0px;
}
#loader-center{
	width: 100%;
	height: 100%;
	position: relative;
	}
#loader-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 20px;
	width: 100px;
	margin-top: -10px;
	margin-left: -50px;

}
.object{
	width: 20px;
	height: 20px;
	background-color: var(--loader-color);
	-moz-border-radius: 50% 50% 50% 50%;
	-webkit-border-radius: 50% 50% 50% 50%;
	border-radius: 50% 50% 50% 50%;
	margin-right: 20px;
	margin-bottom: 20px;
	position: absolute;
}


#object_one{
	-webkit-animation: object 2s linear infinite;
	 animation: object 2s linear infinite;
	 }
#object_two{
	-webkit-animation: object 2s linear infinite -.4s;
	animation: object 2s linear infinite -.4s;
	 }
#object_three{
	-webkit-animation: object 2s linear infinite -.8s;
	animation: object 2s linear infinite -.8s;
	}
#object_four{
	-webkit-animation: object 2s linear infinite -1.2s;
	animation: object 2s linear infinite -1.2s;
	}
#object_five{
	-webkit-animation: object 2s linear infinite -1.6s;
	animation: object 2s linear infinite -1.6s;
	}


@-webkit-keyframes object{
  0% { left: 100px; top:0}
  80% { left: 0; top:0;}
  85% { left: 0; top: -20px; width: 20px; height: 20px;}
  90% { width: 40px; height: 15px; }
  95% { left: 100px; top: -20px; width: 20px; height: 20px;}
  100% { left: 100px; top:0; }

}
@keyframes object{
  0% { left: 100px; top:0}
  80% { left: 0; top:0;}
  85% { left: 0; top: -20px; width: 20px; height: 20px;}
  90% { width: 40px; height: 15px; }
  95% { left: 100px; top: -20px; width: 20px; height: 20px;}
  100% { left: 100px; top:0; }
}


/* CSS for loader2 */
#loader2 {
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background: rgba(0, 0, 0, 0.5);
	 z-index: 9999999999
 }
 /* REVERSE SPINNER */
 .loader1 {
	 display:inline-block;
	 font-size:0px;
	 padding:0px;
			 position: absolute;
		top:45%;
		left:48%;
}
.loader1 span {
	 vertical-align:middle;
	 border-radius:100%;

	 display:inline-block;
	 width:20px;
	 height:20px;
	 margin:3px 2px;
	 -webkit-animation:loader1 0.8s linear infinite alternate;
	 animation:loader1 0.8s linear infinite alternate;
}
.loader1 span:nth-child(1) {
	 -webkit-animation-delay:-1s;
	 animation-delay:-1s;
	background:rgba(255, 255, 255,0.6);
}
.loader1 span:nth-child(2) {
	 -webkit-animation-delay:-0.8s;
	 animation-delay:-0.8s;
	background:rgba(255, 255, 255,0.8);
}
.loader1 span:nth-child(3) {
	 -webkit-animation-delay:-0.26666s;
	 animation-delay:-0.26666s;
	background:rgba(255, 255, 255,1);
}
.loader1 span:nth-child(4) {
	 -webkit-animation-delay:-0.8s;
	 animation-delay:-0.8s;
	background:rgba(255, 255, 255,0.8);

}
.loader1 span:nth-child(5) {
	 -webkit-animation-delay:-1s;
	 animation-delay:-1s;
	background:rgba(255, 255, 255,0.4);
}

@keyframes loader1 {
	 from {transform: scale(0, 0);}
	 to {transform: scale(1, 1);}
}
@-webkit-keyframes loader1 {
	 from {-webkit-transform: scale(0, 0);}
	 to {-webkit-transform: scale(1, 1);}
}

/* CSS for loader2 */