*{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:'Trebuchet MS',sans-serif;background-color:#e0dcdc}header{background-color:#0d0c0c;box-shadow:0 3px 2px 1px rgba(0,0,0,.2);margin-bottom:20px}.logo{height:25px;display:inline-block;text-decoration:none}.main-nav{max-width:1000px;margin:0 auto;padding:8px}.menu{display:inline-block;margin:0;margin-left:20px;list-style:none;padding:0}.menu li{display:inline-block;vertical-align:18px}.menu li>a{text-decoration:none;color:#fff;padding:0 14px;display:block;font-size:18px}.menu li>a:hover{color:#fee000;border-bottom:4px solid #fee000}.menu li.close{display:none;font-size:36px;color:#646464;cursor:pointer}.mobile-btn{display:none;float:right;cursor:pointer;font-size:40px;color:#fff}@media (max-width:768px){.menu{position:absolute;top:0;right:0;display:block;background-color:#fff;width:300px;height:100%;z-index:3;transform:translateY(100vh);transform:scale(0);transition:all .2s ease-in-out;transform-origin:100% 0}.menu.open{transform:translateY(0);transform:scale(1)}.menu li{display:block;padding:0 14px;border-bottom:1px solid #e5e5e5}.menu li>a{border:none;border-left:2px solid transparent;color:#333;line-height:40px}.menu li>a:hover{color:#333;border:none;border-left:2px solid #fee000}.menu li.close{display:block;text-align:right}.mobile-btn{display:inline-block}.overlay{position:fixed;top:0;left:0;height:100%;width:100%;background-color:rgba(0,0,0,.4);opacity:0;z-index:-1;transition:opacity .1s linear}.overlay.open{z-index:1;opacity:1}}main{max-width:1000px;margin:0 auto;background-color:#eee;box-shadow:0px 5px 20px 0 rgba(0,0,0,.2);padding:15px}footer{background-color:#0d0c0c;color:#fff;padding:20px;text-align:center;margin-top:20px}.alignleft,img.alignleft{margin-right:1.5em;display:inline;float:left}.alignright,img.alignright{margin-left:1.5em;display:inline;float:right}.aligncenter,img.aligncenter{margin-right:auto;margin-left:auto;display:block;clear:both}