/* SmartMenus Core CSS (it's not recommended editing this)
===============================================================*/
.sm,.sm ul,.sm li{display:block;list-style:none;padding:0;margin:0;line-height:normal;direction:ltr;}
ul.sm li{position:relative;}
ul.sm a{position:relative;display:block;}
ul.sm a.disabled{cursor:default;}
ul.sm ul{position:absolute;top:-999999px;left:-800px;width:280px;}
ul.sm li{float:left;}
ul.sm-rtl{direction:rtl;}
ul.sm-rtl li{float:right;}
ul.sm ul li,ul.sm-vertical li{float:none;}
ul.sm a{white-space:nowrap;}
ul.sm ul a,ul.sm-vertical a{white-space:normal;}
* html ul.sm-vertical li{float:left;width:100%;}
* html ul.sm-vertical ul li{float:none;width:auto;}
*:first-child+html ul.sm-vertical>li{float:left;width:100%;}
ul.sm ul.sm-nowrap>li>a{white-space:nowrap;}
ul.sm:after{content:"\00a0";display:block;height:0;font:0/0 serif;clear:both;visibility:hidden;overflow:hidden;}
* html ul.sm{height:1px;}
*:first-child+html ul.sm{min-height:1px;}
ul.sm li *,ul.sm li *:before,ul.sm li *:after{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
ul.sm{-webkit-tap-highlight-color:rgba(0,0,0,0);}




/* Sub menu indicators
===================*/

	.sm-main a span.sub-arrow {
		position:absolute;
		bottom: 7px;
		right: 5px;
		/* margin-left:-5px; */
		/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
		width:0;
		height:0;
		overflow:hidden;
		border-width:4px; /* tweak size of the arrow */
		border-style:solid dashed dashed dashed;
		border-color: rgb(0, 0, 0) transparent transparent transparent;
	}
	.sm-main-vertical a span.sub-arrow,
 	.sm-main ul a span.sub-arrow {
		bottom:auto;
		top:50%;
		margin-top:-5px;
		right:15px;
		left:auto;
		margin-left:0;
		border-style:dashed dashed dashed solid;
		border-color:transparent transparent transparent #000;
	}




/* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package
===================*/

	.sm-main span.scroll-up, .sm-main span.scroll-down {
		position:absolute;
		display:none;
		visibility:hidden;
		overflow:hidden;
		background:#222;
		height:20px;
		/* width and position will be automatically set by the script */
	}
	.sm-main span.scroll-up-arrow, .sm-main span.scroll-down-arrow {
		position:absolute;
		top:-2px;
		left:50%;
		margin-left:-8px;
		/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
		width:0;
		height:0;
		overflow:hidden;
		border-width:8px; /* tweak size of the arrow */
		border-style:dashed dashed solid dashed;
		border-color:transparent transparent #88825b transparent;
	}
	.sm-main span.scroll-down-arrow {
		top:6px;
		border-style:solid dashed dashed dashed;
		border-color:#88825b transparent transparent transparent;
	}




.sm-main {z-index: 250; position: relative;}
.sm-main a {
	padding: 6px 20px;
	color: #666;
	display: block;
	text-decoration: none;
	font-size: 13px;
	word-wrap: break-word;
	/* background: #ff0; */
	font-weight: normal;
}

.sm-main > li > a{
		text-transform: uppercase;
}


.sm-main a.has-submenu {
	padding-right: 1.5em !important;
}

.sm-main a.highlighted {
	background: #ffe800;
}
.sm-main a:hover {
	background-color: #ffe800;	
}
.sm-main ul a:hover {
	background: none;	
}
.sm-main ul {
	color: #fff;
/*	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);*/
	background-color: #FFF480;

	/*padding: 5px 0;*/
}

.sm-main .current a, .sm-main a.current {
	color: #9fc776;
}
.sm-main .current a:hover, .sm-main a.current:hover {
	color: #fff;
}

.sm-main .bigmenu {
	width: 800px;
}



.bolden > a {
	color: #444;
	font-weight: bold;
}

@media only screen and (min-width: 640px) {
.sm-main  .menucolumn {
	float: left;
	/*border: 1px solid red;*/
	display: inline-block;
	width: 25%
}

.sm-main  .menucolumn ul {
	width: 100%;
	position:relative;
	top: 0;
	left: 0;
}


}




/*
---------------------------------------------------------------
  Responsiveness
  These will make the sub menus collapsible when the screen width is too small.
---------------------------------------------------------------*/


/* decrease horizontal main menu items left/right padding to avoid wrapping */
@media screen and (max-width: 850px) {
	.sm-main:not(.sm-main-vertical) > li > a {
		padding-left:18px;
		padding-right:18px;
	}
	.sm-main a span.sub-arrow {
		bottom: 9px;
		right: 7px;
		border-width:3px;
	}
	.sm-main a.has-submenu {
		padding-right: 22px !important;
	}
}
@media screen and (max-width: 750px) {
	.sm-main:not(.sm-main-vertical) > li > a {
		padding-left:10px;
		padding-right:10px;
		
	}
	.sm-main a.has-submenu {
		padding-right: 20px !important;
	}
	
}

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

	/* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
	ul.sm-main{width:auto !important;}
	ul.sm-main ul{display:none;position:static !important;top:auto !important;left:auto !important;margin-left:0 !important;margin-top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;}
	ul.sm-main>li{float:none;border-bottom: 1px solid #ffe800;}
	ul.sm-main>li>a,ul.sm-main ul.sm-nowrap>li>a{white-space:normal;}
	ul.sm-main iframe{display:none;}

	/* Uncomment this rule to disable completely the sub menus for small screen devices */
	/*.sm-main ul, .sm-main span.sub-arrow, .sm-main iframe {
		display:none !important;
	}*/
	
	ul.bigmenu ul {
		display: block !important;
	}


/* Menu box
===================*/

	.sm-main {
		background:transparent;
	}
	.sm-main ul {
		border:0;
		padding:0;
	}
	.sm-main ul ul {
		/* darken the background of the 2+ level sub menus and remove border rounding */
		background: rgba(255, 255, 255, 0.2);
		box-shadow: none;
	}


/* Menu items
===================*/

	.sm-main a {
		padding:10px 5px 10px 28px !important; /* add some additional left padding to make room for the sub indicator */
	}
	.sm-main ul a {
	}
	/*.sm-main a.current {
		background:#000 !important; 
	}*/
	/* add some text indentation for the 2+ level sub menu items */
	.sm-main ul a {
		/* border-left:8px solid transparent; */
	}
	.sm-main ul ul a {
		border-left:16px solid transparent;
	}
	.sm-main ul ul ul a {
		border-left:24px solid transparent;
	}
	.sm-main ul ul ul ul a {
		border-left:32px solid transparent;
	}
	.sm-main ul ul ul ul ul a {
		border-left:40px solid transparent;
	}
	


/* Sub menu indicators
===================*/

	.sm-main a span.sub-arrow,
	.sm-main ul a span.sub-arrow {
		top:50%;
		margin-top:-9px;
		right:auto;
		left:6px;
		margin-left:0;
		width:16px;
		height: 16px;
		font: bold 16px/16px monospace !important;
		text-align:center;
		border:0;
		text-shadow:none;
		background: #444;
		color: #ffe800;
		-moz-border-radius:100px;
		-webkit-border-radius:100px;
		border-radius:100px;
	}
	/* Hide sub indicator "+" when item is expanded - we enable the item link when it's expanded */
	.sm-main a.highlighted span.sub-arrow {
		display:none !important;
	}


/* Items separators
===================*/

	.sm-main li {
		border-left:0;
	}
	.sm-main ul li {
		border-top:1px solid rgba(0,0,0,0.05);
	}
	.sm-main ul li:first-child {
		border-top:0;
	}

}



#menu-button {
    display:none;
	width: 3.125em; /* 50 */
	height: 3.125em; /* 50 */
	text-align: left;
	text-indent: -9999px;
	background-color: #ffe800;
	position: relative;
	color: #000;
}
#menu-button:hover {
	cursor: pointer;
}
#menu-button:before,  #menu-button:after {
	position: absolute;
	border: 2px solid #fff;
	top: 35%;
	left: 25%;
	right: 25%;
	content: '';
}
#menu-button:after {
	top: 60%;
}



/*#menu-button:before {
  content:'Menu -';
}
#menu-button.collapsed:before {
  content:'Menu +';
}*/
@media screen and (max-width: 639px) {
  /* show the button on small screens */
  #menu-button {
    display:inline-block;
  }
  /* hide the menu when it has the "collapsed" class set by the script */
  .sm-main.collapsed {
    display:none;
  }
}