@media print {
  .menuContainer {
    display: none;
  }
}

.menuContainer {
    background: #333;
    color: #fff;
    margin-block-start: 0;
    margin-block-end: 0;
    padding: 0;
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
}

.devMode .menuContainer {
    background: repeating-linear-gradient(
            45deg,
            #333,
            #333 15px,
            #a7af07 10px,
            #a7af07 30px
    );
}

.menuContainer ul, .menuContainer li {
  margin: 0 0;
  padding: 0 0;
  list-style: none
}

.menuContainer li {
  float: left;
  display: inline;
  position: relative;
  font-weight: 700;
  text-transform: uppercase;
}

.menuContainer li:first-child {
  border-left: none
}

.menuContainer a {
  display: block;
  line-height: 35px;
  padding: 0 12px;
  text-decoration: none;
  cursor: default;
}

.menuContainer a.menuClickable {
  cursor: pointer;
}

.menuContainer li:hover > a, .menuContainer li a:hover {
    background: #11111178;
}

.menuContainer ul.menu {
  height: auto;
  width: 180px;
  background: #111;
  position: absolute;
  z-index: 5;
  display: none;
  border: 0;
  isolation: auto;
}

.menuContainer ul.menu li {
  display: block;
  width: 100%;
  text-transform: none;
}

.menuContainer a.subMenuArrow {
  padding: 0 27px 0 14px
}

.menuContainer a.subMenuArrow::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 6px 5px;
  border-style: solid;
  border-color: #eee transparent transparent transparent;
  position: absolute;
  top: 15px;
  right: 9px
}

.menuContainer a.subMenuArrow.open::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 6px 5px;
  border-style: solid;
  border-color: transparent transparent #eee transparent;
  position: absolute;
  top: 9px;
  right: 9px
}

.menuContainer ul.menu a:hover {
  background: #333;
}

.menuContainer ul.menu .subMenu {
  display: none;
  position: absolute;
  left: 180px;
  background: #111;
  top: 0;
  width: 180px;
}

.menuContainer ul.menu .subMenu li {
  background: #111;
}

.menuContainer .menuItemContainer.hasSubMenu a.open ~ .menu,
.menuContainer ul.menu .subMenuItemContainer.hasSubMenu a.open ~ .subMenu {
  display: block;
}

.menuActive {
    background: #111111c2;
    color: #e63a3a;
}

.menuActive:hover {
    background: #111111ed !important;
}

.mobileMenu li:not( .mobileMenu.mobileMenuShow li ):not( .mobileMenu li.mobileMenuItem ) {
    display: none;
}

li.mobileMenuItem:before {
    content: "\f0c9";
    font-family: 'Font Awesome 5 Pro';
    padding: 9px;
    font-size: 30px;
}