:root {
    --lightolive: #c7dfe4;
    --olive: #8fbfc9;
    --darkolive: #1f7f93;
    --verydarkolive: #175f6e;
    --lightcherry: #f9c389;
    --cherry: #f38612;
    --darkgrey: #282728;
    --grey: #585858;
    --greylighter: #707070;
    --mediumgrey: #C0C0C0;
    --lightgrey: #E8E8E8;
    --verylightgrey: #f4f4f2;
    --white: #ffffff;
    --black: #000000;
}

body {
    background-color: #ffffff;
    font-family: 'Open Sans', sans-serif, helvetica-light;
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    color: #333;
    line-height: 19px;
    height: 100%;
    margin: 0 auto 0 auto;
}

h1 {
    font-weight: 500;
    color: #207F92;
    font-size: 29px;
    line-height: 40px;
}

H3, H4 {
    font-weight: 700;
    color: #207F92;
}

h2 {
    font-size: 20px;
    font-weight: 500;
    color: #207F92;
}

h2 a {
    text-decoration: none;
}

h3 {
    font-size: 17px;
    font-weight: 700;
    color: #207f92;
}

h3 a {
    text-decoration: none;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 18px;
    font-weight: 500;
    color: #207F92;
}

h6 {
    font-size: 14px;
}

hr {
    height: 1px;
    border-top: 0px dotted #000;
    border-right: 0px dotted #000;
    border-bottom: 1px dotted #ffffff;
    border-left: 0px dotted #000;
}

a {
    color: var(--darkolive);
    text-decoration: none;
    font-weight: 400;
}

a:hover {
    color: var(--cherry);
    text-decoration: none;
}


.screen_width {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.screen_width_top_300 {
    width: 100%;
    height: auto;
    margin: 300px 0 0 0;
    padding: 0;
    overflow: hidden;
}

.footer_width {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 10px 0 20px 0;
    overflow: hidden;
}

.view_width {
    width: 1200px;
    height: auto;
    overflow: hidden;
    margin: 0 auto 0 auto;
    padding: 0;
}

.background_cherry {
    background-color: var(--cherry);
}

.background_light_olive {
    background-color: var(--olive);
}

.background_dark_olive {
    background-color: var(--darkolive) !important;
}

.background_dark {
    background-color: var(--darkgrey);
}

.text_left {
    text-align: left;
}

.text_right {
    text-align: right;
}

.text_center {
    text-align: center;
}

.visit_url {
    background-color: var(--darkolive);
    border: none;
    color: var(--white);
    font-weight: 400;
    font-size: 1.1rem;
    padding: 11px 0 11px 0;
    text-decoration: none;
    margin: 0 0 20px 0;
    cursor: pointer;
    width: 100%;
    height: auto;
    text-align: center;
    border-radius: 4px;
}

.visit_url:hover {
    background-color: var(--cherry);
    color: var(--white) !important;
}

.visit_url a {
    color: var(--white);
}

.visit_url a:hover {
    background-color: var(--cherry);
    color: var(--white);
}

input[type=submit] {
    background-color: var(--olive);
    border: none;
    color: var(--grey);
    font-size: 1.1rem;
    padding: 11px;
    text-decoration: none;
    margin: 0 0 20px 0;
    cursor: pointer;
    width: 100%;
    height: auto;
    text-align: center;
    border-radius: 4px;
}

input[type=submit]:hover {
    background-color: var(--cherry);
    color: var(--white);
}

.top_logo {
    width: 25%;
    height: 80px;
    padding-top: 20px;
    margin: 0;
    float: left;
}

.top_menu {
    width: 75%;
    height: 60px;
    padding-top: 40px;
    margin: 0;
    text-align: right;
    float: left;
}

.top_menu a {
    padding: 7px 13px 7px 15px;
    margin-right: 14px;
    color: #000000;
    font-size: 1.1rem;
    font-weight: 400;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}

.top_menu a:hover {
    color: var(--verydarkolive);
    background-color: var(--lightgrey);
    cursor: pointer;
}

.topnav {
    background-color: var(--cherry);
    overflow: hidden;
    margin: 0;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 13px;
    text-decoration: none;
    font-size: 15px;
}

.topnav a:hover {
    background-color: #a3c6bd;
    color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

.topnav .icon {
    display: none;
}

#slideshow {
    position: relative;
    width: 100%;
    height: 550px;
    padding: 0;
    overflow: hidden;
    background-color: #e8e8e8;
    clear: both;
}

#slideshow>div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: whitesmoke;
}

