/* GLOBAL HEADER STYLES */

header {
	top: 0;
	left: 0;
	margin: 0;
	z-index: 5;
	width: 100%;
	position: fixed;
	background-color: #3852A4;
}

	header h1 {
		float: left;
		margin-left: 50px;
		margin-bottom: 0;
		color: white;
		font-weight: 600;
		font-size: xx-large;
		font-variant: small-caps;
		cursor: pointer;
		text-decoration: none;
	}

		header h1 a {
			color: white;
			font-weight: 600;
			line-height: 50px;
			font-size: xx-large;
			font-variant: small-caps;
			cursor: pointer;
			text-decoration: none;
		}

/* DESKTOP HEADER STYLES */

header {
	height: 50px;
}

	header h1 {
		line-height: 50px;
	}

	header menu {
		float: right;
		margin-right: 25px;
	}

	header #MenuButton {
		display: none;
	}

	header li {
		padding: 0 25px;
		line-height: 50px;
		display: inline-block;
		list-style-type: none;
	}

		header li a {
			color: white;
			font-weight: 600;
			font-size: x-large;
			text-decoration: none;
			font-variant: small-caps;
		}

/* MOBILE HEADER STYLES */

@media only screen and (max-width: 1200px) {
	header {
		height: 100px;
	}

		header h1 {
			line-height: 100px;
		}

		header #MenuButton {
			margin: 0;
			float:right;
			display: block;
		}

		header menu {
			right: 0;
			margin: 0;
			top: 100px;
			float: none;
			width: 200px;
			height: 100%;
			display: none;
			position: fixed;
			text-align: right;
			background: #3852A4;
		}

		header ul {
			padding: 0;
		}

		header li {
			color: white;
			font-size: xx-large;
			font-weight: 600;
			font-variant: small-caps;

			line-height: 75px;
			display: list-item;
			list-style-type: none;
		}
}