.bounce-in {
    -webkit-animation: bounce-in 2s ease;
    animation: bounce-in 2s ease;
  }
  @-webkit-keyframes bounce-in {
    0% {
      opacity: 0;
      transform: scale(.3);
    }
    50% {
      opacity: 1;
      transform: scale(1.05);
    }
    70% { transform: scale(.9); }
    100% { transform: scale(1); }
  }

  .fade-in-down {
    -webkit-animation: fade-in-down 2s ease;
    animation: fade-in-down 2s ease;

  }
  @-webkit-keyframes fade-in-down {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes fade-in-down {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .roll-in {
    -webkit-animation: roll-in 2s ease ;
    animation: roll-in 2s ease ;
  }
  @-webkit-keyframes roll-in {
    0% {
      opacity: 0;
      transform: translateX(-100%) rotate(-120deg);
    }
    100% {
      opacity: 1;
      transform: translateX(0px) rotate(0deg);
    }
  }
  @keyframes roll-in {
    0% {
      opacity: 0;
      transform: translateX(-100%) rotate(-120deg);
    }
    100% {
      opacity: 1;
      transform: translateX(0px) rotate(0deg);
    }
  }
  
  .flip {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation: flip 2s ease infinite;
    animation: flip 2s ease infinite;
  }
  @-webkit-keyframes flip {
    0% {
      transform: perspective(400px) rotateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    40% {
      transform: perspective(400px) translateZ(150px) rotateY(170deg);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    50% {
      transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    80% {
      transform: perspective(400px) rotateY(360deg) scale(.95);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    100% {
      transform: perspective(400px) scale(1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
  }
  @keyframes flip {
    0% {
      transform: perspective(400px) rotateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    40% {
      transform: perspective(400px) translateZ(150px) rotateY(170deg);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    50% {
      transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    80% {
      transform: perspective(400px) rotateY(360deg) scale(.95);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    100% {
      transform: perspective(400px) scale(1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
  }