:root {
/* Instellen van een aantal basiswaarden. */
/* Kleuren voor gehele website */
    --main-color-background: rgb(220, 253, 220);
    --main-color-text:rgb(0 0 0);
    --main-text-font-family:"Trirong", serif;
    --main-text-size:calc(1.7 * 1vw);
/* Kleuren voor gehele website bij "320px>screenwidth>768px" schermbreedte*/
    --main-tel-color-background: rgb(220, 253, 220);
    --main-tel-color-text:rgb(0 0 0);
    --main-tel-text-font-family:"Trirong", serif;
    --main-tel-text-size:calc(3.0 * 1vw);
/* kleuren ed voor het hoofdmenu */
    --menu-color-background:rgb(220, 253, 220);
    --menu-color-text:rgb(0 0 0);
    --menu-color-active:rgb(0 0 255);
    --menu-color-page-active:rgb(252, 2, 177);
    --menu-color-text-hover:rgb(0 255 0);
    --menu-color-border-box:rgb(220, 253, 220);
    --menu-text-font-family:"Sofia", sans-serif;
    --menu-text-size:calc(2.0 * 1vw);
    --menu-text-size-submenu:calc(1.5 * 1vw);
    --menu-blok-grootte:10vw;
/* kleuren ed voor het hoofdmenu bij "320px>screenwidth>768px" schermbreedte*/
    --menu-tel-color-background:rgb(220, 253, 220);
    --menu-tel-color-text:rgb(0 0 0);
    --menu-tel-color-active:rgb(0 0 255);
    --menu-tel-color-page-active:rgb(252, 2, 177);
    --menu-tel-color-text-hover:rgb(0 255 0);
    --menu-tel-color-border-box:rgb(220, 253, 220);
    --menu-tel-text-font-family:"Sofia", sans-serif;
    --menu-tel-text-size:calc(3.5 * 1vw);
    --menu-tel-text-size-submenu:calc(1.6 * 1vw);
    --menu-tel-blok-grootte:20vw;
}

html { 
    box-sizing: border-box;   
    background-color:var(--main-color-background); 
    color:var(--main-color-text); 
    font-family: var(--main-text-font-family);
    font-size:var(--main-text-size);
/*  padding: top rechts onder links*/ 
    padding: 1vw 3vw 1vw 3vw;
}

/* Hier staan de show zaken voor de klok. Echter voor >768px zijn hier andere waarden voor
   In betrffende blok hiervoor 320<x>768 */
#clock {
    box-sizing: border-box;
    position:absolute;
    inset-inline-start: 3vw;
    writing-mode: horizontal-tb;
    direction: rtl;
    font-size: 1.0rem;
    width: 9rem;
    height: fit-content;
    margin: 2px;
    text-align: center;
    border: 2px solid black;
    border-radius: 20px;
}


@media screen and ((min-width:320px) and (max-width:767px)) {
    html {
        padding: 1vw 1vw 1vw 1vw;
    }

    #clock {
        box-sizing: border-box;
        position:absolute;
        inset-inline-start: 3vw;
        writing-mode: horizontal-tb;
        direction: rtl;
        font-size: 2.0rem;
        width: 15rem;
        height: fit-content;
        margin: 2px;
        text-align: center;
        border: 2px solid black;
        border-radius: 20px;
    }
    

    body {
        color: red;
        font-size:var(--main-tel-text-size);
    }

    .header {
/* De volgende waarde geeft aan hoe groot het header blok moet worden en het logo */
        --blok-grootte-multiplier:1.0;
/*                                                                                */
        display:grid;
        grid-template-columns:1;
        grid-template-rows: 4;
        font-family: var(--menu-text-font-family);
        font-size: var(--menu-tel-text-size);
        color:var(--menu-tel-color-text);
    }

    .header img {
        height: calc(var(--blok-grootte-multiplier) * var(--menu-tel-blok-grootte) );
        width: calc(var(--blok-grootte-multiplier) * var(--menu-tel-blok-grootte) );
    } 

    .header a:any-link {
        padding:0 0 0 0; 
        text-align: center;
        float: left;
    }

