:root {
	--nav-menu-width: auto;
	--nav-menu-height: var(--menu-height);
}

@media (min-width: 890px) {
	:root {
		--vis-mobile-icon: hidden;
		--vis-mobile-display: none;
		--vis-menu: visible;
				
		--nav-bar-dir: row;
		--nav-bar-wrap: wrap;
		--nav-bar-jc: flex-end;
		--nav-bar-ai: center;
		
		--nav-menu-wrap: nowrap;
		--nav-menu-dir: row;
		--nav-menu-jc: flex-end;
		--nav-menu-ai: center;
		--nav-menu-item-margin: 40px;
		--nav-menu-item-margin-tb: auto;
	}
}
@media (min-width: 670px) and (max-width: 890px) {
	:root {
		--vis-mobile-icon: hidden;
		--vis-mobile-display: none;
		--vis-menu: visible;
				
		--nav-bar-dir: row;
		--nav-bar-wrap: wrap;
		--nav-bar-jc: flex-end;
		--nav-bar-ai: center;
		
		--nav-menu-wrap: nowrap;
		--nav-menu-dir: row;
		--nav-menu-jc: space-between;
		--nav-menu-ai: center;
		--nav-menu-item-margin: auto;
		--nav-menu-width: 100%;
		--nav-menu-item-margin-tb: auto;
	}
}
@media (max-width: 670px) {
	:root {
		--vis-mobile-icon: visible;
		--vis-mobile-display: block;
		--vis-menu: visible;
		
		--nav-bar-dir: column;
		--nav-bar-wrap: nowrap;
		--nav-bar-jc: flex-start;
		--nav-bar-ai: flex-end;

		--nav-menu-wrap: wrap;
		--nav-menu-dir: column;
		--nav-menu-jc: flex-end;
		--nav-menu-ai: flex-end;
		--nav-menu-item-margin: 30px;
		--nav-menu-item-margin-tb: 3px;
	}
}

.container-menu {
	box-sizing: border-box;
	background-color: var(--color-main-background);
	border: 1px solid var(--color-main-background);
	height: var(--nav-menu-height); /* 24px; */
	/* min-height: var(--menu-height); */
	width: var(--width-content);
	position: absolute;
	top: calc(var(--header-height) - (var(--menu-height) /2));
	left: var(--pos-content-left);
	border-radius: calc(var(--menu-height) /2);
	z-index: 1000; 
	display: flex;
	flex-wrap: var(--nav-bar-wrap);
	flex-direction: var(--nav-bar-dir);
	justify-content: var(--nav-bar-jc);
	align-items: var(--nav-bar-ai);
	/* align-content: flex-end; */
	overflow: hidden;
}
@media (max-width: 670px) {
	.container-menu {
		transition: height 0.5s;
	}
}
@media (max-width: 670px) {
	.container-menu:hover {
		height: 125px;
		border-left: 1px solid var(--color-grey-lighter);
		border-right: 1px solid var(--color-grey-lighter);
		border-bottom: 1px solid var(--color-grey-lighter);
	}
}

.menu-mobile {
	display: var(--vis-mobile-display);
	/* visibility: var(--vis-mobile-icon); */
	cursor: pointer;
	position: relative;
	margin-right: 30px;
	margin-left: 30px;
	margin-top: 5px;
	margin-bottom: auto;
}

.mod-menu {
	visibility: var(--vis-menu);
	position: relative;
	display: flex;
	width: var(--nav-menu-width);
	flex-direction: var(--nav-menu-dir);
	justify-content: var(--nav-menu-jc);
	flex-wrap: var(--nav-menu-wrap);
	align-items: var(--nav-menu-ai);
	padding: 0;
	margin: 0;
	color: var(--color-main-text);
	list-style: none;
}

/*
@media (max-width: 670px) {
	.menu-mobile:active + .mod-menu,
	.menu-mobile:hover + .mod-menu,
	.mod-menu:hover {
		background-color: var(--color-main-background);
		margin-right: 20px;
		border-radius: 0px 0px 13px 13px;
		border-left: 1px solid grey;
		border-right: 1px solid grey;
		border-bottom: 1px solid grey;
	}
}
*/

.mod-menu > li {
	position: relative;
	flex: 0 0  auto;
	color: var(--color-main-text);
	padding: 0;
	margin-top: var(--nav-menu-item-margin-tb);
	margin-bottom: var(--nav-menu-item-margin-tb);
	margin-left: var(--nav-menu-item-margin);
	margin-right: var(--nav-menu-item-margin);
}

.mod-menu > li.current {
	color: var(--color-primary);
}

.mod-menu > li:hover {
	/* transform: translateY(-1px); */
	color: var(--color-primary);
}

.mod-menu > li:first-of-type {
	margin-left: 30px;
}
.mod-menu > li:last-of-type {
	margin-right: 30px;
}
.mod-menu > li > a {
	color: inherit;
	text-decoration: none;
}
.mod-menu > li > a:hover {
	/* color: var(--color-main-text); */
}