img {
  max-width: 100%;
  display: block;
}  /* Still use the width and height attributes on your <img> tag. 
Modern browsers will use this information to 
reserve space for the image before it loads in, this will help 
to avoid layout shifts as content loads 
#332829
#332C28
#283333
*/

@-ms-viewport{
  width: device-width;
}

#wrap { 
  width: 1024px;
  min-height: 100vh;
  max-width: 100%;
  display: block; 
  margin: 0 auto;
  font-family: sans-serif;
}
.header img {
  float: left;
  width: 120px;
  height:119px;
}

.header h1 {
  float: left;
  margin-left: 0.4em;
  color:#000000;
  font-size: calc(1.6em + 2.5vw);
   margin-top: calc(-0.18em + 40px);
  margin-bottom: 0px;
}

.login a {
  float: right;
  margin-right: 2em;
  color:#054C03;
  font-size: calc(1.2em);
   margin-top: calc(2.2em + 1.6vw);
  margin-bottom: 0px;
}



a:link {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: blue;
  background-color: transparent;
  text-decoration: underline;
}




h2{margin-top:35px; font-family: "Arial Narrow";
   margin-bottom:-3px;color:#900C00;
}

p{color:#2E3436;
}

h3{margin-top:35px;
   margin-bottom:-5px;font-family: "Arial Narrow";color:#022A55;
}
hr{height:3px;border-width:0;color:#781D00;background-color:#781D00}


.content {
float: left;clear: both; display: block; 
margin-right:0;
margin-bottom:100px;
width: calc(100% - 1em);
margin-top: 1em;
margin-left: 1em;
font-size:1.1em;
}

.footer {
clear: both;
position: relative;
height: 60px;
margin-top: -60px;
margin-left:auto;
margin-right:auto;
width: 1024px;
max-width: 100%;
display: block; 
 /*  border-top: 2px solid grey;
 background-color: #D3D7CF;*/
font-size:1.1em;
text-align: center;
}

hr.footbar {height:2px;border-width:0;color:#054C03;background-color:#054C03}



body {
/* background-image: url(/pictures/background3.jpg);
  background-repeat: repeat;
   */
 color: #000000;

}

button {
  background-color: #10530E;/* #10530E;#C6D5C6; /* Green */
  border-radius: 8px;
  color:white;
  width: 200px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 1em;
  margin: 0 auto;
}

.item-image
{  width: 100%;margin: auto;

}

.text-image{
text-align:  justify;margin-left: 5%; font-size:0.9em;font-family: "Arial Narrow";
}
.text2-image{
text-align:  justify;margin-left: 5%; font-size:1.1em;font-family: "Arial Narrow";
}
.wrapperlink
{display: flex; justify-content:center; flex-wrap: wrap; margin-top:10px;margin-left:10px;}

.link1
{width: 350px;margin-top:35px;margin-bottom:15px;}

.link2
{width: 350px;margin-top:35px;margin-bottom:15px;}

.link0
{flex-basis: 30%; min-width:280px; text-align: center; margin-top:35px;margin-bottom:15px;}
.link3
{ width:90%;flex: 1; min-width: 70%;text-align: center; margin-top:35px;margin-bottom:15px;}

@media screen and (max-width: 756px) {
.link1 {margin-left: auto;margin-right: auto;}
.link2 {margin-left: auto;margin-right: auto;}