header {
	background-color: #e6e6e6;
	color: #000000;
	font-family: Ravie;
	grid-row: 1/2;
	grid-column:2/8;
}

body {
    background-image: url( './bricks.png' );
}

header h1 {
	line-height: 240%;
	padding-left: 0.5em;
	height: 80px;
	margin: 0;
    background-color:#E6E6E6;
}

header h1 a {
    color:black;
    text-decoration:none;
}

header h1 a:hover {
    text-decoration:underline;
}

nav {
	background-color: #cccccc;
	padding: 0.75em;
	font-weight: bold;
	grid-row: 2/3;
	grid-column:2/8;
}

nav a {
	color: #000000;
	padding: 2em 1em 1em 1em;
	font-family: roboto;
    text-decoration:none;
}

nav a:hover {
    text-decoration:underline;
}

body {
	margin: 0;
}

h2 {
	font-family: roboto;
}

h3 {
	font-family: roboto;
}

p {
	font-family: roboto;
}

main {
	padding: 5px 20px 5px 20px;
	grid-row: 4/5;
	grid-column:2/8;
}

footer {
	grid-row: 5/6;
	grid-column:2/8;
	font-family: roboto;
	background-color: white;
    padding-top:20px;
	text-align: center;
}

footer div.bar {
    background-color:#BBBBBB;
    padding:10px 5px;
}

.row {
	display: flex;
	flex: wrap;
	justify-content: space-between;
	grid-row: 3/4;
	grid-column: 2/8;
}

.column {
	flex: 25%;
  	max-width: 25%;
 	padding: 0 4px;
 	align-content: center;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  max-width: 85%;
  padding: 1em;
}

#wrapper {
	display: grid;
	grid-auto-rows: minmax(0px,auto);
	grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
}

#wrapper header, #wrapper .row, #wrapper main {
    background-color:white;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

section {
	background-color: #cccccc;
	padding: 1rem 2rem;
	margin-top: 30px;
}