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

.gaugometer{
	width:264px;
	height:114px;
	position: absolute;
	top: 30%;
	left: 50%;
	overflow: hidden;
	text-align: center;
	transform: translate(-50%, -50%);
	margin-top: 45px;
}


.gaugometer .gauge-a{
	z-index: 1;
	position: absolute;
	background-color: rgba(255,255,255,.2);
	width: 264px;
	height: 132px;
	top: 132px;
	border-radius:165px 165px 0px 0px ;
}
.gaugometer .gauge-b {
    z-index: 4;
    position: absolute;
    background-color: #fff;
    width: 205px;
    height: 105px;
    top: 15px;
    margin-left: 30px;
    margin-right: auto;
    border-radius: 205px 205px 0px 0px;
}
.gaugometer .gauge-c{
	z-index: 2;
	position: absolute;
	background-color: #c8dbfc;
	width: 264px;
	height: 132px;
	top: 132px;
	margin-left: auto;
	margin-right: auto;
	border-radius:0px 0px 132px 132px ;
  transform-origin:center top;
	transition: all 1.3s ease-in-out;
	transform:rotate(.5turn);
}
.gaugometer .gauge-d{
	z-index: 3;
	position: absolute;
	background-color: #5664F9;
	width: 264px;
	height: 132px;
	top: 132px;
	margin-left: auto;
	margin-right: auto;
	border-radius:0px 0px 132px 132px ;
  transform-origin:center top;
	transition: all 1.3s ease-in-out;
	transform:rotate(.2turn);
}

.gaugometer .gauge-data{
	z-index: 4;
	color: #333;
	font-size: 1em;
	line-height: 7px;
	position: absolute;
	width: 264px;
	height: 132px;
	top: 59px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -25px;
	transition: all 1s ease-out;
	font-weight: bold;
}
.gaugometer .gauge-data h2 { font-size: 25px; color: #E85558;}
.gaugometer .gauge-data small {
	display: block; margin-top: 20px;
	font-size: 125%;
	color: #54af63;
}