.nav {
	position: relative;
}

.nav .container {
	z-index: 2;
	position: static;
}

#main-navigation,
#main-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
}

.site-title {
	z-index: 10;
	background: #fff;
}


/** NOT MOBILE MENU
===================================*/

@media screen and (min-width: 981px) {

	.nav {
		border-top: 1px solid #a2958b;
		border-bottom-width: 10px;
		border-bottom-style: solid;
		border-bottom-color: #a2958b;
	}

	.sf-menu {
		width: 100%;
		border-right: 1px solid #a2958b;
	}
	.menu-item-depth1 {
		float: left;
		width: 16.666666667%;
		border-left: 1px solid #a2958b;
		text-align: center;
	}
	.menu-item-depth1:hover,
	.menu-item-depth1.menu-current-item,
	.menu-item-depth1.menu-current-item-ancestor {
		background-color: rgba(136,124,115,.15);
	}
	.menu-item-depth1 > a {
		display: block;
		color: #887C73;
		text-decoration: none;
		font-weight: 600;
		font-size: 2rem;
		padding: 26px 0 15px;
		position: relative;
	}
	.menu-item-depth1 > a:hover,
	.menu-item > a:active {
		color: #887C73;
	}
	.menu-item-depth1 > a:after,
	.menu-item-depth1 > a:focus:after {
		content: '\00a0';
		position: absolute;
		top: 100%;
		left: -1px;
		right: -1px;
		height: 10px;
		background: #a2958b;
		opacity: 0;
		-webkit-transition: all 300ms ease;
		-moz-transition: all 300ms ease;
		-ms-transition: all 300ms ease;
		-o-transition: all 300ms ease;
		transition: all 300ms ease;
	}
	.menu-item-depth1 > a:hover:after,
	.menu-item-depth1 > a:active:after {
		opacity: 1;
	}
	.menu-buttons {
		display: none;
	}

	
	.menu-item-depth2 {
		border-bottom: 1px solid #a2958b;		
	}

	.menu-item-depth2 > a {
		color: #887C73;
		text-decoration: none;
		padding: 12px 18px 12px 24px;
		display: block;
	}

	.menu-item-depth2 > a:before {
		content: '\00a0';
		background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22xMidYMid%22%20width%3D%229%22%20height%3D%2216%22%20viewBox%3D%220%200%209%2016%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%20%7B%20fill%3A%20%237d756d%3B%20fill-rule%3A%20evenodd%3B%20%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M8.832%207.61L.892.153c-.214-.2-.55-.19-.75.026-.2.215-.188.552.027.753L7.694%208%20.17%2015.07c-.216.2-.227.538-.027.753.104.112.245.17.386.17.13%200%20.26-.05.36-.144l7.942-7.46C8.94%208.29%209%208.148%209%208c0-.148-.06-.29-.168-.39z%22%20class%3D%22cls-1%22%2F%3E%3C%2Fsvg%3E);
		background-repeat: no-repeat;
		background-position: left center;
		display: inline-block;
		width: 22px;
		margin-left: -24px;
		margin-right: 4px;
		-webkit-transition: all 300ms ease;
		-ms-transition: all 300ms ease;
		transition: all 300ms ease;
	}
	.menu-item-depth2 > a:hover:before,
	.menu-item-depth2.menu-current-item > a:before {
		background-position: 85% center;
	}

	.menu-item-depth2.menu-current-item {		
		background-color: rgba(136,124,115,.10);
	}

	/* --- mega menu --- */

	.mega-menu:after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 15px;
		background: #000;
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
		background: -moz-linear-gradient(top,  rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 95%);
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 95%);
		background: linear-gradient(to bottom,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 95%);
	}

	.mega-menu-preview {
		background: #f3f2f0;
		width: 31.896551724138%;
		float: left;
		padding: 25px;
	}

	.mega-menu-preview-image {
		background: url(../images/bnr_nav_fallback.jpg) no-repeat;
		background-size: cover;
		min-height: 200px;
	}

	.sub-menu-columns {
		width: 63.793103448276%;
		float: right;
		padding-top: 25px;
	}

	.sub-menu-column {
		width: 48.378378378378%;
		float: left;
	}

	.sub-menu-column2 {
		float: right;
	}

	.sub-menu-column-title {
		padding-bottom: 12px;
		margin-bottom: 0;
		border-bottom: 1px solid #a2958b;
	}


	#main-navigation .mega-menu {
		z-index: 0;
		width: 100%;
		left: 0;
		background-color: #fff;
		text-align: left;
		display: none;
		opacity: 0;
		right: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
		z-index: 55;
		top: 100%;
		padding: 0px 0 25px;
	}
	#main-navigation .sfHover .mega-menu {
		display: block;
	}
	#main-navigation .menu-item.sfFirst .mega-menu {
		transition: opacity 300ms ease-in;
	}
	#main-navigation .menu-item.sfHover .mega-menu {
		opacity: 1;
		clip: auto;
		height: auto;
		margin: 10px 0 0;
		overflow: visible;
		padding: 40px 0;
		width: 100%;
	}
	#main-navigation .menu-item.sfHover .section {
		-webkit-animation: megaMenuFade 400ms;
		animation: megaMenuFade 400ms;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

}




