html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0
  }

nav, #main {
  padding: 1em;
  box-sizing: border-box;
}
#main {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-flow: wrap;
}
nav  {
      width: 300px;
      height: 100%;
      position: absolute;
      -webkit-transform: translate(-300px, 0);
      transform: translate(-300px, 0);
      transition: transform 0.3s ease;
}
nav.open {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

      @media (min-width: 600px) {

      /* We open the drawer. */
      nav {
        position:relative;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }

      /* We use Flexbox on the parent. */
      body {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row nowrap;
        flex-flow: row nowrap;
      }

      #main {
        width: auto;
        /* Flex-grow streches the main content to fill all available space. */
        flex-grow: 1;
      }
      }
      /*end @media (min-width: 600px)*/

header, footer {
    display: block;
    margin: 4px;
    padding: 5px;
    min-height: 100px;
    clear:both;
}
header {
  background: rgb(179,179,179);
}
.hero {
  flex: 1 1 100%;
  /*min-width: 350px;*/
  height: 300px;
  background: rgb(30, 30, 42);
}

.content {
  background: #ffffff;
  /*min-width: 350px;*/
  flex: 1 1 100%;
}

footer {
  width: 100%
}