.container {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 0.5fr 1.2fr 1fr;
  grid-template-rows: 130px 2fr 0.3fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "header header header"
    "navi main main"
    "foot foot foot";
}

.header { grid-area: header;
	background-image: url("img/headerbg.jpg");
	text-align: center;

	text-shadow: 2px 2px 5px lightgrey;	
 }

.foot { grid-area: foot;
	text-align: center;
	padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;
	font-size: .8em;
 }

.main { grid-area: main;
	text-align: left top;
	padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;
 }

.navi { grid-area: navi; text-align: left; }

.navi p {  padding: 0; background-color: #bfccd7; }

.navi p.actv {  padding: 0; background-color: #ffb966; }

.navi p:hover {  background-color: #ffb966; }

.navi a { display: block; padding: 10px; }

.gblock img { margin: 4px; padding: 4px; border: 2px solid #000000; }
	
.gblock { 
	text-align: center;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
	border: none;
 }

 .showblock{ 

	padding-top: 1px;
	padding-right: 5px;
	padding-bottom: 1px;
	padding-left: 15px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 15px;
	margin-left: 5px;
	border: 3px solid rgb(159, 173, 189);
 }
	
body { font-family:  Tahoma, Verdana, sans-serif; }

h1	{ font-size: 1.5em; }
h2	{ font-size: 1.25em; }
h3	{ font-size: 1.1em; color: "#eeeeee"; }
h4	{ font-size: 1.2em; }
h5	{ font-size: 1.1em; }

hr	{ color: rgb(159, 173, 189)); }

img 	{ border: 0px; 
	  padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; 
	
}
a {	text-decoration: none; 	
	color:  #496F7B;
	border: none;
	padding: 5px;
	}

a:link{ text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Responsive: images scale to their column, layout reflows on phones */
img { max-width: 100%; height: auto; box-sizing: border-box; }
.gblock img { max-width: calc(100% - 8px); }
.navi, .main { min-width: 0; }
.main { overflow-wrap: break-word; }

@media (max-width: 768px) {
  body { margin: 0; line-height: 1.55; -webkit-text-size-adjust: 100%; }
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "header"
      "navi"
      "main"
      "foot";
  }
  .header { background-size: cover; background-position: center; }
  .header img { padding: 0; display: block; margin: 0 auto; }
  .navi { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 0; }
  .navi p, .navi p.actv { flex: 1 1 auto; margin: 0; padding: 0; }
  .navi a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; }
  .main { padding: 5px 12px 10px; }
  .gblock { padding: 5px 0 10px; }
  .showblock { margin: 5px 0 15px; padding-left: 10px; }
}

@media (max-width: 480px) {
  .main img[align="left"], .main img[align="right"] { float: none; display: block; margin: 0 auto 10px; }
}

/* Contact form */
.contact-table { width: 100%; border-collapse: collapse; }
.contact-form-cell { vertical-align: top; padding-right: 20px; width: 60%; }
.contact-info-cell { vertical-align: top; width: 40%; }

.form-field { margin-bottom: 12px; }
.form-field label {
  display: block;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  margin-bottom: 4px;
  color: #1B1714;
}
.form-field input,
.form-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.95em;
  padding: 7px 9px;
  border: 1px solid #9fadbb;
  background: #fff;
  color: #1B1714;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid #496F7B;
  border-color: #496F7B;
}
.form-field textarea { resize: vertical; }

.contact-submit {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.95em;
  padding: 9px 24px;
  background-color: #bfccd7;
  color: #1B1714;
  border: none;
  cursor: pointer;
}
.contact-submit:hover { background-color: #ffb966; }

#contact-thankyou { padding: 10px 0; font-style: italic; }

@media (max-width: 768px) {
  .contact-table, .contact-table tbody, .contact-table tr,
  .contact-form-cell, .contact-info-cell {
    display: block;
    width: 100%;
    padding-right: 0;
  }
  .contact-info-cell { margin-top: 20px; }
}