body{margin:0;padding:0;} *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .layoutWidth{margin:0px auto;padding:0px;max-width:1200px;} header{position:relative;} nav.headerNav{margin:0;padding:0;} .mainLayout{margin-top:20px;margin-bottom:20px;} .mainContent{margin:0;padding:12px;} nav.mainNav{position:absolute;top:0;right:0;left:0;display:none;margin:0;padding:0 30% 200px 0;z-index:9999;background-color:rgba(50,50,50,0.5);overflow-y:scroll;max-height:100vh;} nav.mainNav > div:first-child{max-width:300px;} #mainMenuDiv{background-color:#fff;} .mainSidebar{margin:0;padding:0;} nav.mainNav ul{margin:0;padding:0;list-style-type:none;background-color:#fff;} nav.mainNav ul li{margin:0;padding:0;} .mainLayout{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-moz-box-wrap:wrap;-webkit-box-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flexbox-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;} .mainContent{-webkit-box-flex:1 1 100%;-moz-box-flex:1 1 100%;width:100%;-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;-webkit-box-ordinal-group:2;-moz-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;order:2;} .mainSidebar{-webkit-box-flex:1 1 100%;-moz-box-flex:1 1 100%;width:100%;-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;-webkit-box-ordinal-group:3;-moz-box-ordinal-group:3;-ms-flex-order:3;-webkit-order:3;order:3;} nav.mainNav{-webkit-box-flex:1 1 100%;-moz-box-flex:1 1 100%;width:100%;-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;-webkit-box-ordinal-group:1;-moz-box-ordinal-group:1;-ms-flex-order:1;-webkit-order:1;order:1;} @media all and (min-width:600px){.mainContent{-webkit-box-flex:2 2 50%;-moz-box-flex:2 2 50%;width:50%;-webkit-flex:2 2 50%;-ms-flex:2 2 50%;flex:2 2 50%;} .mainSidebar{-webkit-box-flex:1 1 350px;-moz-box-flex:1 1 350px;width:350px;-webkit-flex:1 1 350px;-ms-flex:1 1 350px;flex:1 1 350px;border-top:0;} } @media all and (min-width:1050px){body{padding:2em;} header .menu-icon{display:none;} nav.mainNav{position:relative;display:block;padding:0;background-color:#fff;height:inherit;overflow-y:inherit;} #mainMenuDiv{position:relative;display:block;overflow:inherit;} nav.mainNav ul{display:block;} nav.mainNav ul li{width:100%;} .mainLayout{-moz-box-wrap:nowrap;-webkit-box-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flexbox-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;} nav.mainNav{display:block;-webkit-box-flex:1 1 200px;-moz-box-flex:1 1 200px;width:200px;-webkit-flex:1 1 200px;-ms-flex:1 1 200px;flex:1 1 200px;-webkit-box-ordinal-group:1;-moz-box-ordinal-group:1;-ms-flex-order:1;-webkit-order:1;order:1;z-index:inherit;} .mainContent{-webkit-box-flex:2 2 50%;-moz-box-flex:2 2 50%;width:50%;-webkit-flex:2 2 50%;-ms-flex:2 2 50%;flex:2 2 50%;} .mainSidebar{-webkit-box-flex:1 1 350px;-moz-box-flex:1 1 350px;width:350px;-webkit-flex:1 1 350px;-ms-flex:1 1 350px;flex:1 1 350px;} }