#ban {background:url(../gf7/ban11.png)}
#rama{width:840px;height:600px;position:relative;top:220px;left:79px;border:solid 1px;background:#FFF;pointer-events:none}
#spr {position:absolute;top:60px;left:320px;animation:spring 2s;animation-timing-function:ease}
@keyframes spring {
0% {transform:scale(1) translateY(0)}
10% {transform:scale(1.2,.6)}
30% {transform:scale(0.8,1.1) translateY(-45px)}
50% {transform:scale(1) translateY(0)}
100% {transform:translateY(0)}
}
#kal {position:absolute;top:302px;left:133px;width:378px;height:407px;background:url(../gf7/cal.png)}
#cal {position:absolute;top:467px;left:203px;width:230px;height:280px;text-align:center;line-height:1.7em}
#cal > p {font-family:Verdana, Arial, sans-serif;padding:25px 0}
#day {font-weight:normal;font-size:28px;color:#000}
#date {font-size:120px;font-weight:900;margin-top:-15px;margin-bottom:-9px;color: #000}
#month {font-weight:900;font-size:22px;color:#00f}
#year {position:absolute;top:-12px;left:56px;color:#00f;font-size:44px;font-weight:900;z-index:1;-webkit-text-stroke:1px #fff}
#face {width:333px;height:328px;position:absolute;top:335px;left:535px;background:url(../gf7/art.png);border-radius:50%;z-index:1}
.outer {position:absolute;top:270px;left:476px;width:243px;height:243px}
.inner {position:absolute;width:88%;height:88%;left:50%;top:50%}
.inner:before {content:"";position:absolute;width:33px;height:33px;border-radius:50%;margin-left:89.5px;margin-top:90.5px;background:navy;z-index:2}
.hand,
.hand.hour {position:absolute;width:18px;height:30%;top:20%;left:50%;margin-left:-9px;background:brown;border-radius:36px;transform:rotate(0deg);transform-origin:bottom;z-index:1;transition:transform 0.1s ease-out}
.hand.minute {height:45%;top:5%;width:18px;margin-left:-9px;background:olive;transition:transform 0.1s ease-out}
.hand.second {height:50%;width:2px;margin-left:-3px;top:0px;background:red;transition:transform 0.08s ease-in-out}
#dot{position:absolute;top:105px;left:102px;width:4px;height:4px;background:url(../gf7/dot.png);z-index:5}
#pend {position:absolute;top:620px;left:687px;background:url(../gf7/pend.png);width:28px;height:120px;transform-origin:50% -40px;animation:pend 3s ease-in-out infinite alternate}
@keyframes pend {
0%, 100% {transform: rotate(12deg)}
50% {transform:rotate(-12deg)}
}
#h1{position:absolute;width:630px;top:780px;margin-left:19%;font-weight:900;font-size:32px;font-family:'Courier New', Courier New}