.elementor-357 .elementor-element.elementor-element-5f0b8f1{--display:flex;--flex-wrap:wrap;--align-content:flex-start;}.elementor-357 .elementor-element.elementor-element-d20eb6f{width:100%;max-width:100%;}:root{--page-title-display:none;}@media(min-width:721px){.elementor-357 .elementor-element.elementor-element-5f0b8f1{--width:90%;}}/* Start custom CSS for shortcode, class: .elementor-element-d20eb6f *//* ---- FILTERKNOPPEN ---- */
.gallery-filters {
    text-align: center;
    margin-bottom: 20px;
}

.filter-text {
    /* Standaard stijl voor de tekst-filters */
    color: #000;
    font-size: 12px;
    padding: 8px 10px;
    margin: 0 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-text:hover,
.filter-text.active {
    /* Stijl bij hover en voor het actieve filter */
    color: #333;
    font-weight: bold;
}

/* ---- AFBEELDINGEN EN TEKST ---- */
.dynamic-gallery {
    display: grid; /* Gebruik een grid-lay-out voor de galerij */
    grid-template-columns: repeat(5, 1fr); /* 4 gelijke kolommen */
    gap: 30px; /* Ruimte tussen de galerij-items */
}

/* Stijl voor de afzonderlijke items in de galerij */
.gallery-item-wrapper {
    text-align: center; /* Centreert de tekst onder de afbeelding */
    }

/* Stijl voor de afbeeldingen in de galerij */
.gallery-item img {
    margin-top: 2px;
    margin-bottom: 2px;
    width: 250px; /* Maakt de afbeelding 100% breed van de kolom */
    height: 150px; /* Vaste hoogte van de afbeelding */
    object-fit: cover; /* Zorgt ervoor dat de afbeelding de beschikbare ruimte vult zonder vervorming */
    border-radius: 0px; /* Geen afronding van de hoeken */
    transition: transform 0.2s ease; /* Vloeiende schaalverandering bij hover */
}

/* Effect bij hover over de afbeelding */
.dynamic-gallery a:hover img {
    transform: scale(1.05); /* Vergroot de afbeelding iets bij hover */
}

/* Stijl voor de titel onder de afbeelding (nieuw element) */
.gallery-item-title {
    color: #000;
    font-size: 12px;
    margin-top: 2px; /* Ruimte tussen de afbeelding en de titel */
    margin-bottom: 2px;
    word-wrap: break-word; /* Voorkomt horizontale overflow bij lange titels */
}

/* ---- Zichtbaarheid van items ---- */
/* Verbergt de galerij-items die niet overeenkomen met het actieve filter */
.gallery-item-wrapper.hidden {
    display: none; /* Verbergt de items volledig */
}


.gallery-pagination-text {
    text-align: center;
    margin-top: 30px;
}

.gallery-pagination-text .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    border: none;
    background: none;
    text-decoration: none;
    color: #333;
    font-weight: normal;
}

.gallery-pagination-text .page-numbers.current,
.gallery-pagination-text .page-numbers:hover {
    color: #0073aa;
    font-weight: bold;
}

.gallery-pagination-text .page-numbers.prev,
.gallery-pagination-text .page-numbers.next {
    font-size: 1.2em; /* Maak de pijlen iets groter */
}

.project-link {
    /* Uiterlijk van de tekstlink */
    display: inline-block;
    margin-top: 0px; /* Ruimte tussen de link en de titel */
    margin-bottom: 0px;
    font-size: 12px; /* Lettergrootte */
    font-weight: bold; /* Vetgedrukte tekst */
    color: #0073aa; /* Kleur van de tekst */
    text-decoration: none; /* Verwijdert de onderstreping */
    transition: color 0.3s ease; /* Vloeiende overgang bij hover */

    /* Verwijdert de knop-achtige stijlen */
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

.project-link:hover {
    color: #005f8d; /* Donkerdere kleur bij hover */
    text-decoration: underline; /* Toont onderstreping bij hover */
}/* End custom CSS */