main{
	top: 0px;
}

#nav-main{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 60px;
	z-index: 21;
	display: flex;
	background-color: var(--vilagosszurke);
}

#nav-logo{
	margin: 6px 12px;
	display: flex;
}

#nav-foka{
	height: 48px;
	width: auto;
}

#nav-main #nav-title{
	margin-left: 8px;
	margin-top: -4px;
	display: flex;
	align-items: center;
}

#nav-main #nav-title p{
	color: var(--sotetszurke);
	font-size: 40px;
	font-weight: 100;
	font-family: Roboto-thin;
}

#nav-main p{
	color: var(--sotetszurke);
}

#nav-main.wide #nav-nav.tall{
	display: none;
}

#nav-nav{
	position: fixed;
	top: 0;
	right: 12px;
	height: 60px;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	z-index: 22;
}

#nav-nav a{
	width: 10vw;
	height: 40px;
	margin: 5px;
	padding: 6px 0px 0px -6px;
	border-bottom: 1px solid var(--sotetkek);
	color: var(--sotetszurke);
	display: flex;
	justify-content: center;
	align-items: center;
    background-size: auto 200%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 50%, var(--sotetkek) 50%, var(--sotetkek));
    background-position: center top;
    transition: 0.2s;
}

#nav-nav a:hover{
	background-position: center bottom;
}

#nav-nav a p{
	margin-bottom: -6px;
}

#nav-nav a:hover p{
	color: var(--feher);
}

#nav-nav a.active{
	background-color: var(--vilagoskek);
	border-bottom: 1px solid var(--vilagoskek);
	pointer-events: none;

}

#nav-nav a.active p{
	color: var(--feher);
}

#nav-nav .nav-lang{
	width: 5vw;
	height: 40px;
	margin: 5px;
	padding: 8px 0px 0px -6px;
	color: var(--sotetszurke);
	display: flex;
	justify-content: center;
	align-items: center;
    transition: 0.2s;
}

#nav-nav .nav-lang:hover{
	cursor: pointer;
	background-position: center bottom;
}

#nav-overlay{
	display: none;
}

#nav-close{
	display: none;
}