/* Desktop
	======= */

#nav-wrap nav h3 {
		display: none; /* Hide menu title & icon initially */
}

/* Mobile
   ====== */

@media screen and (max-width: 690px) {

	#nav-wrap {
		position: relative;
		zoom: 1;
	}

	#nav-wrap nav h3 {
		display: block; /* Show menu title & icon */
		border-radius: 10px 10px 0 0;
		height: 30px; /* 34px - padding-top */
		color: #fff;
		cursor: pointer;
		text-transform: uppercase;
		font-size: 100%; /* 14px */
		margin: 0;
		padding: 4px 0 0 0;
	}

	#nav-wrap nav h3:before {
		font-family: 'IcoMoon';
		font-style: normal;
		font-size: 157.142%; /* 22px */
		speak: none;
		color: #fff;
		content: "Z";
		margin: 0 3px 0 6px;
		position: relative;
		top: 4px;
	}

	/* Down arrow on menu title */
	#nav-wrap nav h3 {
		padding-right: 2.5em;
		*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
	}

	#nav-wrap nav h3:after {
		content: '';
		position: absolute;
		top: 1.4em;
		right: 1em;
		margin-top: -3px;
		height: 0;
		width: 0;
		border: 5px solid transparent;
		border-top-color: #fff;
	}

	#nav-wrap nav h3:hover {
		background-color: #000;
	}

	#nav-wrap.main-menu nav ul.sf-menu {
		display: none; /* visibility will be toggled with jquery */
		clear: both;
		position: absolute;
		z-index: 10000;
		width: 100%;
		border-radius: 0 0 4px 4px;
		padding: 2px 0 6px 0;
		background: #a28f87;
		background: rgba(123, 95, 84, .7);
	}

	#nav-wrap.main-menu nav ul.sf-menu ul {
		display: block;
		width: auto;
		position: static;
		background: #b8a49b;
		padding: 4px 4px 1px 0;
		box-shadow: none;
		margin-bottom: 6px;
		border-radius: 0 0 4px 4px;
	}

	#nav-wrap.main-menu nav ul.sf-menu ul ul {
		background: #cabbb4;
	}

	#nav-wrap.main-menu nav ul.sf-menu li {
		clear: both;
		float: none;
		padding: 0;
		margin: 0 0 4px 0;
		border: none;
	}

	#nav-wrap.main-menu nav ul.sf-menu > li {
		margin-left: 6px;
		margin-right: 6px;
	}

	#nav-wrap.main-menu nav ul.sf-menu ul li {
		margin-left: 16px;
	}

	#nav-wrap.main-menu nav ul.sf-menu li,
	#nav-wrap.main-menu nav ul.sf-menu li:first-child,
	#nav-wrap.main-menu nav ul.sf-menu li:last-child {
		border-radius: 4px;
	}

	#nav-wrap.main-menu nav ul.sf-menu a,
	#nav-wrap.main-menu nav ul.sf-menu ul a,
	#nav-wrap.main-menu nav ul.sf-menu span.separator,
	#nav-wrap.main-menu nav ul.sf-menu span.nav-header {
		display: box;
		padding: 4px 8px 3px 8px;
		border: none;
		font: inherit;
		background: none;
		height: auto;
		min-height: 0;
	}

	#nav-wrap.main-menu nav ul.sf-menu a:hover,
	#nav-wrap.main-menu nav ul.sf-menu ul a:hover {
		background: none;
	}

	/* Down arrows */
	#nav-wrap.main-menu nav ul.sf-menu.sf-arrows .sf-with-ul:after,
	#nav-wrap.main-menu nav ul.sf-menu.sf-arrows li.parent span.separator:after,
	#nav-wrap.main-menu nav ul.sf-menu.sf-arrows li.parent span.nav-header:after {
		margin-top: -3px;
		margin-right: 0;
		top: 1.2em;
		border: 5px solid transparent;
		border-top-color: #bdafaa; /* edit this to suit design (no rgba in IE8) */
		border-top-color: rgba(255,255,255,.5);
	}

}

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

	/* Ensure #nav is visible on desktop version */
	.sf-menu {
		display: block !important;
	}

}