/*
---------------------------------------------------------------
  Note that styles you apply to the main menu items are inherited by the sub menus items too.
  If you'd like to avoid this, you could use child selectors (not supported by IE6) - for example:
  .sm-bar > LI > A	{ ...} instead of .sm-bar a { ...}
---------------------------------------------------------------*/


#menu-button	{
	display:none;
	width:62px; height:62px;
	background:#bababa;
	/*box-shadow:0 1px 8px rgba(0,0,0,0.3);*/
	position:fixed;
	top:0; right:2.5%;
	text-align:center;
	z-index:9996;
	cursor:pointer;
}
#menu-button .fa-bars {
	font-size:44px; font-weight:normal; margin-top:9px; color:#003473;
}
#menu-button:before	{
  /* content:'Menu -'; */ content:'';
}
#menu-button.collapsed:before	{
  /* content:'Menu +'; */ content:'';
}
#top-nav-close	{display:none;}
@media screen and (max-width: 1670px)	{
	/* show the button on small screens */
	#menu-button	{display:inline-block;}
	#main-menu_1	{display:none;}
	#top-nav-close	{display:inline-block;}
}
@media screen and (max-width: 600px) {
	#menu-button			{width:40px; height:40px;}
	#menu-button .fa-bars	{font-size:28px; margin:7px 0px 0px 1px;}
}


/*************************************************************************/
/************************ First Level - Main Menu ************************/
UL.sm-bar	{
	width:auto; z-index:9990; /* z-index bug safary */
	/*border-radius:8px;
	box-shadow:0 1px 1px rgba(0,0,0,0.3);*/
}

/* Menu items - LI (put separators here)
===================*/
ul.sm li	{/*float:left;*/}
@media screen and (min-width: 1671px)	{
	UL.sm-bar			{display:table !important;}
	.sm-bar > LI		{display:table-cell !important; vertical-align:middle; float:none !important;}
}

.sm-bar > LI				{padding-left:7px !important; background:url('../sepTB_Mid.png') no-repeat left top; box-sizing:border-box;}
.sm-bar > LI				{/*border-left:1px solid #6686c1; box-sizing:border-box;*/}
.sm-bar > LI:first-child	{border-left:0; padding-left:0px; background-image:none;}
.sm-bar > LI:last-child	{ /* get same bg like main menu */
	/*border-radius:0 8px 8px 0;*/
}


