/* ---- 
Menu blow out fix.
Menu style sheet.
Colors, fonts, etc are specific to style id 2286 
and should be changes to match other designs.
---- */


/* ---- basic properties ---- */

.sm {
	position: relative;
	z-index: 15;
}

.sm,
.sm ul,
.sm li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: normal;
	direction: ltr;
	text-align: left;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.sm-rtl,
.sm-rtl ul,
.sm-rtl li {
	direction: rtl;
	text-align: right;
}

.sm>li>h1,
.sm>li>h2,
.sm>li>h3,
.sm>li>h4,
.sm>li>h5,
.sm>li>h6 {
	margin: 0;
	padding: 0;
}

.sm ul {
	display: none;
}

.sm li,
.sm a {
	position: relative;
}

.sm a {
	display: block;
}

.sm a.disabled {
	cursor: not-allowed;
}

.sm:after {
	content: "\00a0";
	display: block;
	height: 0;
	font: 0px/0 serif;
	clear: both;
	visibility: hidden;
	overflow: hidden;
}

.sm,
.sm *,
.sm *:before,
.sm *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.sm .currentli a {
	color: #fff;
}


/* ---- mobile (break point set to 1199px, if changed change the desktop break point above) ---- */

@media screen and (max-width: 1199px) {
	.click-to-close {
		position: fixed;
		z-index: 12;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background: rgba(0, 0, 0, 0.8);
	}
	.whole {
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		position: relative;
		z-index: 1;
	}
	.whole.mobile-menu,
	.mobile-menu nav,
	.mobile-menu .scroll-back-to-top {
		margin-left: 250px;
	}
	nav ul li a {
		display: inline-block;
		color: inherit;
		font-size: 16px;
		font-weight: 600;
	}
	.sm-clean {
		display: none;
		height: auto;
		max-height: 85%;
		position: fixed;
		max-width: 300px;
		left: 50%;
		top: 10%;
		z-index: 10;
		background: #f00;
		overflow: auto;
		transition: transform 0.25s ease;
		padding: 30px 0;
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		-moz-transform: translate(-50%, 0);
		-ms-transform: translate(-50%, 0);
		-o-transform: translate(-50%, 0);
	}
	.mobile-menu .sm-clean {
		left: 0!important;
	}
	.sm-clean a {
		color: #ddd;
		padding: 12px 45px 12px 20px;
		font-size: 14px;
	}
	.sm-clean a span.sub-arrow {
		position: absolute;
		top: 50%;
		margin-top: -17px;
		left: auto;
		right: 10px;
		width: 32px;
		height: 32px;
		overflow: hidden;
		font-size: 16px;
		line-height: 26px;
		text-align: center;
		text-shadow: none;
		border: 2px solid rgba(255, 255, 255, 0.15);
		border-radius: 100%;
		color: rgba(255, 255, 255, 0.9);
	}
	.sm-clean a.highlighted span.sub-arrow:before {
		display: block;
		content: '-';
	}
	.sm-clean ul {
		background: rgba(255, 255, 255, 0.1);
	}
	header #main-menu {
		width: 90vw;
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		display: block !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	.active-menu header #main-menu {
		visibility: visible !important;
		opacity: 1 !important;
	}
	header #main-menu.mobile-menu {
		transform: translate(-50%, 0) scale(1);
		-webkit-transform: translate(-50%, 0) scale(1);
		-moz-transform: translate(-50%, 0) scale(1);
		-ms-transform: translate(-50%, 0) scale(1);
		-o-transform: translate(-50%, 0) scale(1);
	}
	header #main-menu li {
		display: block;
		padding: 0;
		margin: 0;
		float: none;
	}
	header #main-menu a {
		margin: 0!important;
		padding: 15px 20px!important;
	}
	header #main-menu a:hover {
		background: transparent!important;
	}
	header #main-menu li li:first-child::before {
		content: '\f0d8';
		position: absolute;
		color: #945193;
		font-family: 'FontAwesome';
		padding: 0;
		margin: -8px 0 0 0;
		font-size: 28px;
		line-height: 10px;
		display: block;
		text-align: center;
		height: 10px;
		width: 100%;
	}
	header #main-menu li li li:first-child::before {
		color: #7d447c;
	}
	header #main-menu li li li li:first-child::before {
		color: #0b5547;
	}
	header #main-menu li li li li li:first-child::before {
		color: #094539;
	}
	header #main-menu li li li li li li:first-child::before {
		color: #062e26;
	}
	header #main-menu ul {
		background: #945193;
		box-shadow: none;
		font-size: 20px;
	}
	header #main-menu ul ul {
		background: #7d447c;
	}
	header #main-menu ul ul ul {
		background: #0b5547;
	}
	header #main-menu ul ul ul ul {
		background: #094539;
	}
	header #main-menu ul ul ul ul ul {
		background: #062e26;
	}
	header #main-menu ul a {}
	header #main-menu li li a {
		font-size: 18px;
		font-weight: 300;
		padding: 10px 25px;
		margin: 0;
	}
	header #main-menu .sub-arrow {
		border: inherit;
		margin-top: -14px;
		font-size: 24px;
		font-weight: 900;
		opacity: 0.8;
	}
	header #main-menu .sub-arrow::after {
		display: none;
	}
	header #main-menu li .sub-arrow {
		margin-right: 5px;
	}
	.click-to-close::before {
		content: '\f00d';
		font-family: 'FontAwesome';
		font-size: 20px;
		color: #fff;
		padding: 20px 0;
		display: block;
		text-transform: uppercase;
		font-weight: 900;
		letter-spacing: 1px;
		opacity: 0.9;
		width: 100%;
		text-align: center;
	}
	.mobile-menu {
		display: none!important;
	}
}

