.wrap-preload {
	position: fixed;
	z-index: 99;
	width: 100%;
	height: 100dvh;
	background-color: #ffffff;
}

.wrap-preload.close {
	display: none !important;
}

.wrap-preload button {
	outline: none;
	background: none;
	border: 0;
	box-sizing: border-box;
	padding: 1em 2em;
	font-size: inherit;
	font-weight: 700;
	position: fixed;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	left: 50%;
}

.wrap-preload button::after {
	box-sizing: inherit;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
}

.wrap-preload .spin {
	width: 8em;
	height: 8em;
	padding: 0;
	color: #000;
}

.wrap-preload .spin::after {
	top: 0;
	left: 0;
	border: 0 solid transparent;
	border-top: 2px solid;
	border-left-width: 2px;
	border-right-width: 2px;
	-webkit-animation: infiniteRotate 1s infinite;
	animation: infiniteRotate 1s infinite;
	-webkit-transition: border-top-color ease-in 0.5s, -webkit-transform ease-in 0.1s;
	transition: border-top-color ease-in 0.5s, -webkit-transform ease-in 0.1s;
	transition: border-top-color ease-in 0.5s, transform ease-in 0.1s;
	transition: border-top-color ease-in 0.5s, transform ease-in 0.1s, -webkit-transform ease-in 0.1s;
}

.wrap-preload .circle {
	border-radius: 10%;
	box-shadow: none;
}

.wrap-preload .circle::before,
.wrap-preload .circle::after {
	border-radius: 100%;
}

@-webkit-keyframes infiniteRotate {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border-top-color: #ff8000;
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border-top-color: #0a58a3;
	}
}

@keyframes infiniteRotate {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border-top-color: #ff8000;
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border-top-color: #0a58a3;
	}
}