* { box-sizing: border-box; }
html { font-family: sans-serif; line-height: 2;}

.box {
  padding: 10px;
}

.bottom {
  border-bottom: 1px gray solid;
}
.top {
  border-top: 1px gray solid;
}

/* small screen first, larger screen settings at the end */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
  "adh"
  "domains"
  "names"
  "extramessage"  
  "address-zb"
  "timetable-zb"
  "address-blb"
  "timetable-blb"
  "more"
  "footer"
  "photo"
  ;
  grid-gap: 10px;
  padding: 0px;
}

/* default on small screens */
.photo {
  display: none;
}


/* the elements */
.adh {
  grid-area: adh;
  padding: 0px;
}

.photo {
  grid-area: photo;
}

.domains {
  grid-area: domains;
  font-weight: bold;
  text-align: center;
  font-size: large;  
}
.extramessage {
  grid-area: extramessage;
}
.names {
  grid-area: names;
}
.nameswrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.address-zb {
  grid-area: address-zb;
}
.address-blb {
  grid-area: address-blb;
  border-top: 1px gray solid;
}



.timetable-zb {
  grid-area: timetable-zb;
}
.timetable-blb{
  grid-area: timetable-blb;
}
.more {
  grid-area: more;
  text-align: center;
}
.footer {
  grid-area: footer;
}


/** always **/
.domain {
  padding: 10px;  
}

.site-title {
  font-size: 30px;
  font-weight: bold;
  color:white;
  background-color: #F47B20;
  padding: 10px;
  margin-bottom: 10px;
}

.site-tagline {
  color:white;
  background-color: #4C4C4E;
  padding: 10px;
}

.clear {
  clear: both;
}

.city {
  font-weight: bold;
}

.openingsuren {
  text-decoration: underline;
}

.morelink:hover {
    background-color: black;
}

.morelink {
  padding: 10px 80px 10px 80px;
  font-size:12pt;
  color: white;
  border-radius: 4px;
  background-color: #F47B20;
  text-decoration:none;
  min-width: 150px;
}

.extramessagewrap {
  padding: 10px; 
  background-color: #F47B20;
  font-size: 16px;
  font-weight: bold;
  color:white;
  line-height: 120%;
}

/* desktop */
@media only screen and (min-width: 700px)  {
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
  "adh     photo   photo"
  "side  domains domains"
  "side  names   names"
  "side  extramessage   extramessage"  
  "side    address-zb   address-blb"
  "footer  timetable-zb timetable-blb"
  "footer  more more"
  ;
  grid-gap: 10px;
}

.photo {
  display: inline;
  height: 320px;
  background: white url('images/banner-front-2022.jpg') no-repeat;
  background-size: cover;
  background-position: center;   
}


.nameswrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  font-size: large;
}

.address-blb {
  border-top: none;
}

} /* end of desktop */

/* desktop wide */
@media only screen and (min-width: 840px)  {

.domains {
  font-size: x-large;  
}
} /* end of desktop wide */