/* Handles all navigation areas
 *
 *  . breadcrumbs:
 *  Displays the line of breadcrumbs
 *
 *  #MainNav ( > 768px )
 *  Navigation buttons in the header, presenting groups and article groups
 *
 *  .qMenu.megamenu ( > 768px )
 *  Layout of the megamenu that appears when you click a button in the #MainNav
 *
 *  .qLeafMenu ( <= 768px )
 *  The hamburgermenu that appears on small screens


/* ----- breadcrumbs ----- */
ol.breadcrumbs {
	padding: .5em 0;
}

ol.breadcrumbs > li {
	margin-right: 0.5em;
	display: inline-block;
}

ol.breadcrumbs > li > a {
	color: var(--main-text-color);
}

ol.breadcrumbs > li > span > svg.icon {
	font-size: .8em;
	position: relative;
	top: -1px;
	margin-left: .25em;
}

ol.breadcrumbs > li:last-of-type > span > svg.icon {
	display: none;
}

.qMenu {
	background-color: rgba(0, 0, 0, 0.6);
	height: calc(100% - 180px);
	z-index: 20;
}

@media only screen and (min-width: 769px) {
	/* ----- Main Navigation  ----- */
	#MainNav {
		border-top: none;
		color: var(--menu-text-color);
		background-color: var(--menu-color);
	}
	
	#MainNav .menu {
		display: none;
	}
	
	#MainNav ul {
		padding: 0;
		max-width: 1200px;
		white-space: nowrap;
		overflow: hidden;
		margin: 0 auto;
	}
	
	#MainNav > ul > li {
		display: inline-block;
	}
	
	#MainNav > ul > li:not(:last-child) {
		border-right: 1px solid var(--menu-seperator-color);
	}
	
	#MainNav > ul > li > a {
		display: block;
		text-decoration: none;
		text-align: center;
		white-space: nowrap;
		padding: 1em;
		color: var(--menu-text-color);
		background-color: var(--menu-color);
	}
	
	#MainNav > ul > li > a svg.icon {
		fill: var(--menu-text-color);
		position: relative;
		top: -.05em;
	}
	
	#MainNav > ul > li > a svg.icon.megamenu-chevron {
		margin-left: .5em;
	}
	
	#MainNav > ul > li > a:focus,
	#MainNav > ul > li.selected > a:focus {
		color: var(--menu-hover-text-color);
		background-color: var(--menu-color);
	}
	
	#MainNav > ul > li > a:focus svg.icon,
	#MainNav > ul > li.selected > a:focus svg.icon {
		fill: var(--menu-hover-text-color);
	}
	
	#MainNav > ul > li.active > a,
	#MainNav > ul > li > a:hover,
	#MainNav > ul > li.selected > a:hover {
		background: var(--menu-hover-color);
	}
	
	#MainNav > ul > li > a > i {
		vertical-align: middle;
		font-size: 1em;
		width: 1.5rem;
	}
	
	#MainNav .megamenu-selected-arrow {
		display: none;
	}
	
	#MainNav .qMenuButton.active .megamenu-selected-arrow {
		color: var(--detaillist-header-background-color);
		fill: var(--detaillist-header-background-color);
		display: inline-block;
		position: relative;
		font-size: 20px;
		float: right;
		left: -50%;
		top: 23px;
		margin-left: 5px;
	}
	
	#MainNav .qMenuButton.active .megamenu-chevron {
		display: none;
	}
	
	/* ----- Mega menu ----- */
	.qMenu.megamenu > .menu {
		max-width: 1200px;
		margin: 0 auto 0 auto;
		padding: 0;
		background-color: black;
		border: 2px solid var(--menu-color);
		border-top: 0;
		padding: 0;
		z-index: 11;
		background-color: var(--main-elements-background-color);
		overflow-y: auto;
	}
	
	.qMenu.megamenu > .megamenu .menuinner > h1,
	.qMenu.megamenu > .megamenu .menuinner > .h1 {
		padding: .5rem;
		background-color: var(--detaillist-header-background-color);
		color: var(--detaillist-header-text-color);
		border-bottom: 1px solid var(--detaillist-list-border-color);
	}
	
	.qMenu.megamenu > .menu a {
		display: inline-block;
	}
	
	.qMenu.megamenu > .menu .menu-level-1 {
		margin-bottom: 1em;
		margin-left: 2em;
	}
	
	.qMenu.megamenu > .menu .menu-level-2 {
		margin-bottom: 1em;
	}
	
	.qMenu.megamenu > .menu .menu-level-1 h3 {
		margin: 0 0 .5em 0;
	}
	
	.qMenu.megamenu > .menu .menu-level-1 h3:hover {
		color: var(--main-hover-color);
	}
	
	.qMenu.megamenu > .menu .menu-level-1 h3 i {
		font-size: 1.4rem;
		float: left;
		text-align: center;
	}
	
	.qMenu.megamenu > .menu .megamenu-column a[role=menuitem] i {
		position: absolute;
		margin-left: -1.5em;
	}
	
	.qMenu.megamenu > .menu .megamenu-column {
		float: left;
		display: block;
		padding: .5em;
	}
	
	
	.qMenu.megamenu > .menu.ag .megamenu-column {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		padding: 0;
	}
	
	.qMenu.megamenu > .menu.ag .megamenu-column > div {
		flex-shrink: 1;
		flex-grow: 2;
		min-width: 50%;
		width: 50%;
		color: var(--menu-article-text-color);
	}
	
	.qMenu.megamenu > .menu .megamenu-column.column-4 {
		width: calc(25% - 1.1em);
	}
	
	.qMenu.megamenu > .menu .megamenu-column.column-3 {
		width: calc(33.3% - 1.1em);
	}
	
	.qMenu.megamenu > .menu .megamenu-column.column-2 {
		width: calc(50% - 1.1em);
	}
	
	.qMenu.megamenu > .menu .megamenu-column.column-1 {
		width: calc(100% - 1.1em);
	}
	
}

