.element-animation{
  animation: animationFrames linear 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames linear 0.15s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFrames linear 0.15s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames linear 0.15s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames linear 0.15s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{
  0% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    transform:  rotate(-12deg) scaleX(1.20) scaleY(1.20) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -moz-transform:  rotate(-12deg) scaleX(1.20) scaleY(1.20) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -webkit-transform:  rotate(-12deg) scaleX(1.20) scaleY(1.20) ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -o-transform:  rotate(-12deg) scaleX(1.20) scaleY(1.20) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -ms-transform:  rotate(-12deg) scaleX(1.20) scaleY(1.20) ;
  }
}




.element-animation-reverse{
  animation: animationFrames-reverse linear 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames-reverse linear 0.15s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFrames-reverse linear 0.15s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames-reverse linear 0.15s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames-reverse linear 0.15s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames-reverse{
  0% {
    transform:  rotate(-12deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
	transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}

@-moz-keyframes animationFrames-reverse{
  0% {
    -moz-transform:  rotate(-12deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
	-moz-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}

@-webkit-keyframes animationFrames-reverse {
  0% {
	-webkit-transform:  rotate(-12deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
    -webkit-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00);
  }
}

@-o-keyframes animationFrames-reverse {
  0% {
	-o-transform:  rotate(-12deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
     -o-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}

@-ms-keyframes animationFrames-reverse {
  0% {
	-ms-transform:  rotate(-12deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
     -ms-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}



















.bar1-animation{
  animation: animationFrames-bar1 linear 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 100%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames-bar1{
  0% {
    transform:  scaleY(1.00) ;
  }
  100% {
    transform:  scaleY(0.8) ;
  }
}

.bar1-animation-reverse{
  animation: animationFrames-bar1-reverse linear 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 100%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames-bar1-reverse{
  0% {
    transform:  scaleY(0.8) ;
  }
  100% {
    transform:  scaleY(1.0) ;
  }
}







.bar2-animation{
  animation: animationFrames-bar2 linear 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 100%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames-bar2{
  0% {
    transform:  scaleY(1.00) ;
  }
  100% {
    transform:  scaleY(1.4) ;
  }
}

.bar2-animation-reverse{
  animation: animationFrames-bar2-reverse linear 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 100%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames-bar2-reverse{
  0% {
    transform:  scaleY(1.4) ;
  }
  100% {
    transform:  scaleY(1.0) ;
  }
}




.bar3-animation{
  animation: animationFrames-bar3 linear 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 100%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames-bar3{
  0% {
    transform:  scaleY(1.2) ;
  }
  100% {
    transform:  scaleY(1.0) ;
  }
}

.bar3-animation-reverse{
  animation: animationFrames-bar3-reverse linear 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 100%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames-bar3-reverse{
  0% {
    transform:  scaleY(1.0) ;
  }
  100% {
    transform:  scaleY(1.2) ;
  }
}





.bar4-animation{
  animation: animationFrames-bar4 linear 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 100%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames-bar4{
  0% {
    transform:  scaleY(1.0) ;
  }
  100% {
    transform:  scaleY(1.4) ;
  }
}

.bar4-animation-reverse{
  animation: animationFrames-bar4-reverse linear 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 100%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames-bar4-reverse{
  0% {
    transform:  scaleY(1.4) ;
  }
  100% {
    transform:  scaleY(1.0) ;
  }
}





.bar5-animation{
  animation: animationFrames-bar5 linear 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 100%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames-bar5{
  0% {
    transform:  scaleY(1.0) ;
  }
  100% {
    transform:  scaleY(1.45) ;
  }
}

.bar5-animation-reverse{
  animation: animationFrames-bar5-reverse linear 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 100%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames-bar5-reverse{
  0% {
    transform:  scaleY(1.45) ;
  }
  100% {
    transform:  scaleY(1.0) ;
  }
}





.bar6-animation{
  animation: animationFrames-bar6 linear 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 100%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames-bar6{
  0% {
    transform:  scaleY(1.0) ;
  }
  100% {
    transform:  scaleY(0.7) ;
  }
}

.bar6-animation-reverse{
  animation: animationFrames-bar6-reverse linear 0.15s;
  animation-iteration-count: 1;
  transform-origin: 50% 100%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames-bar6-reverse{
  0% {
    transform:  scaleY(0.7) ;
  }
  100% {
    transform:  scaleY(1.0) ;
  }
}



.mic-animation{
  animation: animationFrames-mic linear 0.3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames-mic{
  0% {
    opacity:100;
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0;
    transform:  scaleX(1.30) scaleY(1.30) ;
  }
}



.mic-animation-reverse{
  animation: animationFrames-mic-reverse linear 0.1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames-mic-reverse{
  0% {
    opacity:0;
    transform:  scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    opacity:100;
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
}