:root{--ink:#000;--panel:#fff;--panel-line:#c0c7cb}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Open Sans,Arial,sans-serif}.hamburger-menu{display:inline-block;padding-left:102px;position:relative}.menu-toggle{background:transparent;border:none;cursor:pointer;height:28px;padding:0;position:relative;width:34px;z-index:30}.menu-toggle .bar{background:var(--ink);border-radius:2px;height:3px;left:0;position:absolute;transition:transform .35s cubic-bezier(.65,0,.35,1),opacity .2s ease,top .35s cubic-bezier(.65,0,.35,1);width:100%}.menu-toggle .bar:first-child{top:3px}.menu-toggle .bar:nth-child(2){top:12.5px}.menu-toggle .bar:nth-child(3){top:22px}.menu-toggle.open .bar:first-child{top:12.5px;transform:rotate(45deg)}.menu-toggle.open .bar:nth-child(2){opacity:0;transform:scaleX(.2)}.menu-toggle.open .bar:nth-child(3){top:12.5px;transform:rotate(-45deg)}.menu-panel{background:var(--panel);box-shadow:0 0 4px rgba(0,0,0,.25);max-height:0;opacity:0;overflow:hidden;position:absolute;right:0;top:100%;transform:translateY(-8px);transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,transform .4s cubic-bezier(.4,0,.2,1);width:300px;z-index:15}.menu-panel.open{max-height:400px;opacity:1;transform:translateY(0)}.menu-panel a{border-bottom:1px solid var(--panel-line);color:#000;display:block;font-size:18px;font-weight:700;letter-spacing:2px;opacity:0;padding:16px;text-align:center;text-decoration:none;text-transform:uppercase;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease,background .2s ease,padding-left .2s ease}.menu-panel a:last-child{border-bottom:none}.menu-panel.open a{opacity:1;transform:translateY(0)}.menu-panel.open a:first-child{transition-delay:.1s}.menu-panel.open a:nth-child(2){transition-delay:.16s}.menu-panel.open a:nth-child(3){transition-delay:.22s}.menu-panel.open a:nth-child(4){transition-delay:.28s}