/*!
 * drawer v2.0.0
 * 
 * Licensed under MIT
 * Author : blivesta
 * 
 */
.drawer-main { position: fixed; top: 0; width: 140px; height: 100%; overflow: hidden; }
.drawer-left .drawer-main { left: -140px; -webkit-transition: left .4s cubic-bezier(0.19,1,.22,1); -o-transition: left .4s cubic-bezier(0.19,1,.22,1); transition: left .4s cubic-bezier(0.19,1,.22,1); }
.drawer-left.drawer-open .drawer-main { left: 0; }
.drawer-right .drawer-main { right: -140px; -webkit-transition: right .4s cubic-bezier(0.19,1,.22,1); -o-transition: right .4s cubic-bezier(0.19,1,.22,1); transition: right .4s cubic-bezier(0.19,1,.22,1); }
.drawer-right.drawer-open .drawer-main { right: 0; top: 40px;}
.drawer-overlay { position: relative; }
.drawer-left .drawer-overlay, .drawer-left .drawer-hamberger { left: 0; -webkit-transition: left .4s cubic-bezier(0.19,1,.22,1); -o-transition: left .4s cubic-bezier(0.19,1,.22,1); transition: left .4s cubic-bezier(0.19,1,.22,1); }
.drawer-left.drawer-open .drawer-overlay, .drawer-left.drawer-open .drawer-hamberger { left: 140px; }
.drawer-right .drawer-overlay, .drawer-right .drawer-hamberger { right: 0; -webkit-transition: right .4s cubic-bezier(0.19,1,.22,1); -o-transition: right .4s cubic-bezier(0.19,1,.22,1); transition: right .4s cubic-bezier(0.19,1,.22,1); }
.drawer-right.drawer-open .drawer-overlay, .drawer-right.drawer-open .drawer-hamberger { right: 140px; }
.drawer-overlay-upper { position: fixed; top: 0; z-index: 1000; display: none; height: 100%; background-color: #000; background-color: rgba(0,0,0,.5); }
.drawer-left.drawer-open .drawer-overlay-upper { right: 0; }
.drawer-right.drawer-open .drawer-overlay-upper { left: 0; }
.drawer-default { /* background-color: #222; */ /* -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,.5); */ /* box-shadow: inset 0 0 0 rgba(0,0,0,.5); */ }
    .drawer-default + .drawer-overlay { /* background-color: #fff; */ }
    .drawer-default .drawer-brand a { display: block; width: 100%; padding: 20px 15px; font-size: 22px; color: #fff; }
        .drawer-default .drawer-brand a:hover { color: #444; text-decoration: none; }
    .drawer-default .drawer-nav-title { display: block; padding: 15px 15px 0 15px; font-size: 18px; }
    .drawer-default .drawer-nav-list { padding: 0; margin: 0 0 20px 0; list-style: none; }
        .drawer-default .drawer-nav-list li { display: block; }
            .drawer-default .drawer-nav-list li a { display: block; padding: 15px; color: #888; }
            .drawer-default .drawer-nav-list li ul a { padding: 8px 20px; }
.drawer-hamberger { /* position: fixed; */ /* z-index: 1000; */ /* display: block; */ /* right: 0; */ /* top: 0px; */}
    .drawer-hamberger span { margin-top: 10px; }
        .drawer-hamberger span, .drawer-hamberger span:before, .drawer-hamberger span:after { position: absolute; display: block; width: 30px; height: 2px; cursor: pointer; content: ''; background-color: #ddd; border-radius: 1px; -webkit-transition: all .4s cubic-bezier(0.19,1,.22,1); -o-transition: all .4s cubic-bezier(0.19,1,.22,1); transition: all .4s cubic-bezier(0.19,1,.22,1); }
            .drawer-hamberger span:before { top: -10px; }
            .drawer-hamberger span:after { bottom: -10px; }
.drawer-open .drawer-hamberger span { background-color: transparent; }
    .drawer-open .drawer-hamberger span:before, .drawer-open .drawer-hamberger span:after { top: 0; }
    .drawer-open .drawer-hamberger span:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
    .drawer-open .drawer-hamberger span:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.drawer-hamberger:hover { cursor: pointer; }

@media (min-width:767px) {
    .drawer-responsive.drawer-left .drawer-toggle, .drawer-responsive.drawer-right .drawer-toggle { display: none; visibility: hidden; }
    .drawer-responsive.drawer-left .drawer-main { left: 0; }
    .drawer-responsive.drawer-right .drawer-main { right: 0; }
}

@media (min-width:768px) {
    .drawer-responsive { background-color: #222; }
        .drawer-responsive.drawer-left .drawer-main, .drawer-responsive.drawer-right .drawer-main { position: absolute; width: 150px !important; height: auto !important; overflow: visible !important; }
        .drawer-responsive.drawer-left .drawer-main { float: left; }
        .drawer-responsive.drawer-left .drawer-overlay { margin-left: 150px; }
        .drawer-responsive.drawer-right .drawer-main { float: right; }
        .drawer-responsive.drawer-right .drawer-overlay { margin-right: 150px; }
}

@media (min-width:1200px) {
    .drawer-responsive.drawer-left .drawer-main, .drawer-responsive.drawer-right .drawer-main { width: 140px !important; }
    .drawer-responsive.drawer-left .drawer-overlay { margin-left: 140px; }
    .drawer-responsive.drawer-right .drawer-overlay { margin-right: 140px; }
}