/* --------------Loader_1--------------*/
.preloader {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	animation: spin 2s linear infinite;
	z-index: 9999; 
}


@keyframes spin {
	0% 	{ transform: rotate(0deg); 	}
	100% 	{ transform: rotate(360deg); 	}
} 



/*-------------- Loader_2 --------------*/
.preloader {
position: fixed;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}

.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;  
z-index: 1;
}

.inner.one {
left: 0%;
top: 	0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid #00ffd9;
}

.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid #aaff03;
}

.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid #46ff09;
}

@keyframes rotate-one {
0% 	{	transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);		}	
100% 	{	transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);	}
}
@keyframes rotate-two {
0% 	{	transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);		}
100% 	{	transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);	}
}
@keyframes rotate-three {
0% 	{	transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);		}
100% 	{	transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);	}
}

/*-------------- Loader_ Overlay --------------*/


.preloader-overlay, .inner-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00000000; /* Цвет и прозрачность затемнения */
z-index: 9998; /* Установите z-index ниже прелоадера */
pointer-events: none;
}


.inner-overlay{
	border-radius: 100%;
	z-index: 0;
}