/**,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}*/

/*html, body, form, .scroller { height: 100%; }

.scroller,
.scroller-inner { position: relative; }

.scroller { overflow-x:hidden; }

.site-container { position: relative; overflow: hidden; height: 100%; }*/

.menu-trigger { position: relative; padding-left: 60px; font-size: 0.9em; }

.menu-trigger:before { position: absolute; top: 2px; left: 0; width: 40px; height: 6px; background: #fff; box-shadow: 0 6px #34495e, 0 12px #fff, 0 18px #34495e, 0 24px #fff; content: ''; }

.mp-pusher { position: relative; left: 0; height: 100%; z-index: 105; }

.mp-menu { position: absolute; top: 0; left: 0; z-index: 1; width: 300px; height: 100%; background: #ededed; color: black; -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); /* we can't use fixed here :( */ }

.mp-menu > .mp-level { overflow-y: scroll; }

.mp-level { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ededed; color: black; -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }

.mp-menu.mp-active { z-index: 100; }

/* overlays for pusher and for level that gets covered */
.mp-pusher::after,
.mp-level::after,
.mp-level::before { position: absolute; top: 0; right: 0; width: 0; height: 0; content: ''; opacity: 0; }

.mp-pusher::after,
.mp-level::after { background: rgba(0,0,0,0.3); -moz-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s; -o-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s; -webkit-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s; transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s; }

.mp-level::after { z-index: -1; }

.mp-pusher.mp-pushed::after,
.mp-level.mp-level-overlay::after { width: 100%; height: 100%; opacity: 1; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }

.mp-level.mp-level-overlay { cursor: pointer; }

.mp-level.mp-level-overlay.mp-level::before { width: 100%; height: 100%; background: transparent; opacity: 1; }

.mp-pusher,
.mp-level { -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; }

/* First level */
.mp-menu > .mp-level,
.mp-menu > .mp-level.mp-level-open,
.mp-menu.mp-overlap > .mp-level,
.mp-menu.mp-overlap > .mp-level.mp-level-open { box-shadow: none; -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/* cover */
.mp-cover .mp-level.mp-level-open { -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) { -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }

/* content style */
.mp-menu ul { margin: 0; padding: 0; list-style: none; }

.mp-menu .mp-heading { font-size: 2em; display: block; padding: 1em;  }

.mp-menu ul li { margin-bottom: 0; line-height: normal; }
.mp-menu ul li > a { text-transform: uppercase; color: #000; display: block; padding: 0.7em 1em 0.7em 1.8em; outline: none; box-shadow: inset 0 -1px rgba(0,0,0,0.2); -webkit-text-shadow: 0 0 1px rgba(255,255,255,0.1); text-shadow: 0 0 1px rgba(255,255,255,0.1); font-size: 17px; -moz-transition: background 0.3s, box-shadow 0.3s; -o-transition: background 0.3s, box-shadow 0.3s; -webkit-transition: background 0.3s, box-shadow 0.3s; transition: background 0.3s, box-shadow 0.3s; }

.mp-menu ul li::before { position: absolute; left: 10px; z-index: -1; color: rgba(0,0,0,0.2); line-height: 3.5; }

.mp-level > ul > li:first-child > a { box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2); }

.mp-menu ul li a:hover,
.mp-level > ul > li:first-child > a:hover { background: rgba(0,0,0,0.2); box-shadow: inset 0 -1px rgba(0,0,0,0); }

.mp-menu .mp-level.mp-level-overlay > ul > li > a,
.mp-level.mp-level-overlay > ul > li:first-child > a { box-shadow: inset 0 -1px rgba(0,0,0,0); }

a.mp-back { position: relative; display: block; padding: 1em; outline: none; background: rgba(0,0,0,0.1); box-shadow: inset 0 1px rgba(0,0,0,0.1); color: #000; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 10px; -moz-transition: background 0.3s; -o-transition: background 0.3s; -webkit-transition: background 0.3s; transition: background 0.3s; }

a.mp-back::after { position: absolute; right: 10px; color: rgba(0,0,0,0.3); content: "\f101"; font-size: 2em; font-family: FontAwesome; font-weight: 100; line-height: .8em; }

.mp-menu .mp-level.mp-level-overlay > .mp-back,
.mp-menu .mp-level.mp-level-overlay > .mp-back::after { background: transparent; box-shadow: none; color: transparent; }

/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
/* We'll show the first level only */
.no-csstransforms3d .mp-menu,
.no-js .mp-menu { display: none; }
/*.no-csstransforms3d .mp-pusher,
.no-js .mp-pusher { padding-left: 300px; }

.no-csstransforms3d .mp-menu .mp-level,
.no-js .mp-menu .mp-level { display: none; }

.no-csstransforms3d .mp-menu > .mp-level,
.no-js .mp-menu > .mp-level { display: block; }*/