#nav 	{	display:block; width: 100%; margin: 0; padding: 0; 
		font-family: 'Open Sans Condensed', sans-serif;  text-decoration: none; text-transform: uppercase;		
		position: relative; top: auto; left: auto; z-index: 25; 	}

#nav > a 	{	display: none;		}

#nav li 	{ position: relative; list-style-type: none; text-align: center; margin-right: 3px; }

#nav li a 	{	color: #fff; display: block; width: auto; background-color: #1f7efe; border-radius: 6px;  	margin-right: 3px; }

#nav li a:hover 	{ color: #333 ; background-color: #fff; 	 border-radius: 6px;	}
#nav li a:active	{background-color: #2b333a; 	color: #fff;	}

#nav span:after {
				width: 0;
				height: 0;
				border: 0.313em solid transparent; /* 5 */
				border-bottom: none;
				border-top-color: #fff; /* nuoli alas ----------------------------*/
				content: '';
				vertical-align: middle;
				display: inline-block;
				position: relative;
				right: -0.313em; /* 5 */
				}
	
/* -----------first level ---------------------------------------*/
			
#nav > ul 		{  height: 40px; padding:0; margin:0; width: 100%; }
#nav > ul > li  {	padding: 0 ; margin: 0 ; float: left; width: 20%;	}


#nav > ul > li > a 	{ height: 100%; font-size: 1.2em; font-weight: 700;  line-height: 2.5em; text-align: center;	text-decoration: none;					}

#nav > ul > li:not( :last-child ) > a 	{/*border-right: 1px solid #cc470d;*/ 				}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a  {	/*background-color: #cc470d;*/		}


/* ------------second level --------------------------------------- */

#nav li ul  {  background-color: #569dd5; color: #fff; display: none; position: absolute; top: 100%; margin: 0; padding: 0 .5em;}
			
#nav li:hover ul  { display: block; background-color: #569dd5; left: 0;	right: 0; padding: 0; text-align:left;	color: #284ba0;}
#nav li:not( :first-child ):hover ul  { left: -1px;  	}

#nav li ul a  {	padding: 8px 10px; margin: 3px 0;   font-size: 1.3em; text-align: left; text-decoration: none; line-height: 1em;
border-top: 1px dotted #fff; } 

#nav li ul li a:hover  {	color: #284ba0 !important; background-color: #bbe4fe; } 
						
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a 	{ /*text-transform:none; text-decoration: underline;*/ 	}

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

			#nav {  
				position: relative;
				top: auto;
				left: auto;
				margin-top: -2px;
			}
				#nav > a
				{
					width: 2.5em; 
					height: 2.5em; 
					text-align: left;
					text-indent: -9999px;
					background-color: #1f7efe;
					position: relative;
					font-size:1.2em;
					font-weight:bold;
					
				}
					#nav > a:before,
					#nav > a:after
					{
						position: absolute;
						border: 2px solid #fff;
						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;
				background-color: #1f7efe;
				/*background-color: #569dd5;
				background-color: #233865;*/
				border: none;
				color: #fff;
			}
			#nav:target > ul
				{
					display: block;
				}
			#nav > ul > li
				{
					width: 100%;
					padding: 0; margin: 0;
					float: none;
				}
			#nav > ul > li a:hover
			
				{ 	
					background-color: #222!important;
					color: #fff;
					 border-radius: 0;
					margin:0;
				}
			
			#nav > ul > li > a
					{
						height: auto;
						text-align: left;
						text-align: center;
						padding: 0;
						margin:0;
						color: #fff;
						font-size: 1.3em;
						font-weight: 700;
						
					}
			#nav > ul > li:not( :last-child ) > a
						{
							border-right: none;

							border-bottom: 1px dotted #fff;
						}


				/* second level */

			#nav li ul
				{
					position: static;
					padding: 1px 0 /*4%*/; /* 20 */
					padding-top: 0;
					background-color: #314675;
					
					margin-bottom: 1px;
				}
				
			#nav li ul a
						{
							/*border-bottom: 1px dotted #5c6f9a;*/
							border: none;
							text-align: center;
							/*padding: 0.75em; 
							text-transform:none;
							font-size: .95em;
						
							
							text-decoration: none;*/
						}
				
				#nav li ul li a:hover  {	border: none;text-decoration: underline;  color: #fff !important; background-color: transparent; /*#77c14d !important;*/ } 
						
		}