#close-mobile-menu-button-li { display:none; }
body.open #close-mobile-menu-button-li { display:list-item; }

@media (min-width: 801px) {

button.menu-button { display: none; }
nav#tognav { display: none; }
}

 @media (max-width: 800px) {

button.menu-button { display: inherit; }
nav#tognav { display: inherit;  }
header nav { display: none; }

#tognav ul {list-style: none;
     margin: 0;
     padding: 0;
}
#tognav ul li {

     padding: 6px 20px;
     font-size: calc(1em + 1vw);
}
 button.menu-button {opacity: 0.8;
     background-color: #d9d9d9;
     position: fixed;
     z-index: 9006;
     top: calc( 4.25vw + 1.25em );
     left: auto; right: 4vw;
     border: none;
     width: 36px;
     height: 30px;
     outline: none; padding: 1em; border: 1em solid #d9d9d9; border-radius: 50%;
     transition: opacity 0.2s ease-out;
}
 button.menu-button:before {content: "";
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     right: auto;
     width: 100%;
     background: linear-gradient(to bottom, #444444, #444444 20%, transparent 20%, transparent 40%, #444444 40%, #444444 60%, transparent 60%, transparent 80%, #444444 80%, #444444 100%);
     transition: opacity 0.2s ease-out, width 0.2s 0.2s ease-out;
}
 button.menu-button:after {opacity: 0;
     content: '×';
     color: #444;
     position: absolute;
     top: 16px;
     left: -4px;
     font-size: 76px;
     line-height: 0;
     transition: opacity 0.4s ease-out;
}
 button.menu-button:active {transform: translateY(2px);
}
 button.menu-button:hover {opacity: 1;
}

 .open button.menu-button {opacity: 1; background-color: transparent; border-color: rgba(0,0,0,0);
}
 .open button.menu-button:before {opacity: 0;
     width: 0;
}
 .open button.menu-button:after {opacity: 1;
     transform: translate3d(0, 0, 0) rotate(0deg); /* try 90, 180, 360 deg etc. */
     transition: transform 0.45s 0.9s ease-out, opacity 0.45s 0.9s ease-out;
}

nav#tognav ul li a { color: #333; }

 nav#tognav {

     z-index: 9004;
     position: fixed;
     top: -100%;
     left: 0;
     width: 100%;
     height: 100%;
     transform: translate3d(0, 0, 0);
     backface-visibility: hidden;
     overflow: hidden;
}
 nav#tognav:before {content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     background: rgba(255,255,255, 0.9);
     width: 100%;
     height: 0;
     padding-bottom: 100%;
     border-radius: 100%;
     transform: scale(0.04), translateY(9999px);
     overflow: hidden;
}
 .open nav#tognav {top: 0;
}
 .open nav#tognav:before {animation: menu-animation 0.8s ease-out forwards;
}
 ul.menu {
     min-width: 75vw; /* m */
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate3d(-50%, -50%, 0);
     backface-visibility: hidden;
     perspective: 1000;
}

ul.menu li a { font-weight: 600; position:relative; z-index: 9999 !important; } /* z-index won't work without position */

 ul.menu li {opacity: 0;
     text-align: center;
     transform: translate3d(0, 36px, 0);
}
 ul.menu li:before {content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     left: auto;
     background-color: white;
     height: 100%;
     width: 0;
     overflow: hidden;
     transition: width 0.14s ease-out;
}
 ul.menu li:after {opacity: 0;
     content: attr(data-text);
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     color: red;
     overflow: hidden;
     transform: translate(-24px, 6px);
     transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

 .open ul.menu li {opacity: 1;
     transform: translate3d(0, 0, 0);
     transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
 .open ul.menu li:nth-child(1) {transition-delay: 0.7s;
}
 .open ul.menu li:nth-child(2) {transition-delay: 0.8s;
}
 .open ul.menu li:nth-child(3) {transition-delay: 0.9s;
}
 .open ul.menu li:nth-child(4) {transition-delay: 1s;
}
 .open ul.menu li:nth-child(5) {transition-delay: 1.1s;
}
 .open ul.menu li:nth-child(6) {transition-delay: 1.2s;
}
 .open ul.menu li:nth-child(7) {transition-delay: 1.3s;
}
 .open ul.menu li:nth-child(8) {transition-delay: 1.4s;
}
 .open ul.menu li:nth-child(9) {transition-delay: 1.5s;
}
 .open ul.menu li:nth-child(10) {transition-delay: 1.6s;
}
 .open ul.menu li:nth-child(11) {transition-delay: 1.7s;
}
 .open ul.menu li:nth-child(12) {transition-delay: 1.8s;
}

 .open article {transform: scale(0.92);
     transition: transform 0.2s 0.41s ease-out;
}
 @keyframes menu-animation {0% {opacity: 0;
         transform: scale(0.01) translateY(100%);
    }
     30% {transform: scale(0.02) translateY(0);
         transition: ease-out;
    }
     45% {transform: scale(0.03) translateY(0);
    }
     60% {opacity: 1;
         transform: scale(0.05) translateY(0px);
    }
     75% {transform: scale(0.7);
    }
     99.9% {height: 0;
         padding-bottom: 100%;
         border-radius: 100%;
    }
     100% {transform: scale(2);
         height: 100%;
         padding-bottom: 0;
         border-radius: 0;
    }
}
}