.splashscreen {
	overflow: hidden;
	overflow-y: hidden;
	overflow-x: hidden;
}
.splash-screen {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	width: 100%;
	height: 100%;
	background-color: var(--color-white);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.splash-screen::before,
.splash-screen::after {
	display: none;
}

.splash-screen .spinner {
	margin-bottom: -9px;
	width: 26px;
	height: 26px;
	border: 4px solid var(--color-gray-100);
	border-bottom-color: var(--primary-color);
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: splashscreen-rotation 1s linear infinite, splashscreen-fadeIn 1s cubic-bezier(0.12, 0, 0.2, 1) 0.5s both;
}
.splash-screen .content {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	max-width: 60vw;
	width: 300px;
}

.splash-screen .content img {
	width: 220px;
	margin-bottom: var(--spacing-5);
	opacity: 0;
	animation: splashscreen-fadeIn 0.8s cubic-bezier(0.12, 0, 0.2, 1) forwards;
}

.splash-screen .content .message {
	opacity: 0;
	height: 26px;
	margin-top: var(--spacing-3);
	color: var(--color-black);
}

.splash-screen .content .message.show {
	opacity: 1;
	animation: splashscreen-message 1s ease-in-out;
}

@keyframes splashscreen-rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes splashscreen-fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes splashscreen-message {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes splashscreen-fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.splash-screen.fade-out {
	animation: splashscreen-fadeOut 0.3s linear forwards;
	pointer-events: none;
}

@media (max-width: 767.98px) {
	.splash-screen .content img {
		width: 180px;
	}
}