#loader-bcg{
	position: fixed;
	top: 0;
	left: 0;
	width: 400vw;
	height: 400vh;
	margin-top: -150vh;
	margin-left: -150vw;
	animation: loader-bcg-anim 5s linear infinite;
	background-size: 400% auto;
	background-position: 0% 0%;
	background-image: linear-gradient(45deg, var(--sotetkek), var(--vilagoskek));
	z-index: 101;
	display: none;
	transition: 0.4s;
}

#loader-bcg.active{
	display: block;
}

@keyframes loader-bcg-anim{
	0%{
		background-position: 0% 0%;
		transform: rotate(0deg) scale(2.0);

	}
	50%{
		background-position: 100% 100%;
		transform: rotate(180deg) scale(2.0);
	}
	100%{
		background-position: 0% 0%;
		transform: rotate(360deg) scale(2.0);
	}
}

#loader-holder{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 102;
	display: none;
	transition: 0.4s;
}

#loader-holder.active{
	display: flex;
	justify-content: center;
	align-items: center;
}

.closing{
	opacity: 0;
}

.loader-spinner-foka{
	position: fixed;
	top: 10vh;
	left: calc(50vw - 20vh);
	width: 40vh;
	height: 40vh;
	z-index: 104;
	stroke-dasharray: 2000;
	stroke-dashoffset: 2000;
	pointer-events: none;
	animation: foka-vonal-anim 2s linear infinite;
	animation-fill-mode: forwards;
}

#loader-spinner-foka-szarnyak{
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: foka-vonal-anim-szarny 2s linear infinite;
}

.loader-spinner-foka path{
	fill: rgba(0, 0, 0, 0);
	stroke: var(--feher);
	stroke-width: 1;
}

@keyframes foka-vonal-anim {
	0%{
		stroke-dashoffset: 2000;
	}
	50%{
		stroke-dashoffset: 0;
	}
	70%{
		stroke-dashoffset: -2000;
	}
	100%{
		stroke-dashoffset: -2000;
	}

}

@keyframes foka-vonal-anim-szarny {
	0%{
		stroke-dashoffset: 1000;
	}
	30%{
		stroke-dashoffset: 1000;
	}
	40%{
		stroke-dashoffset: 0;
	}
	50%{
		stroke-dashoffset: 0;
	}
	60%{
		stroke-dashoffset: -1000;
	}
	100%{
		stroke-dashoffset: -1000;
	}

}