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

	a.title {
		margin: 0;
		padding: 0 $nav-item-padding;
		color: $nav-h1-color;
		font-size: $nav-h1-font-size;
		font-weight: bold;
	}

	ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0;
		padding: 0;
		list-style-type: none;
			
		li a {
			display: block;
			padding: $nav-item-padding;
			text-decoration: none;
			
			&, &:active, &:visited {
				color: $nav-color;
			}
		
			&:hover, &.selected {
				color: $nav-anchor-hover-color;
				background-color: $nav-background-primary;
			}
		}
	}

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

	.wrap {
		width: 100%;
		max-width: $main-wrap;
		margin: 0 auto;
	}

	.primary {
		background: $nav-background-primary;

		.wrap {
			display: flex;
			justify-content: space-between;
			align-items : center;
		}
	}

	.secondary {
		background: $nav-background-secondary;

		.wrap {
			display: flex;
			justify-content: center;
		}
	}
}