html, body {margin:0 ; font-family: "arial", sans-serif;} 
* {
box-sizing: border-box;
}

/*Algemen eigenschappen*/
#main-content, #siteInfo, #footer {
background-color: #c2b7aa;
}
.item, .item-txt {
background-color: #fff;
}
#wrapper {
margin: 0 4%;
}
#siteInfo, #footer {
color:#fff; 
padding: .5% 4%;
}

#menu a:link, #menu a:visited {
  color: #000;
  text-decoration:none;
}
#menu a:hover {
  color: #999;
}
#menu a:active {
  color: blue;
}
#HAId {
width:100%;
min-height:80px;
}
#HAId img.right {
position: absolute;
max-height:60px;
margin: 1% 0;
right: 4%;
}
nav#icon img {
max-height: 50px;
}

#siteInfo {
display: grid;
grid-template-columns: 33% 33% 34%;
}
.link {text-align:left; 
padding:2% 0;
border-bottom: 1px solid #ccc;
}

#menu {
display: none;
}

#main-content img.main-img {
max-height: 400px;
display:block;
margin: 6px 0;
}
#more, #more1, #more2, #more3, #more4, #more5, #more6 {
display:none;
}


/*Einde Algemen eigenschappen*/


@media screen and (min-width: 1301px) 

/*main-item*/
{
#main-item {
  max-width: 100%;
max-height:400px;
  position: relative;
  margin: auto;
box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.2);
}
#main-item img {
width:100%;
max-height: 400px;
object-fit: cover;
object-position: 100% 50%;  
vertical-align: middle;
}
/* Caption text */
.text {
  color: #333;
  font-size: 1.4em;
line-height: 1.4em;
  padding: 4% 2%;
  position: absolute;
  left:50%;
top:4%;
  width: 50%;
  text-align: left;
background-color:#fff;
}
/*einde caption text*/
/*einde main-item*/


/*#menu {
display: grid;
grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% ;
}*/
#footer {
display: grid;
grid-template-columns: 50% 25% 25%;
}
.ft-cont {
max-width:60%;
margin-bottom:20px;
}
#HAId {
margin-bottom: 2%;
box-shadow: 0px 4px 10px -8px rgba(0, 0, 0, 0.2);
}

#main-content {
display: grid;
grid-template-columns: 50% 50%;
gap: 24px 0;
margin-top: 6%;
padding: 1% 1% 0 1%;
}
#main-content img {
max-width: 100%;
}
.item-txt {
padding:2%;
font-size:1.2em;
}

} /*einde min-width 1301*/

@media screen and (min-width: 1081px) and (max-width: 1300px) 
{
#HAId img {
display: none;
}

/*nav in en uit*/

/*nav#icon img {
display:block;
}
#menu {
display: none;
}*/

/* einde nav in en uit*/

} /*min-width 1081 max-width 1300*/


@media screen and (max-width: 1080px) 
{
#main-content {
grid-template-columns: auto;
gap: 10px 30px;
padding: 1%;
}
/*nav#icon img {
display:block;
}*/

} /*max-width 1080*/