/* Drop down */

.dropDownMenu .dropDown
{
	z-index: 				999;

	position: 				absolute;

	overflow:				hidden;

	width: 					150px;
	height: 				0;

	text-align: 			left;

	background: 			#fff;

	box-shadow: 			0px 3px 4px rgba(0, 0, 0, .3);
}

.safari .dropDownMenu .dropDown {
	box-shadow: none;
}

.dropDownMenu .dropDown a
{
	color: 					#555;

	border-bottom: 			solid 1px #ccc;
}

.safari .dropDownMenu .dropDown a {
	border: solid 1px #ccc;
	border-width: 1px 1px 0 1px;
}

.safari .dropDownMenu .dropDown > a:last-child {
	border-width: 1px;
}

.no-touch .dropDownMenu .dropDown a:hover,
.no-touch .dropDownMenu .dropDown a:focus,
.no-touch .dropDownMenu .dropDown a.active
{
	color: #fff;
}

.dropDownMenu .dropDown ul li
{
	display: 				block;

	position: 				relative;

	float: 					left;

	width: 					150px;
	height: 				auto;
}

.dropDownMenu .dropDown ul li.new
{
	background: 			#eff7fc;
}

.dropDownMenu .toggleDropDown
{
	cursor:					default;
}

.no-touch .dropDownMenu li:not(.noHover):not(.delayed):hover .toggleDropDown,
.toggleDropDown.active
{
	color:					#fff;
}

.no-touch .dropDownMenu.delayed.expanded .dropDown.show,
.no-touch .dropDownMenu:not(.delayed).visible .dropDown.show,
.no-touch #mainMenu.dropDownMenu:not(.delayed) li:not(.noHover):hover .dropDown,
.dropDown.show,
.no-touch:not(.threedotfive) .dropDownMenu li.focus:not(.noHover) .dropDown.show,
.no-touch:not(.threedotfive) .dropDownMenu li:not(.noHover) a:focus ~ .dropDown.show,
.no-touch:not(.threedotfive) #mainMenu.dropDownMenu li.focus:not(.noHover) .dropDown,
.no-touch:not(.threedotfive) #mainMenu.dropDownMenu li:not(.noHover) a:focus ~ .dropDown,
.no-touch:not(.threedotfive) #mainMenu.dropDownMenu li:not(.noHover):focus-within .dropDown
{
	overflow:				visible;

	height:					auto;
	min-height: 			40px;

	padding: 				0;
}

.no-touch #mainMenu.dropDownMenu:not(.delayed) li:not(.noHover):hover .dropDown a,
.no-touch #mainMenu.dropDownMenu li.focus:not(.noHover) .dropDown a,
.no-touch #mainMenu.dropDownMenu li:not(.noHover) a:focus ~ .dropDown a,
.no-touch .dropDownMenu:not(.delayed) .dropDown.show a,
.no-touch .dropDownMenu.delayed.expanded .dropDown.show a,
.no-touch .dropDownMenu li.focus:not(.noHover) .dropDown.show a,
.no-touch .dropDownMenu li:not(.noHover) a:focus ~ .dropDown.show a,
.dropDown.show a
{
	display:				block;
}

.no-touch .dropDownMenu:not(.delayed) li:not(.noHover):hover .dropDown a:before,
.no-touch .dropDownMenu.delayed.expanded li:not(.noHover):hover .dropDown a:before,
.no-touch .dropDownMenu li.focus:not(.noHover) .dropDown a:before,
.no-touch .dropDownMenu li:not(.noHover) a:focus ~ .dropDown a:before,
.dropDown.show a:before
{
	width:					20px;

	text-align: 			left;
}

/* Main menu */

#mainMenu
{
	height:					50px;

	padding:				0;
}

.touch:not(.desktop) #mainMenu {
	display: 				none;
}

#mainMenu.doubleHeight
{
	min-height:				100px;
	height:					auto;
}

#mainMenu a
{
	white-space:			nowrap;
}

#mainMenu a.active
{
	color:					#fff;
}
.webGuidelines #mainMenu a.active
{
	font-weight:			700;
}

