/* setup */
.pt-perspective {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow: hidden;
}

.pt-page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.pt-page-current,
.no-js .pt-page {
  visibility: visible;
}

.no-js body {
  overflow: auto;
}

.pt-page-ontop {
  z-index: 999;
}

/* scale and fade */

.pt-page-scaleDown {
  animation: scaleDown .7s ease both;
}

.pt-page-scaleUp {
  animation: scaleUp .7s ease both;
}

.pt-page-scaleUpDown {
  animation: scaleUpDown .5s ease both;
}

.pt-page-scaleDownUp {
  animation: scaleDownUp .5s ease both;
}

.pt-page-scaleDownCenter {
  animation: scaleDownCenter .4s ease-in both;
}

.pt-page-scaleUpCenter {
  animation: scaleUpCenter .4s ease-out both;
}

/************ keyframes ************/

/* scale and fade */

@keyframes scaleDown {
  to { opacity: 0; transform: scale(.8); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(.8); }
}

@keyframes scaleUpDown {
  from { opacity: 0; transform: scale(1.2); }
}

@keyframes scaleDownUp {
  to { opacity: 0; transform: scale(1.2); }
}

@keyframes scaleDownCenter {
  to { opacity: 0; transform: scale(.7); }
}

@keyframes scaleUpCenter {
  from { opacity: 0; transform: scale(.7); }
}

/* move from / to  */

.pt-page-moveToLeft {
  -webkit-animation: moveToLeft .6s ease both;
  animation: moveToLeft .6s ease both;
}

.pt-page-moveFromLeft {
  -webkit-animation: moveFromLeft .6s ease both;
  animation: moveFromLeft .6s ease both;
}

.pt-page-moveToRight {
  -webkit-animation: moveToRight .6s ease both;
  animation: moveToRight .6s ease both;
}

.pt-page-moveFromRight {
  -webkit-animation: moveFromRight .6s ease both;
  animation: moveFromRight .6s ease both;
}

.pt-page-moveToTop {
  -webkit-animation: moveToTop .6s ease both;
  animation: moveToTop .6s ease both;
}

.pt-page-moveFromTop {
  -webkit-animation: moveFromTop .6s ease both;
  animation: moveFromTop .6s ease both;
}

.pt-page-moveToBottom {
  -webkit-animation: moveToBottom .6s ease both;
  animation: moveToBottom .6s ease both;
}

.pt-page-moveFromBottom {
  -webkit-animation: moveFromBottom .6s ease both;
  animation: moveFromBottom .6s ease both;
}

/********************************* keyframes **************************************/

/* move from / to  */

@-webkit-keyframes moveToLeft {
  from { }
  to { -webkit-transform: translateX(-100%); }
}
@keyframes moveToLeft {
  from { }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveFromLeft {
  from { -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
  from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveToRight { 
  from { }
  to { -webkit-transform: translateX(100%); }
}
@keyframes moveToRight { 
  from { }
  to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@-webkit-keyframes moveFromRight {
  from { -webkit-transform: translateX(100%); }
}
@keyframes moveFromRight {
  from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@-webkit-keyframes moveToTop {
  from { }
  to { -webkit-transform: translateY(-100%); }
}
@keyframes moveToTop {
  from { }
  to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@-webkit-keyframes moveFromTop {
  from { -webkit-transform: translateY(-100%); }
}
@keyframes moveFromTop {
  from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@-webkit-keyframes moveToBottom {
  from { }
  to { -webkit-transform: translateY(100%); }
}
@keyframes moveToBottom {
  from { }
  to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

@-webkit-keyframes moveFromBottom {
  from { -webkit-transform: translateY(100%); }
}
@keyframes moveFromBottom {
  from { -webkit-transform: translateY(100%); transform: translateY(100%); }
}