@media (max-width:767px){nav + *{position:relative;}
nav ul{max-height:25em;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-transition:max-height .4s;transition:max-height .4s;will-change:max-height;margin:0;padding:0;list-style:none;}
nav a{display:block;padding:1.2rem;color:#333;background:#f5f5f5;text-decoration:none;margin-bottom:2px;}
nav a:hover,
nav a:focus,
nav a:active{background:#eee;}
nav.is-closed ul{max-height:0;overflow:hidden;}
nav > button{position:absolute;top:.8rem;right:1rem;z-index:1;height:3rem;width:3rem;background-color:transparent;padding:0;outline:0;border:1px solid #333;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transition:-webkit-transform .2s;transition:transform .2s;}
nav > button::-moz-focus-inner{border:0;}
nav > button::after, nav > button::before{content:"";position:absolute;top:15%;right:40%;bottom:15%;left:40%;background-color:#333;border-radius:10px;-webkit-transition:-webkit-transform .2s;transition:transform .2s;}
nav > button::before{top:40%;right:15%;bottom:40%;left:15%;}
nav:not(.is-closed) > button,
nav:not(.is-closed) > button::before{-webkit-transform:rotate(90deg) translateZ(0);-ms-transform:rotate(90deg) translateZ(0);transform:rotate(90deg) translateZ(0);}
.visually-hidden{position:absolute !important;clip:rect(1px, 1px, 1px, 1px);overflow:hidden;height:1px;width:1px;}
}