/* styling submenu Menu mobile */

.et_mobile_menu {
	padding:5% 0px !important;
}

#mobiel-menu .et_mobile_nav_menu > div:not(.closed) #mobile_menu3 {
	display: flex ;
    flex-direction: column !important;
	  opacity: 0;
	  height: 0; /* Start met een hoogte van 0 */
	  overflow: hidden; /* Verberg het element totdat het volledig zichtbaar is */
	  animation: growDown 0.7s forwards; /* Voer de animatie uit */
	padding-bottom:0px !important;
}

#mobile_menu3 .menu-item-has-children:not(.visible) > ul {
	visibility:hidden !important;
	display:none !important;
}

#mobiel-menu .et_mobile_nav_menu > div.closed #mobile_menu3 {
  animation: shrinkUp 0.7s forwards; /* Voer de animatie uit bij sluiten */
}


@keyframes growDown {
  0% {
    opacity: 0;
    height: 0; /* Start met hoogte 0 */
  }
  100% {
    opacity: 1;
    height: calc(100vh - 15vh); /* Eindig met de gewenste hoogte (pas dit aan naar wens) */
  }
}

@keyframes shrinkUp {
  0% {
    opacity: 1;
    height: calc(100vh - 15vh); /* Begin met de volledige hoogte */
  }
  100% {
    opacity: 0;
    height: 0; /* Eindig met hoogte 0 */
  }
}

@keyframes growDownResponsive {
  0% {
    opacity: 0;
    height: 0; /* Start met hoogte 0 */
  }
  100% {
    opacity: 1;
    height: calc(100vh - 12vh); /* Eindig met de gewenste hoogte (pas dit aan naar wens) */
  }
}

#mobiel-menu .et_mobile_nav_menu > div.closed #mobile_menu3 {
  animation: shrinkUp 0.7s forwards; /* Voer de animatie uit bij sluiten */
}

@keyframes shrinkUpResponsive {
  0% {
    opacity: 1;
    height: calc(100vh - 12vh); /* Begin met de volledige hoogte */
  }
  100% {
    opacity: 0;
    height: 0; /* Eindig met hoogte 0 */
  }
}


#mobile_menu3 .extra-menu-container {
	margin-top:auto;
}

#mobile_menu3 .menu {
	padding-left:0px;
	background-color:#000000 !important;
}

.width50 {
	width:50%;
}

.width100 {
	width:100%;
}

.footer-menu > div:first-child {
	display:flex;
	flex-direction:row;
}

.footer-menu {
  background-color: #000; /* Achtergrondkleur */
  color: white;
  padding: 20px 20px 40px 20px;
  font-family: 'Poppins', sans-serif;
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 5px;
}

.menu li {
  margin: 0;
}

.menu a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  padding:4px 5% !important;
}

.button a {
  background-color: #622186;
  color: white;
  padding: 12px 25px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
}

.werkenbijKnop:after {
	content: url("/wp-content/uploads/2025/04/ArrowWerkenbij.svg") !important;
	margin-left:10px;
}

.button a:hover {
  background-color: #9b30c0; /* Lichter paars voor hover effect */
}

.social-icons a {
  display: inline-block;
  margin-right: 10px; /* Ruimte tussen de iconen */
}

.social-icons {
	justify-content: center;
    display: flex;
}
.social-icons img {
  width: 40px; /* Pas de grootte aan naar wens */
  height: 40px; /* Zorg ervoor dat de hoogte en breedte gelijk zijn voor een cirkelvormig effect */
  border-radius: 50%; /* Maak de iconen cirkelvormig */
  transition: background-color 0.3s ease; /* Voor hover-effecten */
}

.social-icons a:hover img {
  background-color: rgba(0, 0, 0, 0.1); /* Lichte achtergrond bij hover */
}

@media (max-width: 350px) {
	
	.button a {
		  padding: 12px 20px;
	}
}

/* end styling submenu Menu mobile */




@media (max-width: 1570px) and (min-width: 1450px) {
	.et_pb_menu .et-menu>li {
		padding-left:15px !important;
		padding-right:15px !important;
	}
}

@media (max-width: 1450px) and (min-width: 1368px) {
	.et_pb_menu .et-menu>li {
		padding-left:10px !important;
		padding-right:10px !important;
	}
	
	.et_pb_menu .et-menu>li>a {
		font-size:14px !important;
	}
}


