/* ============================================================================================
	SPLASH SCREEN / PATTERN
============================================================================================ */
@keyframes reveal{0%{visibility:visible}100%{visibility:hidden;transform:translateX(100%)}}
@keyframes fadeAnimation{100%{transform:translateX(100%)}}
@keyframes toLeftImage{100%{opacity:1}}
.resola-splash-screen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 99999;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	animation: reveal 1s cubic-bezier(0.77,0,0.18,1) 2s forwards
}
.resola-splash-image-wrapper {
	position: relative;
	overflow: hidden;
}
.resola-splash-image-wrapper::before {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--base);
	pointer-events: none;
	animation: fadeAnimation 2s forwards
}
.resola-splash-image {
	opacity: 0;
	animation: toLeftImage 1.6s linear forwards
}