/* ---- desktop (break point set to 1199px, if changed change the mobile break point below) ---- */

.click-to-close {
	display: none;
}

@media screen and (min-width: 1200px) {
	.main-menu-container {
		position: relative;
		z-index: 9;
	}
	.sm-clean ul {
		position: absolute;
		width: 12em;
	}
	.sm-clean li {
		float: left;
	}
	.sm-clean.sm-rtl li {
		float: right;
	}
	.sm-clean ul li,
	.sm-clean.sm-rtl ul li,
	.sm-clean.sm-vertical li {
		float: none;
	}
	.sm-clean a {
		white-space: nowrap;
		font-size: 16px;
		font-weight: 600;
	}
	.sm-clean ul a {
		font-size: 14px;
		font-weight: 400;
	}
	.sm-clean ul a,
	.sm-clean.sm-vertical a {
		white-space: normal;
	}
	.sm-clean .sm-nowrap > li > a,
	.sm-clean .sm-nowrap > li >:not(ul) a {
		white-space: nowrap;
	}
	.sm-clean {
		position: relative;
		left: initial;
		top: initial;
		width: 100%;
		background: none;
		overflow: initial;
	}
	.sm-clean a,
	.sm-clean a:hover,
	.sm-clean a:focus,
	.sm-clean a:active,
	.sm-clean a.highlighted {
		padding: 12px 12px;
		color: #bbb;
	}
	.sm-clean a:hover,
	.sm-clean a:focus,
	.sm-clean a:active,
	.sm-clean a.highlighted {
		color: #fff;
	}
	.sm-clean a.current {
		color: #fff;
	}
	.sm-clean a.disabled {
		color: #bbbbbb;
	}
	.sm-clean a.has-submenu {
		padding-right: 24px;
	}
	.sm-clean a span.sub-arrow {
		top: 50%;
		margin-top: -2px;
		position: absolute;
		right: 8px;
		width: 0;
		height: 0;
		border-width: 4px;
		border-style: solid dashed dashed dashed;
		border-color: #bbb transparent transparent transparent;
		background: transparent;
		font-size: 0;
	}
	.sm-clean a.highlighted span.sub-arrow:before {
		display: none;
	}
	.sm-clean li {
		border-top: 0;
	}
	.sm-clean > li > ul:before,
	.sm-clean > li > ul:after {
		content: '';
		position: absolute;
		top: -18px;
		left: 30px;
		width: 0;
		height: 0;
		overflow: hidden;
		border-width: 9px;
		border-style: dashed dashed solid dashed;
		border-color: transparent;
	}
	.sm-clean > li > ul:after {
		top: -16px;
		left: 31px;
		border-width: 8px;
		border-color: transparent transparent #1a1a1a transparent;
	}
	.sm-clean ul {
		padding: 0;
		background: rgba(0, 0, 0, 0.9);
	}
	.sm-clean ul a {
		border: 0 !important;
		padding: 10px 20px;
		color: #bbb;
	}
	.sm-clean ul a:hover,
	.sm-clean ul a:focus,
	.sm-clean ul a:active,
	.sm-clean ul a.highlighted {
		border: 0 !important;
		padding: 10px 20px;
		color: #fff;
	}
	.sm-clean ul a.disabled {
		color: #cccccc;
	}
	.sm-clean ul a.has-submenu {
		padding-right: 40px;
	}
	.sm-clean ul a span.sub-arrow {
		right: 8px;
		top: 50%;
		border-width: 5px;
		border-style: dashed dashed dashed solid;
		border-color: transparent transparent transparent #bbb;
	}
	.sm-clean span.scroll-up,
	.sm-clean span.scroll-down {
		position: absolute;
		display: none;
		visibility: hidden;
		overflow: hidden;
		background: #000;
		height: 20px!important;
	}
	.sm-clean span.scroll-up:hover,
	.sm-clean span.scroll-down:hover {
		background: #111;
	}
	.sm-clean span.scroll-up:hover span.scroll-up-arrow,
	.sm-clean span.scroll-up:hover span.scroll-down-arrow {
		border-color: transparent transparent #ddd transparent;
	}
	.sm-clean span.scroll-down:hover span.scroll-down-arrow {
		border-color: #ddd transparent transparent transparent;
	}
	.sm-clean span.scroll-up-arrow,
	.sm-clean span.scroll-down-arrow {
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -6px;
		width: 0;
		height: 0;
		overflow: hidden;
		border-width: 6px;
		border-style: dashed dashed solid dashed;
		border-color: transparent transparent #bbb transparent;
	}
	.sm-clean span.scroll-down-arrow {
		top: 8px;
		border-style: solid dashed dashed dashed;
		border-color: #eee transparent transparent transparent;
	}
	.sm-clean.sm-rtl a.has-submenu {
		padding-right: 12px;
		padding-left: 24px;
	}
	.sm-clean.sm-rtl a span.sub-arrow {
		right: auto;
		left: 12px;
	}
	.sm-clean.sm-rtl.sm-vertical a.has-submenu {
		padding: 10px 20px;
	}
	.sm-clean.sm-rtl.sm-vertical a span.sub-arrow {
		right: auto;
		left: 8px;
		border-style: dashed solid dashed dashed;
		border-color: transparent #bbb transparent transparent;
	}
	.sm-clean.sm-rtl > li > ul:before {
		left: auto;
		right: 30px;
	}
	.sm-clean.sm-rtl > li > ul:after {
		left: auto;
		right: 31px;
	}
	.sm-clean.sm-rtl ul a.has-submenu {
		padding: 10px 20px !important;
	}
	.sm-clean.sm-rtl ul a span.sub-arrow {
		right: auto;
		left: 8px;
		border-style: dashed solid dashed dashed;
		border-color: transparent #bbb transparent transparent;
	}
}