/* Navigation
--------------------------------------------- */

.main-navigation {
	display: flex;
	width: max-content;
	min-width: 300px;
	margin: auto ;
	z-index: 9;
	justify-content: right;
	height: 100%;
	background:var(--header-menu-color);
}

.main-menu {
	width: 100%;
}

.main-navigation ul {
	display: none;
	width: 100%;
	list-style: none;
	margin: 0;
	padding-left: 0;
	justify-content: space-evenly;
}

.main-navigation div>ul {
	height: 100%;
}

.main-navigation li {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	padding:5px;
}

.main-navigation a {
	color:var(--header-text-color);
	display: block;
	text-decoration: none;
	font-size: 18px;
	padding: 5px 20px 10px 20px;
	text-align: center;
	position: relative;
	transition: font-size 0.1s linear;
	font-family: var(--headings-font-family);
}


.site-header.scroll .main-navigation a {
	color: var(--header-text-color-scroll);
}

.main-navigation li ul {
	overflow: hidden;
	position: absolute;
	transform: translate(-50%, 100%);
	left: 50%;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: max-content;
	align-content: center;
	justify-content: center;
	background-color: var(--header-color);
	transition: 0.15s;
}

.main-navigation li ul li {
	position: relative;
	width: 100%;
}

.main-navigation li:not(:hover):not(.focus) ul {
	opacity: 0;
	visibility: hidden;
}

.main-navigation li:hover ul {
	z-index: 5;
}

.main-navigation li ul:hover {
	overflow: visible;
}

.main-navigation ul {
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-navigation ul li {
	width: max-content;
}

.main-navigation ul li.menu-item-has-children {
	padding-right: 10px
}

.main-navigation li.menu-item-has-children::after, .main-navigation li.page_item_has_children::after {
	content: "";
	mask:url(../../assets/arrow-down.svg) no-repeat 100% 100%;
	-webkit-mask:url(../../assets/arrow-down.svg) no-repeat 100% 100%;
	mask-size: cover;
	width:25px;
	height:25px;
	position: absolute;
	top: 50%;
	right: 0;
	transform:translateY(-50%);
	background-color: var(--header-text-color);
}

.main-navigation ul li:hover {
	overflow: visible;
}

.main-navigation ul li:hover ul {
	max-height: unset;
	display: block;
}

.main-navigation ul ul ul{
	left: unset;
	transform: translateX(100%);
	right: 0;
	bottom: unset;
	display: block;
}

.main-navigation ul ul li {
	width: 100%;
	height: max-content;
	padding-left:15px;
}

/* Small menu. */

.menu-toggle {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	background-color: transparent;
	border: none;
	width: 45px;
	height: 30px;
	z-index: 11;
	padding: 0;
}

.menu-toggle svg {
	height: 100%;
	width: 100%;
}

.menu-toggle, .main-navigation.toggled ul {
	display: block;
}

.menu-toggle svg g line {
	stroke-width: 3px;
}

/*
*	Mini-breakpoint: Adjust the width of the quick links
*/

/*
*  Breakpoint 2: Now the mobile menu is used
*/

@media screen and (max-width:605px) {
	.site-header {
		padding-right: 20px;
	}
	.main-navigation {
		width: auto;
		margin: 0;
		padding: 55px 25px 0 0;
		position: relative;
		border: none;
		min-width: 0;
		height: 100%;
		background: transparent;
	}

	.main-navigation div{
		overflow: hidden;
	}

	.main-navigation.toggled {
		background: var(--header_mobile_menu_color);
		position: absolute;
		height: 100vh;
		width: 100vw;
		top: 0;
		transition: background-color 0.2s;
		left: 0;
	}
	.main-navigation.toggled .menu-toggle {
		top: 50px;
		right: 50px
	}

	.main-navigation.toggled .menu-toggle svg g{
		stroke: var(--header_mobile_text_color)
	}

	.main-navigation.toggled .menu-toggle .closed, .main-navigation .open {
		opacity: 0;
	}
	.main-navigation.toggled .menu-toggle .open, .main-navigation .closed {
		opacity: 1;
	}
	.site-header.scroll .main-navigation a {
		height: auto
	}
	.main-navigation div {
		width: max-content;
	}
	.main-navigation ul li.menu-item-has-children {
		padding-right: 0;
	}
	.main-navigation .main-menu{
		width: 0;
		z-index: 10;
		max-width: 0;
		;
		height: 100vh;
		flex-direction: column;
		transition: 0.3s ease-out;
	}
	.main-navigation.toggled div{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		max-width: unset;
	}
	.main-navigation div >ul {
		height: auto;
		width: 100%;
	}
	.site-header .main-navigation a {
		font-size: 28px;
		text-align: center;
		padding-bottom: 10px;
		padding-left: 40px;
		padding-right: 40px;
		color: var(--header_mobile_text_color);
	}
	.main-navigation div>ul>li>a::after {
		display: none;
	}
	.main-navigation li {
		height: max-content;
		width: 100%;
		margin:auto;
		position: relative;
	}
	.main-navigation li.menu-item-has-children.focus::before, .main-navigation li.menu-item-has-children:hover::before {
		top: 50px
	}
	.main-navigation li ul {
		position: relative;
		text-align: center;
		left: 0;
		height: 0;
		background: transparent;
	}
	.main-navigation li ul li {
		width: 100%;
		padding-left:initial;
	}
	.main-navigation li:hover ul, .main-navigation li.focus ul {
		transform: none;
		height: auto;
		width: 100%;
		margin-top: 5px;
	}
	.main-navigation li.menu-item-has-children::after, .main-navigation  li.page_item_has_children::after {
		position: absolute;
		top: 17px;
		transform:none;
		right: 12px;
		background: var(--header_mobile_text_color);
	}
}

@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: flex;
	}
}

/*FLOATING MENU
------------------------------*/

.floating-menu {
	position: absolute;
	right: 0;
	width: 30px;
}