/**
 * siehe auch megamenu.js
 */

:root {
  --bns-header-background-start: rgba(24, 64, 70, 1);
  --bns-header-color-start: #ffffff;
  --bns-header-border-bottom-start: #c8d5dc;
  --bns-header-arrow-start: #ffffff;
}

/* Header */
/* Fade In Option */
.header-white {
  -moz-transition: opacity 0.25s ease-out !important;
  -webkit-transition: opacity 0.25s ease-out !important;
  transition: opacity 0.25s ease-out !important;
}
/* End Of Fade In Option */

#mega-menu-wrap-menu-1 {
  clear: both;
}

.bns-megamenu-lightgray {
  background-color: rgba(1, 170, 213, 0.2) !important;
}

@media only screen and (min-width: 768px) {
  #mega-menu-menu-1 .mega-menu-megamenu > ul.mega-sub-menu {
    margin-top: 1rem !important;
    --leftVar: 10px;
  }
  /* .mega-sub-menu .mega-menu-column {
    padding: 1rem !important;
  } */

  #mega-menu-menu-1 .mega-menu-megamenu > ul.mega-sub-menu::before {
    width: 0 !important;
    height: 0 !important;
    border-left: 10px solid transparent !important;
    border-right: 10px solid transparent !important;
    border-bottom: 10px solid var(--bns-header-arrow-start) !important;
    position: absolute !important;
    content: "" !important;
    top: -9px !important;
    left: var(--leftVar) !important;
    display: block !important;
  }
  #mega-menu-menu-1 .mega-menu-row > ul.mega-sub-menu {
    display: flex !important;
    flex-direction: row !important;
  }
}

@media only screen and (max-width: 767px) {
  #mega-menu-menu-1 {
    height: 100vh !important;
    width: 100vw !important;
    overflow-y: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
  }
  #mega-menu-wrap-menu-1 .mega-menu {
    z-index: 999 !important;
  }
  #mega-menu-wrap-menu-1 .mega-menu-open {
    z-index: 1000 !important;
    position: relative;
  }
  body.mega-menu-menu-1-mobile-open {
    overflow: hidden !important;
    max-height: 100vh !important;
  }
  #mega-menu-menu-1 .mega-sub-menu .mega-menu-column .mega-sub-menu .mega-menu-item {
    border-bottom: solid 1px var(--bns-header-border-bottom-start) !important;
  }
  #mega-menu-menu-1 .mega-sub-menu .mega-menu-column .mega-sub-menu .mega-menu-item .mega-menu-link {
    padding: 0.25rem !important;
  }
  #mega-menu-menu-1 .mega-sub-menu .mega-menu-column {
    padding: 0 !important;
  }
}

@media only screen and (max-width: 767px) {
  body:not(.mega-menu-menu-1-mobile-open) .header-transparent .mega-menu-toggle {
    background-color: transparent !important;
  }
  body:not(.mega-menu-menu-1-mobile-open) .header-transparent .mega-toggle-animated-inner,
  body:not(.mega-menu-menu-1-mobile-open) .header-transparent .mega-toggle-animated-inner:before,
  body:not(.mega-menu-menu-1-mobile-open) .header-transparent .mega-toggle-animated-inner:after {
    background-color: var(--bns-header-color-start) !important;
  }
}

/* @media only screen and (min-width: 768px) { */
.header-transparent .bns-transparent .elementor-widget-container *,
.header-transparent .mega-menu-flyout > a.mega-menu-link,
.header-transparent .mega-menu-grid > a.mega-menu-link,
.header-transparent .mega-menu-grid > a.mega-menu-link .mega-indicator {
  color: var(--bns-header-color-start) !important;
}
/* } */

.header-transparent .elementor-element svg {
  fill: var(--bns-header-color-start) !important;
}

.header-transparent .elementor-element svg polygon,
.header-transparent .elementor-element svg rect,
.header-transparent .elementor-element svg path {
  --bns-svgcolor: var(--bns-header-color-start) !important;
}

.header-transparent .elementor-element {
  background-color: transparent !important;
}

.header-transparent {
  background-color: var(--bns-header-background-start) !important;
}

@media only screen and (max-width: 575px) {
  .mega-sub-menu {
    width: 100vw !important;
  }
}