#slideshow>div>img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    position: absolute;
    top: 0;
}

.slide_text {
    width: 1200px;
    height: auto;
    margin: 0 auto 0 auto;
    position: relative;
    z-index: 10000000000000000;
    text-align: center;
    display: block;
}

.title_text {
    font-size: 3rem;
    margin-top: 150px;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    color: var(--white);
    z-index: 10000000000000001;
}

.sub_title_text {
    font-size: 1.75rem;
    margin-top: 20px;
    font-weight: 400;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    color: var(--white);
}

.sub_title_text a {
    color: var(--white);
    text-decoration: none;
}

.search_form {
    width: 40%;
    height: auto;
    margin: -250px auto 0 auto;
    position: relative;
    z-index: 1000;
}

.search_form_left {
    width: 70%;
    height: 40px;
    margin: 0 2% 0 0;
    float: left;
}

.search_form_left input[type=text] {
    width: 98%;
    height: 40px;
    margin: 0;
    padding-left: 2%;
    background-color: var(--white);
    border: 2px solid var(--greylighter);
    border-radius: 4px;
}

.search_form_right {
    width: 28%;
    height: 40px;
    margin: 0;
    float: left;
}

.search_form_right input[type=button] {
    width: 100%;
    height: 40px;
    margin: 0;
    color: var(--white);
    font-size: 1.2rem;
    background-color: var(--cherry);
    border: 2px solid var(--cherry);
    border-radius: 4px;
}

.text_block_top {
    width: 98%;
    height: auto;
    padding: 8px 1% 8px 1%;
}

.text_block_top a {
    margin-left: 30px;
    color: var(--verydarkolive);
    font-weight: 400;
}

.text_block_wide {
    width: 98%;
    height: auto;
    overflow: hidden;
    padding: 20px 1% 20px 1%;
}

.text_block_wide_top {
    width: 98%;
    height: auto;
    padding: 30px 1% 0 1%;
}

.text_block_wide_top h1 {
    color: var(--grey);
    font-size: 2rem;
}

.text_block_wide_top a {
    color: var(--olive);
}

.text_block_wide_top a:hover {
    color: var(--cherry);
}

.text_block_wide_left {
    width: 68%;
    height: auto;
    overflow: hidden;
    padding: 20px 1% 20px 1%;
    float: left;
    box-sizing: border-box;
}

.text_block_wide_left img {
    width: 100%;
    height: auto;
}

.text_block_wide_left ul {
    list-style-type: circle;
    line-height: 1.5rem;
}

.text_block_wide_right {
    width: 28%;
    height: auto;
    overflow: hidden;
    padding: 0 1% 20px 1%;
    float: left;
}

.add_block_wide {
    width: 46%;
    height: auto;
    margin: 0 2% 15px 2%;
    float: left;
}

.add_block_wide_top {
    width: 44%;
    height: 210px;
    margin: 0 4% 15px 0;
    float: left;
}

.add_block_wide_top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
}

.add_block_wide_bottom {
    width: 42%;
    height: 190px;
    margin: 0;
    padding: 10px 4% 10px 4%;
    text-align: left;
    float: left;
    background-color: var(--verylightgrey);
}

.add_block_text {
    width: 100%;
    height: 165px;
}

.add_block_text p {
    line-height: 18px;
    font-size: 13px;
}

.add_block_text h3 {
    color: var(--darkgrey);
    font-size: 1.2rem;
    margin: 5px 0 13px 0;
    font-weight: 300;
}

.add_block_link {
    width: 100%;
    height: 25px;
    font-weight: 700;
    color: red !important;
    text-decoration: none;
}

.category_line {
    width: 100%;
    height: auto;
    overflow: hidden;
    clear: both;
    margin-bottom: 30px;
}

