.header-container {
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	height: 50px;
	height: var(--header-height);

	display: flex;
	align-items: center;
	justify-content: space-between;

	background-color: black;
	box-shadow: 0px 0px 10px 2px;
	box-sizing: border-box;
	padding: 0 15px;
}


/*------------------------ LOGO & TITLE ------------------------*/
.header-container .logo-button {
	height: 100%;
	cursor: pointer;
	padding: 0;
	background-color: black;
}

.header-container .logo-button img {
	height: 100%;
}
/*------------------------ HFILL ------------------------*/
.header-container .hfill {
	flex: 1 0 auto;
}
/*------------------------ BUTTONS ------------------------*/

.header-container .buttons-container {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.header-container .vline {
	width: 3px;
	background-color: #FEDD0F;
}

.header-container .buttons-container a {
	color: #FEDD0F;
	background-color: black;
	border-radius: 0;
	padding: 3px 8px;
}

.header-container .buttons-container a:hover {
	color: black;
	background-color: #FEDD0F;
}

/*------------------------ FLAG BUTTON ------------------------*/


.header-container a.flag {
	margin: 0 5px;
	height: 60%;
	border-radius: 50%;
	overflow: hidden;
	padding: 0;
	background-color: black;
}

.header-container .flag img {
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	cursor: pointer;
}

/*------------------------ MENU BUTTON ------------------------*/
.header-container .menu-button {
	display: none;
	height: 100%;
	border-radius: 0;
	background-color: black;
	padding: 0;
}

.header-container .menu-button:hover {
	background-color: #7c7c7c5d;
}

.header-container .menu-button img {
	height: 100%;
}

@media only screen and (max-width: 860px) {
	.header-container .buttons-container {display: none;}
	.header-container .menu-button {display: inline-block;}
}

/*----------------------------------------------*/

@media only screen and (max-width: 1080px) {
	body {--header-height:40px;}
}

/*------------------------ MENU ------------------------*/
.menu-container {
	display: none; /*changed with js to flex*/
	flex-flow: column;
	align-items: stretch;
	justify-content: center;
	position: fixed;
	z-index: 200;
	top: var(--header-height);
	width: 100%;
	height: 100vh;
	background-color: #000000ea;
}

.menu-container a {
	color: var(--pl-yellow);
	background-color: transparent;
	border-radius: 0;
	padding: 8px 0;
	width: 100%;
	text-align: center;
}

.menu-container a:hover {
	color: black;
	background-color: var(--pl-yellow);
}