#mainMenu a.arrow
{
	display: 				none;

	float: 					right;

	width:					auto;

	padding:				12px 10px 8px 10px;
	margin:					-50px 0 0 0;
}

#mobileMenu .arrowContainer > a:first-child
{
	padding-right:			50px;
}

#mainMenu ul
{
	display: 				table;

	float:					none;

	padding:				0;
	margin: 				0;

	vertical-align: 		middle;
}

#mainMenu ul li
{
	display: 				table-cell;

	height: 				50px;

	padding:				0;
	margin: 				0;
}

#mainMenu ul li a
{
	display: 				block;
	overflow:				hidden;

	height: 				50px;

	padding: 				12px 15px 8px 15px;

	font-size: 				16px;
}

.no-touch #mainMenu ul li:hover > a,
.no-touch #mainMenu ul li > a:focus
{
	z-index: 98;
	position: relative;
	color: #fff;
}

/* Main menu drop down */

#mainMenu.dropDownMenu ul li .dropDown
{
	z-index: 				98;

	width: 					250px;
}

.no-touch #mainMenu.dropDownMenu ul li.hideChildren .dropDown
{
	display:				none;
}

#mainMenu.dropDownMenu ul li .dropDown ul li
{
	width: 					250px;
	height:					auto;
	min-height:				50px;
}

#mainMenu.dropDownMenu ul li .dropDown a
{
	height:					auto;
	min-height:				50px;

	color:					#555;

	white-space:			normal;
}

#mainMenu.dropDownMenu ul li .dropDown a.active:not(:focus)
{
	color:					#555;

	background:				none;
}

.no-touch #mainMenu.dropDownMenu ul li .dropDown a:hover,
.no-touch #mainMenu.dropDownMenu ul li .dropDown a:focus,
.no-touch #mainMenu.dropDownMenu ul li .dropDown a.active:hover
{
	color:					#fff;
}

#mainMenu.dropDownMenu ul li .dropDown ul li .dropDown
{
	display: 				none;
}

/* Sub menu */

#subMenu a
{
	display:				block;

	width:					100%;

	padding:				10px 15px 10px 15px;

	color:					#555;
}

.webGuidelines #subMenu a.active
{
	font-weight:			700;
}

#subMenu ul
{
	margin:					0;
}

#subMenu ul li
{
	padding:				0;
}

#subMenu ul li ul li a
{
	padding-left:			30px;
}

#subMenu ul li ul li ul li a
{
	padding-left:			45px;
}

#subMenu ul li ul li ul li ul li a
{
	padding-left:			60px;
}

#subMenu .arrow
{
	display:				none;
}

/* Horizontal Sub Menu */
#subMenu.horizontal
{
	background: transparent;
	margin: 0 0 0 -2px;
}

#subMenu.horizontal ul
{
	flex-wrap: wrap;
	margin-bottom: 20px;
	display: none;
}

#top #subMenu.horizontal ul
{
	margin: 2px 0;
}

#subMenu.horizontal li
{
	margin: 2px;
}

#subMenu.horizontal a:not(.arrow),
.no-touch #subMenu.horizontal ul li a:not(.arrow):hover
{
	padding-top: 6px;
	padding-bottom: 6px;
}

#anchorMenu li {
	background-color: #ebebeb;
}
#anchorMenu li a::before
{
	padding-right:			8px;
}
#anchorMenu li:last-child
{
	margin-bottom:			50px;
}

/* Expandable sub menu */

#expandableSubMenu a.arrow
{
	display:				block;

	float: 					right;

	width:					auto;

	padding:				10px;
	margin:					-46px 0 0 0;

}

#expandableSubMenu .dropDown
{
	display:				none;
}

#expandableSubMenu .back:before
{
	margin-right:			10px;
}

/* Mobile slide out */

#mobileSlideOut
{
	display: 				none;

	z-index:				999;

	position: 				fixed;

	top: 					60px;

	overflow: 				hidden;

	width:					100%;
	height:					100%;

	padding:				0 15px 0 15px;
}

#mobileSlideOut #scroller
{
	position:				relative;
}

#mobileShortcuts
{
	margin:					0;
}

#mobileShortcuts li
{
	padding:				0;
	margin:					0;

	text-align:				center;
}

