/*	Website template
	menu css
	(C) 2026 ConfidIT
	Schnaarsweg 8
	D-288665 Lilienthal
*/


/*	general menu layout starts															*/

ul.menu
{
	-webkit-flex-flow							: row wrap;
	flex-flow									: row wrap;
}

ul.menu a
{
	text-decoration								: none;
}


nav#menuwrap
{
	position									: relative;
	right										: 0px;
	top											: -33px;
	z-index										: 80;
}

nav #burgericon, nav #burgerlabel
{
	position									: absolute;
	right										: 0px;
	top											: 5px;
	cursor										: pointer;
}

nav #burgerlabel
{
	z-index										: 99;
}

nav input#burgericon
{
	display										: block;
	width										: 40px;
	height										: 32px;
	position									: absolute;
	top											: -7px;
	left										: -5px;
 	cursor										: pointer;
	opacity										: 0; 
	z-index										: 2; 
	-webkit-touch-callout						: none;
}

nav #burgericon ~ ul
{
	margin-left									: 100%;
	width										: 98%;
	transition									: margin-left 1s ease;
	background-color							: transparent;
	height										: 40px;
	overflow									: hidden;
}

nav input#burgericon:checked ~ul
{
	margin-left									: 0px;
	height										: auto;
	min-height									: 40px;
	overflow									: visible;
}

#burgerlabel span
{
	display										: block;
	width										: 27px;
	height										: 4px;
	margin-bottom								: 4px;
	position									: relative;
	background									: #cccccc;
	border-radius								: 3px;
	z-index										: 99;
	transition									: transform 0.5s;
}

span#burgertop
{
	transform-origin							: 50% 50%;
}

span#burgerbottom
{
	transform-origin							: 50% 50%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
nav input#burgericon:checked + label span#burgertop
{
	opacity										: 1;
	transform									: translate(0px,8px)rotate(405deg);
	background									: #bcbcbc;
}

/*
 * But let's hide the middle one.
 */
nav input#burgericon:checked + label span#burgermiddle
{
	opacity: 0;
	transform									: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
nav input#burgericon:checked	+ label span#burgerbottom
{
	transform									: translate(0px,-8px)rotate(-405deg);
	background									: #bcbcbc;
}




nav ul.menu.level0
{
	position									: relative;
	justify-content								: flex-end;
}

nav ul.menu.level0 li
{
	flex										: 0 1 auto;
	margin										: 0;
	padding										: 0;
	position									: relative;
	white-space									: nowrap;
	display										: block;
	padding										: 0.4em;
	font-family									: Raleway, sans-serif;
	
}

nav ul.menu li a
{
	color										: rgb(140,140,140);
	font-size									: 1.1em;
	text-transform								: uppercase;
	display										: inline-block;
}

nav ul.menu.level0 li ul.menu.level1
{
	position									: absolute;
	max-height									: 0px;
	min-width									: 100%;
	white-space									: nowrap;
	transition									: max-height ease 0.4s;
	overflow									: hidden;
}

nav ul.menu.level0 li ul.menu.level1 li a
{
	font-size									: 0.7em;
}

nav ul.menu.level0 li:hover ul.menu.level1
{
	display										: block;
	max-height									: 500px;
}

nav ul.menu.level0 li ul.menu.level1 li
{
	padding-left								: 0px;
	padding-right								: 0px;
}

nav ul.menu.level0 li a::after
{
	content										: '';
	display										: block;
	width										: 0;
	margin-left									: 50%;
	height										: 1px;
	background									: rgb(100,100,100);
	transition									: ease 0.5s;
}

nav ul.menu.level0 li a:hover::after
{
	width										: 100%;
	margin-left									: 0px;
}

nav ul.menu.level0 li form
{
	display										: inline-block;
	margin-top									: -2px;
	margin-right								: 20px;
}



nav ul.menu.level0 li #searchbox
{
	display										: block;
	position									: relative;
	border-bottom								: 1px solid transparent;
	background-color							: transparent;
	border-top									: none;
	border-left									: none;
	border-right								: none;
	height										: 20px;
	width										: 20px;
	z-index										: 10;
	margin-right								: -30px;
	transition									: ease 0.3s;
}

nav ul.menu.level0 li #searchbutton
{
	display										: block;
	position									: absolute;
	padding										: 0px;
	right										: 4px;
	top											: 6px;
	font-size									: 17px;
	border										: none;
	cursor										: pointer;
	background-color							: transparent;
	transition									: ease 0.3s;
	z-index										: 1;
}

nav ul.menu.level0 li button#searchbutton:hover
{
	background-color							: rgb(25,20,20);
}

nav ul.menu.level0 li #searchbutton i.magnifying
{
	width										: 18px;	
}

nav ul.menu.level0 li #searchbutton i.magnifying:before
{
	content										: url("../images/allpages/search.svg");
}

nav ul.menu.level0 li #searchbox:focus
{
	border-bottom-color							: rgb(200,200,200);
	width										: 150px;
	margin-right								: 20px;
}

nav ul.menu.level0 li #searchbutton:active
{
	background-color							: rgb(250,250,250);
}

#footerwrap
{
	background-color							: rgb(255,255,255);
}

footer ul.menu
{
	justify-content								: center;
}


footer ul.menu li a
{
	list-style-type								: none;
	display										: block;
	padding										: 1em;
	font-family									: Raleway, sans-serif;
	font-size									: 0.8em;
	color										: rgb(100,100,100);
	transition									: 0.5s ease;
}

footer ul.menu li a::after
{
	content										: '';
	display										: block;
	width										: 0;
	margin-left									: 50%;
	height										: 1px;
	background									: rgb(20,20,20);
	transition									: 0.5s ease;
}

footer ul.menu li a:hover
{
	color										: rgb(20,20,20);
}


footer ul.menu li a:hover::after
{
	width										: 100%;
	margin-left									: 0px;
}



/*	general menu layout ends															*/