/**,
*: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%; }*/
body { overflow-x: hidden; }
body, html, form { height: 100%; }
#scroll-wrapper { height: 100%; position: relative; z-index: 0; }
#site-container { z-index: 10; position: relative; height: 100%; }
.menu-trigger { display:none; margin:25px 12px 0 0; float:right; background: #fb8200; width:40px; height:30px; font-size: 2em; padding:10px 0 0 0; }

.menu-trigger:before { position:relative; text-align:center; content: "\f0c9"; font-family:FontAwesome; color:#ffffff; display:block; }

.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%; -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: #fb8200; -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); }

/* 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; font-family:'OpenSans-Local'; font-weight:100; }

.mp-menu ul li { margin-bottom: 0; line-height: normal; }
.mp-menu ul li > a { text-transform:none; font-family:"OpenSans-Local"; font-weight:100; color:#ffffff; 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: #fff; text-transform: none; 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:hover { color:#ffffff; }
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; }*/