/* 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;
	stroke:currentColor
}

.menu-toggle:not(.toggled){
	
	height: 60px;
}

.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
*/

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


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

@media screen and (max-width:605px) {
	.site-header {
		padding-right: 20px;
	}

	.custom-logo{
		height:50px;

	}

	.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
	}

	.menu-toggle img{
		display: block;
		width: 100%;
		position: absolute;
		top:0;
	}

	.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;
	}


	.main-navigation:not(.toggled) .menu-toggle img + svg {
		opacity: 0;
	}

	.main-navigation.toggled .menu-toggle img{
		display: none;
	}

	.site-header.scroll .main-navigation a {
		height: auto;
		color:var(--header_mobile_text_color) ;
	}
	.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);
	}
}