*[tabindex]:focus {
    outline: none;
    box-shadow: 2px 2px #F83033, 4px 4px #FF8108, 6px 6px #FFE804, 8px 8px   #9ED428, 10px 10px #19B4CA, 12px 12px #7F69A9 , 14px 14px #F38AB2, 16px 16px #F83033;
}


.changeColor{
     animation: changeCol 5s  infinite ;
}
@keyframes changeCol{
  0%   {background-color: yellow;}
  33%  {background-color: red;}
   66%  {background-color: blue;}
   100%  {background-color: yellow;}
}

.ghostSide:hover{
     animation: waveHover 0.2s infinite linear;
}

.ghostM:hover{
     animation: waveHover 0.8s infinite linear;
}
.ghostN:hover{
     animation: waveHover 0.8s infinite linear;
}
.myFading:hover{
     animation: waveHover 0.2s infinite linear;
}

.pulse:hover{
     animation: waveHover 0.8s infinite linear;
}

.moveHand:hover{
     animation: waveHover 0.2s infinite linear;
}

.waveHand:hover{
     animation: waveHover 0.2s infinite linear;
}
.waveHand1:hover{
     animation: waveHover 0.2s infinite linear;
}
.waveHand2:hover{
     animation: waveHover 0.2s infinite linear;
}
@keyframes waveHover{
  0%   {transform:rotate(0deg)}
  33%  {transform:rotate(0.9deg)}
   66%  {transform:rotate(-0.9deg)}
}

#holdSong{
    /*width: 80%;*/
    /*height: 40%;*/
    content:url(../images/dHand.png);
    /*animation: moveDoSong 5s steps(2) 4;*/
}


.startAnim{
   animation-name: myStartSong;
   animation-duration: 2s;
   animation-timing-function: linear;
   animation-iteration-count:2;
}

