//  animation Show [https://daneden.github.io/animate.css/]
//  animation From [https://raw.githubusercontent.com/daneden/animate.css/master/animate.css]

@-webkit-keyframes JDzoomIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes JDzoomIn {
  from {
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: scale(0);
  }
  
  to {
    opacity: 1;
    -webkit-transform: translateZ(1);
    transform: scale(1);
  }
}


@-webkit-keyframes tada {
  from {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    opacity: 1;
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, -6deg);
    transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, -6deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, 6deg);
    transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, 6deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, -6deg);
    transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, -6deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}



@-webkit-keyframes JDfadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes JDfadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}



@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
  
@-webkit-keyframes JDzoomOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: scale(0);
  }
}

@keyframes JDzoomOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: scale(0);
  }
}  


@-webkit-keyframes fadeOutRight {
    from {
      opacity: 1;
    }
    
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
    }
  
    to {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  }

  
@-webkit-keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  .fadeInRightShow {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    animation-duration: 1s;
  }

  .fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    animation-duration: 1s;
  }

  .zoomIn {
    -webkit-animation-name: JDzoomIn;
    animation-name: JDzoomIn;
    animation-duration: .55s;
  }

  .fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
    animation-duration: 1.3s;
    animation-fill-mode: after;
  }
  
  .zoomOut {
    -webkit-animation-name: JDzoomOut!important;
    transform-origin: center center;
    animation-name: JDzoomOut!important;
    animation-duration: .55s;
    animation-fill-mode: after;
  }
  
  .fadeOut {
    -webkit-animation-name: JDfadeOut!important;
    transform-origin: center center;
    animation-name: JDfadeOut!important;
    animation-duration: .3s;
    animation-fill-mode: after;
  }
  
  .tada {
    -webkit-animation-name: tada;
    animation-name: tada;
    animation-duration: 2s;
    animation-delay: .3s;
  }

  .animationWrap {
    transform-origin: center center;
    margin-bottom: -3px;
  }