/* Hierin staat het logo */
    .header .header-grid-item:first-child {
        box-sizing: border-box;
        display:flex;
        justify-content: center;
        align-items: center;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }
/* hierin staat de landnaam */    
    .header .header-grid-item:nth-child(2) {
        box-sizing: border-box;
        position:relative;
        inset-block-start: calc(-1 *  var(--blok-grootte-multiplier) * var(--menu-tel-blok-grootte) + 5.5vw);
        inset-inline-start: calc(-1.80 *  var(--blok-grootte-multiplier) * var(--menu-tel-blok-grootte));
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
        display:flex;
        justify-content: center;
        align-items: center;
        font-size: calc(var(--blok-grootte-multiplier) * var(--menu-tel-text-size));
    }

    .header .header-grid-item:nth-child(1),.header-grid-item:nth-child(2) a:any-link {
        text-decoration: none;
        list-style: none;
        margin:0;
        padding:0;
    }
    
/* Hierin staat het menu */    
    .header .header-grid-item:last-child {
        align-items: center;
        background-color: var(--menu-tel-color-background);
        box-sizing: border-box;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
        margin:auto;
        justify-content: center;
        position: relative;
        inset-inline-start: calc(-2 *  var(--blok-grootte-multiplier) * var(--menu-tel-blok-grootte) + 6vw);
        inset-block-start: calc(-0.6 *  var(--blok-grootte-multiplier) * var(--menu-tel-blok-grootte) + 6vw);
    }
        
    .header .header-grid-item:last-child .nav-hoofd {
        display:block;
        box-sizing: border-box;
        align-content: center;
        overflow: hidden;
    }

    .header .header-grid-item:last-child .nav-hoofd a {
        /* Uitlijning (sub)menu */
        text-align: left;
        text-decoration: underline;
    }

    .header .header-grid-item .nav-hoofd .subnav {
        float: left;
        overflow: hidden;
    }

    .header .header-grid-item .nav-hoofd .subnav-active .subnavbtn a {
        float: left;
        overflow: hidden;
        background-color: var(--menu-color-page-active);
    }

    .header .header-grid-item .nav-hoofd .subnavbtn {
        background-color: var(--menu-tel-color-page-active);
        float: left;
        font-family: var(--menu-tel-text-font-family);
        font-size: var(--menu-tel-text-size);
        color:var(--menu-tel-color-text);
        background-color: var(--main-tel-color-background);
        border:none;
        overflow: hidden;
        padding: 1vw 0 0 0;
    }

    .header .header-grid-item .nav-hoofd .subnav-content {
        display:none;
        position: relative;
        left: 0;
        width: 100%;
        z-index: 1;
        background-color:var(--main-tel-color-background); 
    }
      
    .header .header-grid-item .nav-hoofd .subnav-content a {
        float: left;
        /*  padding: top rechts onder links*/ 
        padding: 0 0.5vw 0 0;
    }

    /* When you move the mouse over the subnav container, open the subnav content */
    .header .header-grid-item .nav-hoofd .subnav:hover .subnav-content {
    /* Display : block zorgt ervoor dat items onder elkaar komen te staan */
    /* Display : flex zorgt ervoor dat items naast elkaar komen te staan */
        display: block;
        position: relative;
        inset-block-start: 0vw;
        inset-inline-start: 0vw;
        width: min-content;
        flex-wrap: wrap;
        column-gap: 0.5vw;
        font-size: calc(0.75 * var(--menu-tel-text-size));
    }

    /* Samenvoegen werkt niet met bovenstaande optie. Dus maar zo. */
    /* When you move the mouse over the subnav container, open the subnav content */
    .header .header-grid-item .nav-hoofd .subnav-active:hover .subnav-content {
    /* Display : block zorgt ervoor dat items onder elkaar komen te staan */
    /* Display : flex zorgt ervoor dat items naast elkaar komen te staan */
        display: inline-flex;
        position: relative;
        inset-inline-start: 3vw;
        width: min-content;
        flex-wrap: wrap;
        column-gap: 0.5vw;
        font-size: calc(0.75 * var(--menu-tel-text-size));
    }
    
    .header .header-grid-item .nav-hoofd .active-page>a{
        box-sizing: border-box;
        background-color: var(--menu-tel-color-page-active);
    }

    .header .header-grid-item .nav-hoofd .subnav:hover,a:hover {
        background-color:var(--menu-tel-color-text-hover); 
    }

    .header .header-grid-item .nav-hoofd a:active {
        background-color:var(--menu-tel-color-active); 
    }

    .header .header-grid-item .nav-hoofd p {
        box-sizing: content-box;
        padding: 0px 5px 0px 5px ;
    }

    .top-fotoblok {
        box-sizing: border-box;
        align-content: center;
        border: 3px var(--menu-tel-color-border-box) solid;    
   }

    .top-fotoblok img {
        height:15vw;
        width:100%;
    }

    .top-fotoblok iframe {
        height:15vw;
        width:100%;
    }
    

    .fotoblok {
        align-content: center;
        box-sizing: content-box;
        display: flex;
        flex-direction: column;
        grid-template-columns: 1;
        grid-template-columns: 5;
    }

    .fotoblok img {
        max-width: 100%;
        max-height: 100%;
        padding: 1vw;
    }

    .fotoblok video {
        max-width: 100%;
        max-height: 100%;
    }

    .bottom-tekst {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 3;
    }
    
    .bottom-tekst .float-left, .float-right {
        padding: 1vw;
    } 
    
    .bottom-tekst .float-left img {
        float:left;
        padding: 1vw;
        width:50vw;
    }
        
    .bottom-tekst .float-right img {
        float:right;
        padding: 1vw;
        width: 50vw;
   }
        
}
/*====================================================================================*/
/*====================================================================================*/

