/* =========================
   LOADING - Tela de carregamento
   Estilos para a tela de loading do site
========================= */
#loading-screen {
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: var(--white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s;
}
#loading-screen img {
	max-width: 150px;
	width: 60vw;
	height: auto;
	margin-bottom: 32px;
	display: none;
}
#loading-screen .logo-desktop { display: block; }
#loading-screen .logo-mobile { display: none; }
@media (max-width: 600px) {
	#loading-screen .logo-desktop { display: none; }
	#loading-screen .logo-mobile {
		display: block;
		max-width: 180px;
		width: 80vw;
	}
}
.loading-bar-container {
	width: 180px;
	height: 8px;
	background: rgba(48, 48, 48, 0.24);
	border-radius: 4px;
	overflow: hidden;
	margin-top: 8px;
	position: relative;
}
.loading-bar {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 40px;
	background: linear-gradient(90deg, #006c34, #5593cb);
	border-radius: 4px;
	animation: loading-bar-pingpong 1.2s cubic-bezier(0.4,0,0.2,1) infinite alternate;
	animation-delay: 0.5s;
}
@keyframes loading-bar-pingpong {
	0% { left: 0; }
	100% { left: 140px; }
}
@keyframes loading-bar-move {
	0% { left: -40px; }
	100% { left: 180px; }
}
#loading-screen.hide {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s;
}
#loading-screen.hide img,
#loading-screen.hide .loading-bar-container {
	opacity: 0;
	transition: opacity 1.5s, transform 2s;
}
#loading-screen.hide .loading-bar-container {
	transform: scaleX(0.2);
	transition: opacity 1.5s, transform 2s cubic-bezier(0.4,0,0.2,1);
}
#loading-screen.hide .loading-bar {
	width: 0 !important;
	transition: width 2s cubic-bezier(0.4,0,0.2,1);
}