body {
	display:flex;
	justify-content:center;
	align-items:center;
	height:100vh;
}
.clock {
	display:flex;
}
.clock .divider {
	font-size:66px;
	line-height:102px;
	font-style:normal;
}
.clock .flip {
	position:relative;
	width:60px;
	height:100px;
	margin:2px;
	font-size:66px;
	line-height:100px;
	text-align:center;
	background:white;
	border:1px solid black;
	border-radius:10px;
	box-shadow:0 0 6px rgba(0,0,0,0.5);
	-webkit-box-reflect:below 1px linear-gradient(transparent,rgba(0,0,0,0.4));
}
.clock .flip .digital::before,.clock .flip .digital::after {
	position:absolute;
	content:attr(data-number);
	left:0;
	right:0;
	color:white;
	background:black;
	overflow:hidden;
	-webkit-perspective:160px;
	perspective:160px;
}
.clock .flip .digital::before {
	top:0;
	bottom:50%;
	border-bottom:1px solid #666;
	border-radius:10px 10px 0 0;
}
.clock .flip .digital::after {
	top:50%;
	bottom:0;
	line-height:0;
	border-radius:0 0 10px 10px;
}
.clock .flip .back::before,.clock .flip .front::after {
	z-index:1;
}
.clock .flip .back::after {
	z-index:2;
}
.clock .flip .front::before {
	z-index:3;
}
.clock .flip .back::after {
	-webkit-transform-origin:center top;
	transform-origin:center top;
	-webkit-transform:rotateX(0.5turn);
	transform:rotateX(0.5turn);
}
.clock .flip.running .front::before {
	-webkit-transform-origin:center bottom;
	transform-origin:center bottom;
	-webkit-animation:frontFlipDown 0.6s ease-in-out;
	animation:frontFlipDown 0.6s ease-in-out;
	box-shadow:0 -2px 6px rgba(255,255,255,0.3);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.clock .flip.running .back::after {
	-webkit-animation:backFlipDown 0.6s ease-in-out;
	animation:backFlipDown 0.6s ease-in-out;
}
@-webkit-keyframes frontFlipDown {
	to {
	-webkit-transform:rotateX(0.5turn);
	transform:rotateX(0.5turn);
}
}@keyframes frontFlipDown {
	to {
	-webkit-transform:rotateX(0.5turn);
	transform:rotateX(0.5turn);
}
}@-webkit-keyframes backFlipDown {
	to {
	-webkit-transform:rotateX(0);
	transform:rotateX(0);
}
}@keyframes backFlipDown {
	to {
	-webkit-transform:rotateX(0);
	transform:rotateX(0);
}
}