.hoofding{
    width:100%;
    float:left;
    display:flex;
    background-color:#ddd;
}
.logo{
    width: 100%;
    text-align	:center;
    font-family	:"Trebuchet MS";
    font-weight	:bold;
    color		:steelblue;
    width		:100%;
    margin-top		: 2%;
    margin-bottom: 2%;
}
.logo span{
    font-size:600%;
}
.facebook{
    position:absolute;
    top:2vh;
    right:1vw;
    width:10vw;
}

/*Menubalk*/
.navbar {
    width: 80vw;
    margin-left: 10vw;
}
.navbar ul li{
    display: inline-block;
    width: 19%;
    text-align: center;
	font-size: 1.6vw;
}
.navbar ul li a{
    color: steelblue;
    font-family	:"Trebuchet MS";
    text-decoration: none;
    /*font-size: 1.2vw;*/
  

}
.navbar ul li a:hover{
    border-top: solid steelblue;
    border-bottom: solid steelblue;
}
#geselecteerd{
    border-top: solid steelblue;
    border-bottom: solid steelblue;
}
#iconclick{
    display:none;
}
.menuicon{
    background-color:#ddd;
    border-bottom: 2px solid white;
    color:white;
    padding:10px;
    display:flex;
    justify-content:flex-start;
    display:none;
}
.menuicon label{
    background-color:steelblue;
    height:5vh;
    width: 20vw;
    border-radius: 6px;
    color:black;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    position:absolute;
    top:15%;
}
.menuicon label span{
    background-color:#ddd;
    height: 3%;
    width: 70%;
    margin:2px 0px;
}

@media screen and (max-width:500px){
    .hoofding{
        margin-top:3%;
        margin-bottom: 5%;
    }
    .logo span{
        font-family	:"Trebuchet MS";
        font-size	:225%;
    }
    .facebook{
        display:none;
    }
    #geselecteerd{
        color:white;
    }

    /*menubalk*/
    .navbar{
        width:35vw;
        position: absolute;
        top:10%;
    }
    .navbar ul{
        flex-direction:column;
        display:none;
        margin:0%;
        width:35vw;
        z-index:15;
    }
    .navbar ul li{
        width:100%;
        padding-top:5%;
        position:relative;
        background-color: steelblue;
    }
    .navbar ul li:last-child{
        padding-bottom:5%;
    }
    .navbar ul li a {
        width:100%;
        font-size:2vh;
        color:#ccc;

    }
    #iconclick:checked + .navbar ul li a:hover{
        color:white;
        border: none;
    }
    .navbar ul li ul{
        position:absolute;
        top:0;
        left:100%;
        width:100%
    }
    #iconclick:checked + .navbar ul{
        display:flex;
        position:absolute;
    }
    #iconclick:checked + .navbar ul li ul{
        display:none;
    }
    #iconclick:checked + .navbar ul li:hover > ul{
        display:flex;
    }
    .menuicon{
        display:flex;
        background-color:#ddd;
        color:#ddd;
        border:none;
        position:relative;
    }
    .menuicon label{
        /*min-width:4vw;
        max-width: 8vw;*/
    }

}

/*Iphone X portrait*/
@media screen and (min-width:360px)  and (orientation: portrait){
    .navbar{
        width:100%;
        position: absolute;
        top:12vh;
    }
    .menuicon{
        position: absolute;
        top:12vh;
        left:0px;
        width:9vw;
        padding:0%;
    }
    .menuicon label {
        width:10vw;
    }

}

@media only screen and (min-width:720px) and (orientation: landscape){
    .logo span{
        font-size:300%;
    }
}

@media only screen and (min-width:800px) and (orientation: portrait){
    .logo span{
        font-size:300%;
    }
}

@media  screen and (max-width:1299px) and (min-width:813px){
    .navbar{
        position:absolute;
        top:60vh;
        margin-left: 10vw;
    }
}

@media only screen and (min-width:1300px){
    .logo span{
        font-size:600%;
    }

    .navbar{
        position:absolute;
        top:70vh;
        margin-left: 10vw;
    }

}