/* code for navigation 
   source: https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp */

   {
      margin: 0;
      padding: 0; 
    }
    */
    
    
    #nav-icon3 {
      width: 24px;
      height: 45px;
      position: relative;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
      -o-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
      cursor: pointer;
    }
    
    #nav-icon3 span {
      display: block;
      position: absolute;
      height: 2px;
      width: 100%;
      /* same as base font color */
      background: rgba( 0, 0, 0, .7 );
      border-radius: 9px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out;
    }
    
    #nav-icon3 span:nth-child(1) {
      top: 0px;
    }
    
    #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
      top: 8px;
    }
    
    #nav-icon3 span:nth-child(4) {
      top: 16px;
    }
    
    #nav-icon3.open span {
      background: #ffffff;
    }
    
    #nav-icon3.open span:nth-child(1) {
      top: 18px;
      width: 0%;
      left: 50%;
    }
    
    #nav-icon3.open span:nth-child(2) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    
    #nav-icon3.open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    
    #nav-icon3.open span:nth-child(4) {
      top: 8px;
      width: 0%;
      left: 50%;
    }
    
    /*  Overlay, etc. 
     *
     *  		https://codepen.io/riogrande/pen/gbXxdx/
     */
    
    /* Hamburger Nav
          https://codepen.io/riogrande/pen/gbXxdx/
    */
    
    .overlay {
          display:none;
        position:fixed;
        top:0;
        height:100%;
        width:100%;
        background:#333;
        overflow:auto;
        z-index:99;
    }
    .wrap {
        color:#e9e9e9;
        text-align:center;
        max-width:90%;
        margin:0 auto;
    }