/* rainbow rotate */
@keyframes spin3D {
	from {
		transform: rotate3d(01.5, 01.5, 01.5, 360deg)
	}

	to {
		transform: rotate3d(0deg)
	}
}

#loading {
	height: 100%;
	background-color: #1d2630;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	z-index: 99999999
}

.spinner-box {
	width: 300px;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent
}

.leo {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%
}

.red {
	width: 1px;
	height: 1px;
	border: 100px solid #FF0000;
	animation: spin3D 0.5s linear 0s infinite
}

.orange {
	width: 1px;
	height: 1px;
	border: 90px solid #FF7F00;
	animation: spin3D 0.5s linear 0s infinite
}

.yellow {
	width: 1px;
	height: 1px;
	border: 80px solid #FFFF00;
	animation: spin3D 0.5s linear 0s infinite
}

.green {
	width: 1px;
	height: 1px;
	border: 70px solid #00FF00;
	animation: spin3D 0.5s linear 0s infinite
}

.cyan {
	width: 1px;
	height: 1px;
	border: 60px solid #00FFFF;
	animation: spin3D 0.5s linear 0s infinite
}

.blue {
	width: 1px;
	height: 1px;
	border: 50px solid #0000FF;
	animation: spin3D 0.5s linear 0s infinite
}

.purple {
	width: 1px;
	height: 1px;
	border: 40px solid #8B00FF;
	animation: spin3D 0.5s linear 0s infinite
}

.w1 {
	transform: rotate3D(1, 1, 1, 90deg)
}

.w2 {
	transform: rotate3D(1, 1, 1, 120deg)
}

.w3 {
	transform: rotate3D(1, 1, 1, 150deg)
}

.w4 {
	transform: rotate3D(1, 1, 1, 180deg)
}

.w5 {
	transform: rotate3D(1, 1, 1, 210deg)
}

.w6 {
	transform: rotate3D(1, 1, 1, 240deg)
}

.w7 {
	transform: rotate3D(1, 1, 1, 270deg)
}