.site-navigation {
	background: $brand-primary;
}

.navbar-collapse {
	padding-left: 0;
	padding-right: 0;
}

.navbar-toggle {

	.icon-bar {
		background: #ffffff;
	}
}

.nav-menu {
	text-align: center;
}


.nav-menu {	
	@include clearfix;
	text-align: center;

	.menu {
		display: block;
	}

	a {
		display: block;
		font-family: $font-family-serif;
		font-size: 13px;
		font-weight: bold;
		letter-spacing: 0.325px;
		text-transform: uppercase;
		padding: 17px 50px;
		color: #362a00;
		border-right: solid 1px #fcd44d;

		&:hover {
			color: #ffffff;
			border-right: solid 1px #333333;
			background: #333333;
		}
	}

	ul {
		padding: 0;
		margin: 0;
		list-style-type: none;
		@include clearfix;

		li {
			float: none;
			display: block;
			position: relative;
			margin-bottom: 0;

			&:last-child {

				a {
					border: none;
				}
			}

			a {
				display: block;
				text-transform: uppercase;

				&:hover {
					text-decoration: none;
				}
			}
			&.active a {
			}
			&:hover > a {
				color: #ffffff;
				background: #333333;
			}
			&:hover > ul {
				display: block;
			}
			
			ul {
				background: $brand-primary;
				
				li {
					float: none;

					a {
						display: block;
						padding: 15px;
						border: none;

						&:hover {
							border: none;
						}
					}
					&:hover > a {
					}
					
					&:last-child a {
						border-bottom: 0;
					}
				}
			}
		}
	} 
}

@media (min-width: 768px) {

	.nav-menu {

		.menu {
			display: inline-block;
			vertical-align: top;
		}

		ul {

			li {
				float: left;
				
				ul {
					display: none;
					position: absolute;
					z-index: 999;
					top: 100%;
					left: 0;
					width: 220px;
					
					ul {
						top: 0;
						left: 100%;
					}

				}

			}

		}

	}
	
}
