/* Header */

	#header {
		-moz-transition: background-color 0.2s ease;
		-webkit-transition: background-color 0.2s ease;
		-ms-transition: background-color 0.2s ease;
		transition: background-color 0.2s ease;
		background: #000;
		height: 4em;
		left: 0;
		line-height: 4em;
		position: inherit;
		top: 0;
		width: 100%;
		z-index: 10000;
		position: fixed;
	}

		#header h1 {
			-moz-transition: opacity 0.2s ease;
			-webkit-transition: opacity 0.2s ease;
			-ms-transition: opacity 0.2s ease;
			transition: opacity 0.2s ease;
			height: inherit;
			left: 1.25em;
			line-height: inherit;
			position: absolute;
			top: 0;
		}

			#header h1 a {
				border: 0;
				display: block;
				height: inherit;
				line-height: inherit;
			}

				@media screen and (max-width: 736px) {
					#header h1 a {
						font-size: 0.8em;
					}
				}

		#header div#logo {
			padding-left: 1.5em;
			height: inherit;
		}

		#header div#logo a {
			border-bottom: none;
			height: 100%;
			display: inline-block;
		}

		#header div#logo a img {
		    height: 100%;
		    padding: 5px;
		}
		
		#header nav {
			height: inherit;
			line-height: inherit;
			position: absolute;
			right: 0;
			top: 0;
			padding-right: 1.5em;
		}

			#header nav > ul {
				list-style: none;
				margin: 0;
				padding: 0;
				white-space: nowrap;
			}

				#header nav > ul > li {
					display: inline-block;
					padding: 0;
				}

					#header nav > ul > li > a {
						border: 0;
						color: #fff;
						display: block;
						font-size: 0.8em;
						letter-spacing: 0.225em;
						padding: 0 1.5em;
						text-decoration: none;
					}
						#header nav > ul > li > a:hover {
							font-weight: normal;
						}

					#header nav > ul > li.socialIcon > a {
						padding: 0;
						vertical-align: middle;
					}

					#header nav > ul > li.socialIcon > a > img {
						padding: 0;
						vertical-align: middle;
					}

					#header nav > ul > li > img {
						border: 0;
						vertical-align: middle;
					}

						#header nav > ul > li > .menuToggle {
							outline: 0;
							position: relative;
							display: none;
						}

						#header nav > ul > li.menuItem, #header nav > ul > li.socialIcon {
							display: inline-block;
						}

						#header nav > ul > li.socialIcon {
							padding: 0 4px;
						}

							#header nav > ul > li > a.menuToggle:after {
								background-image: url("images/bars.svg");
								background-position: right center;
								background-repeat: no-repeat;
								content: '';
								display: inline-block;
								height: 3.75em;
								vertical-align: middle;
								width: 2em;
							}

							@media screen and (max-width: 1200px) {
								#header nav > ul > li > a.menuToggle {
									padding: 0 1.5em;
								}

								#header nav > ul > li > a.menuToggle span {
									display: inline;
								}
								
								#header nav > ul > li > .menuToggle {
									display: inline;
								}
								
								#header nav > ul > li.menuItem {
									display: none;
								}
							}

						@media screen and (max-width: 736px) {
							#header nav > ul > li > a {
								padding: 0 0 0 1.5em;
							}
						}

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

		#header.alt {
			background: transparent;
		}

			#header.alt h1 {
				-moz-pointer-events: none;
				-webkit-pointer-events: none;
				-ms-pointer-events: none;
				pointer-events: none;
				opacity: 0;
			}

		@media screen and (max-width: 480px) {
		
			#header div#logo {
				padding-left: 0;
				position: absolute;
				/* clip: rect(0, 120px, 60px, 0);
				clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
			}
			
			#header nav > ul > li.socialIcon {
				display: none;
			}
		}