.menu-container {
  display: inline-block;
}
button.menu-button,
button.button-menu-close {
  padding: 5px 6px 5px 6px;
  margin: 0px 5px 10px 5px;
  background: #849b76;
  border-color: #748f71;
  border-radius: 8px;
  border-right-width: 3px;
  border-style: solid;
  border-bottom-width: 3px;
  border-top-width: 1px;
  border-left-width: 2px;
  font-family: Arial, Helvetica, sans-serif;
}

button.menu-button {
  padding-left: 5px;
  padding-right: 5px;
}

button.button-menu-close {
  position: absolute;
  right: 0px;
  top: 0px;
  margin: 5px;
  padding-left: 8px;
  padding-right: 8px;
}

div.button-menu {
  display: none;
  position: fixed;
  padding: 8px 6px 6px 6px;
  margin: 0px 5px 10px 5px;
  background: #f0f7ef;
  border-color: #748f71;
  border-radius: 8px;
  border-right-width: 3px;
  border-style: solid;
  border-bottom-width: 3px;
  border-top-width: 1px;
  border-left-width: 2px;
  font-family: Arial, Helvetica, sans-serif;
  z-index: 1000;
  width: 260px;
  text-align: left;
  top: 5px;
}

div.menu-button.right {
  float: right;
  left: unset;
  right: 10px;
}

div.menu-button.left div.button-menu {
  top: 6px;
  z-index: 1001;
  left: 100px;
}

div.menu-button.left div.button-menu {
  left: 6px;
  position: fixed;
}

div.menu-button.right div.button-menu {
  left: unset;
  right: 6px;
}

div.button-menu > ul {
  list-style-type: none;
}

div.button-menu > ul > li {
  padding-bottom: 3px;
}

@media (max-width: 800px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
  div.button-menu {
    width: 90%;
    font-size: 32px;
  }

  div.menu-button.right div.button-menu {
    width: 90%;
    text-align: left;
    left: unset;
    right: 7px;
    z-index: 1001;
  }

  div.menu-button div.button-menu {
    width: 90%;
    top: 6px;
    left: 6px;
    position: fixed;
    z-index: 1001;
  }
}