.loading-progress-page {
	position: fixed;
	top: 0;
	left: 0;
	margin: auto;

	min-height: 100%;
	min-width: 100%;

	background-color: black;
	color: white;
	z-index: 1000;

	display: flex;
	justify-content: center;
	align-items: center;

	transform: display;
	transition: transform 0.5s ease-in-out 1s;
	will-change: transform;
}

.loader-container {
	min-height: 100%;
	min-width: 100%;

	position: fixed;
	top: 0;
	left: 0;
	margin: auto;

	z-index: 997;

	display: flex;
	flex-direction: row;
	justify-content: center;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.loading-bar-container {
	/* position: fixed;
	top: 75%;
	left: 50; */

	/* min-width: 20%; */
	width: 50%;
	/* height: 75%; */
	z-index: 999;

	position: inherit;
	top: 50%;

	background-color: transparent;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}

.loading-text {
	display: flex;
	justify-content: space-between;
	color: white;

	width: 100%;
	font-family: "Rajdhani", sans-serif;
	font-size: 28px;
	font-weight: 700;
}

.loading-bar {
	position: absolute;

	/* min-width: 20%; */
	width: 100%;
	/* max-width: 60%; */
	height: inherit;
	z-index: 1000;
	background: aliceblue;

	justify-self: flex-start;

	transform: scaleX(0);
	transform-origin: top left;
	transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);

	will-change: transform;

	margin-right: 2px;
}

.loading-bar-holder {
	/* padding: 30px; */
	border: white solid 4px;
	height: 20px;
	width: 100%;
	align-self: baseline;
}

.loading-bar.ended {
	transform-origin: top right;
	transition: transform 0.5s ease-in-out;
}

.loader-container.ended,
.loading-progress-page.ended {
	display: none;
	transition: transform 0.8s ease-in-out 0.2s;
}

.loading-percent.ended {
	display: none;
}

.loading-percent {
	width: 100%;
	font-size: 20em;
	color: greenyellow;
	z-index: 1001;

	position: relative;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-shadow: 7px -7px tomato;

	font-family: "Space Grotesk", sans-serif;
	border: rgb(0, 255, 68) solid 1px;
}