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

	h1 {
		margin: 0;

		a {
			display: block;
			padding: $nav-h1-padding;
			color: $nav-h1-color;
			font-size: $nav-h1-font-size;
		}
	}

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

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

	img {
		height:1em;
		width:1em;
	}

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

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