.fade-in-image {
  animation: fadeIn 1.5s;
  -webkit-animation: fadeIn 1.5s;
  -moz-animation: fadeIn 1.5s;
  -o-animation: fadeIn 1.5s;
  -ms-animation: fadeIn 1.5s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

.fade-in-social {
  animation: fadeInSocial 1.5s;
  -webkit-animation: fadeInSocial 1.5s;
  -moz-animation: fadeInSocial 1.5s;
  -o-animation: fadeInSocial 1.5s;
  -ms-animation: fadeInSocial 1.5s;
}
@keyframes fadeInSocial {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeInSocial {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeInSocial {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeInSocial {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeInSocial {
  0% {opacity:0;}
  100% {opacity:1;}
}



/*Bottom to Top*/
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 2s;
  animation-name: animatebottom;
  animation-duration: 2s
}
@-webkit-keyframes animatebottom {
  from { bottom:-50px; opacity:0 }
  to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
  from{ bottom:-50px; opacity:0 }
  to{ bottom:0; opacity:1 }
}




/* Flicker */
@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 4s infinite;
   -moz-animation: flickerAnimation 4s infinite;
   -o-animation: flickerAnimation 4s infinite;
    animation: flickerAnimation 4s infinite;
}


.slidein {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
  from {
     margin-left:100%;
     width:300%
  }
  75% {
     font-size:300%;
     margin-left:25%;
     width:150%;
  }
  to {
     margin-left:0%;
     width:100%;
  }
}
@-webkit-keyframes slidein {
  from {
     margin-left:100%;
     width:300%
  }
  75% {
     font-size:300%;
     margin-left:25%;
     width:150%;
  }
  to {
     margin-left:0%;
     width:100%;
  }
}



/* -----------------------fadeOutLeft------------------------------ */

@-webkit-keyframes fadeOutLeft {
  0% {
     opacity: 1;
     -webkit-transform: translateX(0);
  }
  100% {
     opacity: 0;
     -webkit-transform: translateX(-20px);
  }
}
@keyframes fadeOutLeft {
  0% {
     opacity: 1;
     transform: translateX(0);
  }
  100% {
     opacity: 0;
     transform: translateX(-20px);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}

/* bounce-out-left */

@-webkit-keyframes bounceOutLeft {
  0% {
     -webkit-transform: translateX(0);
  }
  20% {
     opacity: 1;
     -webkit-transform: translateX(20px);
  }
  100% {
     opacity: 0;
     -webkit-transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
     transform: translateX(0);
  }
  20% {
     opacity: 1;
     transform: translateX(20px);
  }
  100% {
     opacity: 0;
     transform: translateX(-2000px);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
  -webkit-animation-duration: 4s;
            animation-duration: 4s;

}

/* bounce-in-left */
@-webkit-keyframes bounceInLeft {
  0% {
     opacity: 0;
     -webkit-transform: translateX(-2000px);
  }
  60% {
     opacity: 1;
     -webkit-transform: translateX(30px);
  }
  80% {
     -webkit-transform: translateX(-10px);
  }
  100% {
     -webkit-transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
     opacity: 0;
     transform: translateX(-2000px);
  }
  60% {
     opacity: 1;
     transform: translateX(30px);
  }
  80% {
     transform: translateX(-10px);
  }
  100% {
     transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
  -webkit-animation-duration: 4s;
            animation-duration: 4s;

}


/* Flip */

@-webkit-keyframes flip {
  0% {
     -webkit-transform: perspective(400px) rotateY(0);
     -webkit-animation-timing-function: ease-out;
  }
  40% {
     -webkit-transform: perspective(400px) translateZ(50px) rotateY(90deg);
     -webkit-animation-timing-function: ease-out;
  }
  50% {
     -webkit-transform: perspective(400px) translateZ(50px) rotateY(90deg) scale(1);
     -webkit-animation-timing-function: ease-in;
  }
  80% {
     -webkit-transform: perspective(400px) rotateY(90deg) scale(.95);
     -webkit-animation-timing-function: ease-in;
  }
  100% {
     -webkit-transform: perspective(400px) scale(1);
     -webkit-animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
     transform: perspective(400px) rotateY(0);
     animation-timing-function: ease-out;
  }
  40% {
     transform: perspective(400px) translateZ(50px) rotateY(90deg);
     animation-timing-function: ease-out;
  }
  50% {
     transform: perspective(400px) translateZ(150px) rotateY(90deg) scale(1);
     animation-timing-function: ease-in;
  }
  80% {
     transform: perspective(400px) rotateY(90deg) scale(.95);
     animation-timing-function: ease-in;
  }
  100% {
     transform: perspective(400px) scale(1);
     animation-timing-function: ease-in;
  }
}
.flip-animation {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flip;
  backface-visibility: visible !important;
  animation-name: flip;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}




/* Flash */
@keyframes flash {
  0%, 50%, 100% {
     opacity: 1;
  }
  25%, 75% {
     opacity: 0;
  }
}
@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
 }
 25%, 75% {
    opacity: 0;
 }
}

.flash-animation {
  animation-name: flash;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
  /* -webkit-animation-fill-mode: both;
  animation-fill-mode: both; */
}

/* Rotate In */

@-webkit-keyframes rotateIn {
  0% {
     -webkit-transform-origin: center center;
     -webkit-transform: rotate(-100deg);
     opacity: 0;
  }
  100% {
     -webkit-transform-origin: center center;
     -webkit-transform: rotate(0);
     opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
     transform-origin: center center;
     transform: rotate(-100deg);
     opacity: 0;
  }
  100% {
     transform-origin: center center;
     transform: rotate(0);
     opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-animation-duration: 2s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


/* Slide-in-right */

.slide-in-right{
  animation: run ease 3s;
  -webkit-animation: run ease 3s;
  -moz-animation: run ease 3s;
  -o-animation: run ease 3s;
  -ms-animation: run ease 3s;
}

@keyframes run {
  0% { margin-right: -98%;}
  100%{ margin-right: 0%;}
}

@-moz-keyframes run {
  0% { margin-right: -98%;}
  100%{ margin-right: 0%;}
}

@-webkit-keyframes run {
  0% { margin-right: -98%;}
  100%{ margin-right: 0%;}
}

@-o-keyframes run {
  0% { margin-right: -98%;}
  100%{ margin-right: 0%;}
}

@-ms-keyframes run {
  0% { margin-right: -98%;}
  100%{ margin-right: 0%;}
}

/* -----------------Pulse----------------------------- */

@-webkit-keyframes pulsedbox {
  0% {
    opacity: 1.0;
    -webkit-transform: scale(1.0) rotate(0deg);
  }
  33% {
    opacity: 0.75;
    -webkit-transform: scale(1.1) rotate(-5deg);
  }
  67% {
    opacity: 0.5;
    -webkit-transform: scale(1.1) rotate(5deg);
  }
  100% {
    opacity: 1.0;
    -webkit-transform: scale(1.0) rotate(0deg);
  }
 }

 @-moz-keyframes pulsedbox {
  0% {
    opacity: 1.0;
    -webkit-transform: scale(1.0) rotate(0deg);
  }
  33% {
    opacity: 0.75;
    -webkit-transform: scale(1.1) rotate(-5deg);
  }
  67% {
    opacity: 0.5;
    -webkit-transform: scale(1.1) rotate(5deg);
  }
  100% {
    opacity: 1.0;
    -webkit-transform: scale(1.0) rotate(0deg);
  }
}
 .pulsedbox {
  -webkit-animation-name: pulsedbox;
  -webkit-animation-duration: 4s;
  -webkit-animation-timing-function: ease-in-out;
    -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -moz-animation-name:pulsedbox;
  -webkit-animation-name: pulsedbox;
 }


 /* Left-To-Right */

 .leftToRight{
  animation: run ease 3s;
  -webkit-animation: run ease 3s;
  -moz-animation: run ease 3s;
  -o-animation: run ease 3s;
  -ms-animation: run ease 3s;
}

@keyframes run {
  0% { margin-left: -98%;}
  100%{ margin-left: 0%;}
}

@-moz-keyframes run {
  0% { margin-left: -98%;}
  100%{ margin-left: 0%;}
}

@-webkit-keyframes run {
  0% { margin-left: -98%;}
  100%{ margin-left: 0%;}
}

@-o-keyframes run {
  0% { margin-left: -98%;}
  100%{ margin-left: 0%;}
}

@-ms-keyframes run {
  0% { margin-left: -98%;}
  100%{ margin-left: 0%;}
}

/* Top-To-Bottom */

.topToBottom {
  -webkit-animation-name: topToBottom;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-duration: 2s;
  -moz-animation-name:topToBottom;
}
@keyframes topToBottom {
  0% {
    margin-top: -10%;
  }
  100% {
    margin-top: 0%;
  }
}

@-moz-keyframes topToBottom {
  0% {
    margin-top: -10%;
  }
  100% {
    margin-top: 0%;
  }
}

@-webkit-keyframes topToBottom {
  0% {
    margin-top: -10%;
  }
  100% {
    margin-top: 0%;
  }
}

@-o-keyframes topToBottom {
  0% {
    margin-top: -10%;
  }
  100% {
    margin-top: 0%;
  }
}

@-ms-keyframes topToBottom {
  0% {
    margin-top: -10%;
  }
  100% {
    margin-top: 0%;
  }
}

 /* Bottom-To-Top */

 .topSlide{
  animation: run ease 2s;
  -webkit-animation: run ease 2s;
  -moz-animation: run ease 2s;
  -o-animation: run ease 2s;
  -ms-animation: run ease 2s;
}

@keyframes run {
  0% { margin-top: -5%;}
  100%{ margin-top: 0%;}
}

@-moz-keyframes run {
  0% { margin-top: -5%;}
  100%{ margin-top: 0%;}
}

@-webkit-keyframes run {
  0% { margin-top: -5%;}
  100%{ margin-top: 0%;}
}

@-o-keyframes run {
  0% { margin-top: -5%;}
  100%{ margin-top: 0%;}
}

@-ms-keyframes run {
  0% { margin-top: -5%;}
  100%{ margin-top: 0%;}
}
/* ----------------Tada------------------ */

@-webkit-keyframes tada {
  0% {-webkit-transform: scale(1);}
  10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
  30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
  40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
  100% {-webkit-transform: scale(1) rotate(0);}
}
@keyframes tada {
  0% {transform: scale(1);}
  10%, 20% {transform: scale(0.9) rotate(-3deg);}
  30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
  40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
  100% {transform: scale(1) rotate(0);}
}
.tada-animation {
  -webkit-animation-name: tada;
  -webkit-animation-duration: 6s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-duration: 3s;
  -moz-animation-name:tada;
}