#views-wrapper {
    position: relative;
    width:100%;
    height: 100vh;
    display: block;
    overflow-x:hidden;
    overflow-y:auto;
}

#views-wrapper.panel-open{
    position: absolute !important;
    z-index: 1003 !important;
}

.view-options {
    position:fixed;
    height:60px;
    width:100vw;
    background: rgba(0,0,0,.26);
    bottom: 0px;
    z-index: 1001;
    padding-top: 12px;
    
    -webkit-transform: translate3d(0,100%,0);
    -moz-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);

    -webkit-transition: transform 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
    -moz-transition: transform 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: transform 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 

    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
   	backface-visibility: hidden;
}

.view-options.open {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);

}

.view, .panel {
    position:absolute;
    width:100%;
    height:inherit;
    top:0;
    left:0;
    display:inline-block;
    padding:15px 30px;
    overflow:hidden;
    opacity:0;
    background-color:#FFF;

    /* easeOutQuart */
    -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 

    -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); 
    transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.view {
    -webkit-transform: translate3d(100%,0,0);
    -moz-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}

.view-active {
    overflow:auto;
    padding-bottom: 130px; /*2 times the .view-options height*/
    opacity:1;

    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.container.view-active{
    left: 50%;
        -webkit-transform: translate3d(-50%,0,0);
    -moz-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
}

.view:first-child {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
    
.view-collapsed {
    background-color: rgba(0,0,0,0.05);
    box-shadow: 1px 1px 10px #bbbbbb;
    background-color: #eee;

    -webkit-transform: translate3d(-100%,0,0) !important;
    -moz-transform: translate3d(-100%,0,0) !important;
    transform: translate3d(-100%,0,0) !important;
}

.panel {
    -webkit-transform: translate3d(-100%,0,0);
    -moz-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
    margin-bottom:0px;
    z-index:1002;
    position:fixed;
    height:100%;
}

.panel.open {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity:1;
}