/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 12 2026 | 17:49:14 */
.tel-box:hover * {
  color: white;
  fill: white;
}

/* img to mp4 */
.hover-video-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.hover-video-wrapper img,
.hover-video-wrapper video {
  display: block;
  width: 100%;
}

/* Video is standaard verborgen */
.hover-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* Bij hover: video zichtbaar, afbeelding verborgen */
.hover-video-wrapper:hover .hover-video {
  opacity: 1;
}

.hover-video-wrapper:hover .hover-stilstaand {
  opacity: 0;
}

/* sticky header achtergrond transition */
.main-header-section {
  transition: all 0.4s ease !important;
}

.main-header-section.header-scrolled {
  background-color: #ffffff !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12) !important;
  border-radius: 15px !important;
  margin: 12px auto !important;
  width: calc(100% - 40px) !important;
  max-width: 1440px !important;
  padding-left: 35px !important;
  padding-right: 35px !important;
}

.main-header-section.header-scrolled * {
  color: #000000 !important;
}

.main-header-section.header-scrolled a {
  color: #000000 !important;
}
/* Zwart na scrollen */
.main-header-section.header-scrolled #header-icon,
.main-header-section.header-scrolled #header-icon *,
.main-header-section.header-scrolled #header-icon svg,
.main-header-section.header-scrolled #header-icon svg * {
  color: #000000 !important;
  stroke: #000000 !important;
  fill: #000000 !important;
}

/* Oranje bij hover na scrollen */
.main-header-section.header-scrolled #header-icon:hover,
.main-header-section.header-scrolled #header-icon:hover *,
.main-header-section.header-scrolled #header-icon:hover svg,
.main-header-section.header-scrolled #header-icon:hover svg * {
  color: #FF8040 !important;
  stroke: #FF8040 !important;
  fill: #FF8040 !important;
}

/* Altijd gecenterd, ongeacht scroll positie */
.elementor-location-header {
  display: flex !important;
  justify-content: center !important;
}

.main-header-section.header-scrolled {
  background-color: #ffffff !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12) !important;
  border-radius: 15px !important;
  margin: 12px auto !important;
  width: 100% !important;
  max-width: 1440px !important;
}

.elementor-location-header {
  animation: none !important;
}

.elementor-sticky--active {
  animation: slideFromTop 0.4s ease !important;
}

@keyframes slideFromTop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.elementor-sticky--active {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

.elementor-location-header {
  display: flex !important;
  justify-content: center !important;
}

.main-header-section.header-scrolled .menu-item:hover > a,
.main-header-section.header-scrolled .menu-item.current-menu-item > a,
.main-header-section.header-scrolled .menu-item.current-menu-ancestor > a,
.main-header-section.header-scrolled a:hover {
  color: #FF8040 !important;
}

/* idle animation */
.idle-animation {
  animation: hoverUpDown 5s ease-in-out infinite;
  
  /* Optioneel: voorkomt dat inline-elementen niet kunnen transformeren */
  display: inline-block; 
}

@keyframes hoverUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px); /* Hoe ver hij omhoog gaat. Pas dit aan naar wens! */
  }
  100% {
    transform: translateY(0);
  }
}