/* Menu items - A
===================*/
.sm-bar > LI > A	{
	text-align:center;
	padding:25px 10px 25px 10px;
	color:#003473;
	font-size:2.3rem;
	line-height:2.5rem;
	font-weight:bold;
	text-decoration:none;
	background-color:transparent; 
	/*text-shadow:0 1px 0 rgba(0,0,0,0.3);*/
}
/* hover items */
.sm-bar > LI > A:hover, .sm-bar > LI > A:focus, .sm-bar > LI > A:active, .sm-bar > LI > A.highlighted	{
	background-color:transparent; 
	color:#e40514;
}
.sm-bar .hvr-underline-from-center:before	{height:6px; background-color:#e40514;}
.sm-bar .current.hvr-underline-from-center:before		{right:0; left:0;}
.sm-bar .highlighted.hvr-underline-from-center:before	{right:0; left:0;}

/* current items - add the class manually to some item or check the "markCurrentItem" script option */
.sm-bar > LI > A.current, .sm-bar > LI > A.current:hover, .sm-bar > LI > A.current:focus, .sm-bar > LI > A.current:active,
.sm-bar > LI > A.CURRENT, .sm-bar > LI > A.CURRENT:hover, .sm-bar > LI > A.CURRENT:focus, .sm-bar > LI > A.CURRENT:active	{
	background-color:transparent; 
	color:#e40514;
	/*text-shadow:0 1px 0 rgba(0,0,0,0.3);*/
}

/* round the right corners of the first item for horizontal main menu */
.sm-bar > LI:first-child > A	{
	/*border-radius:8px 0 0 8px;*/
}
/* round the left corners of the last item for horizontal main menu */
.sm-bar > LI:last-child > A	{
	/*border-radius:0 8px 8px 0;*/
}

	/* general class for item that has sub menu */
.sm-bar > LI > A.has-submenu	{}

/* menu indicators (arrows) if another level, appears only for item that has sub menu
===================*/
.sm-bar > LI > A SPAN.sub-arrow	{
	position:absolute;
	top:48%;
	right:10%;
	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:5px; /* tweak size of the arrow */
	border-style:solid dashed dashed dashed;
	border-color:#a4cde1 transparent transparent transparent;
}
@media screen and (min-width: 1671px)	{
  /* show the button on small screens */
.sm-bar > LI > A SPAN.sub-arrow	{display:none;}
}


 /************************ Second Level - Sub Menu ************************/ /*(most definitions here are for all next levels)*/
.sm-bar UL	{
	width:300px; /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
	padding:0;
	background:#fff;
	/*border-radius:0 0 4px 4px;*/
	box-shadow:0 5px 12px rgba(0,0,0,0.3);
}
.sm-rtl .sm-bar LI.NavigationTopicLTR > UL { /* english category in hebrew */
    margin-right:0px !important;
    right:0px !important;
}
.sm-ltr .sm-bar LI.NavigationTopicRTL > UL { /* hebrew category in english */
    margin-left:0px !important;
    left:0px !important;
}

/* Sub Menu items - LI (put separators here)
===================*/
.sm-bar UL > LI				{border-top:1px solid #dddddd;}
.sm-bar UL > LI:first-child	{border-top:0;}

/* Sub Menu  items - A
===================*/
.sm-bar UL A	{
	text-align:left;
	padding:8px 40px 8px 20px;
	color:#000;
	font-size:1.6rem;
	font-weight:normal;
	line-height:1.8rem;
	text-decoration:none;
	background-color:#fff;
	/*background:rgba(0,0,0,0.5) url('../arrowSub_TB_LTR.png') no-repeat left 15px;*/
}
.sm-rtl .sm-bar LI.NavigationTopicLTR > UL A		{text-align:left !important; direction:ltr !important;} /* english category in hebrew */
.sm-ltr .sm-bar LI.NavigationTopicRTL > UL A		{text-align:right !important; direction:rtl !important;} /* hebrew category in english */

/* hover items */
.sm-bar UL A:hover, .sm-bar UL A:focus, .sm-bar UL A:active, .sm-bar UL A.highlighted	{
	background-color:#612a25; 
	color:#fff;
	/*text-shadow:0 1px 0 rgba(0,0,0,0.3);*/
}
/* current items - add the class manually to some item or check the "markCurrentItem" script option */
.sm-bar UL A.current, .sm-bar UL A.current:hover, .sm-bar UL A.current:focus, .sm-bar UL A.current:active,
.sm-bar UL A.CURRENT, .sm-bar UL A.CURRENT:hover, .sm-bar UL A.CURRENT:focus, .sm-bar UL A.CURRENT:active	{
	/*background-color:#182e63; 
	color:#182e63;*/
	/*text-shadow:0 1px 0 rgba(0,0,0,0.3);*/
}

/* round the bottom corners of the last item for sub menu */
.sm-bar UL LI:last-child > A	{
	/*border-radius:0 0 4px 4px;*/
}

/* general class for item that has sub menu */
.sm-bar UL A.has-submenu	{}


/* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package
	===================*/
.sm-bar SPAN.scroll-up, .sm-bar SPAN.scroll-down	{
	position:absolute;
	display:none;
	visibility:hidden;
	overflow:hidden;
	background:#ffffff;
	height:20px;
	/* width and position will be automatically set by the script */
}
.sm-bar SPAN.scroll-up-arrow, .sm-bar SPAN.scroll-down-arrow	{
	position:absolute;
	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 */
}
.sm-bar SPAN.scroll-up-arrow	{
	top:-2px;
	border-style:dashed dashed solid dashed;
	border-color:transparent transparent #23417f transparent;
}
.sm-bar SPAN.scroll-down-arrow	{
	top:6px;
	border-style:solid dashed dashed dashed;
	border-color:#23417f transparent transparent transparent;
}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  only if subIndicators set to "true" in js plagin  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/* menu indicators (arrows) if another level, appears only for item that has sub menu
===================*/
.sm-bar UL A SPAN.sub-arrow	{
	position:absolute;
	top:13px;
	right:10px;
	margin-right:10px;
	/* 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:5px; /* tweak size of the arrow */
	border-style:solid dashed dashed dashed;
	border-color:#a4cde1 transparent transparent transparent;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/


/*===========================  Mega Menu  ============================*/
/*====================================================================*/
ul.mega-menu	{
	width:100% !important; max-width:none !important; 
	min-height:300px;
	background-color:rgba(154,154,154,0.85);
	padding:40px 0px 40px 0px !important; margin:0px !important;
	right:0px !important; left:0px !important;
	box-sizing:border-box !important;
	z-index:99;
}

/* second-level */
ul.mega-menu li.mega-item	{
	width:auto; margin:0px 600px 0px auto;
	display:table; position:static !important;
	border-top:0 !important; border-bottom:0;
	box-sizing:border-box;
    -webkit-transition: all .10s ease-in-out;
    -moz-transition: all .10s ease-in-out;
    -o-transition: all .10s ease-in-out;
    -ms-transition: all .10s ease-in-out;
    transition: all .10s ease-in-out;
}

ul.mega-menu .mega-item > A	{
	color: #fff;
	font-size:2rem; line-height:115%;
	font-weight:normal;
	padding:10px 50px 8px 0px;
	background-color:transparent;
	display:block;
}
ul.mega-menu .mega-item A:hover	{
	background:transparent;
	color: #ea2d31;
}

/**** third level ****/
ul.mega-menu ul	{
	width:540px !important; height:calc(100% - 80px);
	display:none;
	position:absolute !important;
	top:40px !important; bottom:auto !important;
	right:70px !important; left:auto !important;
	padding-left:0px;
	background:transparent !important;
	border-left:#003473 2px solid;
	box-shadow:none; margin:0 !important;
	box-sizing:border-box !important;
}
@media screen and (min-width: 1671px) {
	ul.mega-menu li.active-category ul	{display:block !important;}
}
ul.mega-menu ul li	{
	width:50%; float:left !important;
	padding:0px 0px 0px 50px; margin:0;
	border-top:0 !important;
	border-bottom:0;
	box-sizing:border-box;
}
ul.mega-menu ul li A	{
	color: #fff;
	font-size:2.2rem; line-height:115%;
	font-weight:normal;
	padding:10px 0px 8px 0px;
	background-color:transparent;
	display:block;
}
ul.mega-menu ul li A:hover, ul.mega-menu ul li A.current:hover	{
	background:transparent !important;
	color:#ea2d31;
}

ul.mega-menu .mega-item A.has-submenu		{position:relative; padding-right:45px !important;}
ul.mega-menu .mega-item A.has-submenu .fa	{
	display:none !important;
	/*position:absolute;
	top:12px;
	right:0%;
	color: #ec1c25;
	font-size: 1.7rem;
	font-weight: normal;*/
}

/*===  end Mega Menu  ===*/


/*---------------------------------------------------- Responsiveness ------------------------------------------########  <<<<<<<<<<<<<<<<
  Responsiveness
  These will make the sub menus collapsible when the screen width is too small.
------------------------------------------------------------------------------------------------------------------------------*/


/* decrease horizontal main menu items right/left padding to avoid wrapping */
/*@media screen and (max-width: 850px)	{
	.sm-bar > LI > A	{
		padding-left:18px;
		padding-right:18px;
	}
}
@media screen and (max-width: 750px)	{
	.sm-bar > LI > A	{
		padding-left:10px;
		padding-right:10px;
	}
}*/

@media screen and (max-width: 1670px)	{

	/* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
	UL.sm-bar		{/*width:auto !important;*/}
	UL.sm-bar UL	{display:none; position:static !important; top:auto !important; right:auto !important; margin-right:0 !important; margin-left:0 !important; margin-top:0 !important; width:auto !important; min-width:0 !important; max-width:none !important;}
	UL.sm-bar > LI	{width:100% !important; float:none !important; margin:0 !important;}
	UL.sm-bar LI A , UL.sm-bar ul.sm-nowrap LI A	{white-space:normal !important; text-align:left !important;}
	UL.sm-bar IFRAME	{display:none;}

	/* Uncomment this rule to disable completely the sub menus for small screen devices */
	/*.sm-bar UL, .sm-bar span.sub-arrow, .sm-bar iframe	{
			display:none !important;
	}*/


	/************************ First Level - Main Menu ************************/
	UL.sm-bar	{
		width:95%; max-width:700px;
		margin:20px auto 20px 2.5%;
		background:transparent;
		/*box-shadow:0 1px 4px rgba(0,0,0,0.3);*/
		position:relative; z-index:99991;
	}

	/*  Menu items - LI
	===================*/
	.sm-bar > LI	{
		background-image:none; /* long bar seperator */
		border-left:0;
		padding:0 !important;
		border-bottom:#807f7f 1px solid; 
	}

	/* round the corners of the last items */
	.sm-bar > LI:last-child	{
		/*border-radius:0 0 8px 8px;*/
		border-bottom-style:none; 
	}

	/* Menu items - A
	===================*/
	.sm-bar > LI > A	{
		padding:10px 55px 10px 20px !important; /* add some additional left padding to make room for the sub indicator */
		background-color:#fff;
		box-shadow:inset 0px 0px 120px #eeeeeb;
		color:#000 !important;
	}
	/* hover items */
	.sm-bar > LI > A:hover, .sm-bar > LI > A:focus, .sm-bar > LI > A:active, .sm-bar > LI > A.highlighted	{
		background-color:#626262; 
		color:#fff !important;
	}
	/* current items */
	.sm-bar > LI > A.current, .sm-bar > LI > A.current:hover, .sm-bar > LI > A.current:focus, .sm-bar > LI > A.current:active,
	.sm-bar > LI > A.CURRENT, .sm-bar > LI > A.CURRENT:hover, .sm-bar > LI > A.CURRENT:focus, .sm-bar > LI > A.CURRENT:active	{
		background-color:#626262; 
		color:#fff !important;
	}

	/* round the corners of the first item */
	.sm-bar > LI:first-child > A	{
		/*border-radius:8px 8px 0 0;*/
	}
	/* round the corners of the last items */
	.sm-bar > LI:last-child > A	{
		/*border-radius:0 0 8px 8px;*/
	}

	/* Sub menu indicators
	===================*/

	.sm-bar > LI > A SPAN.sub-arrow	{
		top:0px;
		padding:0px 13px;
		left:auto;
		right:0px;
		margin-left:0;
		width:17px;
		height:47px;
		font:normal 24px/44px sans-serif !important;
		text-align:center;
		border:0;
		cursor:pointer;
		text-shadow:none;
		background:rgba(0,0,0,0.1);
		/*border-radius:0px;*/
	}
	/* Hide (for all levels) sub indicator "+" when item is expanded - we enable the item link when it's expanded */
	.sm-bar A.highlighted SPAN.sub-arrow	{
		/* display:none !important; */
	}
	

	/************************ Second Level - Sub Menu ************************/
	.sm-bar UL	{
		border:0;
		padding:0;
		background:#eeeeeb;
		border-radius:0;
		box-shadow:none;
	}

	/*  Sub Menu items - LI
	===================*/
	.sm-bar UL > LI		{width:100% !important; border-top:#bbb 1px solid !important;}

	/* Sub Menu  items - A
	===================*/
	.sm-bar UL A	{
		padding:10px 55px 8px 20px !important; /* add some additional left padding to make room for the sub indicator */
		background:transparent !important;
		font-size:2rem; line-height:115%;
		color:#444 !important;
		/* add some text indentation for the sub menu item */
		border-left:8px solid transparent;
		outline:none !important;
	}

	/* hover items */
	.sm-bar UL A:hover, .sm-bar UL A:focus, .sm-bar UL A:active, .sm-bar UL A.highlighted	{
		background-color:#ccc !important; 
		color:#000 !important;
	}

	/* current items */
	.sm-bar UL A.current, .sm-bar UL A.current:hover, .sm-bar UL A.current:focus, .sm-bar UL A.current:active,
	.sm-bar UL A.CURRENT, .sm-bar UL A.CURRENT:hover, .sm-bar UL A.CURRENT:focus, .sm-bar UL A.CURRENT:active {
		background-color:#ccc !important; 
		color:#000 !important;
	}

	/* round the corners of the last item */
	.sm-bar > LI:last-child > UL > LI:last-child > A	{
		/*border-radius:0 0 8px 8px;*/
	}

	/* Sub menu indicators
	===================*/

	.sm-bar UL A SPAN.sub-arrow	{
		top:0px;
		padding:0px 13px;
		left:auto;
		right:0px;
		margin-left:0;
		margin-right:0;
		width:17px;
		height:42px;
		font:normal 24px/40px sans-serif !important;
		text-align:center;
		border:0;
		text-shadow:none;
		background:rgba(0,0,0,0.1);
		border-radius:0px;
	}

	
	/************************ Third Level and more.. - Sub Sub.. Menu ************************/
	.sm-bar UL UL	{
		/* darken the background of the 2+ level sub menus and remove border rounding */
		background:rgba(100,100,100,0.1);
		border-radius:0;
	}

	/*  Sub Sub.. Menu items - LI
	===================*/
	.sm-bar UL UL LI	{border-top:#bbb 1px solid !important;}

	/* Sub Sub.. Menu  items - A
	===================*/
	/* add some text indentation for the 2+ level sub menu items */
	.sm-bar UL UL A	{
		border-left:16px solid transparent;
	}
	.sm-bar UL ul UL A	{
		border-left:24px solid transparent;
	}
	.sm-bar UL ul ul UL A	{
		border-left:32px solid transparent;
	}
	.sm-bar UL ul ul ul UL A	{
		border-left:40px solid transparent;
	}



	/* round the corners of the last items */
	/* presume we have 4 levels max */
	.sm-bar > LI:last-child > UL > LI:last-child > UL > LI:last-child > A,
	.sm-bar > LI:last-child > UL > LI:last-child > UL > LI:last-child > UL > LI:last-child > A,
	.sm-bar > LI:last-child > UL > LI:last-child > UL > LI:last-child > UL > LI:last-child > UL > LI:last-child > A,
	.sm-bar > LI:last-child > UL,
	.sm-bar > LI:last-child > UL > LI:last-child > UL,
	.sm-bar > LI:last-child > UL > LI:last-child > UL > LI:last-child > UL,
	.sm-bar > LI:last-child > UL > LI:last-child > UL > LI:last-child > UL > LI:last-child > UL,
	.sm-bar > LI:last-child > UL > LI:last-child > UL > LI:last-child > UL > LI:last-child > UL > LI:last-child > UL	{
		/*border-radius:0 0 8px 8px;*/
	}
	/* highlighted items, don't need rounding since their sub is open */
	.sm-bar > LI:last-child > A.highlighted,
	.sm-bar > LI:last-child > UL > LI:last-child > A.highlighted,
	.sm-bar > LI:last-child > UL > LI:last-child > UL > LI:last-child > A.highlighted,
	.sm-bar > LI:last-child > UL > LI:last-child > UL > LI:last-child > UL > LI:last-child > A.highlighted,
	.sm-bar > LI:last-child > UL > LI:last-child > UL > LI:last-child > UL > LI:last-child > UL > LI:last-child > A.highlighted	{
		border-radius:0;
	}

	
	/*======= Responsiveness - Mega Menu XXX (under 1671 is normal menu not mega)  ==========*/
	li.mega-subs		{width:100% !important; height:auto !important; display:block !important;}
	ul.sm-bar A .fa		{display:none;}
}




/***************************************************************
   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;*/direction:inherit;}
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:100px;}
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:right;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);}

