/* Beers Aside
----------------------------------------------------------------------------*/ 

.beers-offcanvas-container{
    position: fixed;
}

.beers-offcanvas-container * {
    box-sizing: border-box;
}

/* container */
.beers-offcanvas{
    display: none;
    
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    
    padding: 0;
    margin: 0;
    
    background: rgba(0, 0, 0, 0.3);
    
    touch-action: none;
    
    z-index: 3000;
}

/* bar */
.beers-offcanvas .beers-offcanvas-bar{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: ;
    width: 70%;
    max-width: 100%;
    
    background: #FFF;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-scroll-chaining: none;
    
    transition: 
  
}
.beers-offcanvas .beers-offcanvas-bar.beers-offcanvas-bar-rtl{
    left: initial;
    right: 0;
}
.beers-offcanvas .beers-offcanvas-bar.beers-offcanvas-active{
    box-shadow: 1px 0 4px rgba(0,0,0,0.3);
}
.beers-offcanvas .beers-offcanvas-bar.beers-offcanvas-active.beers-offcanvas-bar-rtl{
    box-shadow: -1px 0 4px rgba(0,0,0,0.3);
}

/* bar: head + content*/
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-head,
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content{
    display: block;
    position: absolute;
    right: 0;
    left: 0;
}
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-head{
    top: 0;
    height: 60px;
    padding: 5px 10px;
    border-bottom: 1px solid #EEE;
}
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content{
    top: 60px;
    bottom: 0;
    overflow: auto;
}

/* bar: content nav */
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav{
    display: block;
    position: relative;
    padding: 10px 0;
    margin: 0;
    list-style: none;
}
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav li{
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
}
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav li a{
    display: block;
    position: relative;
    padding: 5px 10px;
    margin: 0 0 1px;
    
    color: #666 !important;
    font-size: 13px;
    text-transform: uppercase;
}
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav li a,
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav li a:hover,
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav li a:focus{
    text-decoration: none;
}

/* bar child trigger */
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav li.nav-child > a{
    position: relative;
    padding-right: 30px;
}
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav li.nav-child > a:after{
    content: '\f107';
    
    display: block;
    position: absolute;
    
    top: 50%;
    margin-top: -5px;
    right: 10px;
    
    width: 10px;
    height: 10px;
    
    font-family: 'FontAwesome';
    font-size: 14px;
    line-height: 10px;
    vertical-align: middle;
    text-align: center;
}
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav a.active,
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav li.nav-child > a.nav-open {
    color: #1964ae !important;
}
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav li.nav-child > a.nav-open:after{
    content: '\f106';
}

/* bar: content nav child*/
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav ul{
    display: none;
    padding: 10px 0;
    margin: 0;
    
    background: #EEE;
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
}
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav ul > li > a{
    font-size: 12px;
    line-height: 14px;
    text-transform: capitalize;
}


.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav ul ul {
    margin: 5px 0 10px 10px;
    
    background: #1964ae;
    border-top: none;
    border-right: none;
    border-left: 2px solid #FFF;
}
.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav ul ul > li > a {
    color: #FFF !important;
}

.beers-offcanvas .beers-offcanvas-bar .beers-offcanvas-content ul.nav ul ul > li > a.active{
    background: #FFF;
}