@media only screen and (max-width: 800px) {
    menu {
        display:none;
        margin:0 0 15px 0;
    }
    body menu li {
        margin:0 20px;
        display:block;
        width:100%
        font-size:20px;
    }
    body menu li li {
        margin:0 40px;
        width:100%
    }
    body menu li .submenu {
        display:block;
    }
    menu img {
        display:none;
    }
    menu li a {
        color:blue;
        text-decoration:none;
    }
    menu li a:hover {
        color:red;
    }
}

@media only screen and (min-width: 800px) {
    #banner {
        background-image: url("/images/banner.jpg");
        background-position: 0 0;
        background-size:800px 124px;
        height:124px;
    }
    menu li {
        position: relative;
        display: inline-block;
        width: 190px;
        height: 60px;
    }
    .menuicoon {
        display:none;
    }
    menu {
        padding:10px 0 0 0;
        background-color:#162133;
        text-align:center;
        width:100%;
    }
    menu li img, menu li div  {
        position: absolute;
        width: 190px;
        top: 0;
        left: 0;
    }
    menu li div {
        padding: 10px 20px 7px 0px;
        text-align: center;
        color: red;
        font-weight: bold;
        font-size:20px;
    }
    menu a {
        color:blue;
    }
    menu li .submenu {
        display:none;
        position:absolute;
        top:55px;
        width:110%;
    }
    menu li:hover .submenu {
        display:block;
        background-color:#162133;
        color:red;
        text-align:left;
        padding:10px;
    }
    menu li:hover .submenu a{
        color:red;
        text-decoration:none;
    }
}
.regenboog {
    background: linear-gradient(100deg, red, orange, yellow, green, blue, indigo, violet);
}
menu.admin li {
    vertical-align: text-top;
    width:15%;
    border-bottom:5px solid transparent;
    font-size:22px;
}
menu.admin li:hover {
    border-bottom:5px solid yellow;
}
menu.admin li.actief {
    border-bottom:5px solid red;
}
menu.admin li.actief:hover {
    border-bottom:5px solid orange;
}
menu.admin a {
    text-decoration:none;
    color:blue;
}
* {
    padding:0;
    margin:0;
}
html {
    background-color:#162133;
}
body {
    background-color:lightgray;
    width:800px;
    margin:0 auto;
}
body.admin {
    background-color:lightgray;
    width:1000px;
    margin:0 auto;
}
.menuicoon {
    width:35px;
    background-color:black;
    margin-left:10px;
}
.menuicoon div {
  width: 35px;
  height: 5px;
  background-color: white;
  margin: 6px 0;
}
.container div {
    padding:10px;
    height:200px;
    width:380px;
    background-color:lightgray;
}
#overons p, #home p {
    padding:10px;
    text-align:justify;
}
#overons img {
    /* height:250px; */
    width:50%;
}
#overons img.fl {
    margin:0 10px 0 0;
}
#overons img.fr {
    margin:0 0 0 10px;
}
.fr {
    float:right;
}
.fl {
    float:left;
}
.fn {
    clear:both;
}
.goodpw ul li span {
    font-weight:bold;
}
.goodpw ul li span:first-of-type {
    width:300px;
    display:inline-block;
}
.nosymbol {
   list-style-type: none; 
}
.rood {
    color:red;
}
.adres span.adrespunt {
    display: inline-block;
    width: 120px;
    font-weight: bold;
}
.adres span.adresitem {
    display: inline-block;
    width: 150px;
}
#vitrine {
    width:100%;
}
.l {
    text-align:left;
}
.c {
    text-align:center;
}
.r {
    text-align:right;
}
footer {
    background:#162133;
    color:white;
    width:100%;
    height:16px;
}
.vt {
    vertical-align: text-top;
}
.w50 {
    display:inline-block;
    width:50px;
}
.w100p {
    width:100%;
}
.w100 {
    display:inline-block;
    width:100px;
}
.w150 {
    display:inline-block;
    width:150px;
}
.w200 {
    display:inline-block;
    width:200px;
}
.w300 {
    display:inline-block;
    width:300px;
    
}
.w400 {
    display:inline-block;
    width:400px;
}
.w600 {
    display:inline-block;
    width:600px;
}
.fout {
    background-color:red;
    color:yellow;
}
.msg {
    color:red;
    font-weight:bold;
}
#comment {
    height:150px;
}
#frm div {
    padding:5px 0;
}
.gallery {
    padding:5px;
    margin:5px;
}			
.gallery span {
     border:1px solid #BBBBBB;
     float:left;
     height:160px;
     margin-right:7px;
     margin-top:7px;
     width:200px;
}
.gallery span img{
    height:50px;
    max-width:99%;
    width:auto;
    border:1px solid blue;
}	
.gallery span img:hover{
    height:50%;
    left:5%;
    width:auto;
    margin:auto;				
    border:1px solid blue;
    position: fixed;
    top: 5%;
    z-index:99;
}			
.gallery2 span {
     border:1px solid #BBBBBB;
     float:left;
     height:300px;
     margin-right:7px;
     margin-top:7px;
     width:400px;
}
.gallery2 span object{
    height:250px;
    width:auto;
    border:1px solid blue;
}	
.clearfl::after {
    content: "";
    clear: both;
    display: block;
}
.important:before{
    content:'BELANGRIJK: ';
    color: red;
    font-weight:bold;
}
input[type="file"] {
    width:700px;
}