/* Menu */

nav {
    position:fixed;
    left:0%;
    width:15%;
    z-index: 10;
    padding:4px;
  }
@media screen and (min-width: 768px) {
    nav {
	height:100%;
    }
}
 
nav ul.menu {
  padding-left:1em;
  padding-top: 8em;
  height: 100%;
}
nav ul ul.submenu {
    width:100%;
    padding-left:2%;
    margin:0px;
}

ul.submenu { padding-bottom:1em;}
 
nav ul li.menu {
    list-style: none;
    margin-left: -0.5em;
}

li.submenu      { 
    margin-left:0.0em;
		  list-style-position: inside;
		  list-style-image: url(./Grafik/arrow.svg);
		}
 



/* media query: Hamburger-Icon, only on small screens */
nav a img {display:none;}
@media screen and (max-width: 768px) {
    nav a img {
	position:absolute;
	right:5%;
	top:0%;
	background-color:white;
	padding:5px;
    }
    /* default <a id="showMenu"> is shown */
    nav a#showMenu img {
	display:block;
    }
    /*default <a class="closeMenu"> is not shown */
    nav a.closeMenu img {
	display: none;
    }
    /* click on Hamburger: <a id="showMenu"> disappears */
    nav > .closeMenu,
    nav a#showMenu:target {
	display: none;
    }
    /* click on Hamburger: <a class="closeMenu"> appears */
    nav > .closeMenu,
    nav a:target ~ .closeMenu img {
	display:block;
    }
    /* mobile menue */
    nav {
	left: 67%;
	top:2%;
	width: calc(33%);
        border-right-color:white; 
    }
    nav ul.menu{
	background-color: #ff0066;
	padding:0.2em;
	padding-left:1.2em;
    }
    /* by default menu is not shown */
    nav ul,
    nav ul ul.submenu {
	display:none;
	position: relative;
	width: 100%;
	left:0%;
	
	/*list-style-type:none;*/
	margin-left: 0%;
	padding: 5px;

	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
    }
    /* click on icon moves menu in */
    nav a:target ~ ul,
    nav a:target ~ ul ul.submenu,
    nav a:target ~ .closeMenu {
	display: inline-block;
    }
}