/* ---------------------------------
	MagincBoxes
--------------------------------- */

.SITE-LOADER-Container {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: block;
	opacity: 0.8;
	background-color: #000000a3;
	overflow: hidden;
}

	.SITE-LOADER-Container.Website {
		filter: saturate(0);
		background-image: url("../../../Resources/Images/Settings/Mockup/Desktop_BG.svg");
		background-size: cover;
		background-position: top;
		opacity: 0;
	}

		.SITE-LOADER-Container.Website.Active {
			transition: opacity 1s ease-in-out;
			opacity: 1;
		}

.ML_Loader {
	height: 250px;
	width: 250px;
	position: absolute;
	top: calc(50% - 125px );
	left: calc(50% - 125px );
	animation: rotate3d 1s ease-in-out infinite alternate;
	opacity: 1
}

.MiniInlineLoader {
	height: 140px;
	width: 140px;
	animation: roll 1s ease-in-out infinite alternate;
	opacity: 1
}

.ML_Loader svg {
	width: 250px;
	height: 250px;
}

.MiniInlineLoader svg {
	width: 140px;
	height: 140px;
}


@keyframes roll {
	0% {
		transform: translateX(-100%) rotate(0deg);
	}

	100% {
		transform: translateX(100%) rotate(270deg);
	}
}

@keyframes rotate3d {
	0% {
		transform: rotate3d(0, 1, 0, 0deg);
	}

	100% {
		transform: rotate3d(0, 1, 0, 360deg);
	}
}