/* CSS Vars */
:root {
  --mobileMenuBgColor: var(--mainBgColor);
}

#mobile-menu-wrapper {
  display: none;
}

#mobile-menu {
  text-align: center;
  display: none;
  width: 100%;
  position: absolute;
  right: 0;
  margin: 5px 0 0;
  list-style: none;
  background-color: var(--mobileMenuBgColor);
  z-index: 100;
  border-radius: .25em;
  border-top-right-radius: 0;
  font-size: 1rem;
  box-sizing: border-box;
}

#mobile-menu li {
  list-style-image: none;
}

#mobile-menu li a {
  padding: .3em .5em;
  text-decoration: none;
  display: block;
  color: #fff;
}

#mobile-menu li a:hover {
  background-color: var(--activeColor);
}

.hamburger {
  display: inline-block;
  position: relative;
  color: #fff !important;
  text-decoration: none !important;
  padding: .4em 2em .4em .4em;
  border-radius: var(--radius);
  background-color: var(--mobileMenuBgColor);
}

.hamburger:before,
.hamburger:after,
.hamburger span {
  background: currentColor;
  content: '';
  display: block;
  width: 1.2em;
  height: .154em;
  position: absolute;
  right: .4em;
  top: calc(50% - .077em);
  transition: none 0.1s ease 0.1s;
  transition-property: transform, opacity;
}

.hamburger:before { transform: translateY(-.35em);}
.hamburger:after  { transform: translateY(.35em); }

.hamburger.open span { opacity: 0; }
.hamburger.open:before { transform: rotate(45deg); }
.hamburger.open:after  { transform: rotate(-45deg); }

.hamburger.open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: relative;
  z-index: 110;
  border-bottom: 5px solid var(--mobileMenuBgColor);
  margin-bottom: -5px;
}