@charset "UTF-8";
:root {

	--dark_nav_bg: #222;
	--light_nav_bg: #ededed;

	--transition-timing: 0.25s;
	--transition-timing-function: linear;
}


/*_____________________________________ */
/*-------------------- N77 Nav 2.0 flex */
#nav{
	position:fixed;
	display: flex;
	width:100%;
	height:100px;
	top:-101px;
	z-index:5;

	align-items: stretch;
}

#nav.active{
	top:0px;
}


/*_____________________________________*/
/*-------------------------- NAV Theme */

#nav{
	transition:
	top 0.3s ease-in-out,
	background-color 0.3s ease-in-out,
	color 0.3s ease-in-out;

	box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.15);

	background: var(--light_nav_bg);
	border-bottom:1px solid #ccc;

}

body.theme_dark #nav{
	background: var(--dark_nav_bg);
	border-bottom:1px solid #333;
}


/*_____________________________________ */
/*-------------------------------- LOGO */
#nav #logo{
	display: flex;
	width:140px;
	height:100%;
}

#nav #logo{
	transition: 0.3s;
	filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.1));

	background:url(/data/hello_page_n77_logo_b.svg);
	background-repeat: no-repeat;
	background-size: 150% 150%;
	background-position: -32px -32px;
	&:hover{
		filter: drop-shadow(-5px -5px 1px rgba(0, 0, 0, 0.2));
	}
}

body.theme_dark #nav #logo{
	background:url(/data/hello_page_n77_logo_w.svg);
	background-repeat: no-repeat;
	background-size: 150% 150%;
	background-position: -32px -32px;
	&:hover{
		filter: drop-shadow(0px 0px 7px rgba(255, 102, 0, 0.7));
	}
}




#nav ul {
	display: flex;
	z-index: 1000;
}

#nav ul,
#nav ul ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*_____________________________________ */
/*------------------------------- All a */
#nav ul a {
	display: block;
	padding: 20px;
	text-decoration: none;
	color: #333;
}

#nav ul a.active {
	background: rgba(255, 102, 0, 0.05);
	color: #ff6600;
}

/* Effect one: Underline - Inside Out */
#nav ul a.active::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 5px;
	bottom: -1px;
	left: 0%;
	background-color: #ff6600;
	transition: height 0.3s ease, left 0.3s ease;
}

body.theme_dark #nav ul a {
	color: #fff;
}


/*_____________________________________ */
/*------------------------------ span ▶ */
#nav ul li a span{
	float:right;
	margin-left:5px;
	margin-top: -1px;
	transition-timing-function: ease;
	transition: 0.3s;

	background-image: url('/data/nplus.svg');
	background-repeat: no-repeat;
	background-position: center;

	width: 16px;
	height: 100%;
	min-height: 16px;
}

#nav ul li:hover > a span { 
	transform: rotate(90deg);
}


/*_____________________________________ */
/*------------------------------ Main a */
#nav > ul > li > a {
	display: inline-block;
	height: calc(100% - 40px);
	line-height: 57px;
	background: transparent;
	transition: 
		background var(--transition-timing) var(--transition-timing-function),
		color var(--transition-timing) var(--transition-timing-function);
}

#nav > ul > li > a:hover,
#nav > ul > li > a:focus {
	color: #ff6600;
	background: rgba(255, 102, 0, 0.05);
}




/*_____________________________________ */
/*------------------------------ Sub ul */
#nav ul ul {
	display: block;
	background: #fff;
	border:1px solid #ccc;
	
	position: absolute;
	left: 0;
	top: calc(100% - 0px); /*for border glitch*/
	visibility: hidden;
	opacity: 0;
	min-width: 177px;
	box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.15);
	transition: 
		visibility 0s var(--transition-timing-function) var(--transition-timing),
		opacity var(--transition-timing) var(--transition-timing-function);
}

body.theme_dark #nav ul ul {
	background: #222;
	border:1px solid #333;
}


/*_____________________________________ */
/*------------------------------- Sub a */
#nav ul ul a {
	transition: 
		background var(--transition-timing) var(--transition-timing-function),
		color var(--transition-timing) var(--transition-timing-function);
}

#nav ul ul a:hover,
#nav ul ul a:focus {
	color: #ff6600;
	background: rgba(255, 102, 0, 0.05);
}

#nav ul ul > li > ul {
	left: 100%;
	top: 0;
}

#nav ul li {
	position: relative;
}


/*_____________________________________ */
/*---------------------------- Sub show */
#nav ul li:hover > ul{
	
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}









@media (max-width: 1020px) { /*falls kleiner als */

	#nav{
		height: 77px;
		top: -78px;
	}

	#nav #logo{
		background-position: -37px -24px;
	}


	#nav ul{
		position: absolute;
		top: 100%;
		right: 0%;
		width: 0%;
		flex-direction: column;
		align-items: normal;
		max-height: 600px;
		padding-bottom: 177px;
	
		overflow-y: scroll;
		overflow-x: hidden;

		background: #fff;
		box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.15);
		transition: 0.3s;

		border: none;

	}

	body.theme_dark #nav ul,
	body.theme_dark #nav ul ul {
		background: #222;
		border: none;
	}

	#nav ul.open{
		width: 100%;
	}

	#nav ul.open li{
		padding-bottom: 3px;
	}

	#nav ul ul{

		position: relative;
		float: left;
		display: flex;
		visibility: visible;
		opacity: 1;
		top: 100%;

		width: calc(100% - 42px);
		border: none;
		box-shadow: none;
		margin-left: 37px;
		list-style: none;
		list-style-image: url('/data/nplus.svg');
	}

	#nav ul ul li{
		margin-left: 47px;
	}
	#nav ul ul ul{

		border: none;
		box-shadow: none;
		display: inline-block;
		float: left;
		width: calc(100% - 79px);
		margin-left: calc(-100% + 0px);
	}

	#nav > ul > li > a {
		padding: 20px;
		height: 30px;
		line-height: 30px;
		width: calc(100% - 42px);

		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	#nav ul li:hover > ul li { 
		padding-left: 10px;
	}


	#nav ul li:hover > ul{
		display: flex;
	}

}