@import url(http://fonts.googleapis.com/css?family=Arimo);
@import url(http://fonts.googleapis.com/css?family=Didact+Gothic);

html {
	font-family: Futura, Helvetica;
	background-color: transparent;
}

html,
body {
	margin: 0px;
	padding: 0px;
}

.info {
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 200px;
	text-align: center;
	top: 50%;
}

h1 {
	font-family: "Didact Gothic", sans-serif;
	margin-bottom: -10px;
}

p {
	font-family: "Arimo", sans-serif;
	font-size: 11pt;
	line-height: 14pt;
}

#emote {
	margin-top: 20px;
	border-radius: 10%;
}

#count {
	display: none;
}

.container {
	width: 420px;
	height: 210px;
	position: absolute;
	top: 30%;
	left: 50%;
	overflow: hidden;
	text-align: center;
	transform: translate(-50%, -50%);
}

.gauge-indicators {
	z-index: 1;
	position: absolute;
	background: conic-gradient(
		#f5eb67 0 21%,
		#44d492 0 33.2%,
		#fa233e 0 79%,
		#ffa15c 0 100%
	);
	width: 420px;
	height: 210px;
	top: 0%;

	border-radius: 250px 250px 0px 0px;
}

.gauge-a {
	z-index: 1;
	position: absolute;
	background-color: #ddc3a5;
	width: 400px;
	height: 200px;
	margin-left: 10px;
	margin-top: 10px;
	top: 0%;
	border-radius: 250px 250px 0px 0px;
}

.gauge-b {
	z-index: 3;
	position: absolute;
	background-color: #201e20;
	width: 250px;
	height: 125px;
	top: 85px;
	margin-left: 85px;
	margin-right: auto;
	border-radius: 250px 250px 0px 0px;
}

.gaugeBar {
	z-index: 2;
	position: absolute;
	background-color: #d2222d;
	width: 400px;
	height: 200px;
	top: 200px;
	margin-left: 10px;
	margin-top: 10px;
	margin-right: auto;
	border-radius: 0px 0px 200px 200px;
	transform-origin: center top;
	transition: all 0.1s ease-in-out;
}

.gauge-data {
	z-index: 4;
	color: rgba(255, 255, 255, 0.2);
	font-size: 1.5em;
	line-height: 25px;
	position: absolute;
	width: 420px;
	height: 210px;
	top: 90px;
	margin-left: auto;
	margin-right: auto;
	transition: all 1s ease-out;
}

@keyframes rotate-scale-up {
	0% {
		-webkit-transform: scale(1) rotateZ(0);
		transform: scale(1) rotateZ(0);
	}
	50% {
		-webkit-transform: scale(2) rotateZ(180deg);
		transform: scale(2) rotateZ(180deg);
	}
	100% {
		-webkit-transform: scale(1) rotateZ(360deg);
		transform: scale(1) rotateZ(360deg);
	}
}

/**
 * ----------------------------------------
 * animation for 100% meter
 * ----------------------------------------
 */

.vibrate-1 {
	animation: redExpand 2000ms linear 1;
}

@keyframes redExpand {
	0% {
		transform: scale(1);
	}
	10% {
		transform: scale(1.1) translate(-3px, 5px);
	}
	20% {
		transform: scale(1.2) translate(-3px, -5px);
	}
	30% {
		transform: scale(1.3) translate(3px, 5px);
	}
	40% {
		transform: scale(1.4) translate(3px, -5px);
	}
	50% {
		transform: scale(1.5) translate(-3px, 5px);
	}
	60% {
		transform: scale(1.6) translate(-3px, -5px);
	}
	70% {
		transform: scale(1.7) translate(3px, 5px);
	}
	80% {
		transform: scale(1.8) translate(3px, -5px);
	}
	90% {
		transform: scale(1.9) translate(-3px, 5px);
		filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg)
			saturate(600%) contrast(0.8);
	}
	100% {
		transform: scale(1);
	}
}
/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */

.swing-in-top-fwd {
	-webkit-animation: swing-in-top-fwd 1s
		cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
	animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
		both;
}
@-webkit-keyframes swing-in-top-fwd {
	0% {
		-webkit-transform: rotateX(-100deg);
		transform: rotateX(-100deg);
		-webkit-transform-origin: top;
		transform-origin: top;
		opacity: 0;
	}
	100% {
		-webkit-transform: rotateX(0deg);
		transform: rotateX(0deg);
		-webkit-transform-origin: top;
		transform-origin: top;
		opacity: 1;
	}
}
@keyframes swing-in-top-fwd {
	0% {
		-webkit-transform: rotateX(-100deg);
		transform: rotateX(-100deg);
		-webkit-transform-origin: top;
		transform-origin: top;
		opacity: 0;
	}
	100% {
		-webkit-transform: rotateX(0deg);
		transform: rotateX(0deg);
		-webkit-transform-origin: top;
		transform-origin: top;
		opacity: 1;
	}
}