/*
    Loader
*/

/* KEYFRAMES */

@keyframes spin {
	from {
		transform: rotate(0);
	}

	to {
		transform: rotate(359deg);
	}
}

@keyframes spin3D {
	from {
		transform: rotate3d(.5,.5,.5, 360deg);
	}

	to {
		transform: rotate3d(0deg);
	}
}

@keyframes configure-clockwise {
	0% {
		transform: rotate(0);
	}

	25% {
		transform: rotate(90deg);
	}

	50% {
		transform: rotate(180deg);
	}

	75% {
		transform: rotate(270deg);
	}

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

@keyframes configure-xclockwise {
	0% {
		transform: rotate(45deg);
	}

	25% {
		transform: rotate(-45deg);
	}

	50% {
		transform: rotate(-135deg);
	}

	75% {
		transform: rotate(-225deg);
	}

	100% {
		transform: rotate(-315deg);
	}
}

@keyframes pulse {
	from {
		opacity: 1;
		transform: scale(1);
	}

	to {
		opacity: .25;
		transform: scale(.75);
	}
}

/* GRID STYLING */

.spinner-box {
	width: 300px;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
}


/* X-ROTATING BOXES */

.configure-border-1 {
	width: 115px;
	height: 115px;
	padding: 3px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fb5b53;
	animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
}

.configure-border-2 {
	width: 115px;
	height: 115px;
	padding: 3px;
	left: -115px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgb(150,150,150);
	transform: rotate(45deg);
	animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
}

.configure-core {
	width: 100%;
	height: 100%;
	background-color: white;
}