.animation {

}

    .animation span {

    }

/*All Animations*/
.zoom-in {
    -webkit-transform: scale(0);
    transform: scale(0);

    -webkit-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}

.zoom-out {
    opacity:0;
    visibility: hidden;

    -webkit-transform: scale(1.8);
    transform: scale(1.8);

    -webkit-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}

.fade-in {
    opacity:0;
    visibility: hidden;

    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.fade-in-right {
    opacity:0;
    visibility: hidden;
    
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    
    -webkit-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}

.fade-in-left {
    opacity:0;
    visibility: hidden;

    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);

    -webkit-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}

.fade-in-up {
    opacity:0;
    visibility: hidden;

    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    
    -webkit-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}

.fade-in-down {
    opacity:0;
    visibility: hidden;
    
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    
    -webkit-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}

.rotate {
    opacity:0;
    visibility: hidden;
    
    -webkit-transform: translateY(360px);
    transform: translateY(360px);
    
    -webkit-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}

.rotate-zoom-in {
    opacity:0;
    visibility: hidden;

    -webkit-transform: rotate(720) scale(0);
    transform: rotate(720) scale(0);
    
    -webkit-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}

.rotate-zoom-out {
    opacity:0;
    visibility: hidden;

    -webkit-transform: rotate(720) scale(2);
    transform: rotate(720) scale(2);
    
    -webkit-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}

.flip-up {
    opacity:0;
    visibility: hidden;
    
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.flip-in-right {
    opacity:0;
    visibility: hidden;
    
    -webkit-transform: rotateX(0deg) translateX(300px);
    transform: rotateX(0deg) translateX(300px);
    
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.flip-in-left {
    opacity:0;
    visibility: hidden;
    
    -webkit-transform: rotateX(0deg) translateX(-300px);
    transform: rotateX(0deg) translateX(-300px);
    
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.flip-down-right {
    opacity:0;
    visibility: hidden;
    
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    
    -webkit-animation: down-right 1.3s;
    animation: down-right 1.3s;    
}

.reset-down-right {
    -webkit-animation: reset-down-right 1.3s;
    animation: reset-down-right 1.3s;
}

@-webkit-keyframes down-right {
    0% {-webkit-transform: rotate(45deg) rotateX(90deg);transform: rotate(45deg) rotateX(90deg);}
    50% {-webkit-transform: rotate(45deg) rotateX(0deg);transform: rotate(45deg) rotateX(0deg);}    
    100% {-webkit-transform: rotate(0deg) rotateX(0deg);transform: rotate(0deg) rotateX(0deg);}
}
@keyframes down-right {
    0% {-webkit-transform: rotate(45deg) rotateX(90deg);transform: rotate(45deg) rotateX(90deg);}
    50% {-webkit-transform: rotate(45deg) rotateX(0deg);transform: rotate(45deg) rotateX(0deg);}    
    100% {-webkit-transform: rotate(0deg) rotateX(0deg);transform: rotate(0deg) rotateX(0deg);}
}
 
@-webkit-keyframes reset-down-right {
    0% {-webkit-transform: rotate(0deg) rotateX(0deg);transform: rotate(0deg) rotateX(0deg);}
    50% {-webkit-transform: rotate(45deg) rotateX(0deg);transform: rotate(45deg) rotateX(0deg);}    
    100% {-webkit-transform: rotate(45deg) rotateX(90deg);transform: rotate(45deg) rotateX(90deg);}
}
@keyframes reset-down-right {
    0% {-webkit-transform: rotate(0deg) rotateX(0deg);transform: rotate(0deg) rotateX(0deg);}
    50% {-webkit-transform: rotate(45deg) rotateX(0deg);transform: rotate(45deg) rotateX(0deg);}    
    100% {-webkit-transform: rotate(45deg) rotateX(90deg);transform: rotate(45deg) rotateX(90deg);}
}

.flip-down-left {
    opacity:0;
    visibility: hidden;
    
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    
    -webkit-animation: down-left 1.3s;
    animation: down-left 1.3s;    
}

.reset-down-left {
    -webkit-animation: reset-down-left 1.3s;
    animation: reset-down-left 1.3s;
}

@-webkit-keyframes down-left {
    0% {-webkit-transform: rotate(-45deg) rotateX(90deg);transform: rotate(-45deg) rotateX(90deg);}
    50% {-webkit-transform: rotate(-45deg) rotateX(0deg);transform: rotate(-45deg) rotateX(0deg);}    
    100% {-webkit-transform: rotate(0deg) rotateX(0deg);transform: rotate(0deg) rotateX(0deg);}
}
@keyframes down-left {
    0% {-webkit-transform: rotate(-45deg) rotateX(90deg);transform: rotate(-45deg) rotateX(90deg);}
    50% {-webkit-transform: rotate(-45deg) rotateX(0deg);transform: rotate(-45deg) rotateX(0deg);}    
    100% {-webkit-transform: rotate(0deg) rotateX(0deg);transform: rotate(0deg) rotateX(0deg);}
}
 
@-webkit-keyframes reset-down-left {
    0% {-webkit-transform: rotate(0deg) rotateX(0deg);transform: rotate(0deg) rotateX(0deg);}
    50% {-webkit-transform: rotate(-45deg) rotateX(0deg);transform: rotate(-45deg) rotateX(0deg);}    
    100% {-webkit-transform: rotate(-45deg) rotateX(90deg);transform: rotate(-45deg) rotateX(90deg);}
}
@keyframes reset-down-left {
    0% {-webkit-transform: rotate(0deg) rotateX(0deg);transform: rotate(0deg) rotateX(0deg);}
    50% {-webkit-transform: rotate(-45deg) rotateX(0deg);transform: rotate(-45deg) rotateX(0deg);}    
    100% {-webkit-transform: rotate(-45deg) rotateX(90deg);transform: rotate(-45deg) rotateX(90deg);}
}

.drop-bounce {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
  
@-webkit-keyframes drop {
    0% {-webkit-transform: translateY(-100px);transform: translateY(-100px);}
    100% {-webkit-transform: translateY(0px);transform: translateY(0px);}
} 
@keyframes drop {
    0% {-webkit-transform: translateY(-100px);transform: translateY(-100px);}
    100% {-webkit-transform: translateY(0px);transform: translateY(0px);}
}

@-webkit-keyframes bounce {
    0%, 53%, 80%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
    }
  
    40%, 43% {
      -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
      transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
      -webkit-transform: translate3d(0, -30px, 0);
      transform: translate3d(0, -30px, 0);
    }
  
    70% {
      -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
      transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
      -webkit-transform: translate3d(0, -15px, 0);
      transform: translate3d(0, -15px, 0);
    }
  
    90% {-webkit-transform: translate3d(0,-4px,0);transform: translate3d(0,-4px,0);}
}
@keyframes bounce {
    0%, 53%, 80%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
    }
  
    40%, 43% {
      -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
      transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
      -webkit-transform: translate3d(0, -30px, 0);
      transform: translate3d(0, -30px, 0);
    }
  
    70% {
      -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
      transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
      -webkit-transform: translate3d(0, -15px, 0);
      transform: translate3d(0, -15px, 0);
    }
  
    90% {-webkit-transform: translate3d(0,-4px,0);transform: translate3d(0,-4px,0);}
}

@-webkit-keyframes goTop {
    0% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
    100% {-webkit-transform: translate3d(0,-100px,0);transform: translate3d(0,-100px,0);}
}
@keyframes goTop {
    0% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
    100% {-webkit-transform: translate3d(0,-100px,0);transform: translate3d(0,-100px,0);}
}