ul.topnav {
	/*
	position:			fixed;
	display:			block; */

	left:				0px;
	top:				0px;
	
	list-style-type: 	none;
	margin: 			0;
	padding: 			0;
	overflow: 			hidden;
  
	font-family: 		'Raleway', sans-serif;
	background: 		rgba(0,0,0,0.3);
	text-transform: 	uppercase;

	/*
	z-index: 			1001;
	
	-moz-box-shadow: 	1px 0px 2px #000;
	-webkit-box-shadow: 1px 0px 2px #000;
	box-shadow: 		1px 0px 2px #000; */
}

ul.topnav li {
	float: left;
}

ul#topnav li a {
	display: 			inline-block;
	text-align: 		center;
	padding: 			14px 16px;
	text-decoration: 	none;
  
	letter-spacing: 	1px;
	color: 				#fff;
	white-space: 		nowrap;
	/* transition: 		background-color 2s; */
	background-color: 	none;
}

ul#topnav li a:hover  {
	color: 				#555;
	background-color: 	white;		
}

ul#topnav li a:active, ul#topnav li.icon a, ul#topnav li.active a{
	color: 				black !important;
	background-color: 	#eee;
	opacity:			0.5;	
}

ul.topnav li.icon {
	display: none;
}

@media screen and (orientation: portrait)
/*, screen and (min-resolution:192dpi)  */
{
	ul.topnav li:not(:first-child) {
		display: none;
	}
	ul.topnav li.icon {
		float: right;
		display: inline-block;
	}

	ul.topnav.responsive {
		position: 		relative;
		background: 	rgba(0,0,0,0.6);		
	}
	ul.topnav.responsive li.icon {
		position: 			absolute;
		right: 				0;
		top: 				0;
	}
  ul.topnav.responsive li {
    float: 				none;
    display: 			block;
  }
  ul.topnav.responsive li a {
    display: 			block;
    text-align: 		left;
  }
}

@media screen and (orientation: landscape) and (max-resolution:192dpi) {
	.topnav {
		font-size: 		1vw;
	}
}

/*-- increase font for HIRES displays */
@media screen and (orientation: landscape) and (min-resolution:192dpi) {
	.topnav {
		font-size: 		1.8vw;
	}
}

@media screen and (orientation: portrait) {
	.topnav {
		font-size: 		2vh;	
		lline-height: 	3vh;
	}
}