@media screen and (max-width: 600px) {
    #nav-top, .onder-menu {
        display: none;
    }

    .top-menu a:before {
        content: none;
     }

     header a:before {
        content: none;
     }

    .top-menu a:nth-child(2) {
        display: none;
    }

    .top-menu a:nth-child(3) {
        display: none;
    }

     .topmenu li a:before {
        content: none;
     }

    footer {
        display: block;
    }
        footer ul li:first-child::before {
            content: "> ";
        }

            footer ul li:nth-child(2) {
                display: none;
            }

                footer ul li:nth-child(3)::before {
                    content: "> ";
                }

                    footer ul li:nth-child(4)::before {
                        content: "> ";
                    }

                        footer ul li:nth-child(5)::before {
                            content: "> ";
                        }

                            footer ul li:nth-child(6)::before {
                                content: "> ";
                            }

                                footer ul li:nth-child(7)::before {
                                    content: "> ";
                                }

                                footer ul li:nth-child(8)::before {
                                        content: "> ";
                                        }
    footer ul li:nth-child(8) {
        margin-bottom: 20px;
    }

    footer ul li:nth-child(9) {
        margin-bottom: 10px;
    }

    footer ul li:nth-child(12) {
        margin-bottom: 10px;
    }
}
/* Einde CSS media screen (mobile phone) max-width 600px. */

/* Start CSS media screen (iPad) min-width: 601px (portrait tablets and large phones, 600px and up). */
@media screen and (min-width: 600px) and (max-width: 768px) {
    #nav-top, .onder-menu {
        display: none;
    }

    footer ul li:nth-child(2) {
        display: none;
    }

    footer ul li:first-child::before {
        content: "> ";
    }

        footer ul li:nth-child(2) {
            display: none;
        }

            footer ul li:nth-child(3)::before {
                content: "> ";
            }

                footer ul li:nth-child(4)::before {
                    content: "> ";
                }

                    footer ul li:nth-child(5)::before {
                        content: "> ";
                    }

                        footer ul li:nth-child(6)::before {
                            content: "> ";
                        }

                            footer ul li:nth-child(7)::before {
                                content: "> ";
                            }

                            footer ul li:nth-child(8)::before {
                                    content: "> ";
                                    }

                                    footer ul li:nth-child(8) {
                                        margin-bottom: 20px;
                                    }
                                    
}
/* Einde CSS media screen (iPad) min-widht: 601px. */

/* Start CSS media screen (iPad) min-width: 768px (portrait tablets and large phones, 768px and up). */
@media screen and (min-width: 768px) and (max-width: 992px) {
    #nav-top, .onder-menu {
        display: none;
    }

    footer ul li:nth-child(2) {
        display: none;
    }

    footer ul li:first-child::before {
        content: "> ";
    }

        footer ul li:nth-child(2) {
            display: none;
        }

            footer ul li:nth-child(3)::before {
                content: "> ";
            }

                footer ul li:nth-child(4)::before {
                    content: "> ";
                }

                    footer ul li:nth-child(5)::before {
                        content: "> ";
                    }

                        footer ul li:nth-child(6)::before {
                            content: "> ";
                        }

                            footer ul li:nth-child(7)::before {
                                content: "> ";
                            }

                            footer ul li:nth-child(8)::before {
                                    content: "> ";
                                    }

                                    footer ul li:nth-child(8) {
                                        margin-bottom: 20px;
                                    }
}
/* Einde CSS media screen (iPad) min-widht: 768px. */

/* Start CSS media screen min-width: 992px (laptops and desktops, 992px and up). */

@media screen and (min-width: 992px) and (max-width: 1200px) {
    #nav-top, .onder-menu {
        display: none;
    }

    .topmenu li:nth-child(2) {
        display: none;
        } 
        .topmenu li:nth-child(3) {
            display: none;
            } 
    footer ul li:nth-child(2) {
        display: none;
            }
} 
/* Einde CSS media screen min-width: 992px. */

