/* Preloader */
#preloader {
	position: fixed;
    overflow: hidden; 
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:linear-gradient(135deg, rgba(242, 85, 85, 1), rgba(214, 40, 40, 1));
	z-index:99999; /* makes sure it stays on top */
    overflow: hidden;
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally on the screen */
	top:50%; /* centers the loading animation vertically on the screen */
	/*background-image:url(../images/increff-preloader.png); !* path to your loading animation *!*/
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px;
    text-align: center/* is width and height divided by two */
}
.box:nth-child(2n-1){
	background-color: rgba(0,0,0,0.05);
}

.box{
	position: fixed;
    overflow: hidden; 
	top:250px;
	left:7%;
	right:0;
	bottom:0;
	transition: all .2s ease;
}

/* MEDIA QUERIES */
@media (max-width: 700px){
	.box:nth-child(2n-1){
		background-color: inherit;
	}

	.box:nth-child(4n),.box:nth-child(4n-3) {
		background-color: rgba(0,0,0,0.05);
	}

}

@media (max-width: 420px){
	.box:nth-child(4n),.box:nth-child(4n-3){
		background-color: inherit;
	}

	.box:nth-child(2n-1){
		background-color:rgba(0,0,0,0.05);
	}

}
.loader10:before{
	content: "";
	position: absolute;
	top: 0px;
	left: -25px;
	height: 8px;
	width: 8px;
	border-radius: 12px;
	-webkit-animation: loader10g 1.5s ease-in-out infinite;
			animation: loader10g 1.5s ease-in-out infinite;
}

.loader10{
	position: relative;
	width: 8px;
	height: 8px;
	top: 46%;
	left: 46%;
	border-radius: 12px;
	-webkit-animation: loader10m 1.5s ease-in-out infinite;
			animation: loader10m 1.5s ease-in-out infinite;
}


.loader10:after{
	content: "";
	position: absolute;
	top: 0px;
	left: 25px;
	height: 8px;
	width: 8px;
	border-radius: 12px;
	-webkit-animation: loader10d 1.5s ease-in-out infinite;
			animation: loader10d 1.5s ease-in-out infinite;
}

@-webkit-keyframes loader10g{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, 1);}
	50%{background-color: rgba(255, 255, 255, .2);}
	75%{background-color: rgba(255, 255, 255, .2);}
	100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10g{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, 1);}
	50%{background-color: rgba(255, 255, 255, .2);}
	75%{background-color: rgba(255, 255, 255, .2);}
	100%{background-color: rgba(255, 255, 255, .2);}
}

@-webkit-keyframes loader10m{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, .2);}
	50%{background-color: rgba(255, 255, 255, 1);}
	75%{background-color: rgba(255, 255, 255, .2);}
	100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10m{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, .2);}
	50%{background-color: rgba(255, 255, 255, 1);}
	75%{background-color: rgba(255, 255, 255, .2);}
	100%{background-color: rgba(255, 255, 255, .2);}
}

@-webkit-keyframes loader10d{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, .2);}
	50%{background-color: rgba(255, 255, 255, .2);}
	75%{background-color: rgba(255, 255, 255, 1);}
	100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10d{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, .2);}
	50%{background-color: rgba(255, 255, 255, .2);}
	75%{background-color: rgba(255, 255, 255, 1);}
	100%{background-color: rgba(255, 255, 255, .2);}
}