@media screen and ((min-width:768px) and (max-width:1023px)) {

    body {
        color: green;
    }

    .header {
        /* De volgende waarde geeft aan hoe groot het header blok moet worden en het logo */
                --blok-grootte-multiplier:1.2;
        /*                                                                                */
                display:grid;
                grid-template-columns: calc(var(--blok-grootte-multiplier) * var(--menu-blok-grootte)) calc(var(--blok-grootte-multiplier) * var(--menu-blok-grootte)) auto;
                grid-template-rows: 1;
                font-family: var(--menu-text-font-family);
                font-size: var(--menu-text-size);
                color:var(--menu-color-text);
                margin:auto;
            }
        
            .header img {
                height: calc(var(--blok-grootte-multiplier) * var(--menu-blok-grootte) );
                width: calc(var(--blok-grootte-multiplier) * var(--menu-blok-grootte) );
            } 
            .header a:any-link {
                padding:0 0 0 0; 
                text-align: center;
                float: left;
            }
        
        /* Hierin staat het logo */
            .header .header-grid-item:first-child {
                box-sizing: border-box;
                display:flex;
                justify-content: center;
                align-items: center;
                grid-column-start: 1;
                grid-column-end: 2;
                grid-row-start: 1;
                grid-row-end: 2;
            }
        
        /* hierin staat de landnaam */    
            .header .header-grid-item:nth-child(2) {
                box-sizing: border-box;
                position:absolute;
                inset-block-start: calc(0.48 * var(--blok-grootte-multiplier) * var(--menu-blok-grootte));
                inset-inline-start: 5.4vw;
                        grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 1;
                grid-row-end: 2;
                display:flex;
                justify-content: center;
                align-items: center;
            }
        
        /* Hierin staat het menu */    
            .header .header-grid-item:last-child {
                align-items: center;
                background-color: var(--menu-color-background);
                box-sizing: border-box;
                grid-column-start: 3;
                grid-column-end: 4;
                grid-row-start: 1;
                grid-row-end: 2;
                margin:auto;
                height:fit-content;
            }
        
            .header .header-grid-item:nth-child(1),.header-grid-item:nth-child(2) a:any-link {
                text-decoration: none;
            }
        
            .header .header-grid-item:last-child .nav-hoofd {
                display:flex;
                flex-wrap: wrap;
                align-content: center;
                overflow: hidden;
                gap: .5vw;
            }
        
            .header .header-grid-item:last-child .nav-hoofd a {
                float: left;
                /* Uitlijning (sub)menu */
                text-align: left;
                /*  padding: top rechts onder links*/ 
                padding: 0px 0.5vw 0 0;              
            }
        
            .header .header-grid-item .nav-hoofd .subnav {
                float: left;
                overflow: hidden;
            }
        
            .header .header-grid-item .nav-hoofd .subnav-active {
                float: left;
                overflow: hidden;
                background-color: var(--menu-color-page-active);
            }
        
            .header .header-grid-item .nav-hoofd .subnavbtn {
                font-family: var(--menu-text-font-family);
                font-size: var(--menu-text-size);
                color:var(--menu-color-text);
                background-color: inherit;
                border:none;
                padding: 0;
                margin:0;
                outline:none;
            }
        
            .header .header-grid-item .nav-hoofd .subnav-content {
                display:none;
                font-size: var(--menu-text-size-submenu);
                position: relative;
                inset-inline-start: 0vw;
                inset-block-start: 0vw;
                left: 0;
                width: 10%;
                z-index: 1;
            }
              
            .header .header-grid-item .nav-hoofd .subnav-content a {
                float: left;
            }
              
            .header .header-grid-item .nav-hoofd .subnav:hover .subnav-content {
                /* Display : block zorgt ervoor dat items onder elkaar komen te staan */
                /* Display : flex zorgt ervoor dat items naast elkaar komen te staan */
                display: block;
                width: min-content;
                flex-wrap: wrap;
            }
            
            .header .header-grid-item .nav-hoofd .subnav-active:hover .subnav-content {
                /* Display : block zorgt ervoor dat items onder elkaar komen te staan */
                /* Display : flex zorgt ervoor dat items naast elkaar komen te staan */
                display: block;
                width: min-content;
                flex-wrap: wrap;
            }
            
            .header .header-grid-item .nav-hoofd .active-page {
                background-color: var(--menu-color-page-active);
            }
            
            .header .header-grid-item .nav-hoofd li {
                align-content: center;
                box-sizing: content-box;
                display: flex;
            }
        
            .header .header-grid-item .nav-hoofd a:hover {
                background-color:var(--menu-color-text-hover); 
            }
        
            .header .header-grid-item .nav-hoofd a:active {
                background-color:var(--menu-color-active); 
            }
        
            .header .header-grid-item .nav-hoofd p {
                box-sizing: border-box;
                padding: 0px 5px 0px 5px ;
            }
        
            .header .header-grid-item-h3 {
                padding: 0 0 0 5vw;
            } 
        
        
        
    .top-fotoblok {
        box-sizing: border-box;
        overflow: hidden;
        align-content: center;
        border: 3px var(--menu-color-border-box) solid;    
    }

    .top-fotoblok img {
        height:15vw;
        width:100%;
    }

    .top-fotoblok iframe {
        height:15vw;
        width:100%;
    }

    .frontpage-2col {
        display: grid;
        grid-template-columns: 1fr  1fr;
    }

    .frontpage-2col .grid-item-2col:first-child {
        align-items: center;
        box-sizing: border-box;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        padding:1vw;
    }

    .frontpage-2col .grid-item-2col:last-child {
        align-items: center;
        box-sizing: border-box;
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        padding:1vw;
    }

    .fotoblok {
        align-content: center;
        box-sizing: content-box;
        gap: 1vw;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 2;
    }    
        
    .fotoblok img {
        max-width: 100%;
        max-height: 100%;
    }

    .fotoblok video {
            max-width: 100%;
            max-height: 100%;
        }
        
    .fotoblok img:nth-child(1) {
        grid-column-start:1 ;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end:2 ;
    }
    .fotoblok video:nth-child(2) {
        grid-column-start:3 ;
        grid-column-end:5 ;
        grid-row-start:1 ;
        grid-row-end:2 ;
    }
    .fotoblok img:nth-child(3) {
        grid-column-start:5 ;
        grid-column-end:7 ;
        grid-row-start:1 ;
        grid-row-end:2 ;
    }
    .fotoblok video:nth-child(4) {
        grid-column-start:1 ;
        grid-column-end:4 ;
        grid-row-start:2 ;
        grid-row-end:3 ;
    }
    .fotoblok img:nth-child(5) {
        grid-column-start:4 ;
        grid-column-end:7 ;
        grid-row-start:2 ;
        grid-row-end:3 ;
    }

    .bottom-tekst {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 3;
        padding: 1vw;
    }
    
    .bottom-tekst .float-left img {
        float:left;
        padding: 1vw;
        width:50vw;
    }
        
    .bottom-tekst .float-right img {
        float:right;
        padding: 1vw;
        width: 50vw;
    }

}

