/*
Theme Name: Cre-aid	
Template: Impreza
Version: 1.0
Author:	WEBtima
Theme URI: https://www.webtima.nl/
Author URI: https://www.webtima.nl/
*/

.creaid-start{
	  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.header-media.header-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

.header_hor .l-header.pos_fixed~.l-main>.l-section:first-of-type>.l-section-h,.header_hor .l-header.pos_fixed~.l-main>form>.l-section:first-of-type>.l-section-h,.header_hor .l-header.pos_static.bg_transparent~.l-main>.l-section:first-of-type>.l-section-h,.header_hor .l-header.pos_static.bg_transparent~.l-main>form>.l-section:first-of-type>.l-section-h {
    padding-top: 0px;
}

.l-canvas {
	background: none;
}

/* Bold menu hover */
.menu-item a:hover{
	font-weight:bold;}

/* All inks underlined */
.wpb_text_column a{
    text-decoration: underline;
}

.wpb_text_column a:hover{
    font-weight: bold;
}

.header-groot { height: 80vh; }
.header-middel { height: 70vh; }
.header-klein { height: 40vh; }

.header-media img,
.header-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.l-main{
	 box-shadow: 0 0px 20px #A0A0A0;
	 border-radius: 50px;
	z-index: 5;
	position: relative;
	margin-top: -100px;
}
.l-main .l-section{
	background-color: white;
}



/* Submenu rounded border */
 .w-nav-list.level_2 {
    width: 300px;
    margin-top: 20px;
    --dropdown-padding: 20px;
    border-radius: 25px;
    padding: var(--dropdown-padding, 0px);
}

/* Arrow lined */
.w-nav-arrow:before {
    line-height: 30px;
}
/* Hover effect: kaart iets omhoog */
.werken .w-grid-item {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.werken .w-grid-item:hover {
  transform: translateY(-8px);
  
}

.type_mobile{
    background: white;
    padding: 10px 10px 10px 0px;
    margin-top: -20px;
	border-radius:10px;
}



@media (max-width: 1200px) {
    .l-canvas {
        overflow: unset !important;
    }
	
	.l-canvas.type_boxed,
	.l-canvas.type_boxed .l-subheader,
	.l-canvas.type_boxed ~ .l-footer {
		max-width: 90%;
		margin: 0 auto;
		border-radius:50px;
	}
	.l-section {
    padding-left: 45px;
		padding-right: 45px;
	}
	.filters {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .filters button {
        width: 100%;
        padding: 12px;
        border-bottom: 1px solid #ddd;
    }
	
	.header-klein { height: 30vh; }
	
}

@media (min-width: 1200px) {

	.w-grid-list {
	  display: grid !important;
	  grid-template-columns: 2fr 1fr;
	  gap: 1.5rem;
	}

	/* standaard: klein */
	.werkitems .w-grid-item {
	  grid-column: span 1;
	}

	/* elke 3e item (1,4,7,10...) = groot */
	.werkitems .w-grid-item:nth-child(3n+1) {
	  grid-column: span 2;
		height: 500px;
	}
	.werkitems .w-grid-item:nth-child(3n+1) .w-grid-item-h {
		height: 500px;
	}
}


.noborder input{
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
}
#gform_submit_button_2{
	background: none;
    box-shadow: none;
	    top: -68px;
    position: relative;
    right: -90%;
}

.polygon {
    position: relative;
    overflow: visible;
}

.polygon::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 40px;
    z-index: 9;
    width: 60px;
    height: 60px;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

main > section:last-of-type {
    position: relative;
    overflow: visible;
}

main > section:last-of-type::after {
    content: "";
    position: absolute;
    bottom: -59px;
    left: 80px;
    z-index: 9;
    width: 60px;
    height: 60px;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}


.video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/* fallback afbeelding */
.video-fallback {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* jouw bestaande video container */
.video-background {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* 👇 nieuw */
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 2;
}

/* als video geladen is */
.video-background.video-loaded {
  opacity: 1;
}

.header-groot {
  height: 80vh;
}

.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 100vw;
  height: 56.25vw; /* 16:9 verhouding */

  min-height: 100%;
  min-width: 177.77vh; /* 16:9 */

  transform: translate(-50%, -50%);
  pointer-events: none;
}


@media screen and (max-width: 900px) {
    .header_hor .w-nav.type_mobile.m_layout_dropdown .w-nav-list.level_1 {
        padding: 2rem !important;
		border-radius: 25px;
    }
}