/* General styles for all menus */

.mainMenu {
	position: fixed;
}

.mainMenu a {
	display: block;
	color: #000;
	font-size: 2vh;
	font-weight: 300;

	/* kaesten enden nach textlaenge
	float: left; */
}

.mainMenu a:hover {
	background: #d3d3d3;
}

.mainMenu a:active {
	color: black;
}
.mainMenu a.active {
	color: #228B22;
	background-color: lightgrey;
}
.mainMenu .sep {
	margin-bottom: clamp(0.3vh, 1.8vh, 3vh) !important;
}

/* Hamburger Menu */

@media only screen and not (max-width: 600px) {
    .hamburger, 
	.hamburgerSpan {
		display: none;
	}
}

@media only screen and (max-width: 600px) {
    .hamburger {
		display: block;
		width: 40px;
		height: 32px;
		position: absolute;
		top: 2vh;
		left: 3px;
		cursor: pointer;
	    opacity: 0;
		z-index: 900;
		-webkit-touch-callout: none;
	}
	
	.hamburgerSpan
	{
		display: block;
	    width: 36px;
	    height: 4px;
	    margin-bottom: 5px;
	    position: relative;
	    margin-bottom: 5px;
	    background: #cdcdcd;
	    border-radius: 3px;
	    top: 3vh;
	    left: 10px;
	    z-index: 899;
	    transform-origin: 4px 0px;
	    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	  			    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	  			    opacity 0.55s ease;
	}
	
	.hiddenHamburger
	{
	  	display: none;
	}
	
	.hamburgerSpan_1
	{
	  	transform-origin: 0% 0%;
	}
	
	.hamburgerSpan_2
	{
	  	transform-origin: 0% 100%;
	}
	
	.hamburger:checked ~ .hamburgerSpan
	{
	  	opacity: 1;
	  	transform: rotate(45deg) translate(-2px, -10px);
	}
	
	.hamburger:checked ~ .hamburgerSpan_3
	{
	  	opacity: 0;
	  	transform: rotate(0deg) scale(0.2, 0.2);
	}
	
	.hamburger:checked ~ .hamburgerSpan_2
	{
	  	transform: rotate(-45deg) translate(0, 10px);
	}
	
	.hamburger:checked ~ .mainMenu
	{
	  	left: 0px;
	}
}

/* Orientation-dependent styles for the content of the menu */

.mainMenu-vertical {
	width: clamp(200px, 20vw, 300px);
	top: 0;
	z-index: 100;
}

.mainMenu-vertical a {
	padding: clamp(0.1vh, 0.5vh, 2vh) clamp(0.3vh, 1.5vh, 3vh) clamp(0.1vh, 0.5vh, 2vh) clamp(0.3vh, 1.5vh, 3vh);
	background: #F0F8FF;
	margin-bottom: 0.3vh;
}

.mainMenu-horizontal {
	width: 100%;
	height: 150px;
	left: 0;
	z-index: 1000;
	overflow: hidden;
}

.mainMenu-horizontal h3 {
	height: 100%;
	width: 20%;
	float: left;
}

.mainMenu-horizontal a {
	float: left;
	width: 20%;
	padding: 0.8em;
	border-left: 1px solid #258ecd;
}

/* Vertical menu that slides from the left */

@media only screen and (max-width: 600px) {
	.mainMenu-left {
		left: clamp(-300px, -20vw, -200px);
		top: calc(2vh + 36px);
	}
}

@media only screen and not (max-width: 600px) {
	.mainMenu-left {
		left: clamp(-280px, -18vw, -180px);
		top: clamp(60px,15vh,6vw);
	}
	
	.mainMenu-left:hover {
		left: 0px;
	}

	.mainMenu-right:hover {
		right: 0px;
	}
}

.mainMenu-left.mainMenu-open {
	left: 0px;
}

.mainMenu-right.mainMenu-open {
	right: 0px;
}

/* Transitions */

.mainMenu,
.mainMenu-push {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/* trigger */
#showLeft {
	left: 215px;
	width: 20px;
	height: 700px;
}
#showLeftBottom{
	width: 225px;
	height: 20px;
	bottom: -14px;
}
#showLeftTop{
	width: 225px;
	width: 225px;
	height: 20px;
	top: -20px;
}