.spa-preloader {
	height: 100vh;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	transition: opacity 1500ms ease-out;
	width: 100vw;
	z-index: 2000;
}

.spa-preloader__bg {
	background-color: #180952;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.spa-preloader__circle-container {
	height: 100px;
	max-height: 50vw;
	max-width: 50vw;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0) scale(2);
	transition: all 1500ms ease-out;
	width: 100px;
	z-index: 2;
}

.spa-preloader__circle {
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-name: PreloaderCircleAnim;
	animation-timing-function: linear;
	background: url(/f/general/media/ui/preloader.png) no-repeat 50%;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: all 1500ms ease-out;
	z-index: 3;
}


.spa-preloader.active {
	opacity: 1;
}

.spa-preloader.active .spa-preloader__circle-container {
	transform: translate3d(-50%, -50%, 0) scale(1);
}


@keyframes PreloaderCircleAnim {
	0% {
		transform: rotate(0deg) scale(1);
	}

	50% {
		transform: rotate(180deg) scale(1.02);
	}

	100% {
		transform: rotate(360deg) scale(1);
	}
}