@-moz-keyframes flip {
  0% {
    transform: perspective(em(400px)) translateZ(0) rotateY(0) scale(1);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(em(400px)) translateZ(em(150px)) rotateY(170deg) scale(1);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(em(400px)) translateZ(em(150px)) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(em(400px)) translateZ(0) rotateY(360deg) scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(em(400px)) translateZ(0) rotateY(360deg) scale(1);
    animation-timing-function: ease-in;
  }
}
@-webkit-keyframes flip {
  0% {
    transform: perspective(em(400px)) translateZ(0) rotateY(0) scale(1);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(em(400px)) translateZ(em(150px)) rotateY(170deg) scale(1);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(em(400px)) translateZ(em(150px)) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(em(400px)) translateZ(0) rotateY(360deg) scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(em(400px)) translateZ(0) rotateY(360deg) scale(1);
    animation-timing-function: ease-in;
  }
}
@-o-keyframes flip {
  0% {
    transform: perspective(em(400px)) translateZ(0) rotateY(0) scale(1);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(em(400px)) translateZ(em(150px)) rotateY(170deg) scale(1);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(em(400px)) translateZ(em(150px)) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(em(400px)) translateZ(0) rotateY(360deg) scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(em(400px)) translateZ(0) rotateY(360deg) scale(1);
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
    transform: perspective(em(400px)) translateZ(0) rotateY(0) scale(1);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(em(400px)) translateZ(em(150px)) rotateY(170deg) scale(1);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(em(400px)) translateZ(em(150px)) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(em(400px)) translateZ(0) rotateY(360deg) scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(em(400px)) translateZ(0) rotateY(360deg) scale(1);
    animation-timing-function: ease-in;
  }
}