:root {
  --bs-navbar-active-color: #318db3;
}

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Bootstrap overwrite */
  position: initial;
}

.menu__navbar {
  justify-content: flex-end;
}

.menu--level-1 {
  display: flex; 
  justify-content: flex-end;
  gap: 0 70px;
  flex-wrap: wrap;
}

@media (max-width: 991px) {
  .menu--level-1 {
    position: absolute;
    left: 0;
    margin: 0;
    width: 100%;
    margin-top: 25px;
    padding: 0 0 25px 1.5em;
    background-color: #fff;
    z-index: 10;
  }
}

.menu__item--level-1 {
  text-transform: uppercase;
  font-size: larger;
  margin-bottom: .5em;
}

@media (max-width: 991px) {
  .menu__item--level-1 {
    margin-bottom: 0;
  }
}

.menu__link {
  color: #000;
  text-decoration: none;
  letter-spacing: .125px;
  font-weight: 500
}

.navbar-nav .menu__link.nav-link.active, 
.navbar-nav .menu__link.nav-link.show {
  color: var(--beforce-blue);
}

@media (min-width: 992px) {
  .menu__link--level-1 {
    transition: color .25s ease-in-out;
  }

  .menu__item--level-1:hover .menu__link--level-1,
  .menu__link--level-1:hover {
    color: #318DB3;
  }
  
  .menu__item--level-1:hover {
    padding-bottom: 2.5em;
    margin-bottom: -2em;
  }
}

.menu--level-2 {
  display: flex;
  width: 100%;
  margin: 0;
  list-style: none;
  transition: opacity, visibility, .25s ease-in-out;
}

