.hourglass {
	display: block;
	background: #f4f6f9;
	margin: 3em auto;
	width: 2em;
	height: 4em;
	animation: hourglass 1s linear infinite;
}
.outer {
	fill: #6777ef;
}
.middle {
	fill: #f4f6f9;
}
@keyframes hourglass {
	0% {
		transform: rotate(0deg);
		box-shadow: inset #6777ef 0 0em 0 0, inset #f4f6f9 0 -2em 0 0,
			inset #6777ef 0 -4em 0 0;
	}
	80% {
		transform: rotate(0deg);
		box-shadow: inset #6777ef 0 -2em 0 0, inset #f4f6f9 0 -2em 0 0,
			inset #6777ef 0 -2em 0 0;
	}
	100% {
		transform: rotate(180deg);
		box-shadow: inset #6777ef 0 -2em 0 0, inset #f4f6f9 0 -2em 0 0,
			inset #6777ef 0 -2em 0 0;
	}
}