/* GENERAL STYLES FOR _ALL_ SCREEN SIZES (including phones) */

#header .menu {
	margin: 0;
	padding: 0;
	position: relative;
}

	#header .menu * {
		font-weight: 600;
	}
	
	#header .menu a:focus {
		text-decoration: underline !important;
	}
	
	/* Fix an issue with GTranslate */
	#header .menu a * {
		color: inherit !important;
		font-weight: inherit !important;
	}
	
	.animated_transitions #header .menu a, .animated_transitions #header .menu a:hover
	{ transition: background 0.25s ease 0s, color 0.3s ease 0s; }

	#header .menu > li {
		display: inline-block;
		margin: 0;
		padding: 0;
		position: relative;
		z-index: 1;
	}
	
	#header .menu > li:hover, #header .menu > li:focus, #header .menu > li:focus-within {
		z-index: 2;
	}

		#header .menu > li > a {
			background-color: transparent;
			color: #ffffff;
			display: block;
			line-height: 1.5em;
			padding: 0.5em 15px;
			white-space: nowrap;
		}

		#header .menu > li.current-menu-item > a,
		#header .menu > li.current-menu-ancestor > a
		{ color: #ecf0f1; }

		#header .menu > li:hover > a, #header .menu > li:focus > a, #header .menu > li:focus-within > a {
			background-color: transparent; /* This NEEDS to be transparent by default */
			color: #ffffff;
		}

		#header .menu ul {
			display: none;
		}

		#header .menu > li:hover > ul, #header .menu > li:focus > ul, #header .menu > li:focus-within > ul {
			background-color: #3498db;
			box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.05);
			display: block;
			font-size: 90%;
			line-height: 1.5em;
			margin-top: 0;
			min-width: 100%;
			padding: 0;
			position: absolute; top: calc(100% - 1px); right: auto; bottom: auto; left: 0;
			text-align: left;
			width: auto;
		}

			#header .menu > li li {
				margin: 0;
				padding: 0;
				position: relative;
			}

			#header .menu ul a {
				background: transparent;
				border: none;
				color: #ecf0f1;
				font-weight: 300;
				display: block;
				margin: 0;
				padding: 0.5em 15px;
			}
			#header .menu ul li:last-of-type > a { border-bottom: none; }

			#header .menu ul a:hover, #header .menu ul a:focus {
				color: #ffffff;
			}

			#header .menu ul li > ul {
				display: none;
			}

			#header .menu ul li:hover > ul, #header .menu ul li:focus > ul, #header .menu ul li:focus-within > ul {
				background: #3498db;
				box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.05);
				display: block;
				margin-top: 0;
				padding: 0; /* 0.667em 0 0.333em 0; Why? Removed 2020.05.19 */
				position: absolute; top: 0 /* -0.667em*/; left: 100%;
			}

			#header .menu > li:last-child > ul li:hover > ul,
			#header .menu > li:nth-last-child(2) > ul li:hover > ul,
			#header:not(.menu_align_below) .menu ul li:hover > ul,
			#header .menu > li:last-child > ul li:focus > ul,
			#header .menu > li:nth-last-child(2) > ul li:focus > ul,
			#header:not(.menu_align_below) .menu ul li:focus > ul,
			#header .menu > li:last-child > ul li:focus-within > ul,
			#header .menu > li:nth-last-child(2) > ul li:focus-within > ul,
			#header:not(.menu_align_below) .menu ul li:focus-within > ul
			{ right: 100%; left: auto; }
			
			#header .menu li.menu-item-has-children > a.empty-node { cursor: context-menu; }

		#header .menu .submenu-toggle {
			display: inline-block;
			height: 32px;
			overflow: hidden;
			text-indent: -9999px;
			vertical-align: middle;
			width: 44px;
		}
		
		#header .search { position: relative; }

			#header .search input[type=text] {
				background: transparent;
				border: 1px solid #ffffff;
				border-radius: 4px;
				color: #ffffff;
				font-size: 12px;
				font-weight: 600;
				height: 28px;
				line-height: 20px;
				padding: 4px 32px 4px 6px;
				position: relative;
				-webkit-appearance: none;
				width: 100%;
				z-index: 1;
			}
			#header .search input[type=text]:focus {
				/*outline: none;*/
			}
			
			#header .search input[type=text]::-ms-clear { display: none; }

			#header .search .svg_wrapper, #footer .search .svg_wrapper {
				cursor: pointer;
				display: inline-block;
				height: 28px;
				margin: 0 0 0 0.5em;
				overflow: hidden;
				position: absolute; top: 0; right: 0;
				text-indent: 999px;
				vertical-align: middle;
				width: 28px;
				z-index: 2;
			}
			
			#header nav:not(.search_open) .search .svg_wrapper, #footer .search .svg_wrapper { border-radius: 2em; }
			#header nav.search_open .search .svg_wrapper, #footer .search .svg_wrapper {
				border-radius: 4px;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}

				#header .search input[type=submit] {
					display: none;
				}

#section_navigation {
	margin: 0 0 1.5em 0;
}

#section_navigation .menu { }

	#section_navigation .menu a.empty-node, #section_navigation .menu a.empty-node:hover, #section_navigation .menu a.empty-node:focus {
		color: inherit !important;
		text-decoration: none !important;
	}

	#section_navigation .menu > li, #modular_sidebar .menu > ul {
		font-weight: bold;
	}

	#section_navigation .sub-menu, #modular_sidebar .sub-menu {
		margin: 0 !important;
		padding-left: 1em;
	}
	
	#modular_sidebar .sub-menu a {
		padding-bottom: 0 !important;
	}

	#section_navigation .sub-menu .sub-menu, #modular_sidebar .sub-menu .sub-menu {
		display: none;
	}

	#section_navigation .sub-menu li.open > ul, #modular_sidebar .sub-menu li.open > ul {
		display: block;
	}

	#section_navigation .menu a, #modular_sidebar .menu a {
		display: inline-block !important;
		padding: 0 !important;
		width: auto;
	}

	#section_navigation .sub-menu li.current-menu-item > a, #modular_sidebar .sub-menu li.current-menu-item > a {
		color: inherit !important;
		cursor: default !important;
		text-decoration: none !important;
	}
	
	#section_navigation .sub-menu li.menu-item-has-children, #modular_sidebar .sub-menu li.menu-item-has-children {
		cursor: context-menu;
		position: relative;
	}

	#section_navigation .sub-menu li.menu-item-has-children:before {
		background: transparent url('../images/ui/toggle_closed.svg') center center no-repeat;
		background-size: contain;
		content: '';
		height: 12px;
		position: absolute; top: calc(0.75em - 6px); left: -20px;
		width: 12px;
		
	}
	#section_navigation .sub-menu li.menu-item-has-children.open:before
	{ background-image: url('../images/ui/toggle_open.svg'); }
