.loading {
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-color: rgb(61,61,61);
	z-index: 15;
	align-items: center;
	transition: 1.5s;
}

.loading.off {
	transform: translateX(101%);
}

.loading-item {
	border: 4px solid var(--secondary);
	height: 35px;
	border-radius: 4px;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	display: flex;
	transition: 1s;
}

.loading-progress {
	background-color: var(--secondary);
	width: 100%;
	max-width: 400px;
	display: block;
	animation: loadingprogress 1s;
}


@keyframes loadingprogress {
	0% {
		width: 0%;
	}
	1% {
		width: 1%;
	}
	2% {
		width: 2%;
	}
	3% {
		width: 3%;
	}
	4% {
		width: 4%;
	}
	5% {
		width: 5%;
	}
	6% {
		width: 6%;
	}
	7% {
		width: 7%;
	}
	8% {
		width: 8%;
	}
	9% {
		width: 9%;
	}
	10% {
		width: 10%;
	}
	11% {
		width: 11%;
	}
	12% {
		width: 12%;
	}
	13% {
		width: 13%;
	}
	14% {
		width: 14%;
	}
	15% {
		width: 15%;
	}
	16% {
		width: 16%;
	}
	17% {
		width: 17%;
	}
	18% {
		width: 18%;
	}
	19% {
		width: 19%;
	}
	20% {
		width: 20%;
	}
	21% {
		width: 21%;
	}
	22% {
		width: 22%;
	}
	23% {
		width: 23%;
	}
	24% {
		width: 24%;
	}
	25% {
		width: 25%;
	}
	26% {
		width: 26%;
	}
	27% {
		width: 27%;
	}
	28% {
		width: 28%;
	}
	29% {
		width: 29%;
	}
	30% {
		width: 30%;
	}
	31% {
		width: 31%;
	}
	32% {
		width: 32%;
	}
	33% {
		width: 33%;
	}
	34% {
		width: 34%;
	}
	35% {
		width: 35%;
	}
	36% {
		width: 36%;
	}
	37% {
		width: 37%;
	}
	38% {
		width: 38%;
	}
	39% {
		width: 39%;
	}
	40% {
		width: 40%;
	}
	41% {
		width: 41%;
	}
	42% {
		width: 42%;
	}
	43% {
		width: 43%;
	}
	44% {
		width: 44%;
	}
	45% {
		width: 45%;
	}
	46% {
		width: 46%;
	}
	47% {
		width: 47%;
	}
	48% {
		width: 48%;
	}
	49% {
		width: 49%;
	}
	50% {
		width: 50%;
	}
	51% {
		width: 51%;
	}
	52% {
		width: 52%;
	}
	53% {
		width: 53%;
	}
	54% {
		width: 54%;
	}
	55% {
		width: 55%;
	}
	56% {
		width: 56%;
	}
	57% {
		width: 57%;
	}
	58% {
		width: 58%;
	}
	59% {
		width: 59%;
	}
	60% {
		width: 60%;
	}
	61% {
		width: 61%;
	}
	62% {
		width: 62%;
	}
	63% {
		width: 63%;
	}
	64% {
		width: 64%;
	}
	65% {
		width: 65%;
	}
	66% {
		width: 66%;
	}
	67% {
		width: 67%;
	}
	68% {
		width: 68%;
	}
	69% {
		width: 69%;
	}
	70% {
		width: 70%;
	}
	71% {
		width: 71%;
	}
	72% {
		width: 72%;
	}
	73% {
		width: 73%;
	}
	74% {
		width: 74%;
	}
	75% {
		width: 75%;
	}
	76% {
		width: 76%;
	}
	77% {
		width: 77%;
	}
	78% {
		width: 78%;
	}
	79% {
		width: 79%;
	}
	80% {
		width: 80%;
	}
	81% {
		width: 81%;
	}
	82% {
		width: 82%;
	}
	83% {
		width: 83%;
	}
	84% {
		width: 84%;
	}
	85% {
		width: 85%;
	}
	86% {
		width: 86%;
	}
	87% {
		width: 87%;
	}
	88% {
		width: 88%;
	}
	89% {
		width: 89%;
	}
	90% {
		width: 90%;
	}
	91% {
		width: 91%;
	}
	92% {
		width: 92%;
	}
	93% {
		width: 93%;
	}
	94% {
		width: 94%;
	}
	95% {
		width: 95%;
	}
	96% {
		width: 96%;
	}
	97% {
		width: 97%;
	}
	98% {
		width: 98%;
	}
	99% {
		width: 99%;
	}
	100% {
		width: 100%;
	}
}