.pushbar.opened{
    display: block;
    }
    
    html.pushbar_locked{
        -ms-touch-action: none;
        touch-action: none;
    }
    
    
    .pushbar_locked .pushbar_main_content.pushbar_blur{
        filter:blur(15px);
    }
    .pushbar{
        z-index: 1000;
        position: fixed;
        will-change: transform;
        overflow-y: auto;
        transition:transform 0.5s ease;
        will-change: transform;
        background:#fff;
    }
    .pushbar_overlay{
        z-index: -999;
        position: fixed;
        width: 100%;
        max-width: 100%;
        height: 100%;
        min-height: 100vh;
        top: 0;
        left: 0;
        will-change: opacity;
        transition:opacity 0.5s ease;
        opacity:0;
        will-change: opacity;
        background: #3c3442;
    }
    html.pushbar_locked .pushbar_overlay{
        opacity:0.8;
        z-index: 999;
        transition:opacity 0.5s ease;
    }
    
    
    .pushbar.from_left{
        top: 0;
        left: 0;
        width: 256px;
        max-width: 100%;
        height: 100%;
        min-height: 100vh;
        transform: translateZ(0) translateX(-100%);
    }
    
    .pushbar.from_right{
        top: 0;
        right: 0;
        width: 256px;
        max-width: 100%;
        height: 100%;
        min-height: 100vh;
        transform: translateZ(0) translateX(100%);
    }
    
    .pushbar.from_top{
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        min-height: 150px;
        transform: translateZ(0) translateY(-100%);
    }
    .pushbar.from_bottom{
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 70%;
        transform: translateZ(0) translateY(100%);
    }
    
    .pushbar.opened{
       transform: translateX(0px) translateY(0px);
    }