@media only screen and (max-width: 768px) {
	#MainNav {
		display: none;
	}
	
	/* ---- leaf menu ------ */
	div.qLeafMenu {
		padding-bottom: 10px;
		z-index: 2000;
	}
	
	div.qLeafMenu > ul {
		box-shadow: var(--box-shadow);
	}
	
	div.qLeafMenu ul.open {
		z-index: 9;
	}
	
	div.qLeafMenu ul > li > a {
		padding: .5em 1em .5em 2em;
		color: var(--menu-text-color);
		background-color: var(--menu-color);
	}
	
	div.qLeafMenu a.enter:not(:hover) {
		background-color: var(--main-hover-color);
	}
	
	div.qLeafMenu ul.faded > li > a {
		cursor: default;
		pointer-events: none;
		transition: color 0.3s ease-out;
		transition-property: color, background-color;
		color: var(--menu-entered-text-color);
		background-color: var(--menu-entered-color);
		z-index: 8;
	}
	
	div.qLeafMenu ul > li:not(:last-child) {
		border-bottom: 1px solid var(--menu-seperator-color);
	}
	
	div.qLeafMenu ul > li > a > i {
		position: absolute;
		left: .5em;
	}
	
	div.qLeafMenu ul > li > a > span + svg.icon,
	div.qLeafMenu ul > li > a > span + i {
		right: .5em;
		left: unset;
	}
	
	div.qLeafMenu ul > li > a > svg.icon {
		fill: var(--menu-text-color);
		position: absolute;
		left: .5em;
		top: unset;
	}
	
	div.qLeafMenu ul.faded > li > a > svg.icon {
		fill: var(--menu-entered-text-color);
	}
	
	div.qLeafMenu ul > li.leaf-node-modelspec {
		display: none;;
	}
	
	div.qLeafMenu a:hover,
	div.qLeafMenu a:active,
	div.qLeafMenu a:focus {
		background-color: var(--main-hover-color);
	}
	
	div.qLeafMenu a.back:before,
	div.qLeafMenu a.branch:after {
		content: "";
		margin: 0;
	}
	
	
}

@media screen and (min-width: 481px) {
	div.megamenu.menuinner div.inlineArticle,
	div.megamenu.menuinner div.article {
		margin: 0;
		background-color: transparent;
		box-shadow: none;
	}
	
	div.megamenu.menuinner div.inlineArticle .readmore a {
		background-color: transparent;
		color: var(--main-link-color);
	}
}

@media screen and (max-width: 480px) {
	.qLeafMenu .priceSelector {
		padding-top: 1em;
		padding-bottom: 1em;
	}
	
	.qLeafMenu .priceSelector > * {
		width: 33%;
		display: inline-block;
	}
}