.counter{
font-family: 'KoHo', sans-serif;
text-align: center;
height: 200px;
width: 200px;
margin: 0 auto;
position: relative;
}
.counter:before{
content: '';
height: 160px;
width: 160px;
background: linear-gradient(to top,#f9f9f9,#f9f9f9,#C8C9CB);
border-radius: 30px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
position: absolute;
left: 50%;
top: 50%;
transition: all 0.6s ease 0s;
}
.counter:hover:before{
box-shadow: 0 0 10px rgba(0,0,0,0.6);
transform: translateX(-50%) translateY(-50%) rotate(405deg);
}
.counter .counter-content{
color: #fff;
background: #E5A301;
width: 125px;
height: 125px;
padding: 13px 10px;
border-radius: 40px;
box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;
transform: translateX(-50%) translateY(-50%);
position: absolute;
left: 50%;
top: 50%;
}
.counter .counter-value{
font-size: 30px;
font-weight: 600;
margin-bottom: 5px;
display: block;
transition: all 0.3s;
}
.counter:hover .counter-value{ text-shadow: 0 0 5px #000; }
.counter h3{
font-size: 17px;
text-transform: capitalize;
margin: 0;
}
.counter.red .counter-content{ background: #FF5C19; }
.counter.green .counter-content{ background: #01CC1A; }
.counter.blue .counter-content{ background: #0796EB; }
@media screen and (max-width:990px){
.counter{ margin-bottom: 40px; }
}
$(document).ready(function(){
$('.counter-value').each(function(){
$(this).prop('Counter',0).animate({
Counter: $(this).text()
},{
duration: 3500,
easing: 'swing',
step: function (now){
$(this).text(Math.ceil(now));
}
});
});
});