/* Verberg het desktop-menu onder 1368px */
@media only screen and (min-width: 980px) and (max-width: 1367px)  {
  #desktop-menu {
      display: none !important; /* Desktop-menu verbergen */
  }
  #mobiel-menu {
      display: block !important; /* Mobiel menu tonen */
  }
  #menu-menu-desktop-1 {
      display: none;
  }

  #mobile_menu3 > li:has("visible") > ul {
	visibility: visible !important;
    display: block !important;
  }
	
  #mobile_menu3 > li:not(.visible) > ul {
	visibility: hidden !important;
    display: none !important;
  }
	
	.mobile_menu_bar {
		content: url("/wp-content/uploads/2025/04/Group-713.svg");
		width:auto;
		height:auto;
	}
	.opened > .mobile_menu_bar {
		content: url("/wp-content/uploads/2025/04/closeIconSella.svg");
		width:20px;
		height:auto;
	}

  .et_mobile_nav_menu {
      display: flex !important;
      align-items: center;
  }

  .et_mobile_nav_menu li {
      list-style-type: none;
      text-align: start;
  }

  #mobiel-menu .et_pb_menu__wrap {
      justify-content: end;
  }

  #mobiel-menu .et_pb_menu__logo-wrap {
      width: 140px;
  }

  #AdressRowNavbar h4 {
      color: white !important;
  }

	.rowMainNavbar {
		display: flex;
		align-items: center;
	}
	
	.BigMenu .sub-menu {
		width:auto !important;
		border-bottom-right-radius: 10px !important;
    	border-bottom-left-radius: 10px !important;
	}
	
	.BigMenu .sub-menu > li {
		width: 100%;
		border-bottom: 0px solid #333333 !important;
		margin-left: 0px !important;
		padding-left: 5% !important;
		margin-right: 0px !important;
		padding-right: 0px !important;
	}
	
	ul#mobile_menu2 {
		position: absolute;
		width: 100vw;
		height: 85vh;
		left: -66.3vw;
		top:40px;
	}
	
	#mobile_menu3 li:not(.visible) .right-click-area {
		background-image: url("/wp-content/uploads/2025/03/plus-solid.svg");
		background-size: 15px ; /* Zorgt ervoor dat het icoon goed binnen het element past */
		background-repeat: no-repeat; /* Voorkomt herhalen van de afbeelding */
		background-position:calc(50% - 10px);
		width: 15px; /* Voeg een breedte toe, zodat de afbeelding goed zichtbaar is */
	}
	
	#mobile_menu3 li .right-click-area {
		background-image: url("/wp-content/uploads/2025/04/closeIconSella.svg");
		background-size: 15px ; /* Zorgt ervoor dat het icoon goed binnen het element past */
		background-repeat: no-repeat; /* Voorkomt herhalen van de afbeelding */
		background-position:calc(50% - 10px);
		width: 15px; /* Voeg een breedte toe, zodat de afbeelding goed zichtbaar is */
	}
  
}

@media only screen and (max-width: 1368px)  {
	#mobile_menu3 li {
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	.menu-item-has-children {
	  pointer-events: none;
	}

	/* Maak de link, submenu en click-areas wel klikbaar */
	.menu-item-has-children > a,
	.menu-item-has-children .sub-menu,
	.menu-item-has-children .left-click-area,
	.menu-item-has-children .right-click-area {
	  pointer-events: auto;
	}

	/* Zorg dat alleen de right-click-area het dropdown menu opent */
	.menu-item-has-children > a {
	  pointer-events: auto;
	  /* Zorg dat de link gewoon werkt zoals normaal */
	}

	.menu-item-has-children .right-click-area {
	  /* Deze div opent het dropdown menu */
	  cursor: pointer;
	}
	
	li#menu-item-1220 {
		display: flex;
		padding: 10px 5%;
	}
	
	.fitContent {
		width:fit-content;
	}
	
	ul#mobile_menu3 {
		position: absolute;
		width: 100vw;
		height: 85vh;
		left: -63.3vw;
		top: 60px;
	}
}


