/*!
* 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 {
height:100%;
overflow:hidden !important;
}

.drawer-nav {
background-color:#fffef8;
width:20rem;
height:100%;
overflow:hidden;
position:fixed;
top:0;
z-index:101;
}

.drawer-brand {
background-color:#fffef8;
}

.drawer-brand img {
vertical-align:top;
}

.drawer-menu {
text-align:center;
list-style:none;
margin:0;
padding:0;
}

.drawer-menu-item {
font-size:0.625em;
display:block;
padding:0 1em;
position:relative;
}

@media (min-width: 64.001em) {

.drawer-menu-item:before {
content:"";
display:block;
font-size:1.5em;
color:inherit;
margin-bottom:0.5em;
}

}

.drawer-menu-item:hover {
}

/*! overlay */

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

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

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

.drawer--top .drawer-nav {
box-sizing:border-box;
width:100%;
height:auto;
/*height:100%;*/
max-height:100%;
-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);
top:-100%;
left:0;
}

.drawer--top.drawer-open .drawer-nav {
-webkit-overflow-scrolling:touch;
overflow:auto;
top:0;
}

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

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

.drawer-hamburger {
background:url("../../img/drawer.svg") no-repeat center center;
background-color:transparent;
border:0;
box-sizing:content-box;
display:block;
width:60px;
height:60px;
outline:0;
padding:0;
position:fixed;
z-index:104;
top:0;
}

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

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

.drawer-open .drawer-hamburger {
background:url("../../img/close.svg") no-repeat center center;
background-color:transparent;
}

/*!------------------------------------*\
accessibility
\*!------------------------------------*/

/*!
* Only display content to screen readers
* See: http://a11yproject.com/posts/how-to-hide-content
*/

.sr-only {
border:0;
clip:rect(0, 0, 0, 0);
width:1px;
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
}

/*!
* Use in conjunction with .sr-only to only display content when it's focused.
* Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
* Credit: HTML5 Boilerplate
*/

.sr-only-focusable:active,
.sr-only-focusable:focus {
clip:auto;
width:auto;
height:auto;
margin:0;
overflow:visible;
position:static;
}

/*!------------------------------------*\
Navbar
\*!------------------------------------*/

.drawer--navbarTopGutter {
padding-top:3.75rem;
}

.drawer-navbar .drawer-navbar-header {
background-color:#fffef8;
}

.drawer-navbar {
background-color:#fffef8;
width:100%;
top:0;
z-index:102;
}

/*! .drawer-navbar modifier */

.drawer-navbar--fixed {
position:fixed;
}

.drawer-navbar-header {
box-sizing:border-box;
width:100%;
padding:0 .75rem;
position:relative;
z-index:102;
}

.drawer-navbar .drawer-brand {
display:block;
text-decoration:none;
}

@media (max-width: 64em) {

.drawer--navbarTopGutter {
padding-top:3.75rem;
}

.drawer-navbar .drawer-brand img {
width:auto;
height:2em;
text-align:left;
padding-top:0.875em;
padding-bottom:0.875em;
}

.drawer-navbar .drawer-nav {
padding-top:3.75em;
}

.drawer-navbar .drawer-menu {
padding-top:3.75em;
padding-bottom:3.75em;
}

.drawer-menu-item {
font-size:0.9375em;
padding:1em;
}

}

.drawer-navbar .drawer-brand:hover {
background-color:transparent;
}

.drawer-navbar .drawer-nav {
text-align:center;
}

@media (min-width: 64.001em) {

.drawer--navbarTopGutter {
padding-top:5.25rem;
}

.drawer-navbar {
background-color:#fffef8;
height:auto;
text-align:center;
padding:1.5em 0.75em 1.03125em;
}

.drawer-navbar .drawer-navbar-header {
border:0;
display:block;
width:auto;
padding:0;
position:relative;
float:left;
}

.drawer-navbar .drawer-menu--right {
float:right;
}

.drawer-navbar .drawer-menu li {
float:left;
}

.drawer-navbar .drawer-menu-item {
margin-left:3em;
padding-top:0;
padding-bottom:0;
}

#nav-profile .drawer-menu-item:before {
content:"Profile";
}

#nav-works .drawer-menu-item:before {
content:"Works";
}

#nav-exhibition .drawer-menu-item:before {
content:"Exhibition";
}

#nav-shop .drawer-menu-item:before {
content:"Online Shop";
}

#nav-contact .drawer-menu-item:before {
content:"Contact";
}

.drawer-navbar .drawer-hamburger {
display:none;
}

.drawer-navbar .drawer-nav {
width:auto;
overflow:visible;
padding-top:0;
position:relative;
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
float:right;
}

.drawer-navbar .drawer-menu {
padding:0.125em 0;
}

}

/*!------------------------------------*\
Container
\*!------------------------------------*/

.drawer-container {
margin-right: auto;
margin-left: auto;
}

@media (min-width: 64.001em) {

.drawer-container {
max-width:97%;
}

}