#ban {background:url(../gf3/ban7.png)}
#bn1 {background:url(../gf3/bn07.png)}
canvas {display:block;position:absolute;top:135px;left:-50px}
#cntr {position:absolute;top:258px;left:78px}
#spot {position:absolute;top:174px;left:328px;width:160px;height:160px;border-radius:50%;background:#ff0}
.start {position:absolute;top:175px;left:328px;transition:top 1s cubic-bezier(.68,-.55,.265,1.55),left 1s cubic-bezier(.68,-.55,.265,1.55)}
.x1 {top:0px;left:328px}
.x2 {top:83px;left:493px}
.x3 {top:174px;left:654px}
.x4 {top:264px;left:493px}
.x5 {top:346px;left:328px}
.x6 {top:264px;left:162px}
.x7 {top:174px;left:0px}
.x8 {top:83px;left:162px}
.b {animation:scaledown .5s linear;transform-origin:50% 50%;animation-fill-mode:forwards}
.b:hover {z-index:10;animation:scale .5s linear;transform-origin:50% 50%;animation-fill-mode:forwards}
@keyframes scale {
0% {transform:scale(1) rotate(0deg)}
100% {transform:scale(1.1) rotate(360deg)}}
@keyframes scaledown {
0% {transform:scale(1.1)}
100% {transform:scale(1)}}
.sm {position:absolute;top:123px;left:277px;width:241px;height:241px;background:url(../gf3/rbw.png) no-repeat;border:dashed 12px;border-radius:50%;z-index:9;animation:kolko 24s linear infinite;animation-delay:3s}
@keyframes kolko {
0% {transform:rotate(0deg)}
.5% {transform:rotate(55deg)}
12% {transform:rotate(55deg)}
12.5% {transform:rotate(90deg)}
25% {transform:rotate(90deg)}
25.5% {transform:rotate(124deg)}
37.5% {transform:rotate(124deg)}
38% {transform:rotate(180deg)}
50% {transform:rotate(180deg)}
50.5% {transform:rotate(237deg)}
62.5% {transform:rotate(237deg)}
63% {transform:rotate(270deg)}
75% {transform:rotate(270deg)}
75.5% {transform:rotate(300deg)}
87% {transform:rotate(300deg)}
87.5% {transform:rotate(359.9deg)}
98.5% {transform:rotate(359.9deg)}
100% {transform:rotate(360deg)}
}
#gra {position:absolute;top:245px;left:338px;width:140px;height:25px;background:url(../gf3/gra.png);z-index:99}
span {position:absolute;top:231px;left:384px;width:50px;height:50px;background:#c70;border-radius:50%;animation:ripple .5s linear infinite}
@keyframes ripple {
0% {
box-shadow:
0 0 0 0 rgba(200, 120, 0, .5),
0 0 0 20px rgba(200, 120, 0, .4),
0 0 0 40px rgba(200, 120, 0, .3),
0 0 0 60px rgba(200, 120, 0, .2)}
100% {
box-shadow:
0 0 0 20px rgba(200, 120, 0, .4),
0 0 0 40px rgba(200, 120, 0, .3),
0 0 0 60px rgba(200, 120, 0, .2),
0 0 0 80px rgba(200, 120, 0, .05)}}
.ps img {max-width:160px;border-radius:50%;border:5px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.4);cursor:pointer}
.ps img:hover {opacity:1;width:160px;height:160px;border:solid 5px;box-shadow:0 12px 25px rgba(0,0,0,.8)}