.Header .Mobile_Hidden {
	display: none;
}

.Header .Desktop_Hidden {
	display: initial;
}
header {
	min-height: 120px;
	align-content: center;
	position: sticky;
	top: var(--heightBandeauVersion);
	z-index: 2;
	/* width: 100%; */
	background-color: var(--PanelBgColor);
	border-bottom: 1px solid var(--AccentColor);
	font-size: 0.8666rem;
}
.Menu2 {
	box-shadow:0px 0px 6px lightgrey;
}
.Menu2 li{
	transition: background-color 0.5s;
}

.Main_Logo {
	height: 75px;
	width: 365px;
	/* max-width: 440px; */
	max-height: 100px;
	background-size: cover;
	/* background-image: url("/UECBV2/OWS/Images/galerie/Logo_UECBV.PNG"); */
}

#Main_Logo {

	/* width: 120px; */
	grid-column: 1;
	/* max-width: 420px; */
	transition: width 0.3s;
	justify-self: start;
	img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}
.Header {
	.ShowMore_Btn {
		display: grid;
	}
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: 60px;
	margin: 0px;
	box-sizing: border-box;
	min-height: var(--HeaderHeight);
	align-items: end;
	font-weight: 400;
	transition: grid-template-rows 0.3s;
	position: relative;
	padding: 0px 10px 0px 10px;
	ul {
		list-style: none;
	}
}
#Burger {
	font-size: 1.7rem;
	cursor: pointer;
	user-select: none;
}
.Right_Menu {
	grid-column: 3;
	grid-row: 1;
	display: grid;
	grid-template-columns: repeat(4, auto);
	align-items: center;
	gap: 20px;
	color: var(--AccentColor);
	* {
		user-select: none;
		p {
			margin: 0px;
		}
	}
}

.material-symbols-outlined {
	font-size: 1.2rem;
	font-weight: 500;
	padding-right: 5px;
}

.Languages_Wrapper {
	.Selected {
		font-weight: 900;
	}
}
nav {
	max-height: 0px;
}
nav a {
	user-select: none;
	color: black;
	line-break: normal;
}
.navbar-open {
	grid-column: 1 / -1;
	grid-row: 2;
	transition: max-height 0.5s;
	max-height: 90vh;
}
.SearchBar_Wrapper {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: var(--AccentColor);
	z-index: 3;
	max-height: 0px;
	overflow: hidden;
	transition: max-height 0.3s;
}

.Header {
	a * {
		display: block;
	}
}
#CloseIcon {
	cursor: pointer;
	/* position: absolute;
	bottom: calc(var(--HeaderHeight) - 2rem);
	right: 0px; */
	font-size: 2rem;
}
.SearchBar_Content {
	position: relative;
	height: 100%;

	display: grid;
	gap: 20px;
	align-items: center;

	grid-template-columns: 1fr auto;
	* {
		color: var(--AccentFontColor);
	}
	form {
		background-color: inherit;
		display: flex;
		width: 100%;
		margin-bottom: 0px;
		justify-content: center;
		/* position: absolute; */
		/* bottom: 1.5rem; */
		input {
			&[type="text"] {
				&::placeholder {
					color: white;
					opacity: 0.9;
				}
				font-size: 1.5rem;
				width: 75%;
				border-bottom: solid 2px var(--AccentFontColor);
				padding-bottom: 5px;
			}
			&[type="submit"] {
				padding-left: 20px;
				font-size: 2rem;
				cursor: pointer;
				height: fit-content;
				width: fit-content;
			}
			background-color: transparent;
			outline: none;
			border: none;
			margin: auto 0px;
		}
	}
}

.Menu1 {
	box-sizing: border-box;
	font-size: 0.86rem;
	margin-right: -1rem;
	/* min-width: 42.5rem; */
	gap: 10px;
}

.header-global-wrapper ul li {
 font : normal normal 400 17px/20px Figtree
}


@media screen and (max-width: 449px) {

}
@media screen and (min-width: 450px) {

}
@media screen and (max-width: 1199px) {
	#Burger {
		position: relative;
	}
}