@media (min-width: 992px) {
  .menu--level-2 {
    position: absolute;
    top: calc(100% + 45px);
    left: 0;
    gap: 15px;
    padding: 2em 0;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    background-color: #318DB3;
    z-index: 10;
  }

  .menu--level-2:hover,
  .menu__item--level-1:hover > .menu--level-2 {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 991px) {
  .menu--level-2 {
    gap: 5px;
    padding-left: 15px;
    flex-direction: column;
  }
}

@media (min-width: 992px) {
  .menu__item--level-2 {
    text-align: center;
  }
}

.menu__link--level-2 {
  display: block;
  height: 100%;
  background-color: #fff;
  transition: background-color, color, .25s ease-in-out;
}

@media (min-width: 992px) {
  .menu__link--level-2 {
    padding: 8em 0 1em;
    font-size: 0.7725em;
    min-height: 200px;
    font-weight: 600;
    width: 100%;
  }
  .menu__item--level-2 {
    max-width: 225px;
    max-height: 225px;
  }
}

@media (min-width: 992px) {
  .menu__link--level-2:hover {
    color: #fff;
    background-color: #54A9D1;
  }
}


/* Icons */

@media (min-width: 992px) {
  .menu__link--level-1,
  .menu__link--level-2 {
    position: relative;
  }
  
  .menu__link--level-1:after,
  .menu__link--level-2:after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity, background-image, .25s ease-in-out;
  }
  
  .menu__link--level-1:after {
    top: -125%;
  }

  .menu__link--level-2:after {
    top: 45px;
  }

  .menu__item--level-2 .menu__link:after {
    opacity: 1;
  }

  /* Netzwerk */
  
  .menu__item--level-1:nth-child(1):hover .menu__link--level-1:after {
    opacity: 1;
    background-image: url('/themes/custom/ebm/images/menu/network_blue.svg');
  }

  .menu__item--level-1:nth-child(1) .menu__item--level-2:nth-child(1) .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/db_blue.svg');
  }

  .menu__item--level-1:nth-child(1) .menu__item--level-2:nth-child(1):hover .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/db_white.svg');
  }

  .menu__item--level-1:nth-child(1) .menu__item--level-2:nth-child(2) .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/pin_blue.svg');
  }

  .menu__item--level-1:nth-child(1) .menu__item--level-2:nth-child(2):hover .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/pin_white.svg');
  }

  .menu__item--level-1:nth-child(1) .menu__item--level-2:nth-child(3) .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/attachment_blue.svg');
  }

  .menu__item--level-1:nth-child(1) .menu__item--level-2:nth-child(3):hover .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/attachment_white.svg');
  }

  .menu__item--level-1:nth-child(1) .menu__item--level-2:nth-child(4) .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/network_blue.svg');
  }

  .menu__item--level-1:nth-child(1) .menu__item--level-2:nth-child(4):hover .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/network_white.svg');
  }

  /* Veranstaltungen */

  .menu__item--level-1:nth-child(2):hover .menu__link--level-1:after {
    opacity: 1;
    background-image: url('/themes/custom/ebm/images/menu/calendar_blue.svg');
  }

  .menu__item--level-1:nth-child(2) .menu__item--level-2:nth-child(1) .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/status_blue.svg');
  }

  .menu__item--level-1:nth-child(2) .menu__item--level-2:nth-child(1):hover .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/status_white.svg');
  }


  .menu__item--level-1:nth-child(2) .menu__item--level-2:nth-child(2) .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/calendar_blue.svg');
  }

  .menu__item--level-1:nth-child(2) .menu__item--level-2:nth-child(2):hover .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/calendar_white.svg');
  }

  .menu__item--level-1:nth-child(2) .menu__item--level-2:nth-child(3) .menu__link:after {
    top: 30px;
    width: 75px;
    height: 75px;
    background-image: url('/themes/custom/ebm/images/menu/talk_blue.svg');
  }

  .menu__item--level-1:nth-child(2) .menu__item--level-2:nth-child(3):hover .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/talk_white.svg');
  }


  /* Publikation */

  .menu__item--level-1:nth-child(3):hover .menu__link--level-1:after {
    opacity: 1;
    background-image: url('/themes/custom/ebm/images/menu/media_blue.svg');
  }
  
  /* Mediathek */
  .menu__item--level-1:nth-child(4):hover .menu__link--level-1:after {
    opacity: 1;
    background-image: url('/themes/custom/ebm/images/menu/speaker_blue.svg');
  }

  .menu__item--level-1:nth-child(4) .menu__item--level-2:nth-child(1) .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/dokumente_blue.svg');
  }

  .menu__item--level-1:nth-child(4) .menu__item--level-2:nth-child(1):hover .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/dokumente_white.svg');
  }
  
  .menu__item--level-1:nth-child(4) .menu__item--level-2:nth-child(2) .menu__link:after {
    top: 25px;
    width: 75px;
    height: 75px;
    background-image: url('/themes/custom/ebm/images/menu/logo_blue.svg');
  }

  .menu__item--level-1:nth-child(4) .menu__item--level-2:nth-child(2):hover .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/logo_white.svg');
  }

  .menu__item--level-1:nth-child(4) .menu__item--level-2:nth-child(3) .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/camera_blue.svg');
  }

  .menu__item--level-1:nth-child(4) .menu__item--level-2:nth-child(3):hover .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/camera_white.svg');
  }

  .menu__item--level-1:nth-child(4) .menu__item--level-2:nth-child(4) .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/science_blue.svg');
  }

  .menu__item--level-1:nth-child(4) .menu__item--level-2:nth-child(4):hover .menu__link:after {
    background-image: url('/themes/custom/ebm/images/menu/science_white.svg');
  }

  
  /* Aktuelles */
  .menu__item--level-1:nth-child(5):hover .menu__link--level-1:after {
    opacity: 1;
    background-image: url('/themes/custom/ebm/images/menu/news_blue.svg');
  }
}

/******** Mobile Menu *****/
@media (max-width: 991px) {
  button.navbar-toggler:focus {
    outline: 0;
    border: none;
    box-shadow: none;
  }

  button.navbar-toggler {
    border: none;
  }
  .navbar-toggler-icon {
    width: 100px;
    height: 100px;
    background-image: url('/themes/custom/ebm/components/nav/menu/assets/toggler.svg');
  }

  .menu--level-1 {
    background-color: var(--beforce-blue);
  }

  .menu--level-1 > .menu__item {
    margin-bottom: 2rem;
  }

  .menu__link--level-1 {
    color: #fff;
  }

  .menu__link--level-2 {
    background-color: transparent;
    border: none;
    font-size: 1rem;
    color: #fff;
  }

  .navbar-nav .menu__link.nav-link.active, .navbar-nav .menu__link.nav-link.show {
	color: #fff;
   }
}

@media (max-width: 768px) {
  .navbar-toggler-icon {
    width: 85px;
    height: 85px;
  }
}