.gauge-con{ margin-top: 70px;  position: relative; }

.gauge-con h2{ text-align: center; margin-bottom: 60px; }

.gauge-wrap img{ margin: 0 auto; position: relative; top: -50px;}

.gauge-wrap h4{ text-align: center; font-weight: 700; font-size: 30px; top: -60px; position: relative; color: #252525;}

.gauge-wrap p{ text-align: center; font-weight: 100; font-size: 16px; top: -60px; position: relative;}

.gauge-first img{max-width: 80px; left: 76px; position: relative; top: -50px; float: left;}

.your-class { display: block; position: relative; width: 255px; height: 127px; background: #D3D3D3; border-radius: 250px 250px 0 0; overflow: hidden; cursor: pointer;}

.your-class:before, .your-class:after { content: ''; position: absolute; display: block; border-radius: inherit; background: #0957A0; width: inherit; height: inherit;}

.your-class:before { top: 0; transition: transform 0.5s; transform-origin: center bottom; transform: rotate(-180deg);}

.your-class:after { bottom: -2px; left: 50%; transform: translateX(-50%); background: #fff; width: 125px; height: 64px;}

.your-class:hover:before { transform: rotate(-120deg);}

.g2:hover:before { transform: rotate(-60deg);}

.g3:hover:before { transform: rotate(-0deg);}

.your-class:hover > .your-class-value:before {/*  content: "25%";*/}

.g2:hover > .your-class-value:before {/*  content: "50%";*/}

.g3:hover > .your-class-value:before {/*  content: "100%";*/}

.your-class { vertical-align: middle; margin: 0 auto;}

/*@media only screen and (min-width: 250px) and (max-width: 1224px) {

.your-class {  height: 127px;}
}*/