/*
    Librerias interesantes para navegacion:
        https://github.com/ian-de-vries/Multi-Screen.js
*/

.app-page {
  display: block;
  visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  overflow: hidden;
  z-index: 1;
  background-color: #fff;
/*
	 *
	 * Page transition animation
	 *
	*/
}
.app-page.app-active {
  visibility: visible;
  z-index: 2;
}
.app-page.page-sliding.left {
  z-index: 3;
  -webkit-animation: leftTransition 300ms ease-out;
          animation: leftTransition 300ms ease-out;
}
.app-page.page-sliding.right {
  z-index: 4;
  -webkit-animation: rightTransition 300ms ease-out;
          animation: rightTransition 300ms ease-out;
}
@-webkit-keyframes leftTransition {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
  }
}
@keyframes leftTransition {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
  }
}
@-webkit-keyframes rightTransition {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0);
  }
}
@keyframes rightTransition {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0);
  }
}