* {
	margin: 0;
	padding: 0;
}
html {
	background-color: white;
}

/* -------------------------------- B O D Y -------------------------------- */

body {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    width: 98%;
    max-width: 1024px;
    margin: 0 auto;
    border: 3px solid #000000;
    background-color: #7f7f7f;
}

a:focus, a:hover {
	font-style: italic;
}

/* ------------------------------ H E A D E R ------------------------------ */

header {
	padding: 1em 0 2em 0;
	background-image: -moz-linear-gradient(30deg, #e2e2e2 0%, #e2e2e2 30%, white 50%, #e2e2e2 80%, #e2e2e2 100%);
	background-image: -webkit-linear-gradient(30deg, #e2e2e2 0%, #e2e2e2 30%, white 50%, #e2e2e2 80%, #e2e2e2 100%);
	background-image: -o-linear-gradient(30deg, #e2e2e2 0%, #e2e2e2 30%, white 50%, #e2e2e2 80%, #e2e2e2 100%);
	background-image: linear-gradient(30deg, #e2e2e2 0%, #e2e2e2 30%, white 50%, #e2e2e2 80%, #e2e2e2 100%);
}

header h1 {
	font-size: 175%;
	color: #000000;
	text-align: center;

}
header h2 {
	font-size: 150%;
	font-style: italic;
	text-align: center;

}

header img {
	float: left;
	padding: 0 2%;
	width: auto;
}

/* ---------------------- N A V I G A T I O N   M E N U ---------------------- */

#nav_menu ul {
    display: flex;
    flex-basis: 100%;
    justify-content: space-between;
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 100;
}

#nav_menu ul li {
    flex-basis: 33.3333%;
}

#nav_menu ul li a {
    display: block;
    text-align: center;
    padding: 1em 0;
    text-decoration: none;
    background-color: black;
    color: white;
    font-weight: bold;
}

#nav_menu a.current {
	color: #94c930;
}

#nav_menu ul ul {
	width: 100%;
    display: none;
    position: absolute;
    top: 100%;
}

#nav_menu ul li:hover > ul {
	display: block;
}

#nav_menu > ul::after {
    content: "";
    display: block;
}

#nav_menu ul li ul {
    width: 33.3333%;
}

/* -------------------------------- M A I N -------------------------------- */

main {
	display: flex;
}

michigan {
	flex-basis: 60%;
	order: 1;
}

aboutus {
	flex-basis: 40%;
    order: 2;
}

aboutus h1 {
	padding: 1em 1em;
	color: white;
	font-size: 110%;
}

aboutus p {
	padding: 1em 1em;
	color: white;
	font-size: 110%;
}

/* ------------------------------- S T O R E ------------------------------- */

store {
	margin: 2.5% 2.5% 0 2.5%;
}

store h1 {
	text-align: center;
	color: white;
	font-size: 175%;
	padding: 0%;
}

store h2 {
	text-align: center;
	color: white;
	font-size: 150%;
	padding: 0%;
}

store img {
	align: center;
	width: 90%;
	margin: 0% 5%;
	border: 3px solid black;
}

store figcaption {
	text-align: center;
	color: white;
	font-style: italic bold;
	padding: 1% 5% 5% 5%;
}

store p {
	margin: 5% 2.5% 0% 5%;
	text-align: left;
	font-size: 125%;
	color: white
}

store p strong {
	margin: 0% 0%;
	text-align: left;
	font-size: 140%;
	color: white
}

store ul {
	list-style-type: none;
	margin: 0%;
}

store ul li {
	padding-top: 0%;
	padding-left: 5%;
	padding-bottom: 0%;
	text-align: left;
	color: white
}


store ul li a {
	font-size: 125%;
	color: white
}

/* ------------------------------ F O O T E R ------------------------------ */

footer {
	background-color: #e2e2e2;
	clear: both;
}

footer p {
	text-align: center;
	color: #94c93d;
	padding: 1em 0;
}

footer p a:focus, footer p a:hover {
	font-style: italic;
}

footer p a {
	color: #94c93d;
	font-weight: bold;
}

#mobile_menu {
	display: none;
}


/* --------------- R E S P O N S I V E   P D F   V I E W E R ---------------- 

/* Source: https://stackoverflow.com/questions/16468961/how-to-embed-pdf-file-with-responsive-width 

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
*/



/* --------------------- T A B L E T   P O R T R A I T ---------------------- */

@media only screen and (max-width: 959px) {
	header h1 { font-size: 135%; }
	header h2 { font-size: 120%; }
}

/* -------------------- M O B I L E   L A N D S C A P E --------------------- */

@media only screen and (max-width: 767px) {
	header img { float: none; }
	
	header {
        display: flex;
        text-align: center;
    }

    header, footer {
        flex-wrap: wrap;
        justify-content: center;
    }

    header h1, header h2 { flex-basis: 100%; }
	
	main {
		flex-direction: column;
	}
	
	michigan {
		order: 1;
		width: 95%;
	}
	
	aboutus {
		order: 2;
		padding: 2.5% 2.5%;
		width: 95%;
	}

	store h1 {
		font-size: 150%;
	}

	store h2 {
		font-size: 125%;
	}
	
	store p{
		font-size: 100%;
	}

	store p strong {
		font-size: 120%;
	}

	store ul li a {
		font-size: 100%;
	}
	
	#nav_menu {
		display: none;
	}
	
	#mobile_menu {
		display: block;
	}
	
	.slicknav_menu {
		background-color: #000000 !important;
	}
}

/* -------------------- M O B I L E   P O R T R A I T --------------------- */

@media only screen and (max-width: 479px) {
	body { font-size: 90%; 
	}
	
	
}