.page-loaders {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1100;
	background-color: var(--accent-color);
	height: 100vh;
	width: 100vw
}

.loading-center {
	width: 200px;
	height: 60px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%)
}

	.loading-center .loading-circle {
		width: 20px;
		height: 20px;
		position: absolute;
		border-radius: 50%;
		background-color: currentColor;
		left: 15%;
		transform-origin: 50%;
		animation: loading-circle .5s alternate infinite ease
	}

@keyframes loading-circle {
	0% {
		top: 60px;
		height: 5px;
		border-radius: 50px 50px 25px 25px;
		transform: scaleX(1.7)
	}

	40% {
		height: 20px;
		border-radius: 50%;
		transform: scaleX(1)
	}

	100% {
		top: 0
	}
}

.loading-center .loading-circle:nth-child(2) {
	left: 45%;
	animation-delay: .2s
}

.loading-center .loading-circle:nth-child(3) {
	left: auto;
	right: 15%;
	animation-delay: .3s
}

.loading-center .loading-shadow {
	width: 20px;
	height: 4px;
	border-radius: 50%;
	background-color: rgba(0,0,0,.5);
	position: absolute;
	top: 62px;
	transform-origin: 50%;
	z-index: -1;
	left: 15%;
	filter: blur(1px);
	animation: loading-shadow .5s alternate infinite ease
}

@keyframes loading-shadow {
	0% {
		transform: scaleX(1.5)
	}

	40% {
		transform: scaleX(1);
		opacity: .7
	}

	100% {
		transform: scaleX(.2);
		opacity: .4
	}
}

.loading-center .loading-shadow:nth-child(4) {
	left: 45%;
	animation-delay: .2s
}

.loading-center .loading-shadow:nth-child(5) {
	left: auto;
	right: 15%;
	animation-delay: .3s
}

.loading-center span {
	position: absolute;
	top: 75px;
	font-size: 20px;
	letter-spacing: 0px;
	color: currentColor;
	left: 15%
}