.ring
{
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width: 300px;
	height: 300px;
	background-color: transparent;
	border: 3px solid transparent;
	border-radius: 50%;
	text-align: center;
	Line-height: 300px;
	Font-family: sans-serif;
	font-size: 30px;
	color:#B9D4FD;
	letter-spacing: 4px;
	text-transform:uppercase;
	text-shadow: 0 0 10px #034CBC;
	box-shadow: 0 0 20px rgba(0,0,0,.5);
}
.ring:before
{
	content: '';
	position: absolute;
	top: -3px;
	left: -3px;
	width: 100%;
	height: 100%;
	border: 3px solid transparent;
	border-top:3px solid #034CBC;
	border-right:3px solid #034CBC;
	border-radius: 50%;
	animation:animateCircle 5s linear infinite;	
}

span
{
	diplay:block;
	position:absolute;
	top: calc(50% - 2px);
	left: 50%;
	width:50%;
	height:4px;
	background: transparent;
	transform-origin: left;
	animation: animate 5s linear infinite;
}
	span:before
{
	content:'';
	position:absolute;
	width:16px;
	height:16px;
	border-radius: 50%;
	background: #034CBC;
	top: -6px;
	right:-8px;
	box-shadow: 0 0 20px #034CBC;	
}
@keyframes animateCircle
{
0%
{
	transform: rotate(0deg);
}
100%
{
	transform: rotate(360deg);
}	
}
	
@keyframes animate
{
0%
{
	transform: rotate(45deg);
}
100%
{
	transform: rotate(405deg);
}	
}	

.background{
	
	display: flex;
	

}

.wrapper{
	position:absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #020202;
}
.box div{
	position: absolute;
	width: 60px;
	height: 60px;
	background-color:transparent;
	border: 2px solid rgba(255,255,255,0.8);
}
.box div:nth-child(1){
	top: 12%;
	left: 42%;
	border: 2px solid rgba(255,51,54,0.80);
	animation: animatecubes 10s linear infinite;
}
.box div:nth-child(2){
	top: 70%;
	left: 50%;
	border: 2px solid rgba(255,144,3,0.8);
	animation: animatecubes 7s linear infinite;
}
.box div:nth-child(3){
	top:17%;
	left: 6%;
	border: 2px solid rgba(18,255,0,0.8);
	animation: animatecubes 9s linear infinite;
}
.box div:nth-child(4){
	top: 20%;
	left: 60%;
	border: 2px solid rgba(0,211,255,0.8);
	animation: animatecubes 10s linear infinite;
}
.box div:nth-child(5){
	top: 67%;
	left: 10%;
	border: 2px solid rgba(240,255,0,0.8);
	animation: animatecubes 6s linear infinite;
}
.box div:nth-child(6){
	top: 80%;
	left: 70%;
	border: 2px solid rgba(255,0,237,0.8);
	animation: animatecubes 12s linear infinite;
}
.box div:nth-child(7){
	top: 60%;
	left: 80%;
	border: 2px solid rgba(18,0,255,0.8);
	animation: animatecubes 15s linear infinite;
}
.box div:nth-child(8){
	top: 32%;
	left: 25%;
	border: 2px solid rgba(97,0,255,0.8);
	animation: animatecubes 16s linear infinite;
}
.box div:nth-child(9){
	top: 90%;
	left: 25%;
	border: 2px solid rgba(0,255,187,0.8);
	animation: animatecubes 9s linear infinite;
}
.box div:nth-child(10){
	top: 20%;
	left: 80%;
	animation: animatecubes 5s linear infinite;
}
@keyframes animatecubes{
	0%{
		transform: scale(0) translateY(0) rotate(0);
		opacity: 1;
	}

	100%{
		transform:scale(1.3) translateY(-90px) rotate(360deg);
		opacity: 0;
	}

}	
	
.loader
{
	position:fixed;
	z-index:99;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-color:#000000;
	display:flex;
	justify-content:center;
	align-itmes: center;	
}

.loader.hidden{
	animation: fadeOut 1s;
	animation-fill-mode: forwards;
}
	
@keyframes fadeOut{
	100%{
		opacity: 0%;
		visibility: hidden;
}
}