/* --- Generic Styles --- */
  
header {
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
  }
  
  .header {
	width: 100%;
	background-color: #f5f5f5;
  }
  
  /* .container {
	margin: 10px auto;
	max-width: 1200px;
	padding: 10px;
  } */
  
  /* --- Hamburger Functionality --- */
  div.menu-link {
	padding: 1em;
	color: #212121;
  }
  
  /* When screen is small, center content and animate transitions. */
  nav[role=navigation] {
	clear: both;
	overflow: hidden;
	max-height: 0;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	width: 100%;
	margin: 0px 0px 0px -50px;
  }
  
  /* Positioning when nav does appear in small screen mode */
  nav[role=navigation].open {
	max-height: 15em;
	margin-bottom: 10px;
	margin-top: 50px;
  }
  
  /* When in small screen, center the list */
  nav[role=navigation] ul {
	margin: 0 auto;
	padding: 0;
  }
  
  nav[role=navigation] li a {
	display: block;
	padding: 1em .8em .6em .8em;
	font-weight: 700;
	font-size: 1.2rem;
	color: #212121;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: all 0.3s ease-out;
  }
  nav[role=navigation] li a:hover {
	color: #ef7d00;
  }
  
  /* Style for larger screens. Hide the menu button, and show the normal navigation menu. */
  /* Credit: https://codepen.io/bradfrost/pen/sHvaz */
  @media screen and (min-width: 35em) {
	div.menu-link {
	  display: none;
	}
  
	nav[role=navigation] {
	  max-height: none;
	  margin: 0px;
	}
  
	nav[role=navigation] ul {
	  margin: 0 0 0 -0.25em;
	  border: 0;
	  text-align: center;
	}
  
	nav[role=navigation] li {
	  display: inline-block;
	  margin: 0 0.25em;
	}
  
	nav[role=navigation] li a {
	  border: 0;
	}
  }
  /* --- Hamburger Appearance & Animation --- */
  /* Credit: https://codepen.io/mblode/pen/evjfn */
  div.menu-link {
	width: 30px;
	top: 100px;
	left: 120px;
	transition-duration: 0.5s;
  }
  div.menu-link .icon {
	transition-duration: 0.5s;
	position: absolute;
	height: 4px;
	width: 30px;
	top: 20px;
	background-color: #212121;
  }
  div.menu-link .icon:before {
	transition-duration: 0.5s;
	position: absolute;
	width: 30px;
	height: 4px;
	background-color: #212121;
	content: "";
	top: -10px;
  }
  div.menu-link .icon:after {
	transition-duration: 0.5s;
	position: absolute;
	width: 30px;
	height: 4px;
	background-color: #212121;
	content: "";
	top: 10px;
  }
  div.menu-link.open .icon {
	transition-duration: 0.5s;
	background: transparent;
  }
  div.menu-link.open .icon:before {
	transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
  }
  div.menu-link.open .icon:after {
	transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
  }
  div.menu-link:hover {
	cursor: pointer;
  }