#hmenu {
    padding: 12px;
    background: #e4e4e4;
  }
  #hcheck, #hclose { display:none; }
  #hopen {
    display: block;
    width: 58px;
    cursor: pointer;
  }
  #hopen img { display: block; }
  #hclose, nav {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
  }
  #hclose {
    z-index: 2;
    width: 100%;
    background: black;
    opacity: 0.5;
    transition: 0.5s;
  }
  nav {
    z-index: 3;
    width: 330px;
    background: white;
    transition: 0.5s;
    transform: translateX(-100%);
  }
  #hcheck:checked ~ #hclose { display: block; }
  #hcheck:checked ~ nav {
    transform: translateX(0);
    box-shadow: 4px 0 12px rgba(0,0,0,0.4);
  }