@charset "UTF-8";
/* CSS Document */
/*
* {
  box-sizing: border-box;
}
*/

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  /*background-color: #2196F3;*/
  padding: 10px;
/*  max-width:500px;*/
  margin:auto;
   display: flex;
  align-items: flex-end;
}

.grid-item {
 /* background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  
  font-size: 30px;
  text-align: center;*/
  padding: 5px;
 
}
div.grid-item img {
	 width: 100%;
	 height: auto;
}

#toprow	{
	height: 500px;
	margin:auto;
}
.row {
	 display: flex;
  align-items: flex-end;
	margin:auto;
	width:100%;
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
 /* float: left;
  width: 31%;
  height:auto;*/
  padding: 3px;
  margin:auto;
  display: flex;
  align-items: flex-end;
}
.column2 {
/*  float: left;
  width: 47%;*/
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

	div.column img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: auto;
}
div.column2 img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: auto;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  #header img{
	max-width:100%;
	height:auto;
}

}

/* Center Images*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
 /* width: 50%;
  max-width: 300px;
	max-height: auto;*/
}