/*-----Prevents iPhone from resizing in landscape mode -----*/
html {-webkit-text-size-adjust: none; }

/*----------- apply a natural box layout model to all elements --------------*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/*-----BODY -----*/
body {
	font-size: 16px;
	font-family: 'Karla', sans-serif;
}


/*-----CONTAINER -----*/
#container {
	background-color: #888888;   /*becomes the nav background color*/
	min-width: 320px;
	max-width: 1140px;
}

/*-----HEADER -----*/
header {
	background-color: #ffffff;
	padding: 10px;
}

header p {
	float: right;
}

hgroup {
	display: flex;
	align-items: center;
	width: 100%;
}

header hgroup img {
	width: 45%;
	margin-right: 10px;
}

header h1 {
	font-size: 28px;
}

header h2 {
	font-size: 16px;
}



/*-----NAVigation -----*/
nav {
	background-color: #75110C;
	padding: 10px;
}

.button {
	background: #003768;
	border-radius: 5px;
	padding: 5px 0;
	text-align: center;
	color: white;
}

nav ul {
	background-color: #ffffff;
	border-radius: 5px;
	display: none;
	margin: 10px auto 0;
	padding: 5px 0;
	flex-direction: column;
}

nav ul li {
	padding: 10px;
}

nav ul li:last-of-type {
	border-bottom: initial;
}

nav ul li a {
	color: #75110C;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
}

nav ul li:hover {
	background-color: #ffffff;
	box-shadow: initial;
	cursor: pointer;
}

nav ul li:hover a {
	color: #75110C;
}

nav ul li:hover ul {
	display: block;
}

nav select {
	width: 100%;
  background: #ccc;
}


/*-----CONTENT -----*/
#content {
	background-color: #ffffff;
	min-height: 5em;
	padding: 5px;
}

#content h1 {
	color: #003768;
	font-size: 38px;
}


#demo-output p {
	font-size: 16px;
  margin: 8px 0;
}

#demo-output img {
	float: right;
	width: 100%;
}

/*----- FOOTER -----*/
footer {
	background-color: #999999;
	clear: both;
	text-align: center;
	padding: 5px;
}