/* Original by Code Boxx */
/* https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/#sec-download */

/* [ON BIG SCREEN] */
/* (A) WRAPPER */
#hamnav {
  width: 100%;
  background: #122b45;
}

/* (B) HORIZONTAL MENU ITEMS */
#hamitems { display: flex; }
#hamitems a {
  flex-grow: 1;
  flex-basis: 0;
  padding: 10px;
  
  text-decoration: none;
  text-align: center;
  color: #ffffb3;
}
#hamitems a:hover { background: #ffffb3; color: #122b45; }

/* (C) HIDE HAMBURGER */
#hamnav label, #hamburger { display: none; }

/* [ON SMALL SCREENS] */
@media screen and (max-width: 768px){
  /* (A) BREAK INTO VERTICAL MENU */
  #hamitems a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #333;
  }
 
  /* (B) SHOW HAMBURGER ICON */
  #hamnav label { 
    display: inline-block; 
    color: #122b45;
    background: #ffffb3;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
    right: 0px;
  }

  /* (C) TOGGLE SHOW/HIDE MENU */
  #hamitems { display: none; }
  #hamnav input:checked ~ #hamitems { display: block; }
}