@keyframes myStartSong
{
0%{content:url(../images/songHands/one.png);}
2%{content:url(../images/songHands/one.png);}
4%{content:url(../images/songHands/two.png);}
6%{content:url(../images/songHands/two.png);}
8%{content:url(../images/songHands/three.png);}
10%{content:url(../images/songHands/three.png);}
12%{content:url(../images/songHands/four.png);}
14%{content:url(../images/songHands/four.png);}
16%{content:url(../images/songHands/do1.png);}
18%{content:url(../images/songHands/do1.png);}
20%{content:url(../images/songHands/do2.png);}
22%{content:url(../images/songHands/do2.png);}
24%{content:url(../images/songHands/re1.png);}
26%{content:url(../images/songHands/re1.png);}
28%{content:url(../images/songHands/re2.png);}
30%{content:url(../images/songHands/re2.png);}
32%{content:url(../images/songHands/mi1.png);}
34%{content:url(../images/songHands/mi1.png);}
36%{content:url(../images/songHands/mi2.png);}
38%{content:url(../images/songHands/mi2.png);}
40%{content:url(../images/songHands/fa1.png);}
42%{content:url(../images/songHands/fa1.png);}
43%{content:url(../images/songHands/fa2.png);}
44%{content:url(../images/songHands/fa2.png);}
45%{content:url(../images/songHands/so1.png);}
46%{content:url(../images/songHands/so1.png);}
47%{content:url(../images/songHands/so2.png);}
48%{content:url(../images/songHands/so2.png);}
49%{content:url(../images/songHands/la1.png);}
50%{content:url(../images/songHands/la1.png);}
51%{content:url(../images/songHands/la2.png);}
52%{content:url(../images/songHands/la2.png);}
53%{content:url(../images/songHands/ti1.png);}
54%{content:url(../images/songHands/ti1.png);}
55%{content:url(../images/songHands/ti2.png);}
56%{content:url(../images/songHands/ti2.png);}
57%{content:url(../images/songHands/doh1.png);}
58%{content:url(../images/songHands/doh1.png);}
59%{content:url(../images/songHands/doh2.png);}
60%{content:url(../images/songHands/doh2.png);}
61%{content:url(../images/songHands/one.png);}
62%{content:url(../images/songHands/one.png);}
63%{content:url(../images/songHands/two.png);}
64%{content:url(../images/songHands/two.png);}
65%{content:url(../images/songHands/three.png);}
66%{content:url(../images/songHands/three.png);}
67%{content:url(../images/songHands/four.png);}
68%{content:url(../images/songHands/four.png);}
69%{content:url(../images/songHands/do1.png);}
70%{content:url(../images/songHands/do1.png);}
71%{content:url(../images/songHands/do2.png);}
72%{content:url(../images/songHands/do2.png);}
73%{content:url(../images/songHands/re1.png);}
74%{content:url(../images/songHands/re1.png);}
75%{content:url(../images/songHands/re2.png);}
76%{content:url(../images/songHands/re2.png);}
77%{content:url(../images/songHands/mi1.png);}
78%{content:url(../images/songHands/mi1.png);}
79%{content:url(../images/songHands/mi2.png);}
80%{content:url(../images/songHands/mi2.png);}
81%{content:url(../images/songHands/fa1.png);}
82%{content:url(../images/songHands/fa1.png);}
83%{content:url(../images/songHands/fa2.png);}
84%{content:url(../images/songHands/fa2.png);}
85%{content:url(../images/songHands/so1.png);}
86%{content:url(../images/songHands/so1.png);}
87%{content:url(../images/songHands/so2.png);}
88%{content:url(../images/songHands/so2.png);}
89%{content:url(../images/songHands/la1.png);}
90%{content:url(../images/songHands/la1.png);}
91%{content:url(../images/songHands/la2.png);}
92%{content:url(../images/songHands/la2.png);}
93%{content:url(../images/songHands/ti1.png);}
94%{content:url(../images/songHands/ti1.png);}
95%{content:url(../images/songHands/ti2.png);}
96%{content:url(../images/songHands/ti2.png);}
97%{content:url(../images/songHands/doh1.png);}
98%{content:url(../images/songHands/doh1.png);}
99%{content:url(../images/songHands/doh2.png);}
100%{content:url(../images/songHands/doh2.png);}
}








#doFinger{
   /* width: 80%;*/
   /* height: 40%;*/
    content:url(../images/movingHands/doOpen.png);
    animation: moveDo 2s steps(2) infinite;
}
@keyframes moveDo{
  0%   {content:url(../images/movingHands/doOpen.png);}
  50%  {content:url(../images/movingHands/doTouch.png);}
}

#reFinger{
    /*width: 45%;*/
    /*height: 40%;*/
    content:url(../images/movingHands/reOpen.png);
    animation: moveRe 2s steps(2) infinite;
}
@keyframes moveRe{
   0%   {content:url(../images/movingHands/reOpen.png);}
  50%  {content:url(../images/movingHands/reTouch.png);}
}


#miFinger{
    /*width: 45%;*/
    /*height: 40%;*/
    content:url(../images/movingHands/miOpen.png);
    animation: moveMi 2s steps(2) infinite;
}
@keyframes moveMi{
   0%   {content:url(../images/movingHands/miOpen.png);}
  50%  {content:url(../images/movingHands/miTouch.png);}
}


#faFinger{
    /*width: 45%;*/
    /*height: 40%;*/
    content:url(../images/movingHands/faOpen.png);
    animation: moveFa 2s steps(2) infinite;
}
@keyframes moveFa{
  0%   {content:url(../images/movingHands/faOpen.png);}
  50%  {content:url(../images/movingHands/faTouch.png);}
}


#soFinger{
    /*width: 45%;*/
    /*height: 40%;*/
    content:url(../images/movingHands/soOpen.png);
    animation: moveSo 2s steps(2) infinite;
}
@keyframes moveSo{
  0%   {content:url(../images/movingHands/soOpen.png);}
  50%  {content:url(../images/movingHands/soTouch.png);}
}


