/* CSS 87pest.com */
/* colors: */
/* #cccccc; light gray */
/* #262626; dark-dark gray */
/* #ff6600; dark orange */
/* #008000; Dark Green */
/* #8cd9b3; Flat Light Green */
*{
	margin: 0 auto;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}
html {
	min-width: 300px;
}
body {
	
}
.wrapper {
	/* background-color: yellow; for layout */
	border: 1px black solid;
	width: 95%;
	max-width: 600px;
	padding: 2%;
}
header {
	/* background-color: lightgray;for layout */
	padding: 2px;
	padding-bottom: 5px;
	padding-top: 5px;
}
header > h1 {
	background-color: #008000; /* Dark Green */
	font-size: 22px;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	padding-top: 9px;
	padding-bottom: 9px;
}
.banner {
	/* background-color: red;  for layout */
	padding-bottom: 5px;
}
.banner > a > img {
	width: 250px;
}
main {
	/* border: 1px black solid;  for layout */
	/* background-color: red;  for layout */
	width: 98%;
	padding: 2px;
	padding-bottom: 10px;
	padding-top: 10px;	
}
main > a {
	text-decoration: none;
}
main > a:focus {
	border: .5px solid #f2f2f2;
	text-decoration: none;
}
main > a > h2 {
	/* background-color: lightgreen;  for layout */
	font-size: 16px;
	color: #262626; /* dark-dark gray */
	white-space: nowrap;
	overflow: hidden;
	padding-bottom: 10px;
	padding-top: 10px;
}
main > a > h2:hover {
	background-color: #f2f2f2; /* light gray */
	color: #ff6600; /* dark orange */
	font-size: 18px;	
}
.mainlogo {
	width: 200px;
	max-width: 60%;
}
footer {
	/* background-color: lightblue;  for layout */
	padding-top: 5px;
	padding-bottom: 5px;
}
footer > a {
	text-decoration: none;
	color: #1a1a1a; /* dark-dark gray */
	font-size: 13px;
}
footer > a:hover {
	/* background-color: ** See Below ** #cccccc;  light gray */
	color: #ff6600; /* dark orange */
	font-size: 14px;
}
footer > a > div { /* URL Container */
	width: 65%;
	white-space: nowrap;
	overflow: hidden;
}
footer > a > div:hover {
	background-color: #cccccc; /* light gray */
}
.copyright {
	padding-top: 5px;
	padding-bottom: 5px;
}
.footspace { /* add a little space over copyright */
	padding-top: 5px;
	padding-bottom: 5px;
}
.socials {
	/* background-color: yellow;  for layout */
	padding-top: 5px;
	padding-bottom: 5px;
	display: flex; /* Footer Nav Links */
	flex-direction: row; /* Footer Nav Links */
}
.socials > a > img {
	width: 30px;
}
/* Desktop Style for Screens over 450px */
@media screen and (max-width: 450px) {
	.mainlogo {
		width: 350px;
	}
}