html {
  scroll-behavior: smooth;
}
* {
    box-sizing: border-box;
    }
body {
    font-family: Gentium, "Times New Roman", "Charis SIL", Georgia, "Microsoft Sans Serif";
    background-color: #ddd;
    }
h1, h2, h3, h4, h5, h6 {
    display: inline;
    margin: 0vw;
    padding: 0vw 0vw 0vw 0vw;
    }
hr {
    margin: 0pt;
    border: 1px solid #da5;
    }
a {
    text-decoration: none;
    }
#sandwich {
    width: 3.2vw;
    }
.drop {
    position: absolute;
    top: 0.6vw;
    right: 0vw;
    list-style-type: none;
    display: inline-block;
    }
#knop {
    display: block;
    float: right;
    width: 6vw;
    margin-right: 1%;
    background-color: #777;
    color: #fff;
    font-size: 4.3vw;
    text-align: center;
    }
.item {
    display: block;
    padding: 1.5vw 2vw 2.5vw 2vw;
    background-color: #eee;
    color: #666;
    font-size: 4.3vw;
    text-align: center;
    border: 1px solid #fff;
    }
.menu {
    display: none;
    position: relative;
    top: 9vw;
    z-index: 1;
    }
.drop:hover .menu {
    display: block;
    }
.item:hover {
    background-color: #fff;
    border: 2px solid #fb2;
    }
#wrap_1 {
    }
#top {
    position: fixed;
    top: 0vw;
    width: 97%;
    padding: 2% 1% 2% 1%;
    font-size: 2.8vw;
    background-color: #777;
    color: #fff;
    }
#title {
    display: block;
    height: 5vw;
    padding: 0% 1% 0% 1%;
    font-size: 2.9vw;
    }
#middle {
    float: none
    height: auto;
    width: 100%;
    margin: 6vw 0vw 1vw 0vw;
    padding: 10% 0% 40% 0%;
    background-color: #fff;
    font-size: 3.4vw;
    color: #666;
    text-align: center;
    }
.info {
    margin-left: auto;
    margin-right: auto;
    margin-top: 4vw;
    width: 90vw;
    padding: 1vw;
    font-size: 3.9vw;
    color: #666;
    text-align: justify;
    }

@media only screen and (orientation: landscape) {
.drop {
    position: absolute;
    top: 1vw;
    }
#knop {
    margin-right: 0vw;
    }
.menu {
    top: 6vw;
    }
#knop, .item {
    font-size: 3.2vw;
    }
#top {
    position: fixed;
    left: 10%;
    auto;
    padding: 1vw 0vw 0vw 0vw;
    width: 80%;
    font-size: 2.7vw;
    color: #fff;
    }
#title {
    display: block;
    height: 5.4vw;
    padding: 0% 1% 0% 2%;
    }           
#middle {
    height: auto;
    width: 82%;
    margin-top: 7vw;
    margin-left: auto;
    margin-right: auto;
    padding: 4% 0% 15% 0%;
    background-color: #fff;
    font-size: 2.5vw;
    color: #666;
    text-align: center;
    }
.info {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vw;
    width: 72vw;
    padding: 1vw;
    font-size: 3vw;
    color: #666;
    text-align: justify;
    }
}

@media only screen and (orientation: landscape) and (min-width: 750px) {
#top {
    left: 10%;
    padding: 1vw 0vw 0vw 0vw;
    width: 80%;
    }
#title {
    font-size: 2.4vw;
    }
.drop {
    top: 0.4vw;
    }
#middle {
    height: auto;
    width: 81%;
    margin-left: auto;
    margin-right: auto;
    padding
    font-size: 2.3vw;
    }
}