/* Start CSS media screen (breed scherm) min-width: 768px (large laptops and desktops, 1200px and up). */
@media screen and (min-width: 1200px) {
    #nav-top {
        display: inline;
        margin-bottom: 0px;
    }

    .topmenu li {
        display: inline;
    }

    .topmenu li:nth-child(2) {
        display: inline;
        } 
        .topmenu li:nth-child(3) {
            display: inline;
            } 
        

    /* CSS voor button van het mobiele menu. */
    button {
        visibility: hidden;
    }

    /* CSS voor het menu onder het hoofdmenu. */
    .onder-menu {
        font-family: Arial, Helvetica, sans-serif;
        margin-top: -20px;
        margin-left: 3px;
        color: black;
    }

    .onder-menu a {
        font-family: Arial, Helvetica, sans-serif;
        padding: 5px;
        margin-left: 15px;
        color: black;
        text-decoration: none;
    }

    .onder-menu a:hover {
        text-decoration: underline;
    }

    
    /* Einde CSS voor het menu onder het hoofdmenu. */

    footer ul {
        background-color: #253c70;
        margin: 10px;
        padding: 10px;
    }

    footer ul li {
        display: inline;
    }

    /* Uitschakelen voor breed menu. */
    footer ul li:nth-child(2) {
        display: inline;
    }
    footer ul li:nth-child(3) {
        display: inline;
    }           
                .extra-ruimte {
                    display: none;
                }
                    footer ul li:nth-child(9) {
                        display: none;
                        } 
                            footer ul li:nth-child(10) {
                                display: none;
                                    } footer ul li:nth-child(11) {
                                        display: none;
                                            }
                                            footer ul li:nth-child(12) {
                                                display: none;
                                                    }
                                                    footer ul li:nth-child(13) {
                                                        display: none;
                                                        }
                                                            footer ul li:nth-child(14) {
                                                            display: none;
                                                                }
                                                                footer ul li:nth-child(15) {
                                                                    display: none;
                                                                        }
                                                                        footer ul li:nth-child(16) {
                                                                            display: none;
                                                                                }
                                                                                footer ul li:nth-child(17) {
                                                                                    display: none;
                                                                                        }

}   

/* Algemene CSS voor menu en footer. */
    button {
        background-color: #253c70;
        border: 1px solid white;
        padding: 5px;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
    }

    /* CSS alleen voor het login-icoon poppetje (vergrootglas) aan in de bovenste menubalk. */
    .login-icon-head {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 120%;
        color: #3492eb;
        position: relative;
    }

    .stropdas {
        top: 4px;
        left: 4px;
        font-size: medium;
        color: #3492eb;
        rotate: 180deg;
        position: absolute;
    }

    .login-icon-body {
        width: 12px;
        height: 8px;
        top: 12px;
        left: -1.3px;
        border: 2px solid #3492eb;
        border-bottom: 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-color: white;
        position: absolute;
    }
    /* Einde CSS voor login-icoon in de bovenste menubalk. */

    /* CSS alleen voor het zoekicoon (vergrootglas) aan het einde van de menubalk. */
    .zoekt {
        width: 30px;
        font-size: 150%;
        padding: 0px;
        position: relative;
        color: white;
    }

    .steel-zoekt {
        width: 8px;
        height: 5px;
        top: 20px;
        left: 9px;
        background-color: white;
        rotate: 45deg;
        position: absolute;
    }
    /* Einde CSS voor zoekicoon in de menubalk. */


    .top-menu {
        width: 100%;
        margin-top: 0px;
    }

    .top-menu a {
        font-family: Arial, Helvetica, sans-serif;
        font-size: small;
        font-weight: normal;
        color: black;
        float: right;
        margin-right: 20px;
        text-decoration: none;
        line-height: .5px;
        }

    .top-menu a:hover {
        text-decoration: underline;
    }
    
    header {
        font-family: Arial;
        font-size: 205%;
        font-weight: bold;
        margin-bottom: 0px;
        clear: right;
    }

    header img {
        float: left;
        padding: 0;
        margin-top: -25px;
    }

    header h3 {
    max-width: 535px;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 73%;
    color: #3492eb;
    }

    header a {
    text-decoration: none;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    }

    .topmenu {
    list-style-type: none;
    padding: 0px;
    margin: 30px 0px 50px 0px;
    }

    /* Bij margin 1px toegevoegd (was auto rechts en links) om een klein streepje te krijgen bij en kleiner scherm. Werkt het? Of weer weghalen? */
    .topmenu li  {
    padding: 11.5px;
    margin: 1px;
    font-size: 16px;
    background-color: #3492eb;
    }

    .topmenu li:first-child {
    background-color: green;
    }

    .topmenu li:last-child {
    background-color: orange;
    padding: 11.5px;
    font-size: 16px;
    }

    .topmenu li:hover {
    background-color: #253c70;
    }

    .topmenu a {
    color: white;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    }

    .topmenu a:hover {
    color: white;
    background-color: #253c70;
    font-family: Arial, Helvetica, sans-serif;
    }

    .topmenu li a:visited {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    }

    .nav-top a {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    }

    /* CSS voor de footer algemeen. */
    footer {
    width: 100%;
    margin-top: 50px;
    background-color: #253c70;
    }

    footer ul li {
    padding: 10px 5px;
    color: white;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    }

    footer ul li a {
    padding: 5px;
    color: white;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    }

    #copyright {
    width: 100%;
    height: 30px;
    border: 1px solid white;
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    text-align: center;
    color: black;
    background-color: white;
    box-shadow: none;
    }