.drawer-main { position: fixed; top: 0; width: 60%; height: 100%; overflow: hidden}

.drawer-left .drawer-main { left: -60%; -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: -60%; -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; padding-top: 1.02rem; }

.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: 60%}

.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: 60%}

.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: #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-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; width: 1rem; height: 1rem; padding: .3rem; background-color: transparent; border: 0}

.drawer-hamberger span { margin-top: 10px; right: .3rem; }

.drawer-hamberger span,
.drawer-hamberger span:before,
.drawer-hamberger span:after { position: absolute; display: block; width: .6rem; height: 2px; cursor: pointer; content: ''; background-color: #999; 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} { background-color: #222}er-right .drawer-main { width: 60%!important}