.menubar {
  overflow: hidden;
  width: 100%;
  max-width: var(--layout-max-width);
  margin: auto;
}

/* Hamburger button with 3 bars that is shown/hidden depending on screen width. */
.menubar .hamburger {
  float: right;
  display: none;
}
.menubar .hamburger a::after {
  content: "\00a0\2261";
}

/* Formatting for top-level elements. */
.menubar ul,
.menubar li {
  padding: 0px;
  margin: 0px;
  text-decoration: none;
  font-family: Tahoma, Arial, sans-serif;
}
.menubar ul {
	list-style-type: none;
}
.menubar a,
.menubar .menu-sub div {
  color: #d0d0d0 !important;
  padding-left: 12px;
  padding-right: 12px;
  text-align: center;
  height: 45px;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 20px;
}

/* The first item with the logo image. */
.menubar .home a {
  padding: 0px;
  background: #808080 !important;
}

/* Link effects. */
.menubar a {
  float: left;
}
.menubar a:hover {
  background: #d0d0d0 !important;
  color: #000000 !important;
}
.menubar .menu a, .menubar .menu-sub {
  border-right: solid 1px #707070;
}

/* Sub-Menu. */
.menubar .menu-sub {
  float: left;
  overflow: hidden;
}
.menubar .menu-sub div::after {
  content: "\00a0\0025BC";
}
.menubar .menu-sub:hover div {
  background: #505050 !important;
  color: #ffffff !important;
  cursor: pointer;
}
.menubar ul li ul {
  display: none;
  position: absolute;
  background: #f9f9f9 !important;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.menubar ul li ul a {
  float: none;
  color: #000000 !important;
  display: flex;
  align-items: center;
  text-decoration: none;
  text-align: left;
  font-weight: 200;
  border-bottom: solid 1px #808080;
}
.menubar ul li ul a:hover {
  background: #707070 !important;
  color: #ffffff !important;
}
.menubar ul li:hover ul {
  display: block;
}

/* Extended menu bar (e.g. social icons). */
.menubar .menu-ext {
  float: right;
}

/** Small Screen. */
@media screen and (max-width: 850px) {
  .menubar .menu,
  .menubar .menu-sub {
    display: none;
  }
  .menubar .hamburger {
    display: flex;
  }
}

/** Small Screen and Hamburger-Menu OPEN. */
@media screen and (max-width: 850px) {
  .menubar.responsive .hamburger {
    position: absolute;
    right: 0;
    top: 0;
    color: black;
    background: #606060 !important;
  }
  .menubar.responsive .hamburger:hover {
    background: #404040 !important;
    color: white;
  }
  .menubar.responsive .home {
    float: none;
    display: flex;
    border-bottom: solid 1px #000;
  }
  .menubar.responsive .menu,
  .menubar.responsive .menu-sub div {
    float: none;
    display: flex;
    text-align: left;
  }
  .menubar.responsive .menu a,
  .menubar.responsive .menu-sub div {
    border-right: none;
    border-bottom: solid 1px #777;
    width: 100%;
  }
  .menubar.responsive .menu-sub {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
  }
  .menubar.responsive ul li ul {
    position: relative;
  }
  .menubar.responsive .menu-ext {
    display: none;
  }
}