nav, .navspacer
	{
		width: 100%; 
		height: 30px;
	}

	nav
	{
		z-index: 1;
		left:0px;
		top:0px;
		text-align: center; 
		position: fixed;
	} 

	nav * 
	{
		color: white;
	}

	nav a 
	{
		white-space: nowrap;
	}

	nav div
	{
		display: inline;
	}

	nav .mainnav
	{
		padding-top:10px;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
		z-index:2;
		width:100%;
		position:absolute;
		background-color:#1F1F1F;
		display: block;
		opacity: 1; 
		overflow: hidden;
		border-bottom: 1px solid white;
	}

	nav input[type="checkbox"],nav #toggle-menu{
		display: none;
	}

	nav .mainnav .hasSubElements  input[type="checkbox"]:checked +.SubNavigation,nav .mainnav .hasSubElements:hover .SubNavigation 
	{
		opacity: 1;
		height:auto;
		visibility: visible;
	}
	
	nav .mainnav .hasSubElements:hover .SubNavigation
	{
		z-index: 3;
		max-height: 90px;
		transition: visibility 0.6s 0s, max-height 0.5s linear;
	}

	nav .mainnav .hasSubElements  input[type="checkbox"]:checked +.SubNavigation
	{
		max-height: 2000px;
		display: block;
		transition: display 0s,0s, visibility 0.5s 0s, max-height 0.5s linear;
	}

	nav .mainnav .hasSubElements a
	{
		text-decoration: none;
	}
	nav .mainnav .hasSubElements .SubNavigation a
	{
		text-decoration: underline;
		margin-bottom: 2px;
		margin-right: 2px;
	}
	nav .mainnav .hasSubElements .SubNavigation
	{
		padding-top:10px;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
		z-index:2;
		width:100%;
		position:fixed;
		background-color:#1F1F1F;
		display: block;
		visibility: hidden;
		max-height: 0px;
		transition: display 0s,0.5s, visibility 0s 0.5s, max-height 0.5s linear;
		overflow: hidden;
		border-bottom: 1px solid white;
		padding-bottom: 5px;
	}
	
	label.drop-icon 
	{
		display: none;
	}	

@media (pointer:coarse), screen and (max-device-aspect-ratio: 1/1), (max-aspect-ratio: 1/1) {
	nav
	{
		position: absolute;
		width: 100%;
	}

	nav, .navspacer
	{ 
		height: 50px;
	}

	nav *
	{
		font-size: 40px;
	}

	nav .mainnav
	{
		visibility: hidden;
	}

	.SubNavigation
	{
		display: none;
		visibility: visible;
	}

	nav input[type="checkbox"]:checked +.mainnav
	{
		visibility: visible;
	}
	nav input[type="checkbox"]:not(:checked) +.mainnav *
	{
		display: none;
	}
	nav .mainnav div 
	{
		margin-left: 0px;
		margin-right: 0px;
		width: 100%;
		display: inline-block;
	} 

	nav #toggle-menu
	{
		display: block;
	}
	nav a
	{
		width: 69%;float: left;
	}
	nav label#toggle-menu
	{
		width: 99%;
		background-color: #3F3F3F;
	}
	nav .drop-icon-nav
	{
		display: block;
		float: right;
		margin-right: 5%;
	}
	nav .mainnav label
	{
		width: 20%;
		border: 0px solid white;
		border-radius: 20px;
		float: left;
		background-color: #3F3F3F;
	}
	nav .mainnav .hasSubElements  input[type="checkbox"]:checked +.SubNavigation
	{
		padding-top:0px;
		position: relative;
		border-top: 1px solid white;
		transition: visibility 0s 0.6s, max-height 0.5s linear;	
	}
	nav .mainnav .hasSubElements:hover .SubNavigation 
	{
		opacity: 0;
		height:0px;
		visibility: hidden;
	}
	label.drop-icon {
		display: block;
	}	
	span.drop-icon {
		display: none;
	}

}



	nav a
	{
		vertical-align:middle;
		padding: 3px;
		color: white;
	}
	nav a:active {color: white;}
	nav a:visited {color: white;}
	nav a:hover {color: white;background-color:#707070;}

	nav .mainnav .loginButton
	{
		float:right;
		text-decoration: none;
		border: 1px solid white;
		display: block;
		position: relative;
		right: 20px;
		z-index: 3;
		padding: 3px;
		top: -3px;
	}

	
	aside
	{
		z-index:3;
		position:fixed;top:0px;
		display: inline-block;
	}

	.list, .activateSidebar
	{
		transition-property:right;
		transition-duration:0.5s;
		transition-timing-function:linear;
		background-color:#1F1F1F;
		position:fixed;
		height: 100%;
		
		vertical-align: middle;

	}

	.list
	{
		width:150px;
		z-index:3;
		top:0px;Right:-140px;
		border-left: 1px solid white;
	}

	aside .activateSidebar {
		right:0px;
		width: 15px;
		z-index: 4;
		border-left:1px solid white;
		border-right: 1px solid white;
		color: white;

	}

	aside .activateSidebar:hover {
		background-color: #4F4F4F;
	}

	aside .activateSidebar .sidebarButtonIcon {
		display: inline-block;
  		vertical-align: middle;
  		line-height:14px;
	}
	aside input[type="checkbox"]:checked + .activateSidebar
	{
		right: 150px;
	}
	aside input[type="checkbox"]:checked ~ .list
	{
		width:150px;
		top:0px;right:0px;
		
	}