/** FIFTH BREAKPOINT - fluid
===================================*/
@media (max-width: 980px){

	.mega-menu-preview {
		display: none;
	}
	.sub-menu-column-title {
		display: none;
	}

	#main-navigation {
		border-top: none;
		padding: 0;
	}
	
	.site-title .container {
		padding-top: 45px;
	}
	.top-nav {
		display: none;
	}

	.logo {
		margin-top: 20px;
		margin-bottom: 20px;
		max-width: 200px;
	}	

	/* Menu buttons */
	.menu-buttons {
		z-index: 51;
		background-color: #7D756D;
		top: 0;
		width: 100%;
		padding: 6px 30px;
		height: 44px;
		position: fixed;
	}
	.menu-buttons a {
		overflow: hidden;
		white-space: nowrap;
		text-indent: 100%;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		display: block;
		float: right;
		padding: 0;
		border: 0;
		outline: none;
		height: 32px;
		width: 32px;
	}
	.no-touch .menu-buttons a:hover,
	.no-touch .menu-buttons a:focus {
		opacity: 0.8;
	}
	.menu-button:focus {
		outline: 1px dotted #FFF;
	}
	.js-ready.js-nav #button-open-menu {
		display: none;
	}
	.menu-button {
		background: url(../images/icon-menu.svg) no-repeat;
	}
	.no-js .menu-button,
	.no-svg .menu-button {
		background-image: url(../images/icon-menu.png);
	}
	#button-open-menu {
		background-position: 0 2px;
	}
	#button-close-menu {
		background-position: -37px 0px;
	}
	.js-ready #button-close-menu {
		display: none;
	}
	.js-ready.js-nav #button-close-menu {
		display: block;
	}
	.no-js #button-close-menu {
		margin-right: 15px;
	}

	/* ---- Base styles ---- */
	.header {
		background-color: transparent;
		padding: 0;
	}
	.nav {
		top: 0;
		position: fixed;
		overflow-y: scroll;
		overflow-x: hidden;
		height: 100%;
		width: 100%;
		background-color: #4A4642;
	}
	.nav .container {
		position: relative;
		padding: 0;
		max-width: none;
		width: 100%;
	}
	#main-navigation .menu-item {
		position: relative;
		border-top: 1px solid #3C3935;
		float: none;
		width: 100%;
	}
	#main-navigation > .menu-item:last-child {
		border-bottom: 1px solid #3C3935;
	}

	#main-navigation a {
		width: 100%;
		padding: 9px 85px 9px 20px;
		color: #FFF;
		display: block;
	}

	#main-navigation .menu-item.current-menu-item > a {
		background-color: #ec532b;
	}

	#main-navigation > li > a {
		font-size: 1.5rem;
	}
	#main-navigation, #main-navigation ul {
		width: 100%;
	}

	/* Depth differences */
	#main-navigation .menu-item-depth1 > a {
		padding-left: 20px;
		background-color: #4A4642;
	}
	#main-navigation .menu-item-depth2 a {
		font-size: 1.4rem;
	}
	#main-navigation .menu-item-depth2 > a  {
		padding-left: 20px;
		background-color: rgba(0,0,0,0.1);
	}
	#main-navigation .menu-item-depth3 > a  {
		padding-left: 35px;
		background-color: rgba(0,0,0,0.2);
	}
	#main-navigation .menu-item-depth4 > a  {
		padding-left: 50px;
		background-color: rgba(0,0,0,0.4);
	}
	#main-navigation .menu-item-depth5 > a  {
		padding-left: 50px;
		background-color: rgba(0,0,0,0.5);
	}
	#main-navigation .menu-item-depth6 > a  {
		padding-left: 50px;
		background-color: rgba(0,0,0,0.6);
	}

	/* ---- No Javascript ---- */
	.no-js .nav {
		padding-top: 44px;
	}
	.no-js .nav:not(:target) {
		z-index: -1;
	}
	.no-js .nav:target {
		position: relative;
	}

	/* ---- Javascript enabled ---- */
	.js-ready .nav {
		width: 70%;
		z-index: 0;
		opacity: 0;
		transition: opacity 100ms ease 600ms;
	}
	.js-ready.js-nav .nav {
		opacity: 1;
		transition: none;
	}
	.js-ready .mega-menu {
		display: none;
	}

	.js-ready #main-navigation a {
		min-height: 39px;
	}

	/* Expand buttons */
	.menu-button-expand {
		-webkit-appearance: none;
		-moz-appearance: none;
		outline: none;
		border: none;
		background: none;
		color: #FFF;
		font-size: 2.3rem;
		background: #3C3935;
		width: 73px;
		height: 42px;
		display: block;
		padding: 0;
		margin: 0;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		padding-bottom: 3px;
		cursor: pointer;
	}
	.no-js .menu-button-expand:hover,
	.no-js .menu-button-expand:focus
	.no-touch .menu-button-expand:hover,
	.no-touch .menu-button-expand:focus,
	.menu-button-expand:focus {
		background-color: #2D2B28;
	}
	.no-js #main-navigation a:hover,
	.no-js #main-navigation a:focus,
	.no-touch #main-navigation a:hover,
	.no-touch #main-navigation a:focus {
		background-color: rgba(0,0,0,0.3) !important;
	}

	/* --- Javascript, css transforms, and css transitions --- */
	.csstransforms3d.js-ready .nav {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
	}
	.csstransforms3d.js-ready .menu-push {
		left: 0;
		-webkit-transform: translate3d(0, 0, 0);
		        transform: translate3d(0, 0, 0);
		transition: -webkit-transform 500ms ease;
		transition: transform 500ms ease;
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
	}
	.csstransforms3d.js-ready .nav .container {
		transition: -webkit-transform 500ms ease;
		transition: transform 500ms ease;
		-webkit-transform-origin: 50% 0%;
		        transform-origin: 50% 0%;
	}
	.csstransforms3d.js-nav .nav .container {
		-webkit-transform: translate3d(0, 0, 0);
		        transform: translate3d(0, 0, 0);
	}

	.csstransforms3d.js-ready.js-nav .nav .container  {
		-webkit-transform: translate3d(0, 0, 0);
		        transform: translate3d(0, 0, 0);
	}
	.csstransforms3d.js-ready .nav {
		padding-top: 64px;
	}
	.csstransforms3d.js-nav .menu-push {
		-webkit-transform: translate3d(-70%, 0, 0) scale3d(1, 1, 1);
		        transform: translate3d(-70%, 0, 0) scale3d(1, 1, 1);
	}
	.csstransforms3d.js-ready .nav .container {
		-webkit-transform: translate3d(30%, 0, 0) scale3d(0.9, 0.9, 0.9);
		        transform: translate3d(30%, 0, 0) scale3d(0.9, 0.9, 0.9);
		margin: 0;
	}
	.csstransforms3d.js-ready .nav {
		right: 0;
	}
}


@media all and (max-width: 380px){

	.menu-buttons {
		padding: 6px 20px;
	}
}