/* =========================
   HEADER HERO + NAVIGATIE
   ========================= */

/*menu */

/* menu vid */
@media (max-width: 999px) {
  #logo {
    display: none !important;
  }
}

/* second bar navi */
#header-secondary-outer, #header-outer #header-secondary-outer, body #header-outer #mobile-menu .secondary-header-text
{
  background: transparent;
  background-color: #1b1b2f !important;
}

#header-secondary-outer .container {
  background-color: #191931;
  position: static;
  background-image: linear-gradient(360deg, #191931 48%, rgb(25 25 49) 40%, rgb(38 38 64) 82%, rgb(52 52 78) 85%, rgb(30 30 55) 98%, rgb(40 40 66) 101%, rgb(2 2 8 / 62%) 99%) !important;
}

/* 3d web logo zichtbaarheid – js zet logo-ready als wrap klaar is */
@media (min-width: 1000px) {
  #logo {
    visibility: hidden;
  }
  #logo.logo-ready {
    visibility: visible;
  }
  #logo .alpha-wrap {
    opacity: 0;
    transition: opacity .35s ease;
  }
  #logo .alpha-wrap.is-ready {
    opacity: 1;
  }
}

/* grow logo om witte flits te elemineren */
@media (min-width: 1000px) {
  #logo .header-logo {
    transform: scale(0.85);
    transform-origin: left center;
    opacity: 0;
    will-change: transform, opacity;
  }
  body.logo-anim-ready #logo .header-logo {
    transform: scale(1);
    opacity: 1;
    transition:
      transform 260ms ease,
      opacity 220ms ease;
  }
  /* unload oplossing*/
  html.is-unloading #logo {
    opacity: 0 !important;
    transition: none !important;
  }
}

@media (min-width: 1000px) {
  #header-outer[data-full-width="true"] header > .container,
  body[data-slide-out-widget-area-style="simple"]
    #header-outer[data-full-width="true"]
    #mobile-menu {
    margin-top: -69px;
  }

  #logo img {
    display: none !important;
  }
  #logo .alpha-wrap {
    display: inline-flex !important;
  }

  /* video */

  .alpha-wrap {
    position: relative;
    width: 100%;
  }
  .alpha-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  .alpha-wrap video {
    display: none !important;
  }
}

.alpha-canvas {
  display: block;
  background: transparent;
}

#slide-out-widget-area .inner > div:first-of-type {
  margin-left: 30px !important;
}

#top .span_9 > .slide-out-widget-area-toggle a.using-label .label,
#top ul .slide-out-widget-area-toggle a .label {
  text-shadow: 0 2px 4px rgb(0 0 0 / 50%) !important;
}

body.material
  #slide-out-widget-area[class*="slide-out-from-right"]
  .off-canvas-menu-container
  li {
  margin-bottom: 12px;
  margin-top: 42px;
}

body
  #slide-out-widget-area
  .inner-wrap
  > .inner
  .off-canvas-menu-container
  li
  > #menu-item-2390 {
  font-size: 20px !important;
}

body.material
  #slide-out-widget-area[class*="slide-out-from-right"]
  .off-canvas-menu-container
  li
  a:after,
#slide-out-widget-area.fullscreen-split
  .inner
  .off-canvas-menu-container
  li
  a:after,
#slide-out-widget-area .tagcloud a:hover {
  border-color: #8f7b6f !important;
}

#slide-out-widget-area.slide-out-from-right {
  padding-left: 20px;
  padding-right: 20px;
}

@media only screen and (max-width: 690px) {
  .material .nectar-button .im-icon-wrap svg {
    left: 30px;
  }
}

/* close button slideout menu */
body[data-slide-out-widget-area-style="slide-out-from-right"].material
  .slide_out_area_close:before {
  /*   background-image: url("/wp-content/uploads/2026/01/app3DWebV12-1@025x.webp"); */
  background-color: #a5a7dd2e;
}

/* header and footer sup voor toegangkelijkheid */
sup {
  font-size: 0.7em !important;
}

#header-outer .nectar-inherit-h5 {
  font-size: 26px;
  line-height: 41px;
  font-weight: 200;
}

#header-outer .nectar-menu-label {
  margin-top: 30%;
}

.nectar-menu-label {
  text-transform: unset !important;
  vertical-align: top;
  font-size: 18px;
}

/* menu activve classes off canvas */

.home .buthome,
.page-id-2515 .butwerk {
  /* active styles */
  background: linear-gradient(125deg, #ffa045, #ff0000) !important;
  box-shadow:
    rgb(77 75 75 / 52%) 0px -23px 25px 0px inset,
    rgb(56 26 217 / 50%) 0px -36px 30px 0px inset,
    rgb(121 205 83 / 15%) 0px -79px 40px 0px inset,
    rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgb(0 0 0 / 25%) 1px 11px 17px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px !important;
}