.drawer-main {
 position:fixed;
 top: 70px;
 right:0;
 width: 100%;
 height: 100%;
 overflow: hidden;
 z-index:10000;
}
.drawer-left .drawer-main {
 left: -320px;
 -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 {
 right: 0
}
.drawer-right .drawer-main {
 right: -100%;
 margin-right:-4px;
 -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
}
.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: 320px
}
.drawer-right .drawer-overlay, .drawer-right .drawer-hamberger {
 right: 0;
 z-index:9999;
 top:12px;
 -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: 0;
 z-index:99999;
 top:13px;
}
.drawer-overlay-upper {
 position: fixed;
 top: 81px;
 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:4px solid #3963b7;
 -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-brand{color:#333;font-size: 18px; padding:10px 0 10px 10%; border-bottom:1px solid #ccc;}
.drawer-default .drawer-brand a {
 display: block;
 font-size: 18px;
 color: #333;
}
.drawer-default .drawer-brand a:hover {
 color: #1e73e7;
 text-decoration: none
}
.drawer-default .drawer-nav-title {
 display: block;
 text-align:center;
 font-size: 18px
}
.drawer-default .drawer-nav-list {
 padding: 0;
 list-style: none
}
.drawer-default .drawer-nav-list li {
 display: block
}
.drawer-default .drawer-nav-list li a {
 display: block;
 color: #888
}
.drawer-default .drawer-nav-list li ul a {
}
.drawer-hamberger {
 position:absolute;
 z-index: 1000;
 display: block;
 width: 30px;
 height: 30px;
 background-color: transparent;
 border: 0;
 margin-right:20px;
}
.drawer-hamberger span {
 margin-top: 10px;
 height:30px;
}
.drawer-hamberger span, .drawer-hamberger span:before, .drawer-hamberger span:after {
 position: absolute;
 display: block;
 width: 30px;
 height: 2px;
 cursor: pointer;
 content: '';
 background-color: #fff;
 border-radius: 3px;
 line-height:80px;
 text-align:center;
 -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 {
 top: 20px
}
.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 {
 margin-top:-1px;
 -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
}