/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 11 2026 | 14:00:52 */
:root {
	--donkerBlauw: 				#002F54; 			/* Primair */
	--blauw: 					#3156DB; 			/* Secondair */
	--text: 					#002F54; 			/* Text */
	--oranje: 					#FF9E4E; 			/* Accent */
	--donkeroranje: 			#F77A14; 			/* Hover Accent */
	--achtergrondBlauw: 		#E6FBFE; 			/* Achtergrond blauw */
	--textwit: 					#FFFFFF; 			/* Lichte tekst */

	--wit: 						#FFFFFF; 			/* Wit */
	--zwart: 					#000000; 			/* Zwart */
	--transparant: 				rgba(0, 0, 0, 0); 	/* Transparant */
}


/* sticky plan je afspraak knop afbeelding  */
.plan-afspraak-img{
  overflow: hidden;
  line-height: 0;
  pointer-events: none;    /* het lege vak vangt geen hover meer */
}

.plan-afspraak-img img{
  display: block;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.2,.8,.2,1) .3s;
}

.plan-afspraak-img:has(~ .plan-afspraak-knop:hover) img{
  transform: translateY(0);
  transition-delay: 0s;
}


















/* login knop header  */
#header-login {
	border: solid 2px var(--oranje);
}
#header-login:hover {
	border: solid 2px var(--donkeroranje);
	background: var(--donkeroranje);
	color: var(--textwit) !important;
	transition: background-color 0.3s ease, border 0.3s ease;
}
#header-login:hover .e-n-menu-title-text {
	color: var(--textwit);
}

@media screen and (max-device-width: 1023.99px) {
	body:not(#prio) .counter .elementor-counter-title {
		line-height: 1.5;
	}
}

@media screen and (min-device-width: 104px) {
	body:not(#prio) .loopgrid-titel h3 {
		color: var(--oranje);
	}
	body:not(#prio) .hover-video-wrapper:has(.img-color-change:hover) .loopgrid-titel h3 {
    color: var(--wit);
}
}
.hover-video-wrapper:has(.img-color-change:hover) .loopgrid-titel h3 {
    color: var(--wit);
}
.loopgrid-titel h3 {
    transition: color 0.3s ease;
}
.grid-video-tekst:hover .loopgrid-titel h3 {
    color: var(--wit) !important;
}

/* Klantcase filter bar  */
..e-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.e-filter-item::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #3156DB;
    flex-shrink: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.e-filter-item:hover::before {
    border-color: #F77A14;
    background-color: #F77A14;
}

.e-filter-item.e-filter-item-active::before {
    background-color: #F77A14;
    border-color: #F77A14;
}

.e-filter-item {
    gap: 8px;
}

/* Alle knop stijl */
.e-filter-item[data-filter="__all"] {
    background-color: #3156DB;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 25px;
    margin-right: 10px;
}

.e-filter-item[data-filter="__all"]:hover {
    background-color: #F77A14;
}

.e-filter-item[data-filter="__all"].e-filter-item-active {
    background-color: #F77A14;
}

.e-filter-item[data-filter="__all"]::before {
    display: none;
}

.e-filter-item[data-filter="__all"] {
    background-color: #3156DB !important;
    color: #ffffff !important;
}

/* faq accordion border weghalen  */
.color-divider .e-n-accordion-item[open] > .e-n-accordion-item-title {
    border-color: transparent !important;
}

/* Mega menu */
.menu-titel {
	display: flex;
	align-items: center;
}


.mega-menu {
  align-self: start !important;
}

@media (min-width: 1024px) {
  #main-header {
    max-height: 80px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
  }

  #main-header.scrolled,
  #main-header:hover {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08) !important;
  }

  #main-header:not(.scrolled):not(:hover) .menu-titel,
  #main-header:not(.scrolled):not(:hover) .menu-titel * {
    color: #ffffff !important;
    transition: color 0.4s ease;
  }

  #main-header.scrolled .menu-titel,
  #main-header.scrolled .menu-titel *,
  #main-header:hover .menu-titel,
  #main-header:hover .menu-titel * {
    color: inherit !important;
    transition: color 0.4s ease;
  }

  #main-header.elementor-sticky--effects:not(:hover) {
    max-height: 80px !important;
  }

  #main-header:hover {
    max-height: 800px !important;
  }

  .mega-content {
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.4s ease-out;
    transition-delay: 0s;
    will-change: transform, opacity;
  }

  #main-header:hover .mega-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
  }

  .mega-menu-sub a {
    padding: 15px 0 !important;
  }

  .mega-menu-list {
    gap: 0;
  }
}

@media screen and (min-device-width: 1024px) and (max-device-width: 1296px) {
  .mega-menu { margin-top: 5px; }
  .mega-menu .menu-titel { min-height: 48px; }
  .mega-menu .menu-titel p { margin-bottom: 0; }
}

#main-header {
  max-height: 80px !important;
  overflow: hidden !important;
  transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1),
              background-color 0.4s ease,
              box-shadow 0.4s ease;
  box-shadow: none !important;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
}
/* Einde mega menu */

/* icon in list uitlijnen met tekst */
.list-icon-correctie .elementor-icon-list-icon {
	padding-top: 3px;
}
/* einde icon in list uitlijnen met tekst */

/* icon in list uitlijnen met tekst */
@media (min-width: 1024px) {
	body:not(#prio) .contact-list .elementor-icon-list-item:not(:last-child) {
		padding-bottom: 15px;
	}
}
/* einde icon in list uitlijnen met tekst */

/* interne links in lopende tekst herkenbaar maken */
.elementor-widget-text-editor a:not(.elementor-button){font-weight:700;color:inherit;}
.elementor-widget-text-editor a:not(.elementor-button):hover{text-decoration:underline;}
/* einde interne links */

/* afbeeldingen en knoppen niet slepen */
img, a {
  -webkit-user-drag: none;
  user-drag: none;
}
/* einde niet slepen */
