.spinner {
    margin: 25px auto 0;
    width: 70px;
    text-align: center;
}
.spinner > div {
    width: 10px;
    height: 10px;
    background-color: #619ccb;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
    margin: auto 2px;
}
.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
    margin: auto 2px;
}
.spinner .bounce3 {
    margin: auto 2px;
}



@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1.0)
    }
}
@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}


/*------FADEIN-----*/

@keyframes fadein {
    from { opacity: 0; display: block;}
    to   { opacity: 1; display: block;}
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; display: block;}
    to   { opacity: 1; display: block;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
   from { opacity: 0; display: block;}
    to   { opacity: 1; display: block;}
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; display: block;}
    to   { opacity: 1; display: block;}
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; display: block;}
    to   { opacity: 1; display: block;}
}

.fadein{
     -webkit-animation: fadein 0.3ms ease; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.3ms ease; /* Firefox < 16 */
        -ms-animation: fadein 0.3ms ease; /* Internet Explorer */
         -o-animation: fadein 0.3ms ease; /* Opera < 12.1 */
            animation: fadein 0.3ms ease;
         
}

/*-----FADEOUT-----*/

@keyframes fadeout {
    0% { opacity: 1; }
    99%   { opacity: 0; }
    100% {opacity: 0; display: none;}
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
    0% { opacity: 1; }
    99%   { opacity: 0; }
    100% {opacity: 0; display: none;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
    0% { opacity: 1; }
    99%   { opacity: 0; }
    100% {opacity: 0; display: none;}
}

/* Internet Explorer */
@-ms-keyframes fadeout {
    0% { opacity: 1; }
    99%   { opacity: 0; }
    100% {opacity: 0; display: none;}
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
    0% { opacity: 1; }
    99%   { opacity: 0; }
    100% {opacity: 0; display: none;}
}




.fadeout{
     -webkit-animation: fadeout 0.3ms ease; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeout 0.3ms ease; /* Firefox < 16 */
        -ms-animation: fadeout 0.3ms ease; /* Internet Explorer */
         -o-animation: fadeout 0.3ms ease; /* Opera < 12.1 */
            animation: fadeout 0.3ms ease;
          
}


@keyframes zoomIn-ZoomOut {
  from {
    -webkit-transform:scale(0.95);
    -moz-transform:scale(0.95);
    -ms-transform:scale(0.95);
    -o-transform:scale(0.95);
    transform:scale(0.95);

   }
   to{
     -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
   };
}

/* Firefox < 16 */
@-moz-keyframes zoomIn-ZoomOut {
      from {
    -webkit-transform:scale(0.95);
    -moz-transform:scale(0.95);
    -ms-transform:scale(0.95);
    -o-transform:scale(0.95);
    transform:scale(0.95);

   }
   to{
     -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
   };
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes zoomIn-ZoomOut {
     from {
    -webkit-transform:scale(0.95);
    -moz-transform:scale(0.95);
    -ms-transform:scale(0.95);
    -o-transform:scale(0.95);
    transform:scale(0.95);

   }
   to{
     -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
   };
}

/* Internet Explorer */
@-ms-keyframes zoomIn-ZoomOut {
   from {
    -webkit-transform:scale(0.95);
    -moz-transform:scale(0.95);
    -ms-transform:scale(0.95);
    -o-transform:scale(0.95);
    transform:scale(0.95);

   }
   to{
     -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
   };
}

/* Opera < 12.1 */
@-o-keyframes zoomIn-ZoomOut {
     from {
    -webkit-transform:scale(0.95);
    -moz-transform:scale(0.95);
    -ms-transform:scale(0.95);
    -o-transform:scale(0.95);
    transform:scale(0.95);

   }
   to{
     -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
   };
}


.zoomIn-ZoomOut{
    -webkit-animation: zoomIn-ZoomOut  0.8s ease-in-out infinite  alternate; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: zoomIn-ZoomOut  0.8s ease-in-out infinite  alternate; /* Firefox < 16 */
    -ms-animation: zoomIn-ZoomOut  0.8s ease-in-out infinite  alternate; /* Internet Explorer */
    -o-animation: zoomIn-ZoomOut  0.8s ease-in-out infinite  alternate; /* Opera < 12.1 */
    animation: zoomIn-ZoomOut  0.8s ease-in-out infinite  alternate;
   
}