.counterbox{
	width:370px;
	margin:22px auto 0 auto;
	position:relative;
}
.counter-group {
  margin:0 auto 0 auto;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  flex-wrap:nowrap; 
}
.counter-group:before,
.counter-group:after {
  content: " ";
  display: table;
}
.counter-group:after {
  clear: both;
}
.counter-block {
	float: left;
	width:28.66%;
	margin:0 0;
	display:table;
}
.counter-block:nth-child(1), .counter-block:nth-child(2){margin-right:10%;}
.counter-block .counter {
	position: relative;
	height: 52px;
	overflow: hidden;
	color:#fff; 
	text-align:center; 
	}
.counter-block .counter .number {
	width: 47%;
	height:50px;
	color: #000;
	position: absolute;
	font-weight:bold;
	font-size: 30px;
	line-height:48px;
	text-align:center;
	vertical-align:middle;
	background:#fff;
	border:1px solid #e9d9a7;
	border-bottom:4px solid #ceb774;
	border-radius:5px;
	}
.counter-block .counter .number.tens {
  left: 0; 
}
.counter-block .counter .number.units {
  left: 51%;
}
.counter-block .counter .number.hundreds {
  display: none;
}
.counter-block .counter .number.show {
  top: 0;
  z-index: 2;
}
.counter-block .counter .number.hidden-down {
  top: 100%;
}
.counter-block .counter .number.hidden-up {
  top: -100%;
  z-index: 100;
}
.counter-block .counter.with-hundreds {
  width: 300px;
}
.counter-block .counter.with-hundreds .number {
  width: 30.66%;
}
.counter-block .counter.with-hundreds .number.tens {
  left: 33.33%;
}
.counter-block .counter.with-hundreds .number.units {
  left: 66.66%;
}
.counter-block .counter.with-hundreds .number.hundreds {
  display: block;
  left: 0;
}
.counter-block .counter-caption {
  font-size: 150%;
  display:none;
}
@media only screen and (max-width: 767px){
.counterbox{width:280px;margin:8px auto 0 auto;}	
.counter-block .counter {height: 40px;}
.counter-block .counter .number {
	height:40px;
	font-size: 28px;
	line-height:38px;
}
}