@import url(../fonts/font-awesome.min.css);
/* Header */
	#header {
		background-color: #333;
		color: #fff;
		cursor: default;
		font-size: 1.1em;
		height: 3.5em;
		left: 0;
		line-height: 3em;
		/*position: fixed;*/
		text-transform: capitalize;
		/*top: 0;*/
		width: 100%;
	}

		#header nav {
			height: inherit;
			line-height: inherit;
			/*position: absolute;
			right: 1.25em;*/
			vertical-align: middle;
		}

			#header nav ul {
				list-style: none;
				margin: 0;
				padding-left: 0;
			}

				#header nav ul li {
					border-radius: 4px;
					display: inline-block;
					margin-left: 15px;
					padding-left: 0;
				}

					#header nav ul li a {
						-moz-transition: color 0.2s ease-in-out;
						-webkit-transition: color 0.2s ease-in-out;
						-ms-transition: color 0.2s ease-in-out;
						transition: color 0.2s ease-in-out;
						color: #fff;
						display: inline-block;
						text-decoration: none;
						padding: 4px 10px;
						font-size: 1.1em;
					}

						#header nav ul li a:hover {
							color: #fff;
							background-color: #336699;
						}

					#header nav ul li:first-child {
						margin-left: 0;
					}


			.active {
			  background-color: #4CAF50;
			  color: white;
			}

		@media screen and (max-width: 1050px) {

			#header {
				display: none;
			}

			.active {
			  background-color: transparent;
			  color: white;
			}
		}

/* Menu */

	.navPanelToggle {
		text-decoration: none;
		text-decoration: none;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		display: none;
	}

	.navPanelToggle img.toggle {
		height: 20px;
		width: 30px;
	}

		.navPanelToggle:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}

		@media screen and (max-width: 1050px) {

			.navPanelToggle {
				display: block;
			}

		}

		.navPanelToggle *:before {
			background: rgba(144, 144, 144, 0.65);
			border-radius: 4px;
			color: #fff;
			display: block;
			font-size: 16px;
			height: 2.25em;
			left: 0.5em;
			line-height: 2.25em;
			position: absolute;
			text-align: center;
			top: 0.5em;
			width: 3.5em;
		}

	#navPanel {
		-moz-transform: translateX(-20em);
		-webkit-transform: translateX(-20em);
		-ms-transform: translateX(-20em);
		transform: translateX(-20em);
		-moz-transition: -moz-transform 0.5s ease, visibility 0.5s;
		-webkit-transition: -webkit-transform 0.5s ease, visibility 0.5s;
		-ms-transition: -ms-transform 0.5s ease, visibility 0.5s;
		transition: transform 0.5s ease, visibility 0.5s;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		overflow-y: auto;
		position: fixed;
		left: 0;
		top: 0;
		background: #222;
		color: #fff;
		height: 100%;
		max-width: 80%;
		width: 20em;
		padding: 0.5em 1.25em;
		text-transform: uppercase;
	}

		#navPanel ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}

			#navPanel ul li {
				padding: 0;
			}

				#navPanel ul li:first-child a:not(.button), #navPanel ul li:first-child span:not(.button) {
					border-top: 0;
				}

				#navPanel ul li a:not(.button),
				#navPanel ul li span:not(.button) {
					border-top: solid 1px #555;
					color: #fff;
					display: block;
					padding: 0.75em 0;
					text-decoration: none;
				}

		#navPanel .button {
			width: 100%;
		}

		#navPanel .close {
			text-decoration: none;
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			-webkit-tap-highlight-color: transparent;
			border: 0;
			color: #484848;
			cursor: pointer;
			display: block;
			height: 4em;
			padding-right: 1.25em;
			position: absolute;
			right: 0;
			text-align: right;
			top: 0;
			vertical-align: middle;
			width: 5em;
		}

			#navPanel .close:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
			}

			#navPanel .close:before {
				content: '\f00d';
				width: 3em;
				height: 3em;
				line-height: 3em;
				display: block;
				position: absolute;
				right: 0;
				top: 0;
				text-align: center;
			}

			#navPanel .close:hover {
				color: inherit;
			}

			@media screen and (max-width: 736px) {

				#navPanel .close {
					height: 4em;
					line-height: 4em;
				}

			}

		#navPanel.visible {
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
			box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.2);
			visibility: visible;
		}