@media only screen and (max-width: 980px)  {
	.mobile_menu_bar {
		content: url("/wp-content/uploads/2025/04/Group-713.svg");
		width:auto;
		height:auto;
 		 transition: all 0.5s ease; /* Een soepele overgang voor alle eigenschappen */
	}
	.opened > .mobile_menu_bar {
		content: url("/wp-content/uploads/2025/04/closeIconSella.svg");
		width:20px;
		height:auto;
  		transition: all 0.5s ease; /* Een soepele overgang voor alle eigenschappen */
	}
	
		#mobile_menu3 li:not(.visible) .right-click-area {
		background-image: url("/wp-content/uploads/2025/03/plus-solid.svg");
		background-size: 15px ; /* Zorgt ervoor dat het icoon goed binnen het element past */
		background-repeat: no-repeat; /* Voorkomt herhalen van de afbeelding */
		background-position:calc(50% - 27px);
		width: 15px; /* Voeg een breedte toe, zodat de afbeelding goed zichtbaar is */
	}
	
	#mobile_menu3 li .right-click-area {
		background-image: url("/wp-content/uploads/2025/04/closeIconSella.svg");
		background-size: 15px ; /* Zorgt ervoor dat het icoon goed binnen het element past */
		background-repeat: no-repeat; /* Voorkomt herhalen van de afbeelding */
		background-position:calc(50% - 27px);
		width: 15px; /* Voeg een breedte toe, zodat de afbeelding goed zichtbaar is */
	}
	
	.rowMainNavbar {
		display: flex;
    	align-items: center;
	}
	
	.et_pb_column.et_pb_column_1_3.et_pb_column_4_tb_header.et_pb_css_mix_blend_mode_passthrough, .et_pb_column.et_pb_column_1_3.et_pb_column_5_tb_header.et_pb_css_mix_blend_mode_passthrough {
		margin-bottom:0px !important;
	}
	
	  #mobile_menu3 > li:has("visible") > ul {
		visibility: visible !important;
		display: block !important;
	  }
	
	  #mobile_menu3 > li:not(.visible) > ul {
		visibility: hidden !important;
		display: none !important;
	  }
	
	.BigMenu .sub-menu {
		width:auto !important;
		border-bottom-right-radius: 10px !important;
    	border-bottom-left-radius: 10px !important;
	}
	
	.BigMenu .sub-menu > li {
		width: 100%;
		border-bottom: 0px solid #333333 !important;
		margin-left: 0px !important;
		padding-left: 5% !important;
		margin-right: 0px !important;
		padding-right: 0px !important;
	}
	
	ul#mobile_menu3 {
		position: absolute;
		width: 105vw;
		height: 85vh;
		left: -66.3vw;
	}
  
}

@media only screen and (max-width: 767px)  {
	
	ul#mobile_menu3 {
		top:40px;
	}
	
	#mobiel-menu .et_mobile_nav_menu > div:not(.closed) #mobile_menu3 {
		display: flex ;
		flex-direction: column !important;
		  opacity: 0;
		  height: 0; /* Start met een hoogte van 0 */
		  overflow: hidden; /* Verberg het element totdat het volledig zichtbaar is */
		  animation: growDownResponsive 0.7s forwards; /* Voer de animatie uit */
		padding-bottom:0px !important;
	}
	
	#mobiel-menu .et_mobile_nav_menu > div.closed #mobile_menu3 {
	  animation: shrinkUpResponsive 0.7s forwards; /* Voer de animatie uit bij sluiten */
	}
}

@media (max-width: 575px) {
	ul#mobile_menu3 {
		position: absolute;
		width: 105vw;
		height: 85vh;
		left: -69.3vw;
	}
	
	#mobile_menu3 li {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 2.5vw;
	}
	
	#mobile_menu3 .QuickScanNavbar {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: calc(5% + 2.5vw);
	}
	
}

@media (max-width: 450px) {
	ul#mobile_menu3 {
		left: -70.3vw;
	}
}

@media (max-width: 425px) {
	ul#mobile_menu3 {
		left: -71.3vw;
	}
}
@media (max-width: 375px) {
	ul#mobile_menu3 {
		left: -75.3vw;
	}
}

/* Verberg het mobiele menu boven 1180px */
@media (min-width: 1368px) {
  #mobiel-menu {
      display: none !important; /* Mobiel menu verbergen */
  }
  #desktop-menu {
      display: block !important; /* Desktop-menu tonen */
  }
}