#nav
{
	width:100%; /* 520px */
	/*
	font-family: 'Exo 2', sans-serif;
	font-weight: 400;
	
	top: 25%;
	left: 50%;
	margin-left: -30em;
	*/
	z-index:9999;
	border:0px solid #000000;
}

	#nav > a
	{
		display: none;
	}
	
	
	#nav li
	{
		position: relative;
		border:0px solid #CCCCCC;
		z-index:9999;
	}
		#nav li a
		{
			color: #eeeeee;
			display: block;
			text-align:center;
			font-weight:bold;
		}
		#nav li a:active
		{
			/*background-color: #0099cc !important;*/
		}

	#nav span:after
	{
		width: 0;
		height: 0;
		border: 0.313em solid transparent; /* 5 */
		border-bottom: none;
		border-top-color: #eeeeee;
		content: '';
		vertical-align: middle;
		display: inline-block;
		position: relative;
		/*right: -0.313em; /* 5 */
	}

	/* first level */

	#nav > ul
	{
		height: 3em; /* 3.5em */
		/*background-color: #333333;*/
	}
		#nav > ul > li
		{
			/*width: 14%;*/
			/*padding-right:40px;*/
			/*padding-left:27px;*/
			height: 100%;
			float: left;
		}
			#nav > ul > li > a
			{
				height: 100%;
				font-size: 1.15em; /* 24 */
				/*font-weight:bold;*/
				text-decoration:none;
				line-height: 3em; /* 60 (24) */
				text-align: center;
			}
				#nav > ul > li:not( :last-child ) > a
				{
					border-right: 0px solid #888888;
					padding-right:40px;
				}
				#nav > ul > li:hover > a,
				#nav > ul:not( :hover ) > li.active > a
				{
					/*background-color: #cccccc;*/
				}


		/* second level */

		#nav li ul
		{
			background-color: #eeeeee;
			/*background-color:rgba(204,204,204,0.9);*/
			display: none;
			position: absolute;
			top: 90%;
			width:280px;
			box-shadow:0px 0px 5px #333333;
			

		}
			#nav li:hover ul
			{
				display: block;
				left: 0;
				right: 0;
			}
				#nav li:not( :first-child ):hover ul
				{
					left: -1px;
				}
				#nav li ul a
				{
					font-size: 1em; /* 20 */
					text-decoration:none;
					text-align:left;
					padding-left:10px;
					line-height:3.0em;
					height:100%;
					border-bottom: 1px solid #ffffff; 
					color:#666666;
					/*margin-bottom:-10px*/
					/*padding-top: 0.5em;  15 (20) 
					padding-bottom:1em;*/
				}
					#nav li ul li a:hover,
					#nav li ul:not( :hover ) li.active a
					{
						background-color: #333333;
						color:#ffffff;
						/*padding-left:20px;*/
					}


	/*
@media only screen and ( max-width: 600px )
{
	#nav
	{
		width: 100%;
		font-size:80%;
		position: static;
		margin: 0;
		z-index:9999;
	}
	
	#nav > ul > li 
	{
		padding-left:5px;
		z-index:9999;
	}
	
	
}
	*/

/*
@media only screen and ( max-width: 850px )
{
	#nav
	{
		width: 100%;
		font-size:70%;
		position: static;
		margin: 0;
		z-index:9999;
	}
	
	#nav > ul > li 
	{
	}
	
	
}
*/


@media only screen and (max-width: 1024px ) and (min-width: 951px)
{
	#nav
	{
		width:100%;
		position:static;
		margin:0;
		/*top: 30px;
		right:5px;*/
		font-size:1em;
		font-family:Tahoma, Geneva, sans-serif;
		z-index:9999;
	}
	#nav > ul > li:not( :last-child ) > a
	{
		border-right: 0px solid #888888;
		padding-right:40px;
	}
}

/*
@media only screen and (max-width: 950px ) and (min-width: 901px)
{
	#nav
	{
		width:100%;
		position:static;
		margin:0;
		font-size:1em;
		font-family:Tahoma, Geneva, sans-serif;
		z-index:9999;
	}
	#nav > ul > li:not( :last-child ) > a
	{
		border-right: 0px solid #888888;
		padding-right:40px;
	}
}
*/

@media only screen and (max-width: 950px ) and (min-width: 769px)
{
	#nav
	{
		width:100%;
		position:static;
		margin:0;
		/*top: 30px;
		right:5px;*/
		font-size:0.9em;
		font-family:Tahoma, Geneva, sans-serif;
		z-index:9999;
	}
	#nav > ul > li:not( :last-child ) > a
	{
		border-right: 0px solid #888888;
		padding-right:30px;
	}
}

@media only screen and (max-width: 768px)
{

	#nav
	{
		width:100%;
		position:static;
		margin:0;
		/*top: 30px;
		right:5px;*/
		font-size:90%;
		z-index:9999;
	}

	#nav span:after
	{
		width: 0;
		height: 0;
		border: 0.313em solid transparent; /* 5 */
		border-bottom: none;
		border-top-color: #333333;
		content: '';
		vertical-align: middle;
		display: inline-block;
		position: relative;
		/*right: -0.313em; /* 5 */
	}

	#nav > ul
	{
		background-color: #eeeeee;
		box-shadow: 0 0 15px #666666;
	}

		#nav > a
		{
			/*
			margin-left:5px;
			margin-top:5px;
			width: 3.125em; 
			height: 3.125em;  */
			text-align: left;
			/*text-indent: -9999px;*/
			/*background-color:#666666; ---- button color */ 
			position: relative;
		}
			#nav > a:before,
			#nav > a:after
			{
				position: absolute;
				/*border: 2px solid #ffffff;
				top: 35%;
				left: 25%;
				right: 25%;
				content: '';*/
			}
			#nav > a:after
			{
				top: 60%;
			}

		#nav:not( :target ) > a:first-of-type,
		#nav:target > a:last-of-type
		{
			display: block;
		}


	/* first level */

	#nav > ul
	{
		height: auto;
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		z-index:9999;
	}
		#nav:target > ul
		{
			display: block;
			/*padding-top:10px;*/
			
		}
		#nav > ul > li
		{
			width: 100%;
			margin-top:10px;
			float: none;
		}
			#nav > ul > li > a
			{
				height: auto;
				text-align: left;
				padding: 0 0.833em; /* 20 (24) */
				color:#333333;
			}
				#nav > ul > li:not( :last-child ) > a
				{
					/*border-right: none;*/
					border-bottom: 1px solid #ffffff;
				}


		/* second level */

		#nav li ul
		{
			width:100%;
			position: static;
			/*padding: 2em; /* 20 */
			padding-top: 0;
			padding-bottom:0;
		}
		
		#nav > ul > li > ul > li > a
		{
			padding-left:40px;
		}

}