/* BACKUP was scss maar issues met header */
/* Overlay header - attribute rechtstreeks op het bricks element */
.btx-header-main[data-header-style="Overlay"] {
    z-index:99999;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  padding-bottom: 100px;
  }

/* Overlay header - logo attribute rechtstreeks op het bricks element */
  #header-logo-icon[data-header-style="Overlay"] :not([fill="none"]) {
    fill: var(--white) !important;
  }   

  #header-logo-icon[data-header-style="Overlay"]  :not([fill="none"]):hover {
    fill: var(--white) !important;
  }

.header-logo-text[data-header-style="Overlay"] {
    color: var(--primary-ultra-light);
  } 

/* Overlay header - navigatie - attribute op een wrapper element, daarna specificeren >>> */

[data-header-style="Overlay"] .nav-btx-main .bricks-nav-menu > li > a {
    color: var(--base-ultra-light) !important;
  }

/* Overlay header - Hover */
[data-header-style="Overlay"] .nav-btx-main .bricks-nav-menu > li > a:hover, [data-header-style="Overlay"] .fr-nav-alpha .bricks-nav-menu > li:hover,  {
    color: var(--base-light);
  }

[data-header-style="Overlay"] .nav-btx-main .bricks-nav-menu > li > a:active {
    color: var(--primary);
  }

/* ul hover */
[data-header-style="Overlay"] .nav-btx-main .bricks-nav-menu > ul > a:hover {
    color: var(--base-light);
  }

/* Overlay header - menu item, met submenu */
[data-header-style="Overlay"] .bricks-nav-menu > li > .brx-submenu-toggle > a {
    transition: background-color 0.1s, transform 0.4s;
    color: var(--base-ultra-light);
}

/* Overlay header - menu item, met submenu : hover */
[data-header-style="Overlay"] .bricks-nav-menu > li > .brx-submenu-toggle > a:hover{
    color: var(--base-light);
}