div#menu {
     
     position: fixed;
     right: -8.0rem;
     top: 0;
     
     width: 8.0rem;
     height: 100vh;
     
     z-index: 9999;
     
 }
 
 #menu > button.icon {
     display: block;
     height: 40px;
     width: 40px;
     position: absolute;
     right: 8.0rem;
     top: 0;
     margin: 8px 8px 0 0;
     background-color: #20A0FF;
     opacity: 0.8;    
     border: none;
     border-radius: 8px;
     cursor: pointer;
     background-size: 32px 32px;
     background-repeat: no-repeat;
     background-position: center;
     background-image: url('../images/icons/menu.png');  
 }
 #menu > button.icon.show {
     background-image: url('../images/icons/cross.png');  
 }
 #menu > button.icon:hover {
     opacity: 1.0;
 }
 
 #menu > nav {           
     
     position: relative;
     left: 0.0rem;
     top: 56px;
     
     z-index: 99;
     
     background: transparent;           
     
 }
 #menu > nav > ul {
     list-style: none;
 }
 
 #menu > nav > ul > li {
     transition-duration: 0.25s;
     transition-delay: calc(var(--j) * 0.2s);
 }
 #menu.show > nav > ul > li {
     transform: translateX(calc(-8.2rem));
     transition-delay: calc(var(--i) * 0.2s);
 }
 
 #menu > nav > ul > li {
     
     width: 8.2rem;
     
     background: #20A0FF;
     color: #ffffff;
     
     margin: 0 0 8px 0;
     padding: 4px;
     border-radius: 12px 0 0 12px;
     
     opacity: 0.8;
     
     font-size: 1.2rem;
     
     cursor: pointer;
     
 }
 
 #menu > nav > ul > li:hover {
     opacity: 1.0;
 }
 
 #menu > nav > ul > li > a {
    display: inline-block;
    width: 100%;
    color: #ffffff;            
    font-weight: 600;            
    text-decoration: none;
 }