/*!
* jquery-drawer v3.2.2
* Flexible drawer menu using jQuery, iScroll and CSS.
* http://git.blivesta.com/drawer
* License : MIT
* Author : blivesta <design@blivesta.com> (http://blivesta.com/)
*/


/*!------------------------------------*\
Base
\*!------------------------------------*/

.drawer-open {
    overflow: hidden !important;
}

.drawer-nav {
    position: fixed;
    top: 75px;
    z-index: 991;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 60px;
    width: 100%;
    background: rgba(0, 0, 0, .8);
}
@media screen and (max-width: 896px){
    .drawer-nav {
        top: 65px;
        padding: 40px 20px;
    }
}
@media screen and (max-width: 480px){
    .drawer-nav {
        padding: 20px;
    }
}

.drawer-nav > * { -webkit-transform: translateZ(0px);}
.drawer-nav .flex { display: flex; margin: 0 -30px; color: #fff; line-height: 2;}
.drawer-nav .flex div { padding: 0 30px; width: 25%; opacity: 0; transition: all 2s ease;}
.drawer--top.drawer-open .drawer-nav .flex div { opacity: 1;}
.drawer-nav .flex h2 { border-bottom: 2px solid;}
.drawer-nav .flex h2 + ul { display: flex; margin: 10px 0 0; flex-wrap: wrap;}
.drawer-nav .flex h2 + ul li { width: 50%;}
.drawer-nav .flex a { position: relative; display: block; padding: 0 0 0 20px; color: #fff;}
.drawer-nav .flex a:after { position: absolute; top: 50%; left: 0; margin: -3px 0 0; width: 6px; height: 6px; border-top: 1px solid #999; border-right: 1px solid #999; content: ""; transform: rotate(45deg);}
.drawer-nav .flex a:hover { opacity: .5;}

@media screen and (max-width: 896px){
    .drawer-nav .flex { margin: 0 -15px;}
    .drawer-nav .flex div { padding: 0 15px;}
}

@media screen and (max-width: 480px){
    .drawer-nav .flex { display: block; margin: 0; font-size: 1.6rem;}
    .drawer-nav .flex div { padding: 0 0 20px; width: 100%;}
    .drawer-nav .flex a { padding: 2px 0 2px 20px;}
}

/*! overlay */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
    width: 100%;
    height: 100%;
}

.drawer-open .drawer-overlay {
    display: block;
}


/*!------------------------------------*\
Top
\*!------------------------------------*/

.drawer--top .drawer-nav {
    top: -100%;
    left: 0;
    max-height: 100%;
    width: 100%;
    height: auto;
    -webkit-transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer--top.drawer-open .drawer-nav {
    top: 75px;
}

@media screen and (max-width: 896px) {
    .drawer--top.drawer-open .drawer-nav {
        top: 65px;
    }
}

.drawer--top .drawer-hamburger,
.drawer--top.drawer-open .drawer-hamburger {
    right: 0;
}


/*!------------------------------------*\
Hamburger
\*!------------------------------------*/

.drawer-hamburger {
    position: absolute;
    top: 0;
    display: block;
    box-sizing: content-box;
    width: 24px;
    padding: 10px 0;
    outline: 0;
    border: 0;
    background: transparent;
    -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.drawer-hamburger:hover {
    background-color: transparent;
    cursor: pointer;
}

.drawer-hamburger-icon {
    position: relative;
    display: block;
    margin-top: 5px;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
    width: 100%;
    height: 2px;
    background: #fff;
    -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer-hamburger-icon {
    background: #fff;
}

.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
    position: absolute;
    top: -8px;
    left: 0;
    content: '';
}

.drawer-hamburger-icon:after {
    top: 8px;
}

.drawer-open .drawer-hamburger-icon {
    background: transparent;
}

.drawer-open .drawer-hamburger-icon:before,
.drawer-open .drawer-hamburger-icon:after {
    top: 0;
}

.drawer-open .drawer-hamburger-icon:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.drawer-open .drawer-hamburger-icon:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}