body {
		background: linear-gradient(to right, #d8d8d8, #e8e8e8, #f6f6f6, #ffffff, #f6f6f6, #e8e8e8, #d9d9d9);
}

#wrapper {
	text-align: center;
	max-width: 100%;
	margin: auto;
}

#banner {
	color: #a9a9a9;
	padding: 8px 5px 12px 5px;
	font-family: allerta;
	font-size: 3.5em;
	opacity: 1;
	text-shadow: 3px 3px 3px #f0f0f0,
				-1px -1px #fff,
				1px 1px #fff;
}

nav {
	color: #8b8b8b;
	font-weight: bold;
	text-decoration: none;
}

nav a {
	font-size: 1.25em;
	color: #8b8b8b;
	font-weight: 500;
	text-decoration: none;
	padding-left: 10px;
	padding-right: 10px;
}

nav a:hover {
	font-size: 1.25em;
	color: #7a7a7a;
	text-shadow: 3px 3px 3px #f0f0f0,
				-1px -1px #fff,
				 1px  1px #fff,
				 3px 3px 3px #b8b8b8;
	font-weight: 500;
	text-decoration: none;
}

hr {
	border: 1px outset #fff;
}

#gallery {
	width: 80%;
	max-width: 750px;
	margin: auto;
	padding-right: 2.5em;
}

.top {
padding-left: 1.5em;
}



ul li{
	color: #000;
	display: inline-block;
	list-style: none;
	height: 165px;
	width: auto;
	margin: auto;
	padding: 15px;
}

ul a {
	color: #000;
	text-decoration: none;
	color: white;
	font-weight: bold;
	
}

ul a:hover {
	color: #C3E4ED;
	text-decoration: none;
}

#gallery img {
	box-shadow: -1px -1px #fff,
				 5px 5px 4px #b6b6b6;
}

ul img:hover {
	opacity: .7;
	box-shadow: -1px -1px #fff,
				 4px 4px 4px #b8b8b8;
}

#footer {
	max-width: 85%;
	padding-left: 5em;
}

footer img{
	margin: auto;
	display: inline-block;
	float: left;
	padding-left: 8px;
	padding-top: 3px;
}

@media only screen and (max-width: 599px) {
	
	#banner {
		color: #8b8b8b;
		padding: .25em;
		font-family: allerta;
		font-size: 36pt;
		opacity: 1;
		text-shadow: 3px 3px 3px #f0f0f0,
					-1px -1px #fff;
	}
	
	nav {
		font-family: sans-serif;
		font-size: .95em;
		color: #8b8b8b;
		font-weight: 500;
		text-shadow: 3px 3px 3px #f0f0f0,
					-1px -1px #fff;
		text-decoration: none;
	}

	nav a {
		font-size: .95em;
		color: #8b8b8b;
		font-weight: bold;
		text-decoration: none;
		padding-left: 8px;
		padding-right: 8px;
	}

	nav a:hover {
		font-size: .95em;
		color: #9d9d9d;
		font-weight: 600;
		text-decoration: none;
	}
	
	footer img{
		max-width: 32px;
		height: auto;
	}
	
	#footer {
	max-width: 100%;
	padding-left: 1em;
	}
	
}

@media only screen and (max-width: 480px) {
		
	#banner {
		color: #8b8b8b;
		padding: .1em;
		font-family: allerta;
		font-size: 26pt;
		opacity: 1;
		text-shadow: 3px 3px 3px #f0f0f0,
					-1px -1px #fff;
	}
	
	nav {
		font-size: .85em;
		color: #8b8b8b;
		text-decoration: none;
	}

	nav a {
		font-size: .85em;
		color: #8b8b8b;
		text-decoration: none;
		padding-left: 5px;
		padding-right: 5px;
	}

	nav a:hover {
		font-size: .85em;
		color: #7a7a7a;
		text-decoration: none;
	}
	
	footer img{
		max-width: 25px;
		height: auto;
	}
}