@media screen and (min-width: 700px) {
	body {
		--HeaderHeight: 110px;
	}
	
	.Header {
		justify-items: center;
		align-items: center;
		grid-template-rows: var(--HeaderHeight);
		padding-bottom: 0px;
	}
}
@media screen and (max-width: 1199px) {
	nav {
		overflow-x: hidden;
		grid-column-start: 1;
		grid-column-end: 3;
		overflow-y: scroll;
		width: 100%;
		li {
			position: relative;
			user-select: none;
			margin: 0.6rem 0px;
		}

		ul {
			overflow: hidden;
			height: fit-content;
			width: 100%;
			padding: 0px;

			input[type="checkbox"] {
				display: none;
			}
			.Item1 > a {
				/* font-weight: 600; */
				font-size: 1.4rem;
				color: var(--AccentColor);
				background-color: var(--bgColor);
			}
			li:not(.Item1) a {
				height: 30px;
			}
			a {
				display: flex;
				position: relative;
				align-items: center;
				padding: 0px 15px;
				height: 40px;
				transition: color 0.3s, background-color 0.3s;
				box-sizing: border-box;
				border-radius: 10px;
			}
			ul {
				transition: max-height 0.3s;
				max-height: 0px;
			}
			.Menu2 a {
				padding: 0px 23px;
			}

			.Menu3 a {
				padding: 0px 27px;
			}
		}
	}


	.header-global-wrapper nav ul li label {
		position: absolute;
		top:3px;
		right: -3px;
	}


	nav ul li:has(:checked) {
		margin-left: 7px;
		margin-right: 7px;
		> a {
			background-color: var(--AccentColor);
			font-weight: bolder;
			color: var(--AccentFontColor);
			> span {
				background-color: white;
				label {
					position: absolute;
					top: 3px;
					right: -3px;
					color: var(--AccentColor) !important;
				}
				transform: rotate(180deg);
			}
		}
		> ul {
			max-height: 1000px;
		}
	}
}
@media screen and (min-width: 1200px) {

	.navbar-open {
		grid-column: 2;
		transition: max-height 0.5s;
		max-height: 90vh;
	}


	.Header {
		grid-template-columns: auto 1fr;
		padding: 0px 10px 0px 10px;
	}
	.Right_Menu {
		font-size: 0.65rem;
		.material-symbols-outlined {
			font-size: 1.2rem;
		}
	}
	.Right_Menu {
		.Languages_Wrapper,
		.Search_Wrapper a,
		.MemberZone_Wrapper a {
			display: flex;
			grid-row: 1;
			align-items: center;
		}
		.Languages_Wrapper {
			font: normal normal 400 17px/20px Figtree;
			grid-column: 3;
		}
		grid-template-columns: repeat(3, auto);
	}
	nav {
		max-height: initial;
		height: 100%;
		display: flex;
		align-items: center;
		* {
			padding: 0px;
			margin: 0px;
		}
		/* .Menu1 {
			box-sizing: border-box;
			font-size: 0.86rem;
			margin-right: -1rem;
			min-width: 42.5rem;
			gap: 15px;
		} */
		.Item1 > a {
			height: 2rem;
		}
		a {
			box-sizing: border-box;
			height: fit-content;
			display: flex;
			align-items: center;
		}
		ul {
			display: flex;
			margin-block-end: 0px;
			margin-block-start: 0px;
			padding-inline-start: 0px;
			ul {
				position: absolute;
				display: none;
				top: 0px;
				width: max-content;
				background-color: var(--TransparentbgColor);
				backdrop-filter: blur(10px);
				height: fit-content;
				flex-direction: column;
			}
		}
		li {
			position: relative;
			box-sizing: border-box;
			/* color: #000000;
			font: normal normal 500 17px/20px Figtree; */
		}
		li:hover {
			background-color: var(--AccentColor);
			> a {
				color: var(--AccentFontColor);
			}
			> ul {
				display: flex;
			}
		}
		.Item1 {
			box-sizing: border-box;
			height: fit-content;
			flex-shrink: 0;
		}
		li:not(.Item1) {
			height: 100%;
			padding-left: 25px;
			padding-right: 25px;

		}

		.Item1 {
			padding:5px;
			border-top-left-radius: 15px;
			border-top-right-radius: 15px;

			&:not(:has(ul)) {
				border-bottom-left-radius: 15px;
				border-bottom-right-radius: 15px;
			}
		}
		.Menu2 {
			top: 100%;
			left: 50%;
			transform: translate(-50%);
			border-top-left-radius: 15px;
			&:not(:has(li ul)),
			> li:first-child {
				border-top-left-radius: 15px;
				&:not(:has(ul)) {
					border-top-right-radius: 15px;
				}
			}
			> a,
			&,
			> li:last-child {
				border-bottom-left-radius: 15px;
				border-bottom-right-radius: 15px;
			}
		}

		.Menu3 {
			> a,
			&,
			> li:first-child:not(:has(ul)) {
				border-top-right-radius: 15px;
			}
			width: max-content;
			> a,
			&,
			> li:last-child {
				border-bottom-left-radius: 15px;
				border-bottom-right-radius: 15px;
			}
			top: 0px;
			left: 100%;
		}
		.Menu2,
		.Menu3 {
			a {
				padding-top: 0.60rem;
				padding-bottom: 0.60rem;
			}
			font-size: 0.8rem;
			min-width: 200px;
			max-width: 300px;
		}
	}
	.Header .Mobile_Hidden {
		display: initial;
	}

	#Burger {
		display: none;
	}

	.Header .Desktop_Hidden {
		display: none;
	}
}
@media screen and (max-width: 1650px){
	#Main_Logo {
		/* margin-top: -50px; */
		/* background-image: url("/UECBV2/OWS/Images/galerie/Logo_UECBV_Placeholder.PNG");*/
		width: 175px;
	}
}

@media screen and (max-width: 550px){
	#Main_Logo {
		max-width: 125px;
	}
}

@media screen and (max-width: 400px){
	#Main_Logo {
		max-width: 100px;
	}
}

@media screen and (min-width: 1500px){

	.Menu1 {
		box-sizing: border-box;
		font-size: 0.86rem;
		margin-right: -1rem;
		min-width: 42.5rem;
		gap: 20px;
	}

}