/*
* PRE-LOADER
*/
#preloader {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1500;
	background-color: #000;
	opacity: 0.6;
	display: flex;
	justify-content: center;
	align-items: center;
}
#ajax-loader {
	margin:0px auto;
	border: 6px solid var(--pal3);
	border-top: 6px solid var(--pal3);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin-loader 1s linear infinite;
}
@keyframes spin-loader {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/* From Uiverse.io by mrhyddenn */ 
.loader {
	background: transparent;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
	.circle {
		width: 180px;
		height: 180px;
		border: 5px solid var(--pal2);
		position: absolute;
		border-radius: 50%;
		animation: circle14512 2s linear infinite;
	}
	.circle::before {
		content: '';
		position: absolute;
		top: -10px;
		left: 50%;
		transform: translateX(-50%);
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--pal7);
		box-shadow: 0 0 20px var(--pal5), 0 0 60px var(--pal7);
	}

@keyframes circle14512 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* From Uiverse.io by mrhyddenn */ 
.loader-small {
  background: transparent;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

	.circle-small {
	  width: 60px;
	  height: 60px;
	  border: 2px solid var(--pal7);
	  position: absolute;
	  border-radius: 50%;
	  animation: circle14512 2s linear infinite;
	}
		.circle-small::before {
		  content: '';
		  position: absolute;
		  top: -10px;
		  left: 50%;
		  transform: translateX(-50%);
		  width: 20px;
		  height: 20px;
		  border-radius: 50%;
		  background: var(--pal5);
		}