/*
  Hamburger Menu
  
  01.00.00 (2016/04/15)
  - Initial Release
*/

figure > img, main, nav a, picture > img { display: block }
a { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; text-decoration: none }
a { background-color: transparent }
*, *::after, *::before { box-sizing: border-box }

/***** Sidebar *****/
body { position: relative }
body.sdbr-show { overflow: hidden }
.m16-sdbr, .m16-cont { -webkit-transition: -webkit-transform .5s ease-in-out; transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out; }
.m16-cont { }
.m16-cont.sdbr-show:before { background-color: rgba(0, 0, 0, .5); content: ""; height: 100%; overflow: hidden; position: fixed; top: 0; width: 100%; z-index: 5000 }
.m16-sdbr { background: #555; color: #FFF; height: 100%; left: 0; padding-top: 55px; position: fixed; top: 0; width: 300px; z-index: 5001; -webkit-transform: translate(-300px); transform: translate(-300px); }
.m16-sdbr.show { overflow-y: auto; -webkit-transform: translate(0); transform: translate(0); }

/***** Icon *****/
.m16-h { content: ' '; height: 45px }
.m16-hamb { background: #F4811E; border-radius: 100%; display: inline-block; height: 40px; margin-top: 5px; position: relative; text-align: center; width: 40px; z-index: 5002 }
.m16-hamb:hover { cursor: pointer }
.m16-hamb > i { background: #FFFFFF; display: block; position: absolute; height: 3px; left: 12px; right: 12px; top: 21px; transition: background .2s; -webkit-transition: background 0.2s; }
.m16-hamb > i:before { background-color: #FFFFFF; content: ''; display: block; left: 0; position: absolute; height: 3px; top: -8px; width: 100%; -webkit-transition-property: top, -webkit-transform; transition-property: top, transform; -webkit-transition-duration: .3s, .3s; transition-duration: .3s, .3s; -webkit-transition-delay: .3s, 0s; transition-delay: .3, 0s; }
.m16-hamb > i:after { background-color: #FFFFFF; bottom: -8px; content: ''; display: block; height: 3px; left: 0; position: absolute; width: 100%; -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, transform; -webkit-transition-duration: .3s, .3s; transition-duration: .3s, .3s; -webkit-transition-delay: .3s, 0s; transition-delay: .3s, 0s; }
.m16-hamb.active > i { background: transparent }
.m16-hamb.active > i:before, .m16-hamb.active > i:after { -webkit-transition-duration: .3s, .3s; transition-duration: .3s, .3s; -webkit-transition-delay: .3s, 0s; transition-delay: 0s, 0.3s; }
.m16-hamb.active > i:before { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.m16-hamb.active > i:after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

/**** Menu */
.m16 { border-bottom: 1px dotted #EEE }
.m16 ul { list-style: outside none none; margin: 0; padding: 0 }
.m16-btn, .m16-link { color: #FFF !important; outline: 0 !important }
.m16-link { font-family: 'Open Sans', sans-serif; font-size: 14px; transition: color .2s }
.m16-link:hover { color: #F4811E !important }
.m16-btn { /*border-left: 1px dotted #EEE;*/ display: block; height: 100%; line-height: 1; padding: 19px; position: absolute; right: 0; top: 0; transition: background .2s, color .2s; width: 54px }
.m16-btn:hover { background: #000 }
.m16-btn > div { color: #CCC; font-weight: bold; transition: transform .2s ease-in-out; }
.m16-btn > div:hover { color: #FFF }
.m16-btn.active > div { transform: rotate(45deg) }
.m16-toggle-btns { position: relative }
.m16-toggle-btns > .m16-link { width: 246px }
.m16-level0 a { text-decoration: none }
.m16-level0 > li { border-top: 1px dotted #EEE }
.m16-level0 .m16-link { padding: 15px 20px }
.m16-level1 { background-color: #444; }
.m16-level1 .m16-link { padding: 15px 15px 15px 30px }
.m16-level1 > li + li { border-top: 1px dotted #E9E9E9 }
.m16-level1 .m16-btn { border-color: #E9E9E9 }
.m16-level2 { background-color: #333 }
.m16-level2 .m16-link { padding: 15px 15px 15px 40px }
.m16-level3 { background-color: #222 }
.m16-level3 .m16-link { padding: 15px 15px 15px 50px }
.m16-level4 { background-color: #111 }
.m16-level4 .m16-link { padding: 15px 15px 15px 60px }
.m16-submenu { display: none }