#laFinger{
    /*width: 45%;*/
    /*height: 40%;*/
    content:url(../images/movingHands/laOpen.png);
    animation: moveLa 2s steps(2) infinite;
}
@keyframes moveLa{
  0%   {content:url(../images/movingHands/laOpen.png);}
  50%  {content:url(../images/movingHands/laTouch.png);}
}


#tiFinger{
    /*width: 45%;*/
    /*height: 40%;*/
    content:url(../images/movingHands/tiOpen.png);
    animation: moveTi 2s steps(2) infinite;
}
@keyframes moveTi{
  0%   {content:url(../images/movingHands/tiOpen.png);}
  50%  {content:url(../images/movingHands/tiTouch.png);}
}


#dohFinger{
    /*width: 45%;*/
    /*height: 40%;*/
    content:url(../images/movingHands/hidoOpen.png);
    animation: moveDoh 2s steps(2) infinite;
}
@keyframes moveDoh{
  0%   {content:url(../images/movingHands/hidoOpen.png);}
  50%  {content:url(../images/movingHands/hidoTouch.png);}
}


.pulse  {
    animation: pulse 2s ease infinite alternate;
    z-index: -1;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    /*box-shadow: 0 2px 2px rgba(0,0,0,.2);*/
    /*border-radius: 100%;*/
  }
  100% {
    transform: scale(1.001);
    /*box-shadow: 0 2px 2px rgba(0,0,0,.2);*/
    /*border-radius: 105%;*/
  }
}



.rockIt {
  animation: rockit 2s ease-out infinite;
}
@keyframes rockit {
  from { transform: translatey(30px) rotate(-45deg); }
  to { transform: translatey(30px) rotate(10deg); }
}


.ghost {
  animation: float 3s ease-out infinite;
}
@keyframes float {
  50% {
     transform: translate(0, 20px);
  }
}


.ghostSide {
  animation: floatS 3s ease-out infinite;
}
@keyframes floatS {
  50% {
     transform: translate(20px, 0);
  }
}


.ghostM {
  animation: floatM 8s ease-out infinite;
}
@keyframes floatM {
  50% {
     /*transform: translate(5px, 0px);*/
  }
}

.ghostN {
  /*animation: floatN 8s ease-out infinite;*/
}
@keyframes floatN {
  50% {
     transform: translate(0px, 5px);
  }
}


.moveHand{
    position:relative;animation:moveHand 4s infinite
}
@keyframes moveHand{
  0%{right:-20px; opacity:0.5} 
  63%{right:20px; opacity:1} 
  96%{right:-20px; opacity:0.5} 
   100%{right:-20px; opacity:0.5} 
}

.twist{
    animation: twistH 4s infinite ;
}
@keyframes twistH{
  0%   {transform:rotate(-4deg)}
  50%   {transform:rotate(4deg)}
   100%   {transform:rotate(-4deg)}
}

.spinHand{
     animation: spinH 4s infinite ;
}
@keyframes spinH{
  0%   {transform:rotate(0deg)}
  50%  {transform:rotate(-45deg)}
   100%  {transform:rotate(0deg)}
}


.waveHand{
     animation: wave 3s infinite linear;
}
@keyframes wave{
  0%   {transform:rotate(0deg)}
  33%  {transform:rotate(0.5deg)}
   66%  {transform:rotate(-0.5deg)}
}

.waveHand1{
     animation: wave1 3s infinite linear;
}
@keyframes wave1{
  0%   {transform:rotate(0deg)}
  33%  {transform:rotate(-0.5deg)}
   66%  {transform:rotate(0.5deg)}
}

.myFading{animation:mfading 5s infinite}
@keyframes mfading{
    0%{opacity:1}
    50%{opacity:0.6}
    100%{opacity:1}}