/* Skeleton */
.flip-clock-wrapper ul {position:relative; float:left; width:42px; height:81px; font-size:48px; font-weight:700; line-height:94px; border-radius:9px; margin:0 2px;}
.flip-clock-wrapper ul li { z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.flip-clock-wrapper ul li:first-child { z-index: 2; }
.flip-clock-wrapper ul li a {display:block; height:100%; perspective:200px; -webkit-perspective:200px; -moz-perspective:200px; -ms-perspective:200px; -o-perspective:200px; }
.flip-clock-wrapper ul li a div { z-index: 1; position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; }
.flip-clock-wrapper ul li a div .shadow { position: absolute; width: 100%; height: 100%; z-index: 2; }
.flip-clock-wrapper ul li a div.up {transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -ms-transform-origin:50% 100%; top:0; }
.flip-clock-wrapper ul li a div.up:after { content: ""; position:absolute; top:79px; left:0; z-index: 5; width: 100%; height:2px; background-color: rgba(0,0,0,.4); }
.flip-clock-wrapper ul li a div.down {transform-origin:50% 0; -webkit-transform-origin:50% 0; -ms-transform-origin:50% 0; bottom:0;}
.flip-clock-wrapper ul li a div div.inn { position: absolute; left: 0; z-index: 1; width: 100%; height: 200%; color: #fff; text-align: center; border-radius:18px;}
.flip-clock-wrapper ul li a div.up div.inn { top: 0; }
.flip-clock-wrapper ul li a div.down div.inn { bottom: 0; }
/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before { z-index: 3; }
.flip-clock-wrapper ul.play li.flip-clock-active { animation: asd .5s .5s linear both; z-index: 2; }
.flip-clock-divider { float: left; display: inline-block; position: relative; width:10px; height: 100px; }
.flip-clock-divider:first-child { width: 0; }
.flip-clock-dot { display: block; background: rgb(50, 52, 52); width: 10px; height: 10px; position: absolute; border-radius: 1000px; box-shadow: 0 0 5px rgba(0, 0, 0, .5); }
.flip-clock-divider .flip-clock-label { position: absolute; top: -1.5em; right: -86px; color: black; text-shadow: none; }
.flip-clock-divider.minutes .flip-clock-label { right: -88px; }
.flip-clock-divider.seconds .flip-clock-label { right: -91px; }
.flip-clock-dot.top { top: 30px; left: 5px; display:none; }
.flip-clock-dot.bottom { bottom: 30px; left: 5px; display:none; }
 @keyframes asd { 0% {
 z-index: 2;
}
 5% {
 z-index: 4;
}
 100% {
 z-index: 4;
}
}
.flip-clock-wrapper ul.play li.flip-clock-active .down { z-index: 2; animation: turn .5s .5s linear both; }
 @keyframes turn { 0% {
 transform: rotateX(90deg);
}
 100% {
 transform: rotateX(0deg);
}
}
.flip-clock-wrapper ul.play li.flip-clock-before .up { z-index: 2; animation: turn2 .5s linear both; }
 @keyframes turn2 { 0% {
 transform: rotateX(0deg);
}
 100% {
 transform: rotateX(-90deg);
}
}
.flip-clock-wrapper ul li.flip-clock-active { z-index: 3; }
/* SHADOW */

.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow { background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1))); background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); animation: show .5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow { background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1))); background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%); animation: hide .5s .3s linear both; }
 @keyframes show { 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
 @keyframes hide { 0% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}
/*Safari Hack*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
 .flip-clock-wrapper ul {line-height:146px;}
}
/*Opera Hack*/
x:-o-prefocus, .flip-clock-wrapper ul {line-height:146px;}