@charset "utf-8";
/* CSS Document */

#nav{
	padding: 0; margin: 0;
	z-index:999;
	max-height: 999999px; 
	}

#nav > a
	{display: none;}

#nav li
	{position: relative;}

#nav li a
	{
	text-decoration:none;
	}

#nav li a:active {background-color: #FFFFFF; color:#FDB812 !important;}

#nav span:after
	{
	width: 0;
	height: 0;
	vertical-align: middle;
	display: inline-block;
	position: relative;
	}

/* first level */

#nav > ul
	{
	list-style:none;
	margin: 0; padding: 0;
	margin-right: 5%;
	font: 1em/1.5 'Arial Narrow', sans-serif;
	font-weight: bold;
	color: #FDB812;
	text-decoration:none;
	}
	
.home {background-image:url(../images/menu_home.gif);}
.portfolio {background-image:url(../images/menu_portfolio.gif);}
.services {background-image:url(../images/menu_services.gif);}
.about {background-image:url(../images/menu_about.gif);}
.contact {background-image:url(../images/menu_contact.gif);}
	
#nav > ul > li
	{display: inline-block; padding: 0; margin: 90px 0% 2% 2%; }

#nav > ul > li > a
	{
	min-width: 40px;
	color: #FDB812;
	background-repeat:no-repeat;
	background-position: top center; padding-top: 65px;
	background-size: 40px 65px;
	 -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease;
  	-ms-transition: all 0.7s ease; transition: all 0.7s ease;
	}

#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a{ padding-top: 55px; text-decoration: underline; color:#6D6E71;}

/* second level */
#nav li ul
	{
	background: #f9d687; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, #F9D27A 0%, #fdb812 80%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9D27A), color-stop(80%,#fdb812)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F9D27A 0%,#fdb812 80%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F9D27A 0%,#fdb812 80%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F9D27A 0%,#fdb812 80%); /* IE10+ */
background: linear-gradient(to bottom, #F9D27A 0%,#fdb812 80%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9D27A', endColorstr='#fdb812',GradientType=0 ); /* IE6-8 */
	display: none;
	position: absolute;
	top: 100%;
	list-style: none;
	width: 12em;
	margin: 0; padding: 0;
	text-align:left;
	font: 1em/1.5 'Arial Narrow', sans-serif; font-weight: bold;
	max-height: 999999px; 
	}
#nav li:hover ul
	{
	display: block;
	line-height: 1.75em;
	}
#nav li:not( :first-child ):hover ul{left: -1px;}

#nav li ul a
	{
	display: block; 
	border-bottom: 1px solid #FFFFFF;
	padding: 0.5em; /* 15 (20) */
	color:#6D6E71;
	-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease;
  	-ms-transition: all 0.4s ease; transition: all 0.4s ease;
	}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a	
	{
	text-decoration: underline;
	color: #FFF;
	}

@media screen and (min-width: 720px) {
	#nav
		{
		float: right;
		margin: 0; padding: 0;
		margin-right: 5%;
		width: 75%;
		text-align: right;
		}
}
@media screen and (min-width: 601px) {
	#nav
		{
		position: relative;
		width: 100%;
		float: none;
		}
}

@media only screen and ( max-width: 600px )
	{
		#nav
		{
			width: 100%;
		}
		
		#nav > a
		{
		text-align: center;
		font: 1.5em/1.5 'Arial Narrow', sans-serif; font-weight: bold; color: #FFF;
		position: relative;
		margin: 0; padding:0;
		padding-top: 0.4em; padding-bottom: 0.4em;
		background: #f9d687; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, #F9D27A 0%, #fdb812 80%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9D27A), color-stop(80%,#fdb812)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F9D27A 0%,#fdb812 80%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F9D27A 0%,#fdb812 80%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F9D27A 0%,#fdb812 80%); /* IE10+ */
background: linear-gradient(to bottom, #F9D27A 0%,#fdb812 80%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9D27A', endColorstr='#fdb812',GradientType=0 ); /* IE6-8 */
		}
		#nav > a:before, #nav > a:after 
		{
		
		}
		#nav > a:after{top: 60%;}
		#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type{display: block;}
/* first level */

		#nav > ul
		{
		display: none;
		position: relative;
		
		}
		#nav:target > ul
		{
		display: block;
		width: 100%;
		text-align:center;
		}
		#nav > ul > li
		{
		display: block;
		margin: 0; padding: 0;
		float: none;
		background-color: #939598;
		-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;
  		-ms-transition: all 0.3s ease; transition: all 0.3s ease;
		}
		#nav > ul > li > a
		{
		display: block;
		margin: 0; padding: 0;
		text-align: left;
		background-repeat:no-repeat;
		background-size: 30px 30px;
		background-position: 37% center;
		padding: 0.5em; padding-left: 45%;
		font: 1.5em/1.5 'Arial Narrow', sans-serif;
		font-weight: bold;
		color: #FDB812;
		text-decoration:none;
		}
		
		#nav > ul > li:not( :last-child ) > a
		{
		border: none;
		border-bottom: 1px solid #6D6E71;
		}
		.home {background-image:url(../images/icon_home.png);}
		.portfolio {background-image:url(../images/icon_portfolio.png);}
		.services {background-image:url(../images/icon_services.png);}
		.about {background-image:url(../images/icon_about.png);}
		.contact {background-image:url(../images/icon_contact.png);}
		
		#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a{padding: 0.5em; padding-left: 45%; text-decoration: underline; color:#FFFFFF;}

/* second level */
		#nav li ul
		{
		margin: 0; padding: 0; position: static;
		width: 100%; display: none; 
		text-align: center;
		}
		#nav li ul li{
		margin: 0; padding: 0; position: static;
		padding-top: 0;
		border-bottom: 1px solid #FFF;
		}
		#nav li ul a
	{
	border-bottom: none;
	padding: 0.5em; /* 15 (20) */
	font: 1.25em/1.5 'Arial Narrow', sans-serif;
	font-weight: bold;
	color:#6D6E71;
	-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;
  	-ms-transition: all 0.3s ease; transition: all 0.3s ease;
	}
	#nav li ul a:hover {}
	}

body#portfolio #nav .portfolio, body#about #nav .about, body#services #nav .services, body#contact #nav .contact{
	color: #CECECE;
}