.topheader {
	/* box-shadow: 0 4px 5px var(--navbar-shallow-color); */
	position: fixed;
	/* background-color: #fff8c1; */
	background-color: #00000070;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 100;
}

.topnav {
	display: flex;
	justify-content: end;
	padding: 10px;
	max-width: 980px;
	margin: 0 auto;
}

/* Logo */

.logoDesktop {
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: 500;
	color: #f2f5f7;
	margin-left: 2rem;
}

.logoMobile {
	display: none;
	align-items: center;
	font-size: 20px;
	font-weight: 500;
	color: #f2f5f7;
}

/* .logo img {
  /* border-radius: 50%; */

/* Menu */
.menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu li {
	padding: 0 15px;
}

.menu a {
	color: #f2f5f7;
	font-size: 16px;
	font-weight: 500;
	line-height: 50px;
	text-transform: uppercase;
	position: relative;
}

.menu a::after {
	content: "";
	background-color: #fffdde;
	position: absolute;
	left: 0;
	top: calc(100% + 4px);
	width: 100%;
	height: 4px;

	opacity: 0;
	transition: opacity 0.3s;
}

.menu a.selected::after,
.menu a:hover::after {
	opacity: 0.8;
}

.menu a:hover {
	color: #fffdde;
}

.open-menu,
.close-menu {
	display: none;
}

.logotype {
	display: flex;
	justify-content: center;
	font-weight: 700;
}

#logomenubtn {
	display: none;
}

@media (max-width: 850px) {
	.topnav {
		justify-content: space-between;
	}

	.logoDesktop {
		display: none;
		align-items: center;
		font-size: 20px;
		font-weight: 500;
		color: #f2f5f7;
	}

	.logoMobile {
		display: flex;
		align-items: center;
		font-size: 20px;
		font-weight: 500;
		color: #f2f5f7;
	}

	#logomenubtn {
		display: block;
	}

	/* Menu */
	.menu {
		flex-direction: column;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		align-items: center;
		/* background-color: #576f72; */
		background-color: #577259;
		height: 100%;
		overflow-y: auto;

		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s;
	}

	.menu li {
		padding: 0;
	}

	.menu a {
		color: whitesmoke;
		line-height: 70px;
		font-size: 25px;
	}

	.open-menu,
	.close-menu {
		display: block;
		border: none;
		background: none;
		cursor: pointer;
	}

	.close-menu {
		align-self: flex-end;
		padding: 20px 15px;
	}

	.menu_opened {
		opacity: 1;
		pointer-events: all;
	}

	.open-menu:focus:not(:focus-visible),
	.close-menu:focus:not(:focus-visible) {
		outline: none;
	}

	.menu a::after {
		content: none;
	}

	.menu a:hover,
	.menu a.selected {
		color: var(--complementcolor);
	}
}