@charset "utf-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, 280px);
	align-items: center;
	justify-items: center;
}
.gallery img {
	width: 100%;
}

.grid-container {
  display: grid;
  grid-template-columns: auto 300px auto;
  justify-content: center;
  align-content: space-around;
}
.grid-item {
  text-align: center;
  margin: 5px;
}



/*main {
	display: grid;
	grid-template-columns: 33% 33% 33%;
	grid-template-rows: 280px 280px 280px;
}*/






body {
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	text-align: justify;
	background-color: lightgray;
	background-repeat: no-repeat;
	max-width: 850px;
    margin: 0 auto;
    padding: 0;
}
#body, p {
	background-color: #FFFFCC;
	
}


#banner {
	/*max-width: 100%;*/
	width: 100%;
	height: auto;/*172px;*/
	padding: 0;
	top: 0;
}
#altbanner, #altbanner2, #altbanner3, #altbanner4 {
	display: none;
}
#navigation {
	float: left;
	display: inline;
	width: 850px;
	color: #FFFFCC;
	font-weight: bold;
	font-variant: small-caps;
	text-align: center;
	background-color: black;
	margin-top: -4px;
}



/* body text */
p {
	text-align: center;
	padding: 0.30em;
}
h1 {
	font-weight: bold;
	text-align: center;
}
#end {
	text-align: right;
}

/*---links----*/
a:link {
	color: #663300;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
	color: #C5C2C2;
}
a.menu:link {
	color: #FFFFCC;
	font-weight: bolder;
	text-decoration: none;
}
a.menu:visited {
	text-decoration: none;
	color: #FFFFCC;
}
a.menu:hover {
	text-decoration: none;
	color: #C5C2C2;
}
a.fhf:link {
	color: #000066;
	font-weight: 200;
	text-decoration: none;
}
a.fhf:hover {
	text-decoration: none;
	font-weight: bold;
	color: #000000;
}




/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) and (min-width: 425px) {
  #banner, #altbanner2, #altbanner3, #altbanner4 {
	display: none;
  }
  #altbanner {
	  display: inherit;
  }
  p, h1 {
	  width: 100%;
	  margin: 2px;
  }
   #navigation {
	  float: none;
      width: 100%;
	  /*margin-top: 0;
      font-size: 0.61em;
      position: relative;*/
	  display: block;  
   }
   .gallery {
	   margin: 0 20% 0 20%;
   }
   #end {
	   padding-right: 5px;
}
@media screen and (max-width: 425px) and (min-width: 375px) {
  #banner, #altbanner, #altbanner3, #altbanner4 {
	display: none;
  }
  #altbanner2 {
	  display: inherit;
  }
  p, h1 {
	  width: 100%;
	  margin: 2px;
  }
   #navigation {
	  float: none;
      width: 100%;
	  /*margin-top: 0;
      font-size: 0.61em;
      position: relative;*/
	  display: block;  
   }
} 
 @media screen and (max-width: 375px) and (min-width: 320px) {
  #banner, #altbanner, #altbanner2, #altbanner4 {
	display: none;
  }
  #altbanner3 {
	  display: inherit;
 }
 p, h1 {
	  width: 100%;
	  margin: 2px;
  }
   #navigation {
	  float: none;
      width: 100%;
	  /*margin-top: 0;
      font-size: 0.61em;
      position: relative;*/
	  display: block;  
   }
} 
 @media screen and (max-width: 320px) {
  #banner, #altbanner, #altbanner2, #altbanner3 {
	display: none;
  }
  #altbanner4 {
	  display: inherit;
  }
  p, h1 {
	  width: 100%;
	  margin: 2px;
  }
   #navigation {
	  float: none;
      width: 100%;
	  /*margin-top: 0;
      font-size: 0.61em;
      position: relative;*/
	  display: block;  
   }
}