﻿.animated-flippers {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.3s;
  -moz-animation-duration: 1.3s;
  -ms-animation-duration: 1.3s;
  -o-animation-duration: 1.3s;
  animation-duration: 1.3s; }

.out {
  -webkit-animation-duration: .3s;
  -moz-animation-duration: .3s;
  -ms-animation-duration: .3s;
  -o-animation-duration: .3s;
  animation-duration: .3s; }

@-webkit-keyframes flipIn {
  0% {
    -webkit-transform: perspective(500px) rotateX(-90deg);
    opacity: 0; }

  30% {
    -webkit-transform: perspective(500px) rotateX(7deg); }

  60% {
    -webkit-transform: perspective(500px) rotateX(-7deg); }

  100% {
    -webkit-transform: perspective(500px) rotateX(0deg);
    opacity: 1; } }

@-moz-keyframes flipIn {
  0% {
    -moz-transform: perspective(500px) rotateX(-90deg);
    opacity: 0; }

  30% {
    -moz-transform: perspective(500px) rotateX(7deg); }

  60% {
    -moz-transform: perspective(500px) rotateX(-7deg); }

  100% {
    -moz-transform: perspective(500px) rotateX(0deg);
    opacity: 1; } }

@-o-keyframes flipIn {
  0% {
    -o-transform: perspective(500px) rotateX(-90deg);
    opacity: 0; }

  30% {
    -o-transform: perspective(500px) rotateX(7deg); }

  60% {
    -o-transform: perspective(500px) rotateX(-7deg); }

  100% {
    -o-transform: perspective(500px) rotateX(0deg);
    opacity: 1; } }

@-ms-keyframes flipIn {
  0% {
    -ms-transform: perspective(500px) rotateX(-90deg);
    opacity: 0; }

  30% {
    -ms-transform: perspective(500px) rotate(7deg); }

  60% {
    -ms-transform: perspective(500px) rotateX(-7deg); }

  100% {
    -ms-transform: perspective(500px) rotateX(0deg);
    opacity: 1; } }

@keyframes flipIn {
  0% {
    transform: perspective(500px) rotateX(-90deg);
    opacity: 0; }

  30% {
    transform: perspective(500px) rotateX(7deg); }

  60% {
    transform: perspective(500px) rotateX(-7deg); }

  100% {
    transform: perspective(500px) rotateX(0deg);
    opacity: 1; } }

.flipIn {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipIn;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: flipIn;
  -o-backface-visibility: visible !important;
  -o-animation-name: flipIn;
  -ms-backface-visibility: visible !important;
  -ms-animation-name: flipIn;
  backface-visibility: visible !important;
  animation-name: flipIn; }

@-webkit-keyframes flipOut {
  0% {
    -webkit-transform: perspective(800px) rotateX(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: perspective(800px) rotateX(60deg);
    opacity: 0; } }

@-moz-keyframes flipOut {
  0% {
    -moz-transform: perspective(800px) rotateX(0deg);
    opacity: 1; }

  100% {
    -moz-transform: perspective(800px) rotateX(60deg);
    opacity: 0; } }

@-o-keyframes flipOut {
  0% {
    -o-transform: perspective(800px) rotateX(0deg);
    opacity: 1; }

  100% {
    -o-transform: perspective(800px) rotateX(60deg);
    opacity: 0; } }

@-ms-keyframes flipOut {
  0% {
    -ms-transform: perspective(800px) rotateX(0deg);
    opacity: 1; }

  100% {
    -ms-transform: perspective(800px) rotateX(60deg);
    opacity: 0; } }

@keyframes flipOut {
  0% {
    transform: perspective(800px) rotateX(0deg);
    opacity: 1; }

  100% {
    transform: perspective(800px) rotateX(60deg);
    opacity: 0; } }

.flipOut {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipOut;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: flipOut;
  -o-backface-visibility: visible !important;
  -o-animation-name: flipOut;
  -ms-backface-visibility: visible !important;
  -ms-animation-name: flipOut;
  backface-visibility: visible !important;
  animation-name: flipOut; }

.disable {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  -o-animation: none;
  animation: none; }
  
  .disable .thumb {
  display:none; }