.square_cat_block_title {
    width: 22%;
    height: 250px;
    margin: 0 3% 15px 0;
    float: left;
    background-color: var(--cherry);
    text-align: center;
    font-weight: 700;
    transition: background-color 0.5s ease;
}

.square_cat_block_title h5 {
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: 25px;
}

.square_cat_block_title a {
    color: var(--white);
}

.square_cat_block_title a:hover {
    color: var(--white);
}

.square_cat_block {
    width: 22%;
    height: 232px;
    margin: 0 3% 15px 0;
    float: left;
    background-color: var(--white);
    text-align: center;
    font-weight: 700;
    transition: background-color 0.5s ease;
}

.square_cat_block h5 {
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: 25px;
}

.square_cat_block a {
    color: var(--white);
    font-weight: 300;
    font-size: 1.15rem;
    line-height: 1.6em;
}

.square_cat_block_image {
    width: 100%;
    height: 190px;
    margin-bottom: 1px;
}

.square_cat_block_image img {
    object-fit: cover;
    max-width: 100%;
    height: 100%;
    width: auto;
}

.square_cat_block_text {
    height: 45px;
    width: 100%;
    padding-top: 15px;
    bottom: 0;
    transition: background-color 0.5s, color 0.5s;
    background-color: var(--verylightgrey);
    color: var(--grey);
}

.square_cat_block_text a {
    font-weight: 300 !important;
}

.square_cat_block_text:hover {
    background-color: var(--cherry);
    color: var(--white);
}

.footer_view_width {
    width: 1200px;
    height: auto;
    margin: 0 auto 20px auto;
    padding: 0;
    color: var(--olive);
}

.footer_view_width a {
    color: var(--olive);
    text-decoration: none;
}

.footer_view_width a:hover {
    color: var(--white);
    text-decoration: none;
}

.footer_block_wide {
    width: 98%;
    height: auto;
    padding: 30px 1% 35px 1%;
    margin-top: 30px;
}

.credits_bar {
    width: 100%;
    height: auto;
    padding: 20px 0 30px 0;
    text-align: right;
    font-size: 0.8em;
    font-weight: 300;
    border-top: 1px solid var(--greylighter);
}

.bottom_left {
    width: 30%;
    height: auto;
    float: left;
    text-align: left;
    font-weight: 300;
    font-size: 0.9em;
    color: var(--greylighter);
}

.bottom_right {
    width: 70%;
    height: auto;
    float: left;
    text-align: right;
    font-weight: 300;
    font-size: 0.9em;
    color: var(--greylighter);
}

.bottom_right a {
    color: var(--greylighter);
    text-decoration: none;
}

.bottom_right a:hover {
    color: var(--greylighter);
    text-decoration: underline;
}

.square_container1 {
    width: 23%;
    height: 205px;
    padding-top: 100px;
    margin: 0 2% 25px 0;
    float: left;
    background-color: #a3c6bd;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--white);
    line-height: 205px;
}

.square_container {
    width: 23%;
    height: 305px;
    margin: 0 2% 25px 0;
    float: left;
}

.square_container_start {
    width: 23%;
    height: 305px;
    margin: 0 2% 25px 0;
    float: left;
    background-color: var(--greylighter);
}

.square_cat_block_title {
    width: 22%;
    height: 250px;
    margin: 0 3% 15px 0;
    float: left;
    background-color: var(--cherry);
    text-align: center;
    font-weight: 700;
    transition: background-color 0.5s ease;
}

.square_cat_block_title h5 {
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: 25px;
}

.square_cat_block_title a {
    color: var(--white);
}

.square_cat_block_title a:hover {
    color: var(--white);
}

.square_cat_block2 {
    width: 100%;
    height: 230px;
    margin: 0;
    text-align: center;
    font-weight: 700;
    line-height: 230px;
}

.square_cat_block2 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: relative;
    z-index: 0;
}

.square_cat_block2 h5 {
    font-size: 1.5rem;
    color: var(--white);
}

.square_cat_block2 a {
    color: var(--white);
}

