@font-face{font-family:digital;src:url(../fonts/digital.ttf) format('truetype')}
body{font-family:digital}
#clc{position:absolute;top:164px;left:169px;width:656px;height:656px;background:url(../gf7/clock.png)}
#clk{position:absolute;left:271px;top:73px;z-index:9}	
#god{position:absolute;top:604px;left:60px;width:300px;height:63px;background:url(../gf7/arrow_h.png);z-index:3}
#min{position:absolute;top:620px;left:309px;width:208px;height:222px;background:url(../gf7/arrow_m.png);z-index:3}
#sec{position:absolute;top:525px;right:80px;width:269px;height:95px;background:url(../gf7/arrow_s.png);z-index:3}
.flip-clock-wrapper *{box-sizing:border-box;backface-visibility:hidden}
.flip-clock-wrapper ul{position:relative;float:left;margin:5px;width:60px;height:90px;font-family:Arial;font-size:80px;font-weight:bold;line-height:87px;border-radius:6px;background:#000}
.flip-clock-wrapper ul li{z-index:1;position:absolute;width:100%;height: 100%;line-height:87px;text-decoration:none !important}
.flip-clock-wrapper ul li:first-child{z-index:2 }
.flip-clock-wrapper ul li a{display:block;height:100%;perspective:200px;margin:0 !important;overflow:visible !important;cursor:default !important }
.flip-clock-wrapper ul li a div{z-index:1;position:absolute;width:100%;height:50%;font-size:80px;overflow:hidden; outline:1px solid transparent }
.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%;top: 0}
.flip-clock-wrapper ul li a div.up:after{content: "";position:absolute;top:44px;z-index:5;width:100%;height:3px;background-color:#000;background-color:rgba(0, 0, 0, 0.4)}
.flip-clock-wrapper ul li a div.down{transform-origin:50% 0;bottom:0;border-bottom-left-radius:6px;border-bottom-right-radius:6px}
.flip-clock-wrapper ul li a div div.inn{position:absolute;z-index:1;width:100%;height:200%; color:#fff;text-shadow:0 1px 2px #000;text-align:center;background-color:#a0a;border-radius:6px;font-size:72px}
.flip-clock-wrapper ul li a div.up div.inn{top:0}
.flip-clock-wrapper ul li a div.down div.inn{bottom:0}
.flip-clock-wrapper ul.play li.flip-clock-before{z-index:3}
.flip-clock-wrapper .flip{box-shadow:0 2px 5px rgba(0, 0, 0, .7)}
.flip-clock-wrapper ul.play li.flip-clock-active{animation:asd .5s .5s linear both;z-index:5}
.flip-clock-divider{float:left;display:inline-block;position:relative;width:20px;height:100px}
.flip-clock-divider:first-child{width:0}
.flip-clock-dot{display:block;background:#a0a;width:10px;height: 10px;position:absolute;border-radius:50%;box-shadow:0 0 5px rgba(0, 0, 0, .5);left:5px}
.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}
.flip-clock-dot.bottom{bottom:30px}
@-webkit-keyframes asd{
0% {z-index:2}
20% {z-index:4}
100% {z-index:4}}
@keyframes asd {
0% {z-index:2}
20% {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 0.5s linear both}
@keyframes turn2 {
0% {transform:rotateX(0deg)}
100% {transform:rotateX(-90deg)}}
.flip-clock-wrapper ul li.flip-clock-active {z-index:3}
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow{background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)),color-stop(100%, black));background:linear, top, rgba(0, 0, 0, .1) 0%, black 100%;background:linear, to bottom, rgba(0, 0, 0, .1) 0%, black 100%;animation:show .5s linear both}
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background:linear, top, rgba(0, 0, 0, .1) 0%, black 100%;background:linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;animation:hide 0.5s 0.3s linear both}
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background:linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background:linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
animation:show .5s linear both}
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background:linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background:linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
animation:hide .5s .2s linear both}
@keyframes show {
0% {opacity:0}
100% {opacity:1}}
@keyframes hide {
0% {opacity:1}
100% {opacity:0}}