#mobileShortcuts .field
{
	padding-bottom:			15px;
}

#mobileShortcuts .field input
{
	height:					40px;
	padding-right:			40px;
}

#mobileShortcuts .field a
{
	position: 				absolute;

	top: 					2px;
	right: 					5px;

	overflow:				hidden;

	width: 					30px;
	height:					36px;
	padding:				4px 0 0 0;

	font-size: 				22px;

	color:					#555;
}

#mobileShortcuts .shortcut
{
	display:				inline-block;

	margin-top:				10px;
	padding:				10px;

	text-align: 			center;

	font-size:				12px;
}

#mobileShortcuts .shortcut:before
{
	font-size:				24px;
}

#mobileShortcuts .shortcut.flag.dutch::before
{
	content:				'\A';
}
#mobileShortcuts .shortcut.flag.dutch
{
	display:				inline;
	white-space:			pre;
}

#mobileShortcuts .avatar
{
	position:				absolute;

	cursor:					pointer;

	margin:					2px -40px 0 10px;
}

#mobileShortcuts .badge
{
	margin-left:			22px;
}

#mobileShortcuts .dropDown
{
	width: 					100%;
	
	font-size:				14px;
}
#mobileShortcuts .dropDown.show
{
	z-index:				1200;
}

#mobileShortcuts .dropDown .widget, #mobileShortcuts .dropDown ul
{
	margin:					0;
}

#mobileShortcuts .dropDown.favoritesContent a
{
	padding:				10px;
}

#mobileShortcuts .dropDown.notificationsContent ul li
{
	width: 					100%;

	padding:				0 15px 10px 45px;
	margin:					0;

	text-align:				left;

	border-bottom: 			solid 1px #ccc;
}

#mobileShortcuts .dropDown.notificationsContent ul li a
{
	display:				inline-block;

	padding:				0;

	border:					none;
}

#mobileShortcuts .dropDown.notificationsContent .update
{
	padding:				10px 10px 5px 5px;

	line-height: 			20px;
}

#mobileShortcuts .dropDown.notificationsContent .date
{
	padding:				0 0 5px 5px;

	line-height: 			20px;
}

#mobileShortcuts .dropDown.favoritesContent .editFavorites, #mobileShortcuts .dropDown.notificationsContent .moreUpdates
{
	display:				block;

	padding:				10px 0 10px 0;

	text-align:				center;
}

/* Mobile menu */

#mobileMenu
{
	padding:				10px 0 110px 0;
}

#mobileMenu a
{
	border-top:				solid 1px #ccc;
}

#mobileMenu a.active
{
	font-weight:			600;

	background: 			url(/communities/common/themes/mett%20responsive/images/backgrounds/mobile_menu.png);
}

#mobileMenu a.arrow
{
	float: 					right;

	width:					auto;

	padding:				10px;
	margin:					-46px 0 0 0;

	font-size:				24px;

	border-top:				none;
}

#mobileMenu ul
{
	margin:					0;
}

#mobileMenu ul li
{
	padding:				0;
}

#mobileMenu ul li a
{
	display:				block;

	width:					100%;

	padding:				10px;
}

#mobileMenu ul li ul li a
{
	padding-left:			25px;
}

#mobileMenu ul li ul li ul li a
{
	padding-left:			40px;
}

#mobileMenu ul li ul li ul li ul li a
{
	padding-left:			55px;
}

#mobileMenu ul li ul li ul li ul li ul li a
{
	padding-left:			70px;
}

#mobileMenu ul li ul li ul li ul li ul li ul li a
{
	padding-left:			85px;
}

#mobileMenu .dropDown
{
	display:				none;
}

#mainMenu .secondRow {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
}

/* Desktop */

@media only screen and (min-width: 769px)
{
	#mobileSlideOut
	{
		display: 				none !important;
	}
}

/* Mobiles & tablets */

@media only screen and (max-width: 768px)
{
	#subMenu {
		margin-bottom:			20px;
	}

	.mobile #subMenu
	{
		display:				none;
	}
}

/* Print */

@media print
{
	#subMenu
	{
		display:				none;
	}
}