/********* CSS RESETS **********/

img {
	max-width:100%;
}

h1, h2, h3, p, ul, ol {
	margin: 0;
	padding: 0;
}

/********* End CSS Reset *********/

body div {
/*	display: flex;*/
}


#top div {
	display: flex;
}

#middle div {
	margin-top: 350px;
	padding-top: 30px;
	display: flex;
	padding-right: 15px;

}
#side div {
	background-color: #eeeeee;
	float:right;
	
}
header nav {
	font-size: 30px;
	color: #0B0B0B;
	width:480px;
	/*position: relative;*/
/*	bottom: 0;
	right: 0;
*/	
}

header nav ul {
	overflow: hidden;
	padding-left:10px;
}

header nav ul li a {
	display:block;
	text-transform:uppercase;
	padding:10px;
	color:#E16B16;
	/*font-family:FuturaStdBoldCondensed;*/
	font-size:24px;
}

header nav ul li{
	float:left;
}

header nav ul li a:hover {
	color:#017c8d;
}

h1 {
	color: #0c4c91;
}

h2 {
	color: #0c4c91;
}


#footer div {
	background-color: #630b00;
	display: flex;
	color: #c9cad1;
	margin-top: 100px;
	padding-top: 30px;
}

#footer div h1 {
	color: #c9cad1;
	font-size:40px;
	
}

#footer div nav {
	color: #c9cad1;
	font-size:24px;
	
}
@media only screen and (min-width: 600px) {

	
}
	.grid { grid-template-columns: 1fr 1fr;}
	
	header {
		/*display: flex;*/
		padding-bottom: 0;
	}

	.logo {
		flex: 1;
		padding: 15px;
		display: block;
	}
	
	header h1 {
		font-size: 10vw;
	}

	header h2 {
		font-size: 3.6vw;
	}
	
	header img {
		width: 100%;
	}
	
	#top p, footer p {
		font-size: 24px;
	}

@media only screen and (min-width: 960px) { 

	.grid { grid-template-columns: 1fr 1fr 1fr 1fr;}
	
	#page {
		width: 960px;
		margin: auto;
	}
	
	header h1, footer h1 {
		font-size: 100px;
	}
	
	header h2 {
		font-size: 36px;
	}
}