/*!
 * 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: 0;
    z-index: 101;
    overflow: hidden;
    width: 50vw;
    height: 100%;
    background: #fff;
    font-family: 'Libre Baskerville', serif;
}
@media screen and (max-width: 768px){
    .drawer-nav {
        width: 100vw;
    }
}

.menu-wrap { width: 50vw; height: 100%; line-height: 1;}
.menu-wrap > .inner{ padding: 75px 100px 100px;}
.menu-wrap > .inner > ul{ display: flex; font-size: 1.8rem; flex-wrap: wrap;}
.menu-wrap > .inner > ul > li{ padding: 75px 0 0; width: 50%;}
.menu-wrap .sub-menu{ font-size: 1.2rem;}
.menu-wrap .sub-menu > li{ padding: 30px 0 0;}
.menu-wrap .list-menu{ display: flex; padding: 150px 0 0; font-size: 1.2rem;}
.menu-wrap .list-menu > li{ padding: 0 20px 0 0;}

@media screen and (max-width: 768px){
    .menu-wrap { width: 100vw;}
    .menu-wrap > .inner{ padding: 24vw 6.666666667vw 20vw;}
    .menu-wrap > .inner > ul{ flex-direction: column; font-size: 4.266666667vw;}
    .menu-wrap > .inner > ul > li{ padding: 8vw 2.666666667vw; width: 100%; border-bottom: 0.266666667vw solid #c9caca;}
    .menu-wrap > .inner > ul > li > a{ display: block;}
    .drop > a{ position: relative; display: inline-block; padding: 0 30px 0 0;}
    .drop > a:before{ position: absolute; top: 50%; right: 0; width: 12px; height: 1px; background: #000; content: ""; transform: translate(0,-50%);}
    .drop > a:after{ position: absolute; top: 50%; right: 0; width: 12px; height: 1px; background: #000; content: ""; transition: all .2s ease-in-out; transform: rotate(90deg) translate(0,-50%);}
    .drop > a.open:after{ transform: rotate(180deg);}
    .drop > a{ display: block; padding: 0;}
    .menu-wrap .sub-menu{ display: none;}
    .menu-wrap .drop a + .sub-menu{ display: none;}
    .menu-wrap .sub-menu > li{ padding: 6.666666667vw 0 0; font-size: 3.2vw;}
    .menu-wrap .sub-menu a{ position: relative; display: block;}
    .menu-wrap .list-menu{ padding: 4vw 0 0; font-size: 2.666666667vw; flex-direction: column;}
    .menu-wrap .list-menu > li{ padding: 4vw 0 0;}
}

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .1);
}

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

/*!------------------------------------*\
    Left
\*!------------------------------------*/

.drawer--left .drawer-nav {
    left: -100%;
    -webkit-transition: left 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: left 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

@media screen and (max-width: 768px){
}

.drawer--left.drawer-open .drawer-nav,
.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger { left: 0;}
.drawer--left.drawer-open .drawer-nav{ overflow: auto; -webkit-overflow-scrolling: touch;}
.drawer--left.drawer-close .drawer-nav{ left: -100%; transition: all 1s ease;}

@media screen and (max-width: 768px){
    .drawer--left.drawer-close .drawer-nav{ transition: all 1s ease;}
}

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

.drawer-hamburger {
    display: block;
    width: 30px;
    height: 30px;
    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);
}

@media screen and (max-width: 768px){
    .drawer-hamburger {
        width: 4.533333333vw;
        height: 4.533333333vw;
    }
}

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

.drawer-hamburger-icon {
    position: relative;
    display: block;
}

.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after{
    width: 100%;
    height: 2px;
    background: #000;
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
@media screen and (max-width: 768px){
    .drawer-hamburger-icon:before,
    .drawer-hamburger-icon:after{ height: 0.266666667vw;}
}

.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after { position: absolute; content: '';}
.drawer-hamburger-icon:before{ top: 50%; left: 0; transform: translate(0,-50%);}
.drawer-hamburger-icon:after { top: 0; left: 50%; transform: translate(-50%,0) rotate(90deg);}

.drawer-open .drawer-hamburger-icon { background: transparent;}
.drawer-open .drawer-hamburger-icon:before { transform: translate(0,-50%) rotate(180deg);}
.drawer-open .drawer-hamburger-icon:after { opacity: 0; transform: translate(-50%,0) rotate(180deg);}