@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(200%, 0, 0) rotate3d(0, 0, 1, -130deg);
    -moz-transform: translate3d(200%, 0, 0) rotate3d(0, 0, 1, -130deg);
    -ms-transform: translate3d(200%, 0, 0) rotate3d(0, 0, 1, -130deg);
    transform: translate3d(200%, 0, 0) rotate3d(0, 0, 1, -130deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(200%, 0, 0) rotate3d(0, 0, 1, -130deg);
    -moz-transform: translate3d(200%, 0, 0) rotate3d(0, 0, 1, -130deg);
    -ms-transform: translate3d(200%, 0, 0) rotate3d(0, 0, 1, -130deg);
    transform: translate3d(200%, 0, 0) rotate3d(0, 0, 1, -130deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.animated.zoomIn {
  .animation-duration(1.5s);
}


@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    -moz-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 15deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 15deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 15deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 15deg);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 15deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 15deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
    opacity: 0;
  }
}


