/* Setup */

.pt-perspective {
	position: relative;
	width: 100%;
	height: 100%;
   overflow: hidden;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
}

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


/* This is run on the existing page to open */

.pt-page-rotateBottomSideFirst {
	z-index: -1;
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotateBottomSideFirst .5s 2.5s both ease-in;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotateBottomSideFirst .5s 2.5s both ease-in;
	transform-origin: 50% 0%;
	animation: rotateBottomSideFirst .5s 2.5s both ease-in;
}
@-webkit-keyframes rotateBottomSideFirst {
	100% { -webkit-transform: rotateX(-20deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
}
@-moz-keyframes rotateBottomSideFirst {
	100% { -moz-transform: rotateX(-20deg); opacity: .8; -moz-animation-timing-function: ease-out; }
}
@keyframes rotateBottomSideFirst {
	100% { transform: rotateX(-20deg); opacity: .8; animation-timing-function: ease-out; }
}


.rotateBottomIn {
	z-index:-1;
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotateBottomIn .3s .2s both ease-in;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotateBottomIn.3s .2s both ease-in;
	transform-origin: 50% 0%;
	animation: rotateBottomIn .3s .2s both ease-in;
}

@-webkit-keyframes rotateBottomIn {
	0% { -webkit-transform: rotateX(-20deg); opacity: .8; -webkit-animation-timing-function:  cubic-bezier(0.785, 0.135, 0.15, 0.86); }
	10% { -webkit-transform: rotateX(-25deg); opacity: .8 -webkit-animation-timing-function:  cubic-bezier(0.785, 0.135, 0.15, 0.86);}
	30% { -webkit-transform: rotateX(-30deg); opacity: .8 -webkit-animation-timing-function:  cubic-bezier(0.785, 0.135, 0.15, 0.86);}
	100% { -webkit-transform: rotateX(0deg); opacity: 1; -webkit-animation-timing-function:  cubic-bezier(0.785, 0.135, 0.15, 0.86); }
}


/*This is run on the new page */

.animate-in {
  -webkit-animation: bounceInUpMenu 1000ms 2500ms ease-out both;
  animation: bounceInUpMenu 1000ms 2500ms ease-out both;
}
.animate-out {
  -webkit-animation: dropDown 600ms cubic-bezier(0.77, 0, 0.175, 1)  both;
  animation: dropDown 600ms cubic-bezier(0.77, 0, 0.175, 1) both;

}

@-webkit-keyframes dropDown {
	0%{
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  100%{
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}


@-webkit-keyframes bounceInUpMenu {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  61% {

  }

  80% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);

  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);

  }
}