@font-face{font-family:digital;src:url(../fonts/digital.ttf) format('truetype')}
body{font-family:digital}
#move{background:url(../gf7/tyt20.png)}
#clc{
position:absolute;top:154px;left:174px;
width:656px;height:656px;
background:url(../gf7/clock.png)
}
#klk{
position:absolute;
top:155px;left:173px;
width:656px;height:656px;
background:url(../gf7/klk.png);
opacity:0;
z-index:1;
-webkit-animation-name:fade;animation-name:fade;-webkit-animation-duration:.5s;animation-duration:.5s}
@-webkit-keyframes fade {
0% {opacity:1}
50% {opacity:1}
51% {opacity:0}
100% {opacity:0}
}
@keyframes fade {
0% {opacity:1}
50% {opacity:1}
51% {opacity:0}
100% {opacity:0}
}
#swiffycontainer {position:absolute;width:780px;height:660px;top:153px;left:107px}
#clk{position:absolute;left:271px;top:80px;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:640px;left:305px;
width:208px;height:222px;
background:url(../gf7/arrow_m.png);
z-index:3
}
#sec{
position:absolute;top:560px;right:85px;
width:269px;height:95px;
background:url(../gf7/arrow_s.png);
z-index:3
}
.flip-clock-wrapper *{
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-backface-visibility:hidden;
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%;
-webkit-perspective:200px;
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{
-webkit-transform-origin:50% 100%;
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{
-webkit-transform-origin:50% 0;
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, 0.7)}
.flip-clock-wrapper ul.play li.flip-clock-active{
-webkit-animation:asd 0.5s 0.5s linear both;
animation:asd 0.5s 0.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, 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;
-webkit-animation:turn 0.5s 0.5s linear both;
animation:turn 0.5s 0.5s linear both}
@-webkit-keyframes turn {
0% {-webkit-transform:rotateX(90deg)}
100% {-webkit-transform:rotateX(0deg)}}
@keyframes turn {
0% {transform:rotateX(90deg)}
100% {transform:rotateX(0deg)}}
.flip-clock-wrapper ul.play li.flip-clock-before .up{
z-index:2;
-webkit-animation:turn2 0.5s linear both;
animation:turn2 0.5s linear both}
@-webkit-keyframes turn2 {
0% {-webkit-transform:rotateX(0deg)}
100% {-webkit-transform:rotateX(-90deg)}}
@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, 0.1)), color-stop(100%, black));
background:linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background:linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation:show 0.5s linear both;
animation:show 0.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, 0.1) 0%, black 100%;
background:linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation:hide 0.5s 0.3s linear both;
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%;
-webkit-animation:show 0.5s linear both;
animation:show 0.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%;
-webkit-animation:hide 0.5s 0.3s linear both;
animation:hide 0.5s 0.2s linear both}
@-webkit-keyframes show {
0% {opacity:0}
100% {opacity:1}}
@keyframes show {
0% {opacity:0}
100% {opacity:1}}
@-webkit-keyframes hide {
0% {opacity:1}
100% {opacity:0}}
@keyframes hide {
0% {opacity:1}
100% {opacity:0}}