/*CSS by By Tania LD (http://codepen.io/TaniaLD/full/oKxep/)*/
.hourglass{
	position: relative;
	height: 80px;
	width: 80px;
	top: 28%;
	top: -webkit-calc(50% - 43px);
	top: calc(50% - 43px);
	left: 35%;
	left: -webkit-calc(50% - 43px);
	left: calc(50% - 43px);
	border: 3px solid currentColor;
	border-radius: 80px;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-animation: hourglass 2s ease-in-out infinite;
	animation: hourglass 2s ease-in-out infinite;
}

.hourglass.stop {
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;

	color: #f44336;
}

.hourglass:before{
	content: "";
	position: absolute;
	top: 7px;
	left: 15px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 37px 22px 0 22px;
	border-color: currentColor transparent transparent transparent;
}
.hourglass:after{
	content: "";
	position: absolute;
	top: 30px;
	left: 15px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 22px 37px 22px;
	border-color: transparent transparent currentColor transparent;
}

@-webkit-keyframes hourglass{
	0%{-webkit-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(180deg);}
}

@keyframes hourglass{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(180deg);}
}

/* Animation keyframes - you need to add prefixes */
@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
	from { -ms-transform: rotate(0deg); }
	to { -ms-transform: rotate(360deg); }
}



.loading {
	position: absolute;
	top: 50%;
	left: 28px;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
}

.loading .spinner {
	position: absolute;
	left: 1px;
	top: 1px;
	width: 26px;
	height: 26px;
	-webkit-animation: spin 1s infinite linear;
	-moz-animation: spin 1s infinite linear;
	-o-animation: spin 1s infinite linear;
	animation: spin 1s infinite linear;
}

.loading .mask {
	width: 12px;
	height: 12px;
	overflow: hidden;
}

.loading .maskedCircle {
	width: 20px;
	height: 20px;
	border-radius: 12px;
	border: 3px solid #666;
}



.spinner,
.spinner:after {
	border-radius: 50%;
	width: 10em;
	height: 10em;
	margin: -5em;
}
.spinner {
	font-size: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	border-top: 1.1em solid rgba(128, 128, 128, 0.3);
	border-right: 1.1em solid rgba(128, 128, 128, 0.3);
	border-bottom: 1.1em solid rgba(128, 128, 128, 0.3);
	border-left: 1.1em solid #888;
	transform: translateZ(0);
	-webkit-animation: load8 1.1s infinite linear;
	animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@keyframes load8 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}