/* ------------------------------
  navigation
------------------------------ */

button.mobile-nav--toggle {
	display: none;
	background: none;
}

#navigation {
	width: auto;
	position: relative;
   z-index: 10;
}

#navigation ul {
	margin: 0;
	width: auto;
	display: flex;
	justify-content: center;
}

#navigation li {
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0 1rem;
	list-style: none;
	position: relative;
	margin-left: 1rem;
}

#navigation a {
	color: var(--color-contrast-mid);
  font-weight: 400;
  width: 100%;
  font-size: 1rem;
	text-decoration: none;
	padding: .4rem 0rem;
	display: flex;
	position: relative;
	white-space: nowrap;
  text-transform: capitalize;
  transition: all ease-in .1s;
}

#navigation a:after {
   content: '';
   width: 0;
   height: 2px;
   position: absolute;
   top: 90%;
   left: 0;
   transition: all ease-in-out 0.3s;
   z-index: -1;
}

#navigation a:hover {
	cursor: pointer;
	color: var(--color-contrast-lightest);
	border-color: rgba(255, 255, 255, 0.4);
}

#navigation ul a:hover::after {
   background: var(--color-contrast-dark);
   width: 100%;
}

#navigation a.active {
	color: var(--color-contrast-lightest);
}

#navigation ul a.active:after {
   background: var(--color-contrast-lightest);
   width: 100%;
}

#navigation ul li:hover ul {
	visibility: visible;
	opacity: 1;
	display: block;
}

#navigation ul ul {
	display: none;
}

@media (max-width: 767px) {
	header #navigation {
		position: fixed;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		transition: all ease-in;
		padding: 50px;
		background-color: var(--color-contrast-darkest);
		-webkit-font-smoothing: antialiased;
		visibility: hidden;
		opacity: 0;
		transition: all ease-in .25s;
      transform: translateY(-10px);
      z-index: 12;
	}
	header #navigation.open {
		opacity: 1;
		z-index: 20;
		transform: none;
		visibility: visible;
	}
	header #navigation ul {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	header #navigation li {
		width: 100%;
		margin-left: 0;
	}
	header #navigation a {
      padding: 1rem 2rem;
      width: 100%;
      font-size: 27px;
		display: inline-block;
		text-align: left;
   }
   #navigation ul a:hover::after,
   #navigation ul a.active:after {
      display: none !important;
   }
	#navigation a.ghost-btn img {
		display:inline-block;
		vertical-align:middle;
	}
	#navigation a.ghost-btn {
		margin-top: 2rem;
	}
	button.mobile-nav--toggle {
		position:relative;
		display: block;
		border: none;
		border-radius: 3px;
		padding: 1rem;
		overflow: hidden;
		white-space: nowrap;
		z-index: 30;
		color: var(--color-contrast-lightest);
		text-transform: uppercase;
		letter-spacing: .1em;
	}
	button.mobile-nav--toggle span {
		/* the span element is used to create the menu icon */
		position: absolute;
		display: block;
		width: 25px;
		height: 3px;
		background: var(--color-contrast-light);
		top: 50%;
		left: 50%;
		margin-top: -1px;
		margin-left: -13px;
	}
	button.mobile-nav--toggle span:before, button.mobile-nav--toggle span:after {
		content: '';
		position: absolute;
		left: 0;
		background: inherit;
		width: 100%;
		height: 100%;
		transform: translateZ(0);
		backface-visibility: hidden;
		transition: transform .2s;
		border-radius: 2px;
	}
	button.mobile-nav--toggle span:before {
		top: -9px;
		transform: rotate(0);
	}
	button.mobile-nav--toggle span:after {
		bottom: -9px;
		transform: rotate(0);
	}
	button.mobile-nav--toggle.open span {
		background: transparent;
	}
	button.mobile-nav--toggle.open span:before, button.mobile-nav--toggle.open span:after {
		background: var(--color-contrast-light);
	}
	button.mobile-nav--toggle.open span:before {
		top: 0;
		transform: rotate(135deg);
	}
	button.mobile-nav--toggle.open span:after {
		bottom: 0;
		transform: rotate(225deg);
	}
}