/*
Theme Name: ZZP Pakket
Theme URI: #
Template: Divi
Author: Klok Mediabureau
Author URI: https://www.klokmedia.nl/
Description: #
Version: 5.0.0-public-alpha.24.1759138999
Updated: 2025-09-29 11:43:19

*/

/* Normale font-weight voor items met child */
.et_mobile_menu .menu-item-has-children > a {
  font-weight: inherit;
}

/*change hamburger icon to x when mobile menu is open*/

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d';
}


/*adjust the new toggle element which is added via jQuery*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}


/*some code to keep everyting positioned properly*/

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}


/*remove default background color from menu items that have children*/

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}


/*hide the submenu by default*/

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}


/*show the submenu when toggled open*/

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}


/*adjust the toggle icon position and transparency*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: center;
	opacity: 1;
}


/*submenu toggle icon when closed*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	top: 10px;
	right:10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	color: #ffffff;
	background: #000000;
	border-radius: 50%;
	padding: 3px;
}


/*submenu toggle icon when open*/

ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '\32';
}


/*add point on top of the menu submenu dropdown*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
	position: absolute;
	right: 5%;
	margin-left: -20px;
	top: -14px;
	width: 0;
	height: 0;
	content: '';
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #ffffff;
}

/*force the background color and add a rounded border*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
	background-color: #000000!important;
	border-radius: 0px;
}

.et_mobile_menu .menu-item-has-children .sub-menu{
display: none !important;
}

.pa-block{
display: block !important;
height: fit-content !important;
padding-top: 0 !important;
margin-top: 0 !important;
padding: 5% !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}

.et_mobile_menu .menu-item-has-children .pa-submenu{
display: block !important;
}

.opened .et_mobile_menu{
height: fit-content !important;
padding: 5% !important;
}


ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle{
    	    text-align: right;
    	    width: 100%;
    }

.et_mobile_menu{
	width:66vw;
	left:-60vw;
}

/* Zorg dat de parent met class 'nolink' in het menu niet klikbaar lijkt */
@media (min-width: 981px) { /* Divi break voor desktop */
  .menu-item.nolink > a {
    cursor: default;
    pointer-events: none; /* blokkeert alleen op desktop */
  }
	#menu-hoofdmenu li a span{
		margin-top:-3px;
	}
}

/* Fix 100% width boxed lay-out */
.et_boxed_layout #page-container{
	overflow:clip!important;
}

.mfp-bottom-bar{display:none;}

@media only screen and (min-width: 768px) {
.et_pb_gallery_grid .et_pb_gallery_image {
padding-top: 66.7%; /* Change this value to be whatever aspect ratio you want, for example if you wanted portrait - try 180% | or square would be 100% */
display: block;
}
	
.et_pb_gallery_grid .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
}

img.mfp-img{
	min-height:33vh;
}

/* CF 7 */

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.form-row.two-columns .form-col {
  flex: 1 1 48%;
	margin-right:2%;
}

.form-row.two-columns .form-col:last-child {
  margin-right: 0;
}

.form-row label {
  display: block;
  width: 100%;
  font-weight: 600;
  margin-bottom: 0.3em;
}

.form-row input,
.form-row textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.wpcf7-form-control-wrap {
  width: 100%;
}

/* EINDE CF 7 */

/* BEGIN Luxe hover projectcarousel */
.project-carousel .et_pb_image_wrap {
  position: relative;
  display: block;
  overflow: hidden;
}

.project-carousel .et_pb_image_wrap img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition:
    transform 700ms cubic-bezier(.22, 1, .36, 1),
    filter 700ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

/* subtiele luxe overlay */
.project-carousel .et_pb_image_wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.04) 38%,
      rgba(29,62,77,.32) 100%
    );
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

/* glanzende sweep */
.project-carousel .et_pb_image_wrap::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -80%;
  z-index: 2;
  width: 45%;
  height: 140%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.18) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: left 900ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.project-carousel .et_pb_image:hover .et_pb_image_wrap img {
  transform: scale(1.055);
  filter: saturate(1.05) contrast(1.04);
}

.project-carousel .et_pb_image:hover .et_pb_image_wrap::before {
  opacity: 1;
}

.project-carousel .et_pb_image:hover .et_pb_image_wrap::after {
  left: 130%;
}

/* titel subtiel mee laten reageren */
.project-carousel .et_pb_group:hover h5 {
  color: #1d3e4d;
  transform: translateY(-2px);
}

.project-carousel h5 {
  transition:
    color 300ms ease,
    transform 300ms ease;
}

/* EINDE Luxe hover projectcarousel */

/* BEGIN Luxe hover voor projectoverzicht */
.project-grid .et_pb_image_wrap {
  position: relative;
  display: block;
  overflow: hidden;
}

.project-grid .et_pb_image_wrap img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition:
    transform 700ms cubic-bezier(.22, 1, .36, 1),
    filter 700ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.project-grid .et_pb_image_wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.04) 38%,
      rgba(29,62,77,.32) 100%
    );
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

.project-grid .et_pb_image_wrap::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -80%;
  z-index: 2;
  width: 45%;
  height: 140%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.18) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: left 900ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.project-grid .et_pb_image:hover .et_pb_image_wrap img,
.project-grid .et_pb_column:hover .et_pb_image_wrap img {
  transform: scale(1.055);
  filter: saturate(1.05) contrast(1.04);
}

.project-grid .et_pb_image:hover .et_pb_image_wrap::before,
.project-grid .et_pb_column:hover .et_pb_image_wrap::before {
  opacity: 1;
}

.project-grid .et_pb_image:hover .et_pb_image_wrap::after,
.project-grid .et_pb_column:hover .et_pb_image_wrap::after {
  left: 130%;
}

.project-grid .et_pb_column:hover h5 {
  color: #1d3e4d;
  transform: translateY(-2px);
}

.project-grid h5 {
  transition:
    color 300ms ease,
    transform 300ms ease;
}

/* EINDE Luxe hover voor projectoverzicht */

/* ZZP-pakket: vaste uitlijning van knoppen en iconen */
body #page-container .et_pb_section a.et_pb_button,
body #page-container .et_pb_section a.et_pb_button:hover {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45em !important;
  padding: .65em 1.2em !important;
  transition:
    background-color .2s,
    color .2s,
    border-color .2s !important;
}

/* Icoon vóór de tekst: geen verschuiving bij hover */
body #page-container .et_pb_section a.et_pb_button::before,
body #page-container .et_pb_section a.et_pb_button:hover::before {
  position: static !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  color: currentColor !important;
  transition: none !important;
}

/* Extra Divi-hoverpijl uitschakelen */
body #page-container .et_pb_section a.et_pb_button::after,
body #page-container .et_pb_section a.et_pb_button:hover::after {
  display: none !important;
  content: none !important;
}