.mp-pusher{position: relative;left: 0;z-index: 1;}.mp-menu{position: absolute; /* we can't use fixed here :( */top: 0;left: 0;z-index: 1000;width: 70px;height: 100%;-webkit-transform: translate3d(-100%, 0, 0);-moz-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}.mp-level{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #fff;-webkit-transform: translate3d(-100%, 0, 0);-moz-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: #686868;;-webkit-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;-moz-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: 0.1;-webkit-transition: opacity 0.3s;-moz-transition: opacity 0.3s;transition: opacity 0.3s;}.mp-level.mp-level-overlay{cursor: pointer;}.mp-level.mp-level-overlay.mp-level.first-level::before{}.mp-pusher,.mp-level{-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;}/* overlap */.mp-overlap .mp-level.mp-level-open{-webkit-transform: translate3d(-40px, 0, 0);-moz-transform: translate3d(-40px, 0, 0);transform: translate3d(-40px, 0, 0);}/* 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;-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}/* cover */.mp-cover .mp-level.mp-level-open{-webkit-transform: translate3d(0, 0, 0);-moz-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){-webkit-transform: translate3d(-100vw, 0, 0);-moz-transform: translate3d(-100vw, 0, 0);transform: translate3d(-100vw, 0, 0);}/* content style */.mp-menu ul{margin: 0;padding: 0;list-style: none;}.mp-menu h2{margin: 0;padding: 1em;color: #fff;font-weight: normal;font-size: 1.2em;text-transform: uppercase;background-color: #789295;}.mp-menu h2 a{color: #fff;}.mp-menu.mp-overlap h2::before{position: absolute;top: 0;right: 0;margin-right: 8px;font-size: 75%;line-height: 1.8;opacity: 0;-webkit-transition: opacity 0.3s, -webkit-transform 0.1s 0.3s;-moz-transition: opacity 0.3s, -moz-transform 0.1s 0.3s;transition: opacity 0.3s, transform 0.1s 0.3s;-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);transform: translateX(-100%);}/*.mp-menu.mp-cover h2{text-transform: uppercase;letter-spacing: 1px;font-size: 1em;}*/.mp-overlap .mp-level.mp-level-overlay > h2::before{opacity: 1;-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;-moz-transition: -moz-transform 0.3s, opacity 0.3s;transition: transform 0.3s, opacity 0.3s;-webkit-transform: translateX(0);-moz-transform: translateX(0);transform: translateX(0);}.mp-menu ul li > a{display: block;padding: 5px;outline: none;box-shadow: inset 0 -1px rgba(0,0,0,0.2);text-shadow: 0 0 1px rgba(255,255,255,0.1);-webkit-transition: background 0.3s, box-shadow 0.3s;-moz-transition: background 0.3s, box-shadow 0.3s;transition: background 0.3s, box-shadow 0.3s;font-family: Arial, sans-serif;box-shadow: none;font-size: 14px;text-transform: uppercase;border-bottom: 1px solid #ddd;}.mp-menu ul li > a img{max-width: 48px;max-height: 48px;border-radius: 100%;box-shadow: 0 0 0 1px #789295; border: 1px solid #f7f7f7; margin: 5px;}.mp-menu ul li > a img.has-border{border: none;box-shadow: none;margin: 0;max-width: 60px;max-height: 60px;}.mp-menu ul li > a span{font-size: 10px;display: block;color: #686868;}.mp-menu ul li::before{position: absolute;left: 10px;z-index: -1;color: rgba(0,0,0,0.2);line-height: 3.5;}.mp-menu .first-level > ul{max-width: 70px;border-right: 1px solid #ddd;z-index: 40;}.mp-menu .first-level > ul li{text-align: center;}/*.mp-menu .first-level.mp-level-overlay > ul > li > a{border-color: #555;}*/.mp-menu .first-level > ul .second-level{opacity: 1;right: -100vw;}.mp-menu .first-level.mp-level-open{opacity: 1;}.mp-menu .first-level > ul .second-level.mp-level-open{z-index: 500;opacity: 1;position: fixed; width: 100vw; height: 100%; right: 0; left: 0;}.mp-menu .first-level > ul .second-level.mp-level-open ul > li > a{padding: 10px;}/*.mp-menu ul li{background-color: #686868;}*//*.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);}.mp-menu .mp-level.mp-level-overlay > ul > li > a,.mp-level.mp-level-overlay > ul > li:first-child > a{}.mp-level > ul > li:first-child > a:hover,.mp-level.mp-level-overlay > ul > li:first-child > a{}/* seems like Chrome 34.0.1847.131 needs the second shadow otherwise the transition breaks */.mp-back{background-color: #ddd;outline: none;color: #686868;text-transform: uppercase;letter-spacing: 1px;display: block;font-size: 14px;padding: 0.7em 1em 0.7em 1.8em;position: relative;-webkit-transition: background 0.3s;-moz-transition: background 0.3s;transition: background 0.3s;font-family: ChunkFiveRegular, Verdana, Arial, Helvetica, sans-serif;}.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-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;}