.pixel-preloader-el {
	position: relative;
}

.pixel-preloader-inner {
	display: inline-flex;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	align-items: inherit;
	justify-content: inherit;
	overflow: hidden;
}

.pixel-preloader-wrap {
	display: flex;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.pixel-page-loaded .pixel-preloader-wrap {
	pointer-events: none;
}

.pixel-page-not-loaded {
	overflow: hidden;
}

@keyframes pixel-spinner-classical {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.pixel-preloader-spc-el {
	width: 50px;
	height: 50px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-right: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	border-left: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 50em;
	animation: pixel-spinner-classical 0.7s infinite linear;
}

.pixel-preloader-spinner-classsical,
.pixel-preloader-logo,
.pixel-preloader-fade,
.pixel-preloader-spinner {
	background-color: #fff;
}

.pixel-preloader-curtain-el {
	width: 100vw;
	height: 100vh;
}

.pixel-preloader-curtain-front {
	background-color: #131314;
	z-index: 1;
}

.pixel-preloader-curtain-back {
	background-color: #1a1c1e;
	z-index: 0;
}

.pixel-preloader-dissolve-el {
	background-color: var(--color-primary);
	transform-origin: center bottom;
}

@keyframes pixel-preloader-logo-spinner {
	0% {
		transform: scaleX(0.05);
		transform-origin: left;
	}

	20% {
		transform: scaleX(1);
		transform-origin: left;
	}

	25% {
		transform: scaleX(1);
		transform-origin: right;
	}

	50% {
		transform: scaleX(0.05);
		transform-origin: right;
	}

	70% {
		transform: scaleX(1);
		transform-origin: right;
	}

	75% {
		transform: scaleX(1);
		transform-origin: left;
	}

	100% {
		transform: scaleX(0.05);
		transform-origin: left;
	}
}

.pixel-preloader-logo-spinner {
	--spinner-width: 66px;
	width: var(--spinner-width);
	height: 2px;
	bottom: 0;
	left: calc(50% - var(--spinner-width) / 2);
	border-radius: 2px;
	background-color: rgba(0, 0, 0, 0.2);
}

.pixel-preloader-logo-spinner:after {
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: inherit;
	background-color: #000;
	animation: pixel-preloader-logo-spinner 2.5s cubic-bezier(0.65, 0.05, 0.36, 1) infinite alternate;
}

@keyframes pixel-wrap-sliding-in {
	from {
		transform: translate3d(5vw, 0, 0);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

.pixel-preloader-sliding-el {
	background-color: #fff;
}

.pixel-preloader-style-sliding:not(.pixel-preloader-animations-done),
.pixel-preloader-style-sliding:not(.pixel-preloader-animations-done) #wrap {
	overflow-x: hidden;
}

.pixel-preloader-style-sliding.pixel-preloader-animations-started #wrap {
	animation: pixel-wrap-sliding-in 0.65s cubic-bezier(0.19, 1, 0.22, 1) both alternate;
}

@keyframes pixel-spinner-rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes pixel-spinner-dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 130, 200;
		stroke-dashoffset: -40;
	}

	100% {
		stroke-dasharray: 130, 200;
		stroke-dashoffset: -170;
	}
}

.pixel-spinner-circular {
	animation: pixel-spinner-rotate 2s linear infinite;
}

.pixel-spinner-circular circle {
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
	animation: pixel-spinner-dash 1.5s ease-in-out infinite both;
	stroke-linecap: round;
	stroke: var(--color-primary);
}