#ban{background:url(../gf5/ban9.png)}
#bn1{background:url(../gf5/bn09.png)}
#s{background:url(../gf5/emp5.png)}
#rama{background:#fb6}
.letter h2{text-align:center}
.letter h2 a{
text-align:center;
padding:20px
}
.letter h2 a span{
display:inline-block;
position:relative;
top:320px;
left:-5px;
width:130px;
height:130px;
line-height:125px;
font-size:120px;
margin:3px;
color:#0f0;
-webkit-text-stroke:1px #000;
text-shadow:0px 0px 1px #fff, 2px 2px 5px rgba(0,0,0,.4);
border:solid #fff;
border-width:10px 10px 10px 10px;
z-index:5;
box-shadow:2px 2px 8px 4px rgba(0,0,0,.9), 0px 0px 2px rgba(0,0,0,.2) inset;
transition:all .3s ease-in-out
}
.letter h2 a span:nth-child(even){
transform:rotate(5deg)
}
.letter h2 a span:nth-child(odd){
transform: rotate(-5deg)
}
.letter span.char1{background-image:url(../gf5/mask.png)}
.letter span.char2{background-image: url(../gf5/gold.png)}
.letter span.char3{background-image:url(../gf5/blue.png)}
.letter span.char4{background-image:url(../gf5/brown.jpg)}
.letter span.char5{background-image:url(../gf5/green.png)}
.letter h2 a:hover span:nth-child(even){
transform:scale(.9) rotate(-5deg)
}
.letter h2 a:hover span:nth-child(odd){
transform:scale(.9) rotate(5deg)
}
.letter h2 a span:nth-child(even):hover,
.letter h2 a span:nth-child(odd):hover{
animation:moveImg 2s linear infinite forwards;
color:#ff6;
text-shadow:4px 4px 5px rgba(0,0,0,1);
transform:scale(1.1);
z-index:9;
box-shadow:2px 2px 20px 4px rgba(0,0,0,0.6), 0px 0px 2px rgba(0,0,0,.2) inset
}
@keyframes moveImg{
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}