#cf-loading {
	opacity: 1;
	transition: opacity 0.5s linear;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	display: block;
	background: #1d2026;
	z-index: 100000000;
	text-align: center;
}
#cf-loading html {
	-webkit-font-smoothing: antialiased;
}
#cf-loading .cf-preloader {
	overflow: hidden !important;
	min-height: 100vh;
	width: 100vw;
	z-index: 100000;
	font-family: Roboto, Arial;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #111a28;
	position: absolute;
	transition: all 0.5s;
}
#cf-loading .cf-preloader .cf-boxes {
	--size: 32px;
	--duration: 800ms;
	height: calc(var(--size) * 2);
	width: calc(var(--size) * 3);
	position: relative;
	transform-style: preserve-3d;
	transform-origin: 50% 50%;
	margin-top: calc(var(--size) * 1.5 * -1);
	transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
}
#cf-loading .cf-preloader .cf-boxes .cf-box {
	width: var(--size);
	height: var(--size);
	top: 0;
	left: 0;
	position: absolute;
	transform-style: preserve-3d;
}
#cf-loading .cf-preloader .cf-boxes .cf-box:nth-child(1) {
	transform: translate(100%, 0);
	animation: box1 var(--duration) linear infinite;
}
#cf-loading .cf-preloader .cf-boxes .cf-box:nth-child(2) {
	transform: translate(0, 100%);
	animation: box2 var(--duration) linear infinite;
}
#cf-loading .cf-preloader .cf-boxes .cf-box:nth-child(3) {
	transform: translate(100%, 100%);
	animation: box3 var(--duration) linear infinite;
}
#cf-loading .cf-preloader .cf-boxes .cf-box:nth-child(4) {
	transform: translate(200%, 0);
	animation: box4 var(--duration) linear infinite;
}
#cf-loading .cf-preloader .cf-boxes .cf-box > div {
	--background: #00cc76;
	--top: auto;
	--right: auto;
	--bottom: auto;
	--left: auto;
	--translateZ: calc(var(--size) / 2);
	--rotateY: 0deg;
	--rotateX: 0deg;
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--background);
	top: var(--top);
	right: var(--right);
	bottom: var(--bottom);
	left: var(--left);
	transform: rotateY(var(--rotateY)) rotateX(var(--rotateX))
		translateZ(var(--translateZ));
}
#cf-loading .cf-preloader .cf-boxes .cf-box > div:nth-child(1) {
	--top: 0;
	--left: 0;
}
#cf-loading .cf-preloader .cf-boxes .cf-box > div:nth-child(2) {
	--background: #00cf5d;
	--right: 0;
	--rotateY: 90deg;
}
#cf-loading .cf-preloader .cf-boxes .cf-box > div:nth-child(3) {
	--background: #009c46;
	--rotateX: -90deg;
}
#cf-loading .cf-preloader .cf-boxes .cf-box > div:nth-child(4) {
	--background: #111a28;
	--top: 0;
	--left: 0;
	--translateZ: calc(var(--size) * 3 * -1);
}

@keyframes box1 {
	0%,
	50% {
		transform: translate(100%, 0);
	}
	100% {
		transform: translate(200%, 0);
	}
}

@keyframes box2 {
	0% {
		transform: translate(0, 100%);
	}
	50% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(100%, 0);
	}
}

@keyframes box3 {
	0%,
	50% {
		transform: translate(100%, 100%);
	}
	100% {
		transform: translate(0, 100%);
	}
}

@keyframes box4 {
	0% {
		transform: translate(200%, 0);
	}
	50% {
		transform: translate(200%, 100%);
	}
	100% {
		transform: translate(100%, 100%);
	}
}
#cf-loading .cf-preloader__hide {
	opacity: 0;
	pointer-events: none;
	transform: scale(0);
	z-index: -1;
}
#cf-loading .cf-preloader__hide body {
	overflow: hidden;
}