@media screen and (max-width: 960px) {
  ul.list-item {
      text-align: left;
  }
}

/*
* Made by Erik Terwan
* 24th of November 2015
* All rights reserved
*
*
* If you are thinking of using this in
* production code, beware of the browser
* prefixes.
*/
  .nav 
  {
      position: fixed;
      z-index: 10001;
      height: 100%;
  }

  #menuToggle
  {
      display: block;
      position: absolute;
      top: 30px;
      left: 30px;

      z-index: 1;

      -webkit-user-select: none;
      user-select: none;
  }

  #menuToggle input
  {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;

      cursor: pointer;

      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */

      -webkit-touch-callout: none;
  }

  /*
   * Just a quick hamburger
   */
  #menuToggle span
  {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;

      background: #cdcdcd;
      border-radius: 3px;

      z-index: 1;

      transform-origin: 4px 0px;

      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      opacity 0.55s ease;
  }

  #menuToggle span:first-child
  {
      transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2)
  {
      transform-origin: 0% 100%;
  }

  /*
   * Transform all the slices of hamburger
   * into a crossmark.
   */
  #menuToggle input:checked ~ span
  {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: #232323;
  }

  /*
   * But let's hide the middle one.
   */
  #menuToggle input:checked ~ span:nth-last-child(3)
  {
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
  }

  /*
   * Ohyeah and the last one should go the other direction
   */
  #menuToggle input:checked ~ span:nth-last-child(2)
  {
      transform: rotate(-45deg) translate(0, -1px);
  }

  /*
   * Make this absolute positioned
   * at the top left of the screen
   */
  #menu
  {
      position: fixed;
      top: 0;
      left: 0;
      width: 300px;
      height: 100%;
      margin: 0;
      padding: 30px;
      padding-top: 80px;

      background: #ededed;
      list-style-type: none;
      -webkit-font-smoothing: antialiased;
      /* to stop flickering of text in safari */

      transform-origin: 0% 0%;
      transform: translate(-100%, 0);

      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }

  #menu li
  {
      padding: 10px 0;
      font-size: 22px;
  }

  #menu li > a {
      text-decoration: none;
      color: #232323;
      transition: color 0.3s ease;
  }

  #menu li > a:hover
  {
      color: tomato;
  }

  /*
   * And let's slide it in from the left
   */
  #menuToggle input:checked ~ ul
  {
      transform: none;
  }


table, thead, tbody, tfoot, tr, th, td {
  display: block; /* Set all of our table elements to display type block */
}
 
/* And here we will set our table to act normally after we hit 1024px */
@media only screen and (min-width: 1024px) {
    table { display: table; }
    thead { display: table-header-group; }
    tbody { display: table-row-group; }
    tfoot { display: table-footer-group; }
    tr { display: table-row; }
    th, td { display: table-cell; }
}

td:first-child {
    box-sizing: border-box;
    width: 25%;
    float: left;
    padding: 10px;
}
 
td:nth-child(2), td:nth-child(3), td:nth-child(4) {
    padding: 10px;
}

td:nth-child(2) {
  min-height: 95px;
}
 
td {
    padding: 15px;
    margin: 15px;
    border: 1px solid #ddd;
}