@charset "UTF-8";

.loading_container
{
	display: none;
	justify-content: center;
	align-items: center;
	height: 100%;
	overflow: hidden;
	z-index: 5000;
	background-color: #FFFFFF;
	width: 100%;
	opacity: 0.8;
}

.loading_container ul 
{
	display: flex;
}

.loading_container ul li 
{
	width: 20px;
	height: 20px;
	margin: 10px;
	list-style-type: none;
	transition: 0.5s all ease;
}

.loading_container ul li:nth-child(1) 
{
	animation: right-1 1s infinite alternate;
	background-color: #DDD8B8;
	animation-delay: 100ms;
}

@keyframes right-1 
{
	0% 
	{
		transform: translateY(-60px);
	}
		
	100% 
	{
		transform: translateY(60px);
	}
}

.loading_container ul li:nth-child(2) 
{
	animation: right-2 1s infinite alternate;
	background-color: #B3CBB9;
	animation-delay: 200ms;
}

@keyframes right-2 
{
	0% 
	{
		transform: translateY(-70px);
	}
  
	100%
	{
		transform: translateY(70px);
	}
}

.loading_container ul li:nth-child(3) 
{
	animation: right-3 1s infinite alternate;
	background-color: #84A9C0;
	animation-delay: 300ms;
}

@keyframes right-3 
{
	0% 
	{
		transform: translateY(-80px);
	}
	
	100% 
	{
		transform: translateY(80px);
	}
}

.loading_container ul li:nth-child(4) 
{
	animation: right-4 1s infinite alternate;
	background-color: #6A66A3;
	animation-delay: 400ms;
}

@keyframes right-4 
{	
	0% 
	{
		transform: translateY(-90px);
	}
	
	100% 
	{
		transform: translateY(90px);
	}
}

.loading_container ul li:nth-child(5) 
{
	animation: right-5 1s infinite alternate;
	background-color: #58548E;
	animation-delay: 500ms;
}

@keyframes right-5 	
{
	0% 
	{
		transform: translateY(-100px);
	}
	
	100% 
	{
		transform: translateY(100px);
	}
}