* { box-sizing:border-box; }

nav {
	width:100%;
	display:none;
}
	
#navi-open:target nav { display:block; }

nav li {  }

nav a {
	display:block;
	height:100%;
	width:100%;
}


.nav-toggle {
	display:block;
	position:absolute;
	right:5%;
	cursor:pointer;
	text-decoration:none;
	top:12%;
	width:10%;
	z-index:100;
}

.nav-toggle:hover {  }


.nav-hide { display:none; }

#navi-open:target .nav-hide { display:block; }

#navi-hide:target .nav-hide { display:none; }

#main { width:100%; }



@media screen and (min-width:801px) {


.nav-toggle { display:none !important; }

nav { width:auto; display:block !important; }

nav li { width:auto; }

}



/***************************************************************************************/
/* Smartphones */
/***************************************************************************************/
@media screen and (max-width: 800px) {
	
/* #navi-open:target main { opacity:0.5; background:#283c50; } */
	
ul.menu {
position:absolute;
left:0px;
top:240px; 
top:100px; 
background:transparent;
height:auto;
z-index: 100;
padding-left:0%;
padding-right:0%;
}

/* ul.menu:after {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:5000%;
background:#283c50;
opacity:0.65;
} */

	
ul.menu li {
width:100%; 
height:auto;
background-color: white;
opacity:1.0 !important;

border-bottom: 1px solid #A1A1A1;
margin-left:0%;
margin-right:0%;
padding-left:4%;
padding-right:4%;
padding-top:1.5%;
padding-bottom:3.0%;
vertical-align:middle;
z-index: 100;
}

ul.menu li:first-child { margin-top:7%;  margin-top:0%; padding-top:0%; }

ul.menu li:last-child { border-bottom: 7px solid #ff9900; }



ul.menu:hover li, ul.menu:focus li {  }

ul.menu li a {
width:100%;
text-align:left;
/* color: #5E5E5E; */
font-size: 100%;
font-size: 90%;
font-weight:bold;
padding-left:4%;
z-index: 100;
}

}


@media screen and (max-width:800px) {
	.nav-toggle { top:50px; }
}
@media screen and (max-width:700px) {
	.nav-toggle { top:40px; }
}
@media screen and (max-width:550px)	{
}