.up-down{

    animation: up-down linear 4s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

    -webkit-animation: up-down linear 4s;

    -webkit-animation-iteration-count: infinite;

    -webkit-transform-origin: 50% 50%;

    -moz-animation: up-down linear 4s;

    -moz-animation-iteration-count: infinite;

    -moz-transform-origin: 50% 50%;

    -o-animation: up-down linear 4s;

    -o-animation-iteration-count: infinite;

    -o-transform-origin: 50% 50%;

    -ms-animation: up-down linear 4s;

    -ms-animation-iteration-count: infinite;

    -ms-transform-origin: 50% 50%;

  }

  

  @keyframes up-down{

    0% {

      transform:  translate(1px,20px)  ;

    }

    24% {

      transform:  translate(1px,30px)  ;

    }

    50% {

      transform:  translate(1px,12px)  ;

    }

    74% {

      transform:  translate(1px,22px)  ;

    }

    100% {

      transform:  translate(1px,22px)  ;

    }

  }

  

  @-moz-keyframes up-down{

    0% {

      -moz-transform:  translate(1px,20px)  ;

    }

    24% {

      -moz-transform:  translate(1px,30px)  ;

    }

    50% {

      -moz-transform:  translate(1px,12px)  ;

    }

    74% {

      -moz-transform:  translate(1px,22px)  ;

    }

    100% {

      -moz-transform:  translate(1px,22px)  ;

    }

  }

  

  @-webkit-keyframes up-down {

    0% {

      -webkit-transform:  translate(1px,20px)  ;

    }

    24% {

      -webkit-transform:  translate(1px,30px)  ;

    }

    50% {

      -webkit-transform:  translate(1px,12px)  ;

    }

    74% {

      -webkit-transform:  translate(1px,22px)  ;

    }

    100% {

      -webkit-transform:  translate(1px,22px)  ;

    }

  }

  

  @-o-keyframes up-down {

    0% {

      -o-transform:  translate(1px,20px)  ;

    }

    24% {

      -o-transform:  translate(1px,30px)  ;

    }

    50% {

      -o-transform:  translate(1px,12px)  ;

    }

    74% {

      -o-transform:  translate(1px,22px)  ;

    }

    100% {

      -o-transform:  translate(1px,22px)  ;

    }

  }

  

  @-ms-keyframes up-down {

    0% {

      -ms-transform:  translate(1px,20px)  ;

    }

    24% {

      -ms-transform:  translate(1px,30px)  ;

    }

    50% {

      -ms-transform:  translate(1px,12px)  ;

    }

    74% {

      -ms-transform:  translate(1px,22px)  ;

    }

    100% {

      -ms-transform:  translate(1px,22px)  ;

    }

  }

 

  .blink{

      text-decoration: blink;

      -webkit-animation-name: blinker;

      -webkit-animation-duration: 0.6s;

      -webkit-animation-iteration-count:infinite;

      -webkit-animation-timing-function:ease-in-out;

      -webkit-animation-direction: alternate;

  }

  @-webkit-keyframes blinker {

    from {opacity: 1.0;}

    to {opacity: 0.0;}

  }

  .spain{

    animation-name: spin;

    animation-duration: 5000ms;

    animation-iteration-count: infinite;

    animation-timing-function: linear; 

  }

  @keyframes spin {

    from {

        transform:rotate(0deg);

    }

    to {

        transform:rotate(360deg);

    }

}