.m-nav {
     display: none;
     z-index: 3;
 }

.m-nav.on {
    display: block;
    text-align: left;
    position: fixed;
    top: 0;
    bottom: 0;
    overflow-y: scroll;
    padding-top: 12em;
}
 
 
 .m-nav.on::-webkit-scrollbar {
     display: none;
   }
  
   /* Hide scrollbar for IE, Edge and Firefox */
   .m-nav.on {
     -ms-overflow-style: none;  /* IE and Edge */
     scrollbar-width: none;  /* Firefox */
   }
 
 
 .tog {
     display: none;
 }
 
 
 .toggle {
     cursor: pointer;
     overflow: hidden;
     width: 50px;
     height: 27px;
     background: transparent;
     z-index: 9;
     border-radius: 10px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 
 .line-toggle {
     position: absolute;
     display: block;
     width: 30px;
     height: 2px;
     background: black;
     border-radius: 5px;
     transition: all .6s;
 }
 
 
 .line-toggle:first-child {
     transform: translateY(-5px) translateX(-2px);
     width: 50px;
     transition-delay: 0s;
 }
 
 
 .toggle .line-toggle:nth-child(2) {
     transition-delay: .12s;
 }
 
 
 .line-toggle:last-child {
     transform: translateY(5px) translateX(-2px);
     width: 50px;
     transition-delay: 0s;
 }
 
 
 .toggle.activate .line-toggle:first-child {
     background: black;
     transform: translateY(0) translateX(0) rotate(45deg);
     width: 40px;
     height: 2px;
     transition-delay: .1s;
 }
 
 
 .toggle.activate .line-toggle:nth-child(2) {
     transform: translateX(110px);
     transition-delay: 0s;
 }
 
 
 .toggle.activate .line-toggle:last-child {
     background: black;
     transform: translateY(0) translateX(0) rotate(314deg);
     width: 40px;
     height: 2px;
     transition-delay: .1s;
 }


  @media only screen and (max-width: 991px) {
     .tog {
         display: block;
     }
}