.category_block {
    width: 88%;
    height: auto;
    padding: 30px 6% 35px 6%;
    background-color: var(--olive);
    font-size: 1rem;
    line-height: 1.7rem;
    text-align: center;
    column-count: 4;
}

.category_block h2 {
    margin-bottom: 20px;
}

.category_block a {
    color: var(--darkgrey);
}

.category_block a:hover {
    text-decoration: underline;
}

.half_block {
    width: 36%;
    height: auto;
    padding: 30px 6% 35px 6%;
    background-color: var(--lightgrey);
    font-size: 1.3rem;
    line-height: 1.8rem;
    text-align: center;
    float: left;
    margin: 0 2% 70px 0;
}

.half_block:nth-child(2) {
    margin: 0 0 0 2%;
}

.half_block h2 {
    margin-bottom: 20px;
}

.half_block a {
    color: var(--cherry);
}

.half_block a:hover {
    text-decoration: underline;
}

.text_bottom2 {
    line-height: 20px;
    height: 76px;
    padding: 10px 7px 0 7px;
    width: 100%;
    text-align: center;
    bottom: 0;
    margin-top: 0;
    font-size: 0.95rem;
    font-weight: 400;
    background-color: var(--verylightgrey);
    color: var(--darkgrey);
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}

.text_bottom2:hover {
    background-color: var(--cherry);
    color: var(--white);
}

/* If the text has multiple lines, add the following: */
.text_bottom2 p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

.sub_city {
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--grey);
}

.half_page_left {
    width: 59%;
    height: auto;
    margin: 0 1% 0 0;
    float: left;
}

.half_page_right {
    width: 37%;
    height: auto;
    margin: 0 0 0 3%;
    float: left;
}

.subTitle {
    font-weight: 300;
    color: var(--cherry);
    font-size: 21px;
    margin-left: 11px;
    text-transform: lowercase;
}

.subTitleSmall {
    font-weight: 300;
    color: var(--cherry);
    font-size: 15px;
    margin-left: 5px;
    text-transform: lowercase;
}

.add_block_full_wide {
    width: 100%;
    height: auto;
    margin: 0 0 25px 0;
    float: left;
    display: block;
    overflow: hidden;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--lightgrey);
}

.add_block_company_logo {
    width: 42%;
    height: 210px;
    display: block;
    margin: 0 0 15px 8%;
    float: left;
}

.add_block_company_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.add_block_company_text {
    width: 42%;
    height: 180px;
    margin: 0;
    padding: 20px 4% 10px 4%;
    text-align: left;
    float: left;
    background-color: var(--verylightgrey);
}

.clear1 {
    width: 100%;
    clear: both;
    height: 1px;
}

.table_tr {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-top: 3px;
    padding-bottom: 3px;
}

.table_tr input[type=text] {
    width: 98%;
    height: auto;
    font-size: 1.2rem;
    padding: 3px 1% 3px 1%;
    border: 1px solid var(--mediumgrey);
    border-radius: 4px;
}

.table_tr textarea {
    width: 98%;
    height: 50px;
    font-size: 1.2rem;
    padding: 3px 1% 3px 1%;
    border: 1px solid var(--mediumgrey);
    border-radius: 4px;
}

.margin_bottom {
    margin-bottom: 60px !important;
}

.object_fit_fill {
    object-fit: fill;
}

.object_fit_contain {
    object-fit: contain
}

.object_fit_cover {
    object-fit: cover;
}

.object_fit_none {
    object-fit: none;
}

.object_fit_scale-down {
    object-fit: scale-down;
}

@media screen and (max-width: 1200px) {
    .view_width {
        width: 100%;
    }

    .topnav a {
        font-size: 13px !important;
    }

    .hide_mobile {
        display: none;
    }
}

@media screen and (max-width: 600px) {

    .hide_mobile {
        display: none;
    }
}

/* =========================================================
   MOBILE RESPONSIVE PATCH (place at end of test.css)
   ========================================================= */

/* Make sizing predictable */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevent horizontal scrolling on small screens */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Make media responsive by default */
img, video {
    max-width: 100%;
    height: auto;
}

/* Give containers some breathing room on small screens */
.view_width,
.footer_view_width,
.slide_text {
    max-width: 1200px;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}

