@CHARSET "UTF-8";

.spinner {
	width: 40px;
	height: 40px;
	margin: 100px auto;
	background-color: #333;
	border-radius: 100%;
	animation: scaleout 1.0s infinite ease-in-out;
}

@keyframes scaleout {
	0% {
		transform: scale(0.0);
	}
	100% {
		transform: scale(1.0);
		opacity: 0;
	}
}

.loader {
	width: 50px;
	height: 50px;
	margin: auto;
	position: absolute;
}

.inner {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.inner.one {
	left: 0%;
	top: 0%;
	animation: rotate-one 1s linear infinite;
	border-bottom: 3px solid #1d3e4f;
}

.inner.two {
	right: 0%;
	top: 0%;
	animation: rotate-two 1s linear infinite;
	border-right: 3px solid #1d3e4f;
}

.inner.three {
	right: 0%;
	bottom: 0%;
	animation: rotate-three 1s linear infinite;
	border-top: 3px solid #1d3e4f;
}

@keyframes rotate-one {
	0% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@keyframes rotate-two {
	0% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@keyframes rotate-three {
	0% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

.boxLoading {
	width: 50px;
	height: 50px;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.boxLoading:before {
	content: '';
	width: 50px;
	height: 5px;
	background: #000;
	opacity: 0.1;
	position: absolute;
	top: 59px;
	left: 0;
	border-radius: 50%;
	animation: shadow .5s linear infinite;
}

.boxLoading:after {
	content: '';
	width: 50px;
	height: 50px;
	background: #1a3668;
	animation: animate .5s linear infinite;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 3px;
}

@keyframes animate {
	17% {
		border-bottom-right-radius: 3px;
	}
	25% {
		transform: translateY(9px) rotate(22.5deg);
	}
	50% {
		transform: translateY(18px) scale(1, 0.9) rotate(45deg);
		border-bottom-right-radius: 40px;
	}
	75% {
		transform: translateY(9px) rotate(67.5deg);
	}
	100% {
		transform: translateY(0) rotate(90deg);
	}
}

@keyframes shadow {
	0%,
	100% {
		transform: scale(1, 1);
	}
	50% {
		transform: scale(1.2, 1);
	}
}