@keyframes page-loading {
	0%	{ opacity: 0; }
	10%	{ opacity: 1; }
	20%	{ opacity: 1; }
	50%	{ opacity: 0; }
}

@keyframes hide-loading {
	0%		{ opacity: 1; z-index: 100; }
	99%		{ opacity: 0; z-index: 100; }
	100%	{ opacity: 0; z-index: -100; display: none; }
}

.page-loading #pageloader-S1	{ animation: page-loading var(--animation-duration) calc(var(--step-duration) * 0) linear infinite; }
.page-loading #pageloader-S2	{ animation: page-loading var(--animation-duration) calc(var(--step-duration) * 1) linear infinite; }
.page-loading #pageloader-S3	{ animation: page-loading var(--animation-duration) calc(var(--step-duration) * 2) linear infinite; }
.page-loading #pageloader-S4	{ animation: page-loading var(--animation-duration) calc(var(--step-duration) * 3) linear infinite; }
.page-loading #pageloader-S5	{ animation: page-loading var(--animation-duration) calc(var(--step-duration) * 4) linear infinite; }
.page-loading #pageloader-S6	{ animation: page-loading var(--animation-duration) calc(var(--step-duration) * 5) linear infinite; }
.page-loading #pageloader-S7	{ animation: page-loading var(--animation-duration) calc(var(--step-duration) * 6) linear infinite; }
.page-loading #pageloader-S8	{ animation: page-loading var(--animation-duration) calc(var(--step-duration) * 7) linear infinite; }

.page-loading-overlay {
	position: fixed;
	width: 100dvw;
	height: 100dvh;
	top: 0;
	left: 0;
	z-index: 100;
	opacity: 1;
}
.page-loading-overlay.hide {
	animation: hide-loading .7s forwards;
}

.page-loading{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10vh;
	--step-duration: 0.07s;
	--animation-duration: 2s;
}

.page-loading path,
.page-loading polygon {
	opacity: 0;
}