/* Center loader on IE */
body {
	display: flex;
	min-height: 100vh;
	line-height: 1.25;
}

/* Material Design spinner */
.spinner-block {
	margin: auto;
	display: flex;
	align-items: center;
	animation: fadein 0.25s;
}

.spinner-block svg {
	display: block;
	margin-right: 25px;
}

@keyframes fadein {
	from {
		opacity: 0;
	}

	90% {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.spinner {
	animation: rotator 1.4s linear infinite;
}

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

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

/* All animation */
.path {
	stroke: #4285f4;
	stroke-dasharray: 187;
	stroke-dashoffset: 0;
	transform-origin: center;
	animation: dash 4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* Less good on IE */
	.path {
		stroke-dasharray: 100;
	}
}

@keyframes colors {
	0% {
		stroke: #4285f4;
	}

	25% {
		stroke: #de3e35;
	}

	50% {
		stroke: #f7c223;
	}

	75% {
		stroke: #1b9a59;
	}

	100% {
		stroke: #4285f4;
	}
}

@keyframes dash {
	0% {
		stroke-dashoffset: 187;
	}

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

	100% {
		stroke-dashoffset: 187;
		transform: rotate(350deg);
	}
}