@import url("variables.css");

.navigation-bar {
  background-color: var(--primary-bg-color);
}

.navigation-bar li {
  list-style: none;
}

.navigation-bar li a {
  color: #fff;
  text-decoration: none;
}

.navigation-bar h4 {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  padding: 0;
  font-weight: 500;
}

.navigation-bar .menu-column {
  padding: 7px 18px 7px 20px;
}

.navigation-bar .menu-column:hover {
  color: var(--active-color);
  border-left: solid 4px var(--active-color);
  padding-left: 16px;
  cursor: pointer;
}

.menu-column ul {
  margin: 20px 20px 20px 0;
}

.menu-column ul li {
  font-size: 1.1rem;
  color: #fff;
  /*list-style: none;*/
  margin-bottom: 10px;
}

.navigation-bar ul > li:hover > a,
.navigation-bar h4:hover,
.navigation-bar a.current,
.navigation-bar h4.menu-column-active {
  color: var(--active-color);
}

.navigation-bar .menu-column ul {
  display: none;
}

.navigation-bar .menu-box {
  border-bottom: 0 none;
}

.navigation-bar .menu-box {
  padding-top: 20px;
}

.navigation-bar .menu-column ul {
  padding-left: 20px;
}

.navigation-bar .plus {
  background-image: url(../assets/images/new/arrow-white.svg);
  transform: rotate(360deg);
  padding-right: 10px;
  background-size: 14px 8px;
}

.navigation-bar .plus.active,
.navigation-bar .menu-column li:hover .plus,
.navigation-bar .menu-column .active .plus {
  transform: rotate(180deg);
  background-image: url(../assets/images/new/arrow-yellow.svg);
}

.navigation-bar .menu-column:hover .plus {
  /* transform: rotate(0); */
  /*background-position: left 1px;*/
}

.navigation-bar .menu-column ul.level3 {
  display: none;
}

.navigation-bar .menu-column ul.level3.open {
  display: block;
}