#pages {
  position: relative;
}
#pages > div {
  display:none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#pages > div.current {
	display: block;
}

.in, .out {
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 300ms;
}
@-webkit-keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; } 
}
.fade.in {
	-webkit-animation-name: fade-in;
	z-index: 10;
}
.fade.out {
  z-index: 0;
}
.show.in {
  z-index: 10;
  -webkit-animation-name: fade-in;
  -webkit-animation-duration: 10ms; }

.show.out {
  z-index: 0;
}

/* Push in/out */
@-webkit-keyframes inFromRight {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(0); } 
}
.push.in {
	-webkit-transform: translateX(0);
	-o-transform: translateX(0);
	-webkit-animation-name: inFromRight; 
}

@-webkit-keyframes outToLeft {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(-100%); }
}
.push.out {
	-webkit-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-webkit-animation-name: outToLeft; 
}

@-webkit-keyframes inFromLeft {
from { -webkit-transform: translateX(-100%); }
to { -webkit-transform: translateX(0); } 
}
.push.in.reverse {
	-o-transform: translateX(0);
	-webkit-animation-name: inFromLeft; 
}

@-webkit-keyframes outToRight {
	from { -webkit-transform: translateX(0); }
	to { -webkit-transform: translateX(100%); } 
}
.push.out.reverse {
	-o-transform: translateX(100%);
	-webkit-animation-name: outToRight; 
}

.flip { 
  -webkit-animation-duration: .65s; 
  -webkit-backface-visibility: hidden;
}
.flip.in { -webkit-animation-name: flipinfromleft;  }
.flip.out { opacity:0; -webkit-animation-name: flipouttoleft; }
.flip.in.reverse { -webkit-animation-name: flipinfromright; }
.flip.out.reverse { opacity:0; -webkit-animation-name: flipouttoright; }

@-webkit-keyframes flipinfromright {
  from { -webkit-transform: rotateY(-180deg) scale(0.8); }
  to { -webkit-transform: rotateY(0) scale(1); }
}
@-webkit-keyframes flipinfromleft {
  from { -webkit-transform: rotateY(180deg) scale(0.8); }
  to { -webkit-transform: rotateY(0) scale(1); }
}
@-webkit-keyframes flipouttoleft {
  from { -webkit-transform: rotateY(0) scale(1); opacity: 1; }
  to { -webkit-transform: rotateY(-180deg) scale(.8); opacity: 1; }
}
@-webkit-keyframes flipouttoright {
  from { -webkit-transform: rotateY(0) scale(1); opacity: 1; }
  to { -webkit-transform: rotateY(180deg) scale(.8); opacity: 1; }
}