:root {
	--loader-ratio: 2.3;
}

#loader-container  {
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(199, 199, 199, 0.199);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0;
}

#loader  {
	position:relative;
	height:calc(60px * var(--loader-ratio));
	width:calc(160px * var(--loader-ratio));
	margin:0;
	margin-bottom: 20px;
}

#loading-text {
	font-size: calc(18px * var(--loader-ratio));
	text-align: center;
	font-weight: bold;
	color: #000000;
}

.circles {
	position:absolute;
	left:calc(-5px * var(--loader-ratio));
	top:0;
	height:calc(60px * var(--loader-ratio));
	width:calc(180px * var(--loader-ratio))
}

.circles span {
	position:absolute;
	top:calc(25px * var(--loader-ratio));
	height:calc(12px * var(--loader-ratio));
	width:calc(12px * var(--loader-ratio));
	border-radius:calc(12px * var(--loader-ratio));
	background-color:#EFEFEF
}

.circles span.one {
	right:calc(80px * var(--loader-ratio));
}

.circles span.two {
	right:calc(40px * var(--loader-ratio));
}

.circles span.three {
	right:0px
}

.circles {
	-webkit-animation:animcircles 0.5s infinite linear;
	animation:animcircles 0.5s infinite linear
}

@-webkit-keyframes animcircles {
	0% {
		-webkit-transform:translate(0px,0px);
		transform:translate(0px,0px)
	}
	100% {
		-webkit-transform:translate(-40px,0px);
		transform:translate(calc(-40px * var(--loader-ratio)),0px)
	}
}

@keyframes animcircles {
	0% {
		-webkit-transform:translate(0px,0px);
		transform:translate(0px,0px)
	}
	100% {
		-webkit-transform:translate(-40px,0px);
		transform:translate(calc(-40px * var(--loader-ratio)),0px)
	}
}

.pacman {
	position:absolute;
	left:0;
	top:0;
	height:calc(60px * var(--loader-ratio));
	width:calc(60px * var(--loader-ratio))
}

.pacman .eye {
	position:absolute;
	top:calc(10px * var(--loader-ratio));
	left:calc(30px * var(--loader-ratio));
	height:calc(7px * var(--loader-ratio));
	width:calc(7px * var(--loader-ratio));
	border-radius:calc(7px * var(--loader-ratio));
	background-color:#1C163A
}

.pacman span {
	position:absolute;
	top:0;
	left:0;
	height:calc(60px * var(--loader-ratio));
	width:calc(60px * var(--loader-ratio))
}

.pacman span::before {
	content:"";
	position:absolute;
	left:0;
	height:calc(30px * var(--loader-ratio));
	width:calc(60px * var(--loader-ratio));
	background-color:#FFFB16
}

.pacman .top::before {
	top:0;
	border-radius:calc(60px * var(--loader-ratio)) calc(60px * var(--loader-ratio)) 0px 0px
}

.pacman .bottom::before {
	bottom:0;
	border-radius:0px 0px calc(60px * var(--loader-ratio)) calc(60px * var(--loader-ratio))
}

.pacman .left::before {
	bottom:0;
	height:calc(60px * var(--loader-ratio));
	width:calc(30px * var(--loader-ratio));
	border-radius:calc(60px * var(--loader-ratio)) 0px 0px calc(60px * var(--loader-ratio))
}

.pacman .top {
	-webkit-animation:animtop 0.5s infinite;
	animation:animtop 0.5s infinite
}

@-webkit-keyframes animtop {
	0%,100% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg)
	}
	50% {
		-webkit-transform:rotate(-45deg);
		transform:rotate(-45deg)
	}
}

@keyframes animtop {
	0%,100% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg)
	}
	50% {
		-webkit-transform:rotate(-45deg);
		transform:rotate(-45deg)
	}
}

.pacman .bottom {
	-webkit-animation:animbottom 0.5s infinite;
	animation:animbottom 0.5s infinite
}

@-webkit-keyframes animbottom {
	0%,100% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg)
	}
	50% {
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg)
	}
}

@keyframes animbottom {
	0%,100% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg)
	}
	50% {
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg)
	}
}

/* ############### Mobile ############### */
@media (max-width: 700px) {
	:root {
		--loader-ratio: 1.5;
	}
}