/*====================================================================================*/
/*====================================================================================*/

@media screen and ((min-width:1024px) and (max-width:1439px)) {
    body {
        color: blue;
    }

    .header {
        /* De volgende waarde geeft aan hoe groot het header blok moet worden en het logo */
                --blok-grootte-multiplier:1.2;
        /*                                                                                */
                display:grid;
                grid-template-columns: calc(var(--blok-grootte-multiplier) * var(--menu-blok-grootte)) calc(var(--blok-grootte-multiplier) * var(--menu-blok-grootte)) auto;
                grid-template-rows: 1;
                font-family: var(--menu-text-font-family);
                font-size: var(--menu-text-size);
                color:var(--menu-color-text);
                margin:auto;
            }
        
            .header img {
                height: calc(var(--blok-grootte-multiplier) * var(--menu-blok-grootte) );
                width: calc(var(--blok-grootte-multiplier) * var(--menu-blok-grootte) );
            } 
            .header a:any-link {
                padding:0 0 0 0; 
                text-align: center;
                float: left;
            }
        
        /* Hierin staat het logo */
            .header .header-grid-item:first-child {
                box-sizing: border-box;
                display:flex;
                justify-content: center;
                align-items: center;
                grid-column-start: 1;
                grid-column-end: 2;
                grid-row-start: 1;
                grid-row-end: 2;
            }
        
        /* hierin staat de landnaam */    
            .header .header-grid-item:nth-child(2) {
                box-sizing: border-box;
                position:absolute;
                inset-block-start: calc(0.48 * var(--blok-grootte-multiplier) * var(--menu-blok-grootte));
                inset-inline-start: 5.2vw;
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 1;
                grid-row-end: 2;
                display:flex;
                justify-content: center;
                align-items: center;
            }
        
        /* Hierin staat het menu */    
            .header .header-grid-item:last-child {
                align-items: center;
                background-color: var(--menu-color-background);
                box-sizing: border-box;
                grid-column-start: 3;
                grid-column-end: 4;
                grid-row-start: 1;
                grid-row-end: 2;
                margin:auto;
                height:fit-content;
            }
        
            .header .header-grid-item:nth-child(1),.header-grid-item:nth-child(2) a:any-link {
                text-decoration: none;
            }
        
            .header .header-grid-item:last-child .nav-hoofd {
                display:flex;
                flex-wrap: wrap;
                align-content: center;
                overflow: hidden;
                gap: .5vw;
            }
        
            .header .header-grid-item:last-child .nav-hoofd a {
                float: left;
                /* Uitlijning (sub)menu */
                text-align: left;
                /*  padding: top rechts onder links*/ 
                padding: 0px 0.5vw 0 0;              
            }
        
            .header .header-grid-item .nav-hoofd .subnav {
                float: left;
                overflow: hidden;
            }
        
            .header .header-grid-item .nav-hoofd .subnav-active {
                float: left;
                overflow: hidden;
                background-color: var(--menu-color-page-active);
            }
        
            .header .header-grid-item .nav-hoofd .subnavbtn {
                font-family: var(--menu-text-font-family);
                font-size: var(--menu-text-size);
                color:var(--menu-color-text);
                background-color: inherit;
                border:none;
                padding: 0;
                margin:0;
                outline:none;
            }
        
            .header .header-grid-item .nav-hoofd .subnav-content {
                display:none;
                font-size: var(--menu-text-size-submenu);
                position: relative;
                inset-inline-start: 0vw;
                inset-block-start: 0vw;
                left: 0;
                width: 10%;
                z-index: 1;
            }
              
            .header .header-grid-item .nav-hoofd .subnav-content a {
                float: left;
            }
              
            .header .header-grid-item .nav-hoofd .subnav:hover .subnav-content {
                /* Display : block zorgt ervoor dat items onder elkaar komen te staan */
                /* Display : flex zorgt ervoor dat items naast elkaar komen te staan */
                display: block;
                width: min-content;
                flex-wrap: wrap;
            }
            
            .header .header-grid-item .nav-hoofd .subnav-active:hover .subnav-content {
                /* Display : block zorgt ervoor dat items onder elkaar komen te staan */
                /* Display : flex zorgt ervoor dat items naast elkaar komen te staan */
                display: block;
                width: min-content;
                flex-wrap: wrap;
            }
            
            .header .header-grid-item .nav-hoofd .active-page {
                background-color: var(--menu-color-page-active);
            }
            
            .header .header-grid-item .nav-hoofd li {
                align-content: center;
                box-sizing: content-box;
                display: flex;
            }
        
            .header .header-grid-item .nav-hoofd a:hover {
                background-color:var(--menu-color-text-hover); 
            }
        
            .header .header-grid-item .nav-hoofd a:active {
                background-color:var(--menu-color-active); 
            }
        
            .header .header-grid-item .nav-hoofd p {
                box-sizing: border-box;
                padding: 0px 5px 0px 5px ;
            }
        
            .header .header-grid-item-h3 {
                padding: 0 0 0 5vw;
            } 
        
        
    .top-fotoblok {
        box-sizing: border-box;
        overflow: hidden;
        align-content: center;
        border: 3px var(--menu-color-border-box) solid;    
    }

    .top-fotoblok img {
        height:15vw;
        width:100%;
    }

    .top-fotoblok iframe {
        height:15vw;
        width:100%;
    }

    .frontpage-2col {
        display: grid;
        grid-template-columns: 1fr  1fr;
    }

    .frontpage-2col .grid-item-2col:first-child {
        align-items: center;
        box-sizing: border-box;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        padding:1vw;
    }

    .frontpage-2col .grid-item-2col:last-child {
        align-items: center;
        box-sizing: border-box;
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        padding:1vw;
    }

    .fotoblok {
        align-content: center;
        box-sizing: border-box;
        display: grid;
        gap: 1vw;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1;
    }    
    
    .fotoblok img {
        max-width: 100%;
        max-height: 100%;
    }

    .fotoblok video {
        max-width: 100%;
        max-height: 100%;
    }

    .fotoblok img:nth-child(1) {
        grid-column-start:1 ;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end:2 ;
    }
    .fotoblok img:nth-child(2) {
        grid-column-start:2 ;
        grid-column-end:3 ;
        grid-row-start:1 ;
        grid-row-end:2 ;
    }
    .fotoblok img:nth-child(3) {
        grid-column-start:3 ;
        grid-column-end:4 ;
        grid-row-start:1 ;
        grid-row-end:2 ;
    }
    .fotoblok img:nth-child(4) {
        grid-column-start:4 ;
        grid-column-end:5 ;
        grid-row-start:1 ;
        grid-row-end:2 ;
    }
    .fotoblok img:nth-child(5) {
        grid-column-start:5 ;
        grid-column-end:6 ;
        grid-row-start:1 ;
        grid-row-end:2 ;
    }

    .bottom-tekst {
        box-sizing: border-box;
        display: grid;
        gap: 1vw;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1;
    }
    
    .bottom-tekst .float-left img {
        padding: 1vw;
        width:27vw;
    }
        
    .bottom-tekst .float-right img {
        padding:1vw;
        width: 25vw;
   }

}

