.framework7-root, body, html {
    position: relative;
    height: 100%;
    width: 100%;
    overflow-x: auto;
} 
.full-height{
    position: relative;
    height: 100%;
    width: 100%;
    overflow-x: auto;
}
body { 
    margin: 0;
    padding: 0;  
    width: 100%; 
    background: #fff;
    overflow: auto;
}
 .views {
    position: relative;
    width: 100%;
    height: 100%;  
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    /*z-index: 500; model popup*/
}
 
.view{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 500; 
    box-sizing: border-box;
}

.pages {
    position: relative;
    width: 100%;
    min-height: 100%;  
    /**scrool**/
   /*overflow-x:hidden;
    overflow-y:hidden;*/
}

.page {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;  
    background: #fff;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

    .page.cached {
        display: none;
    }

.page-on-left {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    display:none;/**page appear on background**/
}

.page-on-right {
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translate3d(0,56px,0);
    transform: translate3d(0,56px,0);
    display:none;/**page appear on background**/
}

.page-content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    z-index: 1;
    display:block;/**page appear on background**/
}

.page-transitioning {
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.page-from-right-to-center {
    pointer-events: none;
    -webkit-animation: pageFromRightToCenter .3s forwards;
    animation: pageFromRightToCenter .3s forwards;
}

.page-from-center-to-right {
    pointer-events: none;
    -webkit-animation: pageFromCenterToRight .3s forwards;
    animation: pageFromCenterToRight .3s forwards;
}

.modal .page {
    position:relative;
}
@-webkit-keyframes pageFromRightToCenter {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,56px,0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
    }
}

@keyframes pageFromRightToCenter {
    from {
        opacity: 0;
        transform: translate3d(0,56px,0);
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}

@-webkit-keyframes pageFromCenterToRight {
    from {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0,56px,0);
    }
}

@keyframes pageFromCenterToRight {
    from {
        opacity: 1;
        transform: translate3d(0,0,0);
    }

    to {
        opacity: 0;
        transform: translate3d(0,56px,0);
    }
}

.page-from-center-to-left {
    -webkit-animation: pageFromCenterToLeft .3s forwards;
    animation: pageFromCenterToLeft .3s forwards;
}

.page-from-left-to-center {
    -webkit-animation: pageFromLeftToCenter .3s forwards;
    animation: pageFromLeftToCenter .3s forwards;
}

@-webkit-keyframes pageFromCenterToLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

@keyframes pageFromCenterToLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes pageFromLeftToCenter {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

@keyframes pageFromLeftToCenter {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}