nav {
	display:flex;
	flex-direction:column;
	width:100%;
	background:$nav-background-primary;
	color:$nav-h1-color;

	h1 a {
		color:$nav-h1-color;
		margin:$nav-h1-margin;
	}

	ul {
		display:flex;
		flex-wrap:wrap;
		margin:0;
		padding:0;
		list-style-type:none;
			
		li {

			a {
				padding:1em;
				display:block;
				text-decoration:none;
				
				&, &:active, &:visited {
					color:$nav-color;
				}
			
				&:hover {
					color:$nav-anchor-hover-color;
				}
			}
		}
	}

	.mainnav {
		display:flex;
		justify-content:space-between;
		align-items:flex-end;
		width:100%;
		max-width:$recipe-wrap;
		margin:0 auto;
		padding:0 1em;
		box-sizing:border-box;
	}

	.subnav {
		display:flex;
		justify-content:center;
		background:$nav-background-secondary;
	}
}