/*====================================================================================*/
/*====================================================================================*/

@media screen and (min-width:1440px) {
    html {
        /*  padding: top rechts onder links*/ 
        padding: 1vw 15vw 1vw 15vw;
    }

    main {
        color: black;
    }

    .header {
/* De volgende waarde geeft aan hoe groot het header blok moet worden en het logo */
        --blok-grootte-multiplier:1.2;
/*                                                                                */
        display:grid;
        grid-template-columns: calc(var(--blok-grootte-multiplier) * var(--menu-blok-grootte)) calc(var(--blok-grootte-multiplier) * var(--menu-blok-grootte)) auto;
        grid-template-rows: 1;
        font-family: var(--menu-text-font-family);
        font-size: var(--menu-text-size);
        color:var(--menu-color-text);
        margin:auto;
    }

    .header img {
        height: calc(var(--blok-grootte-multiplier) * var(--menu-blok-grootte) );
        width: calc(var(--blok-grootte-multiplier) * var(--menu-blok-grootte) );
    } 
    
    .header a:any-link {
        padding:0 0 0 0; 
        text-align: center;
        float: left;
    }

/* Hierin staat het logo */
    .header .header-grid-item:first-child {
        box-sizing: border-box;
        display:flex;
        justify-content: center;
        align-items: center;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

/* hierin staat de landnaam */    
    .header .header-grid-item:nth-child(2) {
        box-sizing: border-box;
        position:absolute;
        inset-block-start: calc(0.48 * var(--blok-grootte-multiplier) * var(--menu-blok-grootte));
        inset-inline-start: 17vw;
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        display:flex;
        justify-content: center;
        align-items: center;
    }

/* Hierin staat het menu */    
    .header .header-grid-item:last-child {
        align-items: center;
        background-color: var(--menu-color-background);
        box-sizing: border-box;
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
        margin:auto;
        height:fit-content;
    }

    .header .header-grid-item:nth-child(1),.header-grid-item:nth-child(2) a:any-link {
        text-decoration: none;
    }

    .header .header-grid-item:last-child .nav-hoofd {
        display:flex;
        flex-wrap: wrap;
        align-content: center;
        overflow: hidden;
        gap: .5vw;
    }

    .header .header-grid-item:last-child .nav-hoofd a {
        float: left;
        /* Uitlijning (sub)menu */
        text-align: left;
        /*  padding: top rechts onder links*/ 
        padding: 0px 0.5vw 0 0;              
    }

    .header .header-grid-item .nav-hoofd .subnav {
        float: left;
        overflow: hidden;
    }

    .header .header-grid-item .nav-hoofd .subnav-active {
        float: left;
        overflow: hidden;
        background-color: var(--menu-color-page-active);
    }

    .header .header-grid-item .nav-hoofd .subnavbtn {
        font-family: var(--menu-text-font-family);
        font-size: var(--menu-text-size);
        color:var(--menu-color-text);
        background-color: inherit;
        border:none;
        padding: 0;
        margin:0;
        outline:none;
    }

    .header .header-grid-item .nav-hoofd .subnav-content {
        display:none;
        font-size: var(--menu-text-size-submenu);
        position: relative;
        inset-inline-start: 0vw;
        inset-block-start: 0vw;
        left: 0;
        width: 10%;
        z-index: 1;
    }
      
    .header .header-grid-item .nav-hoofd .subnav-content a {
        float: left;
    }
      
    .header .header-grid-item .nav-hoofd .subnav:hover .subnav-content {
        /* Display : block zorgt ervoor dat items onder elkaar komen te staan */
        /* Display : flex zorgt ervoor dat items naast elkaar komen te staan */
        display: block;
        width: min-content;
        flex-wrap: wrap;
    }
    
    .header .header-grid-item .nav-hoofd .subnav-active:hover .subnav-content {
        /* Display : block zorgt ervoor dat items onder elkaar komen te staan */
        /* Display : flex zorgt ervoor dat items naast elkaar komen te staan */
        display: block;
        width: min-content;
        flex-wrap: wrap;
    }
    
    .header .header-grid-item .nav-hoofd .active-page {
        background-color: var(--menu-color-page-active);
    }
    
    .header .header-grid-item .nav-hoofd li {
        align-content: center;
        box-sizing: content-box;
        display: flex;
    }

    .header .header-grid-item .nav-hoofd a:hover {
        background-color:var(--menu-color-text-hover); 
    }

    .header .header-grid-item .nav-hoofd a:active {
        background-color:var(--menu-color-active); 
    }

    .header .header-grid-item .nav-hoofd p {
        box-sizing: border-box;
        padding: 0px 5px 0px 5px ;
    }

    .header .header-grid-item-h3 {
        padding: 0 0 0 5vw;
    } 

    .top-fotoblok {
        box-sizing: border-box;
        overflow: hidden;
        align-content: center;
    }

    .top-fotoblok img {
        height:15vw;
        width:100%;
    }

    .top-fotoblok iframe {
        height:15vw;
        width:100%;
    }

    .frontpage-2col {
        display: grid;
        grid-template-columns: 1fr  1fr;
    }

    .frontpage-2col .grid-item-2col:first-child {
        align-items: center;
        box-sizing: border-box;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        padding:1vw;
    }
    .frontpage-2col .grid-item-2col:last-child {
        align-items: center;
        box-sizing: border-box;
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        padding:1vw;
    }

    .fotoblok {
        align-content: center;
        box-sizing: border-box;
        display: grid;
        gap: 1vw;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1;
    }    
    
    .fotoblok img {
        max-width: 100%;
        max-height: 100%;
    }
    .fotoblok video {
        max-width: 100%;
        max-height: 100%;
    }

    .fotoblok img:nth-child(1) {
        grid-column-start:1 ;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end:2 ;
    }
    .fotoblok img:nth-child(2) {
        grid-column-start:2 ;
        grid-column-end:3 ;
        grid-row-start:1 ;
        grid-row-end:2 ;
    }
    .fotoblok img:nth-child(3) {
        grid-column-start:3 ;
        grid-column-end:4 ;
        grid-row-start:1 ;
        grid-row-end:2 ;
    }
    .fotoblok img:nth-child(4) {
        grid-column-start:4 ;
        grid-column-end:5 ;
        grid-row-start:1 ;
        grid-row-end:2 ;
    }
    .fotoblok img:nth-child(5) {
        grid-column-start:5 ;
        grid-column-end:6 ;
        grid-row-start:1 ;
        grid-row-end:2 ;
    }

    .bottom-tekst {
        align-self: auto;
        box-sizing: border-box;
        display: grid;
        gap: 1vw;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1;
        padding: 1vw;
    }
    
    .bottom-tekst  img {
        box-sizing: border-box;
        width:100%;
    }
        
}