#loading_screen {
	font-family: 'Poppins', sans-serif;
	position: fixed;
	margin: 0 0 0 0;
	width: 100%;
	top: 0;
	height: calc(100%);
	background: var(--white-low-opacity);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: var(--z-index-loading-screen);
	cursor: wait;
	transition: 0s;
}
#loading_screen.out {
	animation: loading_out 1.5s 1;
	top: -100%;
	opacity: 0;
	transition: var(--transition-2);
}

#loading_screen span {
	color: #484848;
	font-size: var(--fs-32);
	letter-spacing: 15px;
	margin-bottom: 200px;
	animation: loading 1.8s linear infinite;
}

@media screen and (max-width: 500px) {
	div.loader span {
		font-size: var(--font-size-60);
		letter-spacing: 5px;
	}
}

@keyframes loading {
	0% {
		color: #D3C2B2 ;
		text-shadow: 0 0 7px #D3C2B2;
	}
	90% {
		color: #484848;
		text-shadow: none;
	}
	100% {
		color: #D3C2B2 ;
		text-shadow: 0 0 7px #D3C2B2;
	}
}
#loading_screen span:nth-child(1) {
	animation-delay: 0.15s;
}
#loading_screen span:nth-child(2) {
	animation-delay: 0.3s;
}
#loading_screen span:nth-child(3) {
	animation-delay: 0.45s;
}
#loading_screen span:nth-child(4) {
	animation-delay: 0.6s;
}
#loading_screen span:nth-child(5) {
	animation-delay: 0.75s;
}
#loading_screen span:nth-child(6) {
	animation-delay: 0.9s;
}
#loading_screen span:nth-child(7) {
	animation-delay: 1.05s;
}
#loading_screen span:nth-child(8) {
	animation-delay: 1.2s;
}

@keyframes loading_out {
	0% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}