/*!
 * drawer v2.0.0
 * 
 * Licensed under MIT
 * Author : blivesta
 * 
 */
.drawer-main { position: fixed; z-index:10; top: 0; width: 280px; height: 100%; overflow: hidden; }
.drawer-left .drawer-main { left: -280px; -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: -280px; -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; z-index:6;}
.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: 280px; }
.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: 280px; }
.drawer-overlay-upper { position: fixed; top: 0; z-index: 1100; 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: #fff; border-left:2px solid #387d39; -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{}
.drawer-default .drawer-brand a { display: block; width: 94%; padding: 15px 15px; font-size: 20px; color: #387d39; line-height:36px; text-align:left;  margin:0 0 1% 3%; border-bottom:1px solid #ddd;} 
.drawer-default .drawer-brand a span.span1{width:25px; float:left; margin:0px 20px 0 50px;  }
.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: relative; z-index: 1000; display: block; width: 70px; height: 70px; padding: 20px; background-color: transparent; border: 0; float:right; margin-right:0px;}
.drawer-hamberger span { margin-top: 10px; }
.drawer-hamberger span, .drawer-hamberger span:before, .drawer-hamberger span:after { position: absolute; display: block; width: 40px; height: 3px; cursor: pointer; content: ''; background-color: #000; 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: -12px; }
.drawer-hamberger span:after { bottom: -12px; }
.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: #fff; }
    .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: 280px !important; }
    .drawer-responsive.drawer-left .drawer-overlay { margin-left: 280px; }
    .drawer-responsive.drawer-right .drawer-overlay { margin-right: 280px; }
}