/* --- Breakpoint: tablets & down --- */
@media screen and (max-width: 900px) {

    /* Top header: logo + menu stack */
    .top_logo,
    .top_menu {
        float: none;
        width: 100%;
        height: auto;
        padding-top: 12px;
        text-align: center;
    }

    .top_menu {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .top_menu a {
        display: inline-block;
        margin: 6px 6px 0 0;
        padding: 10px 12px;
    }

    /* Slideshow: reduce height */
    #slideshow {
        height: 380px;
    }

    #slideshow>div>img {
        height: 380px;
    }

    /* Slide text scales down */
    .title_text {
        font-size: 2rem;
        margin-top: 110px;
        line-height: 1.2;
    }

    .sub_title_text {
        font-size: 1.1rem;
        margin-top: 12px;
        line-height: 1.35;
    }

    /* Search form becomes wider */
    .search_form {
        width: 92%;
        margin: -170px auto 0 auto;
    }

    /* 2-column layouts become 1-column */
    .text_block_wide_left,
    .text_block_wide_right,
    .half_page_left,
    .half_page_right {
        float: none;
        width: 100%;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* Category block columns reduce */
    .category_block {
        column-count: 2;
    }
}

/* --- Breakpoint: phones --- */
@media screen and (max-width: 600px) {

    body {
        font-size: 15px;
        /* improve readability on mobile */
        line-height: 22px;
    }

    h1 {
        font-size: 24px;
        line-height: 32px;
    }

    h2 {
        font-size: 18px;
    }

    h3 {
        font-size: 16px;
    }

    /* Topnav: make links larger taps */
    .topnav a {
        float: none;
        display: block;
        padding: 14px 16px;
        font-size: 15px !important;
        text-align: left;
    }

    /* Slideshow: phone height */
    #slideshow {
        height: 260px;
    }

    #slideshow>div>img {
        height: 260px;
    }

    .title_text {
        font-size: 1.5rem;
        margin-top: 70px;
    }

    .sub_title_text {
        font-size: 1rem;
    }

    /* Search form stacks */
    .search_form {
        width: 94%;
        margin: 14px auto 0 auto;
        /* don't overlap slideshow on phones */
    }

    .search_form_left,
    .search_form_right {
        float: none;
        width: 100%;
        height: auto;
        margin: 0 0 10px 0;
    }

    .search_form_left input[type=text],
    .search_form_right input[type=button] {
        height: 46px;
        font-size: 1.05rem;
    }

    /* ===== Search input: zichtbare border + focus ===== */
    .search_form_left input[type=text] {
        border: 1px solid var(--mediumgrey) !important;
        background-color: var(--white);
    }

    .search_form_left input[type=text]::placeholder {
        color: var(--greylighter);
    }

    .search_form_left input[type=text]:focus {
        outline: none;
        border-color: var(--darkolive) !important;
        box-shadow: 0 0 0 3px rgba(31, 127, 147, 0.18);
    }


    /* Cards/blocks: go full-width */
    .add_block_wide,
    .add_block_wide_top,
    .add_block_wide_bottom,
    .square_container,
    .square_container1,
    .square_container_start,
    .square_cat_block,
    .square_cat_block_title {
        float: none;
        width: 100%;
        margin: 0 0 16px 0;
        height: auto;
    }

    /* Fix blocks with fixed heights so text can wrap */
    .add_block_wide_top {
        height: 220px;
    }

    .add_block_wide_bottom {
        height: auto;
    }

    .square_cat_block {
        height: auto;
    }

    .square_cat_block_image {
        height: 180px;
    }

    .square_cat_block_image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .square_cat_block_text {
        height: auto;
        padding: 12px 10px;
    }

    /* Category block: one column on phones */
    .category_block {
        column-count: 1;
        padding: 20px 16px;
    }

    /* Half blocks stack */
    .half_block {
        float: none;
        width: 100%;
        margin: 0 0 18px 0;
        padding: 22px 16px;
        font-size: 1.1rem;
        line-height: 1.6rem;
    }

    .half_block:nth-child(2) {
        margin: 0 0 18px 0;
    }

    /* Footer layout stacks */
    .bottom_left,
    .bottom_right {
        float: none;
        width: 100%;
        text-align: left;
        margin-top: 8px;
    }

    /* Forms */
    .table_tr input[type=text],
    .table_tr textarea {
        font-size: 1rem;
        padding: 10px 12px;
    }
}

