@media only screen and (min-width: 37.5em) {
/* Only CSS rules that need to be changed to meet the layout needs from small to medium go in here */
	main {
		margin:auto;
		width: 80%
	}

	header,	nav {
		margin: 0 auto;
		max-width: 100%;
	}

	h1 {
		text-align: center;
	}

	.hamburger {
		display: none;
	}

	.navigation {
		background-color: #333;
		overflow: hidden;
		text-align: left;
	}

	.navigation li {
		display: inline-block;
		margin-left: .25rem;
	}

	.navigation a {
		display: block;
		color: #eee;
		padding: .5rem;
		text-align: center;
		text-decoration: none;
	}

	.navigation a:hover {
		color: #000;
		background-color: #777;
	}

	nav {
		background-color: #1e2023;
	}

	nav button {}  /* hamburger button does not need to be shown */

	nav ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #333;
		width:auto;
	}

	nav ul li {
		float: left;
		border-right: 1px solid #bbb;

	}

	nav ul li a {
		display: block;
		color: white;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
	}

	nav ul li.active a {
		background-color: #4CAF50;
	}
	nav ul li a:hover {
		background-color: #111;
	}

/*---------------------BEGIN CURRENT WEATHER-------------*/

	.container {
		display: flex;
		flex-direction: row;
		border-bottom: 2px solid black;
	}

	.container_sub {
		display: flex;
		flex-direction: column;
		margin-bottom: 10px;
	}

	.title {
		font-size: 1.5em;
		font-weight; bold;
	}

	#windChill {
		font-weight: bold;
		font-size: 1.25em;
	}

	section {
		text-align: center;
	}

/*--------------------BEGIN FORECAST--------------*/

	.forecastContainer {
		display: flex;
		flex-direction: column;
		border-bottom: 2px solid black;
		padding-left: 15px;
		padding-right: 15px;
	}

	.dayContainer {
		display: flex;
		justify-content: center;
	}

	.dayFlexItem {
		width: 5rem;
		height: 30px;
		background-color: dodgerblue;
		font-weight: bold;
		border: 1px solid black;
	}

	.degContainer {
		display: flex;
		justify-content: center;
		padding-bottom: 15px;
	}

	.degFlexItem {
		width: 5rem;
		height: 30px;
		background-color: skyblue;
		border: 1px solid black;
	}

/*----------------------------BEGIN ARTICLE----------------------*/

.articleContainer {
	display: flex;
	padding-right: 15px;
	flex-direction: row;
}

.articleImage {
	margin: initial;
	padding-right: 15px;
}

.subArticleContainer {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

footer {
	clear:both;
}

}