/**
 * Page transitions.
 */

.page.animate {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000;
  perspective: 1000;
}

#page.animate {
  -webkit-animation: fadeOut 0.5s linear;
  -moz-animation: fadeOut 0.5s linear;
  -o-animation: fadeOut 0.5s linear;
  animation: fadeOut 0.5s linear;
}

.page-transition {
  display: none;
  position: absolute;
  z-index: 16777270;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: fadeIn 0.5s linear;
  -moz-animation: fadeIn 0.5s linear;
  -o-animation: fadeIn 0.5s linear;
  animation: fadeIn 0.5s linear;
}

.page-transition.animate {
  display: block;
}

@-webkit-keyframes fadeIn {
  0%   { opacity: 0; }
  25%  { opacity: 0.25; }
  50%  { opacity: 0.50; }
  75%  { opacity: 0.75; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
  0%   { -moz-opacity: 0; }
  25%  { -moz-opacity: 0.25; }
  50%  { -moz-opacity: 0.50; }
  75%  { -moz-opacity: 0.75; }
  100% { -moz-opacity: 1; }
}
@-o-keyframes fadeIn {
  0%   { opacity: 0; }
  25%  { opacity: 0.25; }
  50%  { opacity: 0.50; }
  75%  { opacity: 0.75; }
  100% { opacity: 1; }
}
@keyframes fadeIn {
  0%   { opacity: 0; }
  25%  { opacity: 0.25; }
  50%  { opacity: 0.50; }
  75%  { opacity: 0.75; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeOut {
  0%   { opacity: 1; }
  25%  { opacity: 0.25; }
  50%  { opacity: 0.50; }
  75%  { opacity: 0.75; }
  100% { opacity: 0; }
}
@-moz-keyframes fadeOut {
  0%   { -moz-opacity: 1; }
  25%  { -moz-opacity: 0.25; }
  50%  { -moz-opacity: 0.50; }
  75%  { -moz-opacity: 0.75; }
  100% { -moz-opacity: 0; }
}
@-o-keyframes fadeOut {
  0%   { opacity: 1; }
  25%  { opacity: 0.25; }
  50%  { opacity: 0.50; }
  75%  { opacity: 0.75; }
  100% { opacity: 0; }
}
@keyframes fadeOut {
  0%   { opacity: 1; }
  25%  { opacity: 0.25; }
  50%  { opacity: 0.50; }
  75%  { opacity: 0.75; }
  100% { opacity: 0; }
}

@-webkit-keyframes slideInLeft {
  0%   { -webkit-transform: translate3d(-100%, 0, 0); }
  25%  { -webkit-transform: translate3d(-75%, 0, 0); }
  50%  { -webkit-transform: translate3d(-50%, 0, 0); }
  75%  { -webkit-transform: translate3d(-25%, 0, 0); }
  100% { -webkit-transform: translate3d(0%, 0, 0); }
}
@-moz-keyframes slideInLeft {
  0%   { -moz-transform: translate3d(-100%, 0, 0); }
  25%  { -moz-transform: translate3d(-75%, 0, 0); }
  50%  { -moz-transform: translate3d(-50%, 0, 0); }
  75%  { -moz-transform: translate3d(-25%, 0, 0); }
  100% { -moz-transform: translate3d(0%, 0, 0); }
}
@-o-keyframes slideInLeft {
  0%   { -o-transform: translate3d(-100%, 0, 0); }
  25%  { -o-transform: translate3d(-75%, 0, 0); }
  50%  { -o-transform: translate3d(-50%, 0, 0); }
  75%  { -o-transform: translate3d(-25%, 0, 0); }
  100% { -o-transform: translate3d(0%, 0, 0); }
}
@keyframes slideInLeft {
  0%   { transform: translate3d(-100%, 0, 0); }
  25%  { transform: translate3d(-75%, 0, 0); }
  50%  { transform: translate3d(-50%, 0, 0); }
  75%  { transform: translate3d(-25%, 0, 0); }
  100% { transform: translate3d(0%, 0, 0); }
}

@-webkit-keyframes slideInRight {
  0%   { -webkit-transform: translate3d(100%, 0, 0); }
  25%  { -webkit-transform: translate3d(75%, 0, 0); }
  50%  { -webkit-transform: translate3d(50%, 0, 0); }
  75%  { -webkit-transform: translate3d(25%, 0, 0); }
  100% { -webkit-transform: translate3d(0%, 0, 0); }
}
@-moz-keyframes slideInRight {
  0%   { -moz-transform: translate3d(100%, 0, 0); }
  25%  { -moz-transform: translate3d(75%, 0, 0); }
  50%  { -moz-transform: translate3d(50%, 0, 0); }
  75%  { -moz-transform: translate3d(25%, 0, 0); }
  100% { -moz-transform: translate3d(0%, 0, 0); }
}
@-o-keyframes slideInRight {
  0%   { -o-transform: translate3d(100%, 0, 0); }
  25%  { -o-transform: translate3d(75%, 0, 0); }
  50%  { -o-transform: translate3d(50%, 0, 0); }
  75%  { -o-transform: translate3d(25%, 0, 0); }
  100% { -o-transform: translate3d(0%, 0, 0); }
}
@keyframes slideInRight {
  0%   { transform: translate3d(100%, 0, 0); }
  25%  { transform: translate3d(75%, 0, 0); }
  50%  { transform: translate3d(50%, 0, 0); }
  75%  { transform: translate3d(25%, 0, 0); }
  100% { transform: translate3d(0%, 0, 0); }
}

@-webkit-keyframes slideOutLeft {
  0%   { -webkit-transform: translate3d(0%, 0, 0); }
  25%  { -webkit-transform: translate3d(-25%, 0, 0); }
  50%  { -webkit-transform: translate3d(-50%, 0, 0); }
  75%  { -webkit-transform: translate3d(-75%, 0, 0); }
  100% { -webkit-transform: translate3d(-100%, 0, 0); }
}
@-moz-keyframes slideOutLeft {
  0%   { -moz-transform: translate3d(0%, 0, 0); }
  25%  { -moz-transform: translate3d(-25%, 0, 0); }
  50%  { -moz-transform: translate3d(-50%, 0, 0); }
  75%  { -moz-transform: translate3d(-75%, 0, 0); }
  100% { -moz-transform: translate3d(-100%, 0, 0); }
}
@-o-keyframes slideOutLeft {
  0%   { -o-transform: translate3d(0%, 0, 0); }
  25%  { -o-transform: translate3d(-25%, 0, 0); }
  50%  { -o-transform: translate3d(-50%, 0, 0); }
  75%  { -o-transform: translate3d(-75%, 0, 0); }
  100% { -o-transform: translate3d(-100%, 0, 0); }
}
@keyframes slideOutLeft {
  0%   { transform: translate3d(0%, 0, 0); }
  25%  { transform: translate3d(-25%, 0, 0); }
  50%  { transform: translate3d(-50%, 0, 0); }
  75%  { transform: translate3d(-75%, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

@-webkit-keyframes slideOutRight {
  0%   { -webkit-transform: translate3d(0%, 0, 0); }
  25%  { -webkit-transform: translate3d(25%, 0, 0); }
  50%  { -webkit-transform: translate3d(50%, 0, 0); }
  75%  { -webkit-transform: translate3d(75%, 0, 0); }
  100% { -webkit-transform: translate3d(100%, 0, 0); }
}
@-moz-keyframes slideOutRight {
  0%   { -moz-transform: translate3d(0%, 0, 0); }
  25%  { -moz-transform: translate3d(25%, 0, 0); }
  50%  { -moz-transform: translate3d(50%, 0, 0); }
  75%  { -moz-transform: translate3d(75%, 0, 0); }
  100% { -moz-transform: translate3d(100%, 0, 0); }
}
@-o-keyframes slideOutRight {
  0%   { -o-transform: translate3d(0%, 0, 0); }
  25%  { -o-transform: translate3d(25%, 0, 0); }
  50%  { -o-transform: translate3d(50%, 0, 0); }
  75%  { -o-transform: translate3d(75%, 0, 0); }
  100% { -o-transform: translate3d(100%, 0, 0); }
}
@keyframes slideOutRight {
  0%   { transform: translate3d(0%, 0, 0); }
  25%  { transform: translate3d(25%, 0, 0); }
  50%  { transform: translate3d(50%, 0, 0); }
  75%  { transform: translate3d(75%, 0, 0); }
  100% { transform: translate3d(100%, 0, 0); }
}

@-webkit-keyframes verticalFlipFront {
  0%   { -webkit-transform: rotateX(180deg); }
  25% { -webkit-transform: rotateX(135deg); }
  50% { -webkit-transform: rotateX(90deg); }
  75% { -webkit-transform: rotateX(45deg); }
  100% { -webkit-transform: rotateX(0deg); }
}
@-moz-keyframes verticalFlipFront {
  0%   { -moz-transform: rotateX(180deg); }
  25% { -moz-transform: rotateX(135deg); }
  50% { -moz-transform: rotateX(90deg); }
  75% { -moz-transform: rotateX(45deg); }
  100% { -moz-transform: rotateX(0deg); }
}
@-o-keyframes verticalFlipFront {
  0%   { -o-transform: rotateX(180deg); }
  25% { -o-transform: rotateX(135deg); }
  50% { -o-transform: rotateX(90deg); }
  75% { -o-transform: rotateX(45deg); }
  100% { -o-transform: rotateX(0deg); }
}
@keyframes verticalFlipFront {
  0%   { transform: rotateX(180deg); }
  25% { transform: rotateX(135deg); }
  50% { transform: rotateX(90deg); }
  75% { transform: rotateX(45deg); }
  100% { transform: rotateX(0deg); }
}

@-webkit-keyframes verticalFlipBack {
  0%   { -webkit-transform: rotateX(0deg); }
  25% { -webkit-transform: rotateX(45deg); }
  50% { -webkit-transform: rotateX(90deg); }
  75% { -webkit-transform: rotateX(135deg); }
  100% { -webkit-transform: rotateX(180deg); }
}
@-moz-keyframes verticalFlipBack {
  0%   { -moz-transform: rotateX(0deg); }
  25% { -moz-transform: rotateX(45deg); }
  50% { -moz-transform: rotateX(90deg); }
  75% { -moz-transform: rotateX(135deg); }
  100% { -moz-transform: rotateX(180deg); }
}
@-o-keyframes verticalFlipBack {
  0%   { -o-transform: rotateX(0deg); }
  25% { -o-transform: rotateX(45deg); }
  50% { -o-transform: rotateX(90deg); }
  75% { -o-transform: rotateX(135deg); }
  100% { -o-transform: rotateX(180deg); }
}
@keyframes verticalFlipBack {
  0%   { transform: rotateX(0deg); }
  25% { transform: rotateX(45deg); }
  50% { transform: rotateX(90deg); }
  75% { transform: rotateX(135deg); }
  100% { transform: rotateX(180deg); }
}