/*-------------------------------------------------------*/
/* Preloader
/*-------------------------------------------------------*/
.loader-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100vh;
	background-color: #fff;
	transition: opacity 1s;
	z-index: 99999;
}

.loader {
	display: block;
	position: absolute;
	font-size: 0;
	color: var(--wp--preset--color--primary);
	left: 50%;
	top: 50%;
	width: 42px;
	height: 42px;
	transition: opacity 1s;
	@include transform(translateY(-50%) translateX(-50%));
}

.loader > div {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 100%;
	display: inline-block;
	float: none;
	width: 38px;
	height: 38px;
	background: transparent;
	border-style: solid;
	border-width: 2px;
	border-right-color: transparent;
	border-left-color: transparent;
	animation: ball-clip-rotate-pulse-rotate 1s
		cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}

@-webkit-keyframes ball-clip-rotate-pulse-rotate {
	0% {
		-webkit-transform: translate(-50%, -50%) rotate(0);
		transform: translate(-50%, -50%) rotate(0);
	}
	50% {
		-webkit-transform: translate(-50%, -50%) rotate(180deg);
		transform: translate(-50%, -50%) rotate(180deg);
	}
	100% {
		-webkit-transform: translate(-50%, -50%) rotate(360deg);
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
@-moz-keyframes ball-clip-rotate-pulse-rotate {
	0% {
		-moz-transform: translate(-50%, -50%) rotate(0);
		transform: translate(-50%, -50%) rotate(0);
	}
	50% {
		-moz-transform: translate(-50%, -50%) rotate(180deg);
		transform: translate(-50%, -50%) rotate(180deg);
	}
	100% {
		-moz-transform: translate(-50%, -50%) rotate(360deg);
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
@-o-keyframes ball-clip-rotate-pulse-rotate {
	0% {
		-o-transform: translate(-50%, -50%) rotate(0);
		transform: translate(-50%, -50%) rotate(0);
	}
	50% {
		-o-transform: translate(-50%, -50%) rotate(180deg);
		transform: translate(-50%, -50%) rotate(180deg);
	}
	100% {
		-o-transform: translate(-50%, -50%) rotate(360deg);
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
@keyframes ball-clip-rotate-pulse-rotate {
	0% {
		-webkit-transform: translate(-50%, -50%) rotate(0);
		-moz-transform: translate(-50%, -50%) rotate(0);
		-o-transform: translate(-50%, -50%) rotate(0);
		transform: translate(-50%, -50%) rotate(0);
	}
	50% {
		-webkit-transform: translate(-50%, -50%) rotate(180deg);
		-moz-transform: translate(-50%, -50%) rotate(180deg);
		-o-transform: translate(-50%, -50%) rotate(180deg);
		transform: translate(-50%, -50%) rotate(180deg);
	}
	100% {
		-webkit-transform: translate(-50%, -50%) rotate(360deg);
		-moz-transform: translate(-50%, -50%) rotate(360deg);
		-o-transform: translate(-50%, -50%) rotate(360deg);
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
@-webkit-keyframes ball-clip-rotate-pulse-scale {
	0%,
	100% {
		opacity: 1;
		-webkit-transform: translate(-50%, -50%) scale(1);
		transform: translate(-50%, -50%) scale(1);
	}
	30% {
		opacity: 0.3;
		-webkit-transform: translate(-50%, -50%) scale(0.15);
		transform: translate(-50%, -50%) scale(0.15);
	}
}
@-moz-keyframes ball-clip-rotate-pulse-scale {
	0%,
	100% {
		opacity: 1;
		-moz-transform: translate(-50%, -50%) scale(1);
		transform: translate(-50%, -50%) scale(1);
	}
	30% {
		opacity: 0.3;
		-moz-transform: translate(-50%, -50%) scale(0.15);
		transform: translate(-50%, -50%) scale(0.15);
	}
}
@-o-keyframes ball-clip-rotate-pulse-scale {
	0%,
	100% {
		opacity: 1;
		-o-transform: translate(-50%, -50%) scale(1);
		transform: translate(-50%, -50%) scale(1);
	}
	30% {
		opacity: 0.3;
		-o-transform: translate(-50%, -50%) scale(0.15);
		transform: translate(-50%, -50%) scale(0.15);
	}
}
@keyframes ball-clip-rotate-pulse-scale {
	0%,
	100% {
		opacity: 1;
		-webkit-transform: translate(-50%, -50%) scale(1);
		-moz-transform: translate(-50%, -50%) scale(1);
		-o-transform: translate(-50%, -50%) scale(1);
		transform: translate(-50%, -50%) scale(1);
	}
	30% {
		opacity: 0.3;
		-webkit-transform: translate(-50%, -50%) scale(0.15);
		-moz-transform: translate(-50%, -50%) scale(0.15);
		-o-transform: translate(-50%, -50%) scale(0.15);
		transform: translate(-50%, -50%) scale(0.15);
	}
}