/* =========================================================
   MOBILE HAMBURGER NAV (uses existing #myTopnav + myFunction)
   ========================================================= */

/* Desktop: keep as-is */
.topnav .icon {
    display: none;
}

/* Mobile/tablet: collapse nav */
@media screen and (max-width: 900px) {
    .topnav {
        position: relative;
    }

    /* Hide all links except the first one ("Home") by default */
    .topnav a {
        display: none;
        float: none;
        text-align: left;
        padding: 14px 16px;
    }

    .topnav a:first-child {
        display: block;
        /* Home stays visible */
    }

    /* Show hamburger icon */
    .topnav a.icon {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }

    /* When responsive class is added, show all links */
    .topnav.responsive a {
        display: block;
    }

    /* Keep icon top-right in responsive mode */
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
}

/* Slightly nicer tap target */
@media screen and (max-width: 900px) {
    .topnav a {
        font-size: 16px;
    }

    .topnav a.icon i {
        font-size: 18px;
    }
}

/* =========================================================
   TOP HEADER (logo + links) responsive
   ========================================================= */

/* Make logo image responsive */
.top_logo img {
    max-width: 100%;
    height: auto;
}

/* Keep your desktop layout intact, improve alignment a bit */
.top_menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

/* Make the top_menu items nicer hit targets */
.top_menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 6px;
}

/* Prevent image buttons from breaking layout */
.top_menu img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* =========================================================
   HAMBURGER BUTTON styling (replaces <a class="icon">)
   ========================================================= */
.topnav .icon {
    display: none;
    /* desktop hidden */
    background: transparent;
    border: 0;
    color: #f2f2f2;
    cursor: pointer;
    padding: 14px 16px;
    line-height: 1;
}

/* =========================================================
   Mobile/tablet: stack header + make header links usable
   ========================================================= */
@media screen and (max-width: 900px) {

    /* Stack logo + menu */
    .top_logo,
    .top_menu {
        float: none;
        width: 100%;
        height: auto;
        padding-top: 12px;
        text-align: center;
    }

    /* Center logo */
    .top_logo {
        padding-top: 14px;
        padding-bottom: 6px;
    }

    /* Turn the 3 links into a centered, wrapping row */
    .top_menu {
        justify-content: center;
        flex-wrap: wrap;
        padding-top: 8px;
        padding-bottom: 12px;
    }

    .top_menu a {
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.35);
    }

    /* Keep flags/buttons a sensible size */
    .top_menu a img[alt*="vlag"],
    .top_menu a img[alt*="Vlag"] {
        width: 44px;
        height: auto;
    }

    /* Last minute image: prevent it from being too wide */
    .top_menu a img[alt*="Last minute"],
    .top_menu a img[alt*="Lastminute"] {
        max-width: 180px;
        height: auto;
    }

    /* =======================================================
     Topnav collapse behavior (works with .responsive class)
     ======================================================= */
    .topnav {
        position: relative;
    }

    /* Hide all links by default */
    .topnav a {
        display: none;
        float: none;
        text-align: left;
        padding: 14px 16px;
        font-size: 16px;
    }

    /* Keep first link visible (Home) */
    .topnav a:first-child {
        display: block;
    }

    /* Show hamburger */
    .topnav .icon {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }

    /* When open, show all links */
    .topnav.responsive a {
        display: block;
    }

    /* Keep button top-right */
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
}

/* Phone polish */
@media screen and (max-width: 600px) {
    .top_menu a {
        width: auto;
        min-width: 56px;
    }
}

/* ===== Fix grote whitespace onder zoekblok op mobiel ===== */
@media screen and (max-width: 900px) {
    .screen_width_top_300 {
        margin-top: 60px;
        /* tablet */
    }
}

@media screen and (max-width: 600px) {
    .screen_width_top_300 {
        margin-top: 24px;
        /* phone */
    }
}