/*--------------------------------------------------------------------------------------*\
| HEADER
\*--------------------------------------------------------------------------------------*/
header .mobile-header-block{
    display: none;
}

header {
	padding-left: var(--section-padding-l);
	padding-right: var(--section-padding-l);
	padding-top: var(--section-padding-m);
	max-width: 100%;
	margin: auto;
}

header .menu-container-top{
	display: flex;
	justify-content: space-between;	
	align-items: center;
	border-bottom: 3px solid var(--color-orange);
	padding-bottom: var(--section-padding-xs);
    align-items: baseline
}

header .menu-container-bottom{
	padding-top: var(--section-padding-xs);
}

header ul{
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
}

header ul li{
	margin: 0 var(--section-padding-s);
}

header li a{
	font-family: 'raleway';
    font-weight: 500;
	color: var(--color-light-black);
}
header li.current-menu-item a{
	color: var(--color-gray);
}

header .slogan{
	display: flex;
    flex-direction: row;
    gap: 64px;
}
header .slogan p{
	font-size: var(--font-s);
	position: relative;
	margin-left: 28px;
}
header .slogan p::before{
content: '';
    background-image: url(/wp-content/uploads/2024/03/vink.svg);
    width: 20px;
    height: 20px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    left: -28px;
}
header li#menu-item-911, header li#menu-item-910{
	margin-right: 0;
	margin-left: 8px;
}
header li#menu-item-910 a::before{
	content: '';
    background-image: url(/wp-content/uploads/2024/03/facebook.svg);
    width: 20px;
    height: 20px;
    display: flex;
    background-size: contain;
}
header li#menu-item-911 a::before{
	content: '';
    background-image: url(/wp-content/uploads/2024/03/instagram.svg);
    width: 20px;
    height: 20px;
    display: flex;
    background-size: contain;
}


/*--------------------------------------------------------------------------------------*\
| MEDIA QUERIES
\*--------------------------------------------------------------------------------------*/

@media screen and (min-width: 1800px){
	header{
		padding-left: calc( 4 * var(--section-padding-l) );
		padding-right: calc( 4 * var(--section-padding-l) );
	}
}
@media screen and (max-width: 1800px){
	header{
		padding-left: calc( 2 * var(--section-padding-l) );
		padding-right: calc( 2 * var(--section-padding-l) );
	}
}
@media screen and (max-width: 1350px){
	header{
		padding-left: var(--section-padding-l);
		padding-right: var(--section-padding-l);
	}
}
@media screen and (max-width: 900px){
	header{
		padding-left: var(--section-padding-m);
		padding-right: var(--section-padding-m);
	}
	#site-navigation > div.menu-container-top > div.menu-main-menu-container{
		display: none;
	}
	 header .mobile-header-block{
		flex-direction: column;
		top: 0;
		position: fixed;
		bottom: 50px;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		left: 0;
		background: var(--color-orange);
		width: 100%;
		height: 75px;
		z-index: 10000;
    }	
	header .mobile-buttons{
		display: none;
	}
	header ul.menu{
		padding-right: var(--section-padding-s);
	}
	header ul li {
		margin: 0 0 0 var(--section-padding-xs);
	}
	header ul li a{
		font-size: 14px;
		color: var(--color-white);
	}
	header{
		padding-left: var(--section-padding-m);
		padding-right: var(--section-padding-m);
	}
	header.site-header {
		
		padding-top: var(--section-padding-l);
	
	}
		header ul.menu{
		flex-direction: column;
	}
	header .mobile-buttons{
		display: flex;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;	
		background: var(--color-orange);
	}
	header .mobile-header-block .menu-container-mobile{
		display: none;
		height: 0;
		transition: 1s;
	}
	header .mobile-header-block .menu-container-mobile.active-mobile-header li {
		padding: 20px 0;
	}
	header .mobile-header-block .menu-container-mobile.active-mobile-header li a{
		font-size: 16px;
		padding: 20px;
	}
	header .mobile-header-block .active-mobile-header .site-branding{
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 20px;
		margin-bottom: 100px;
		box-sizing: border-box;
	}
	header .mobile-header-block .menu-container-mobile.active-mobile-header {
		display: flex;
		position: absolute;
		flex-direction: column;
		top: 75px;
		left: 0;
		background: #394044fa;
		width: 100%;
		height: 100vh;
		transition: height 1s;
	}
	header .menu-toggle{
		height: 60px;
	}
	header .menu-toggle span{
		height: 3px;
		background: var(--color-light-black);
		width: 20px;
		margin-bottom: 3px;
		border-radius: 5px;
	}      
	header .menu-toggle span:last-child{
		width: 10px;
		margin-right: 10px;
		transition: 0.4s ease-in-out;
	}
	header .menu-toggle.active-mobile-header span:last-child {
		width: 5px;
		margin-left: 15px;
		margin-right: 0;
	}
	header .menu-toggle{
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
}
@media screen and (max-width: 768px){

}
@media screen and (max-width: 550px){
	header{
		padding-left: var(--section-padding-s);
		padding-right: var(--section-padding-s);
	}
}