.page {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    text-align: left;   
}

html.mobile .page{
    -webkit-overflow-scrolling: touch;
}

.page.left {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}
.page.left.pageOut {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
}


.page.center {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.page.right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
.page.right.pageOut {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
}

.page.top {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);    
}
.page.top.pageOut {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0); 
}


.page.bottom{
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.page.bottom.pageOut{
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
}


.page.topleft{
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
}
.page.topleft.pageOut{
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}


.page.bottomright{
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);  
}
.page.bottomright.pageOut{
    -webkit-transform: translate3d(50%, 50%, 0);
    transform: translate3d(50%, 50%, 0);    
}


.page.topright{
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
}
.page.topright.pageOut{
    -webkit-transform: translate3d(50%, -50%, 0);
    transform: translate3d(50%, -50%, 0);
}


.page.bottomleft{
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0); 
}
.page.bottomleft.pageOut{
    -webkit-transform: translate3d(-50%, 50%, 0);
    transform: translate3d(-50%, 50%, 0);   
}





.page.fadein{
    opacity:1;
}
.page.fadeout{
    opacity:0;
}

.page.transition {
    -webkit-transition-duration: .75s;
    transition-duration: .75s;
}
.page.transition.pageOut:before{
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    z-index: 999;
    animation: pageOutDarker 1s forwards;   
}

@-webkit-keyframes pageOutDarker {
    from {
        -webkit-opacity: 0;
        opacity: 0;
    }
    to{
        -webkit-opacity: .9;
        opacity: .9;
    }
}

@keyframes pageOutDarker {
    from {
        -webkit-opacity: 0;
        opacity: 0;
    }
    to{
        -webkit-opacity: .9;
        opacity: .9;
    }
}

.pageOutDarker {
  -webkit-animation-name: pageOutDarker;
  animation-name: pageOutDarker;
}

#loading_view.page.transition {
    -webkit-transition-duration: .75s;
    transition-duration: .75s;
}