*{margin:0;padding:0}body{font:14px/1.2 'Roboto',sans-serif}.container{width:80%;margin:auto;overflow:hidden}#main-header{background:#fff;text-align:center;position:fixed;margin-bottom:20px;width:100%;z-index:999;padding:8px 0;box-shadow:1px 1px 3px #d8d8d8}#logo{color:#fff;align-self:center}#logo span{color:coral}#logo a{text-decoration:none;color:#fff}#logo a:hover{color:coral}.nav-toggle{display:none}.nav-toggle-label{position:absolute;top:0;right:0;margin-right:1em;height:100%;display:flex;align-items:center}.nav-toggle-label span,.nav-toggle-label span::before,.nav-toggle-label span::after{display:block;background:#000;height:3px;width:30px;border-radius:2px;position:relative;transition:all .5s ease-in-out}.nav-toggle-label span::before,.nav-toggle-label span::after{content:'';position:absolute}.nav-toggle-label span::before{bottom:10px}.nav-toggle-label span::after{top:10px}#nav-toggle:checked ~ .nav-toggle-label span{background:#333}#nav-toggle:checked ~ .nav-toggle-label span::before{transform:rotate(45deg);bottom:0;background:#fff}#nav-toggle:checked ~ .nav-toggle-label span::after{transform:rotate(-45deg);top:0;background:#fff}#menu{position:absolute;background:#333;text-align:right;top:100%;left:0;width:100%;transform:scale(1,0);transform-origin:top;transition:transform .4s ease-in-out}#menu ul{list-style:none}#menu li{padding:10px 10px}#menu a{text-decoration:none;color:#fff;font-size:16px;text-transform:uppercase;opacity:0;transition:opacity .15s ease-in-out}#menu a:hover{color:#dfdfdf}#nav-toggle:checked+#menu{transform:scale(1,1)}#nav-toggle:checked ~ #menu a{opacity:1;transition:opacity .25s ease-in-out .35s}