.topNavbar {
	max-width: 100vw;
	width: 100%;
	height: 80px;
	background-color: white;
	box-shadow: 0px 16px 48px #00000029;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	position: fixed;
	z-index: 10;
	top: 0;
}

.topNavbar__part {
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.topNavbar__logo--link {
	display: flex;
}

.topNavbar__logo {
	margin: 12px;
}

@media only screen and (max-width: 576px) {
	.topNavbar__logo {
		width: 80px;
	}
}

.topNavbar__part__menu {
	margin-right: 12px;
}

.topNavbar__part__menu a {
	text-decoration: none;
	color: var(--text-dark);
	border-radius: 24px;
	padding: 12px 24px;
	font-weight: bold;
	margin: 6px;
	transition: background-color 0.2s;
}

.topNavbar__part__menu a:first-child {
	background-color: var(--primary);
	color: var(--white);
	border: none;
}

.topNavbar__part__menu a:first-child:hover {
	background-color: var(--primary-darker);
}

/*
body:has(.elipse-on-top ) .topNavbar__part__menu a:first-child, body:has(.elipse-on-top--profession ) .topNavbar__part__menu a:first-child{
    background-color: transparent;
    color: var(--white);
    border: 1px solid var(--white);
}
 */

@media only screen and (max-width: 768px) {
	.topNavbar__part__menu a:first-child {
		display: none;
	}
}

.topNavbar__part__menu a:last-child {
	background-color: var(--white);
	color: var(--text-dark);
	border: 1px solid var(--primary);
}

/*body:has(.elipse-on-top ) .topNavbar__part__menu a:last-child, body:has(.elipse-on-top--profession ) .topNavbar__part__menu a:last-child{
    background-color: var(--white);
    color: var(--text-dark);
    border: 1px solid var(--primary);
}*/

.topNavbar__part__menu a:last-child:hover {
	background-color: var(--white-darker);
}

@media only screen and (max-width: 768px) {
	.topNavbar__part__menu a:last-child {
		background-color: var(--primary);
		color: var(--white);
		border: none;
	}
	.topNavbar__part__menu a:last-child:hover {
		background-color: var(--primary-darker);
	}
}

@media only screen and (max-width: 576px) {
	.topNavbar__part__menu a:last-child {
		margin: 0px;
		padding: 12px;
	}
}

.topNavbar__nav {
	margin-left: calc(var(--side-margin) - 134px);
	font-weight: bold;
	position: relative;

	display: flex;
	flex-direction: row;
	height: 100%;
}

@media only screen and (max-width: 1200px) {
	.topNavbar__nav {
		display: none;
	}
}

.topNavbar__nav__element {
	margin: 0px 24px;
	height: 100%;

	display: flex;
	justify-content: center;
	align-items: center;
}

@media only screen and (max-width: 1600px) {
	.topNavbar__nav__element {
		margin: 0px 12px;
	}
}

.topNavbar__nav__element_submenu {
	display: none;
	flex-direction: column;
	min-width: 250px;

	background-color: var(--white);
	box-shadow: 0px 16px 48px #00000029;
	border-radius: 20px;
	padding: 24px;
	position: absolute;
	top: 80px;
	transform: translateX(25%);
}

.topNavbar__nav__element:hover .topNavbar__nav__element_submenu,
.topNavbar__nav__element_submenu:hover {
	display: block;
}

.topNavbar__nav__element a {
	text-decoration: none;
	color: var(--text-dark);
	font-weight: bold;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.topNavbar__nav__element a:hover,
.topNavbar__nav__element a.active {
	color: var(--primary);
}

.topNavbar__nav__element .topNavbar__nav__element_submenu a {
	align-items: flex-start;
	justify-content: flex-start;

	margin: 12px 0px;
}

.topNavbar__hamburger {
	display: none;

	justify-content: center;
	align-items: center;
	margin: 0px 0px 0px 12px;
}

@media only screen and (max-width: 1200px) {
	.topNavbar__hamburger {
		display: flex;
	}
}

@media only screen and (max-width: 576px) {
	.topNavbar__hamburger > img {
		width: 40px;
	}
}

.mobileNavMenu {
	width: 100vw;
	height: 100vh;

	background-color: white;
	position: fixed;
	z-index: 9999;

	display: none;
	flex-direction: column;
	transition: 0.2s ease-out;
	opacity: 1;
	top: 0;
}

@media only screen and (max-width: 1200px) {
	.mobileNavMenu {
		display: flex;
	}
}

.mobileNavMenu__close {
	height: 50px;
	margin: 6px;

	display: flex;
	justify-content: flex-end;
}

.hidden .mobileNavMenu__close {
	display: none;
	height: 0px;
}

.mobileNavMenu__nav {
	display: flex;
	flex-direction: column;

	height: 100%;
	overflow: auto;
	margin-left: 24px;
}

.mobileNavMenu__nav__submenu {
	display: flex;
	flex-direction: column;
	margin-left: 48px;
}

.mobileNavMenu__nav a {
	text-decoration: none;
	font-size: var(--text-size-20);
	color: var(--text-dark);

	margin: 6px 0px;
	transition: 0.2s;
}
.mobileNavMenu__nav a:hover {
	transform: translateX(10px);
}

.mobileNavMenu__nav a.active {
	color: #0070f1;
}

.hidden {
	height: 0;
	opacity: 0;
}