.flex_layout.vacatures .vacatures_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}


.flex_layout.vacatures #filter{
    padding: 28px 40px;
    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}

.flex_layout.vacatures #filter ul{
    padding: 0px;
    display: grid;
    /*grid-template-columns: repeat(5, 1fr);*/
	grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.flex_layout.vacatures #filter ul h4{
    padding-bottom: 20px;
}

.flex_layout.vacatures #filter ul label{
    width: 100%;
}

.flex_layout.vacatures #filter ul select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0px;
    border-radius: 0px;
    padding: 12px 30px 12px 20px;
    width: 100%;
    background-color: var(--wp--preset--color--fl-footer-widgets-text);
    color: var(--wp--preset--color--fl-body-text);
    
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='9' viewBox='0 0 17 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_795_10705' fill='white'%3E%3Cpath d='M0.5 0.5L8.5 8.5L16.5 0.5'/%3E%3C/mask%3E%3Cpath d='M8.5 8.5L7.08579 9.91421C7.86684 10.6953 9.13317 10.6953 9.91421 9.91421L8.5 8.5ZM-0.914214 1.91421L7.08579 9.91421L9.91421 7.08579L1.91421 -0.914214L-0.914214 1.91421ZM9.91421 9.91421L17.9142 1.91421L15.0858 -0.914214L7.08579 7.08579L9.91421 9.91421Z' fill='%23004664' mask='url(%23path-1-inside-1_795_10705)'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 15px auto;
    background-position: calc(100% - 10px) 50%;
}

.flex_layout.vacatures #filter .sf-field-submit {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.flex_layout.vacatures #filter .sf-field-submit > input{
    padding: 12px 30px 14px 20px;
    border: 0px;
    width: 100%;
    text-align: left;
    font-weight: 600;
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.2888 17.1972L13.2827 12.1454C14.2623 10.9176 14.853 9.36176 14.853 7.67001C14.853 3.7101 11.6421 0.5 7.67649 0.5C3.7109 0.5 0.5 3.71479 0.5 7.67469C0.5 11.6346 3.7109 14.8447 7.67649 14.8447C9.39209 14.8447 10.9624 14.2448 12.1999 13.242L17.1733 18.261C17.3233 18.4203 17.5295 18.5 17.7311 18.5C17.9233 18.5 18.1154 18.4297 18.2607 18.2892C18.5701 17.9938 18.5795 17.5065 18.2888 17.1972ZM7.67649 13.3029C6.17182 13.3029 4.7562 12.7171 3.69215 11.6533C2.62811 10.5896 2.04217 9.17431 2.04217 7.67469C2.04217 6.1704 2.62811 4.75514 3.69215 3.69604C4.7562 2.63226 6.17182 2.04648 7.67649 2.04648C9.18116 2.04648 10.5968 2.63226 11.6608 3.69604C12.7249 4.75983 13.3109 6.17509 13.3109 7.67469C13.3109 9.17899 12.7249 10.5942 11.6608 11.6533C10.5968 12.7171 9.18116 13.3029 7.67649 13.3029Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 20px auto;
    background-position: calc(100% - 15px) 50%;
}

#pk_flex_content .flex_content > .vacatures #filter{
    margin-bottom: 20px;
}

@media screen and (min-width: 993px){
    #pk_flex_content .flex_content:has(+ .flex_content > .vacatures) .flex_hero_inner{
        padding-bottom: 150px;
    }
    
    #pk_flex_content .flex_content:has(+ .flex_content > .vacatures) .flex_hero_inner #scroll_down{
        bottom: 150px;
    }
    
    #pk_flex_content .flex_content:has(> .hero_afbeelding) + .flex_content > .vacatures{
        padding-top: 30px;
    }
    
    #pk_flex_content .flex_content:has(> .hero_afbeelding) + .flex_content > .vacatures #filter{
        transform: translate(0, -50%);
        margin-bottom: -40px;
		margin-top: 20px;
    }
}

@media (max-width: 1200px) {
  .flex_layout.vacatures #filter ul {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
    .flex_layout.vacatures .vacatures_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
  .flex_layout.vacatures #filter ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
    .flex_layout.vacatures .vacatures_grid {
        grid-template-columns: 1fr;
    }
    
    .flex_layout.vacatures #filter ul {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .flex_layout.vacatures #filter{
        padding: 20px 20px;
    }
}

@media (max-width: 480px) {
  .flex_layout.vacatures #filter ul {
    grid-template-columns: 1fr;
  }
}