﻿html {height:100%;}
body{
	height:100%;
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	margin: 0px;
	text-align:left;
	color:#36353c;
    overflow-x: hidden;
	}
	
a {color: #000;text-decoration: underline;}
a:link{color: #000;text-decoration: none;font-size: 20px;}
a:visited{color: #000;text-decoration: underline;}
a:hover{color:#000;text-decoration: none;text-decoration: underline;}
a:active{text-decoration: underline;}

#footer a {color: #000;text-decoration: underline;}
#footer a:link{color: #000;text-decoration: none;font-size: 14px;}
#footer a:visited{color: #000;text-decoration: underline;}
#footer a:hover{color:#000;text-decoration: none;text-decoration: underline;}
#footer a:active{text-decoration: underline;}



#maincontent{
    max-width: 1200px;
    margin:0px auto;
    
}

#content{
    margin-left:10px;
    margin-right:10px; 
    

}


#footer{
    text-align:center;
    width: 100%;
    font-size: 14px;
    margin-top: 20px;
}

#footer2links {font-size: 13px;color:#FFF;margin-left: 10px;float:left;}

#tabel {
    
    width:100%;
    font-size: 15px;
    border-spacing: 0px;
    border: #666;
    border-style: solid;
    border-width: 1px;
    }


#tabel th{
    background-color:#4d592e;
    color:#FFF;
    padding:10px;
    
    }

#tabel tr:nth-child(even){
    }
    
#tabel tr, #tabel td{

    border: #666;
    border-style: solid;
    border-width: 1px;

padding: 5px;    }



h1{
    color:#474852;
    font-size: 60px;
    margin: 0px;
    font-family: 'Poiret One', cursive;
    font-weight: 100;}

h2{
    color:#474852;
    font-size: 34px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: 'Poiret One', cursive;
    font-weight: 100;
}

h3{
    color:#474852;
    font-size: 20px;    
}

ul > li {color:#4d592e;}

ul > li > span {color:#36353c;}

#opsommingitem{
    float: none;
    text-align: left;
    padding: 10px;
    padding: 7px;
}  

    
    /* Grid Layout */
    .gallery-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-gap: 15px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .gallery-item {
        width: 100%; height: 300px; object-fit: cover;
        border-radius: 8px; cursor: pointer; transition: 0.3s;
    }
    .gallery-item:hover { opacity: 0.8; }

    /* De Modal */
    .modal {
        display: none; position: fixed; z-index: 1000;
        top: 0; left: 0; width: 100%; height: 100%;
        background-color: rgba(0,0,0,0.9);
        justify-content: center; align-items: center;
    }

    .modal-content { max-width: 85%; max-height: 85%; border-radius: 4px; }

    /* Navigatie knoppen */
    .nav-btn {
        position: absolute; color: white; font-size: 50px;
        font-weight: bold; cursor: pointer; user-select: none;
        padding: 20px; transition: 0.3s;
    }
    .nav-btn:hover { color: #bbb; }
    .prev { left: 20px; }
    .next { right: 20px; }
    .close { top: 20px; right: 35px; position: absolute; color: white; font-size: 40px; cursor: pointer; }


@media screen and (max-width:500px){h1{font-size:35px;}}}