body{
		background: #eee;
	}

	
	#nav, #nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
		float: right;		
	}
	
	#nav .fa
	{
		font-size:18px !important;
		padding-right:10px;
	}
	
	#nav {
		width: 100%;
		margin: 60px auto;
		border: 1px solid #222;
		background: #4c4e5a;
    	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
		-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
		-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
		box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	}
	
	#nav:before,
	#nav:after {
		content: "";
		display: table;
	}
	
	#nav:after {
		clear: both;
	}
	
	#nav {
		zoom:1;
	}
	
	#nav li {
		float: right;
		border-right: 1px solid #222;
		-moz-box-shadow: 1px 0 0 #444;
		-webkit-box-shadow: 1px 0 0 #444;
		box-shadow: 1px 0 0 #444;
		position: relative;
	}
	
	#nav a {
		float: right;
		padding: 12px 15px 12px 15px;
		color: #fff;
		text-transform: uppercase;
		text-decoration: none;
	}
	
	#nav li:hover > a {
		color: #6dde4d; /*hover color */
	}
	
	*html #nav li a:hover { /* IE6 only */
		color: #6dde4d;
	}
	
	#nav ul {
		margin: 20px 0 0 0;
		_margin: 0; /*IE6 only*/
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: 38px;
		left: 0;
		z-index: 1;    
		background: #444;
		background: -moz-linear-gradient(#444, #111);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
		background: -webkit-linear-gradient(#444, #111);    
		background: -o-linear-gradient(#444, #111);	
		background: -ms-linear-gradient(#444, #111);	
		background: linear-gradient(#444, #111);
		-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
		-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
		box-shadow: 0 -1px 0 rgba(255,255,255,.3);	
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		-ms-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;  
	}

	#nav li:hover > ul {
		opacity: 1;
		visibility: visible;
		margin: 0;
	}
	
	#nav ul ul {
		top: 0;
		left: 150px;
		margin: 0 0 0 20px;
		_margin: 0; /*IE6 only*/
		-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
		-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
		box-shadow: -1px 0 0 rgba(255,255,255,.3);		
	}
	
	#nav ul li {
		float: none;
		display: block;
		border: 0;
		_line-height: 0; /*IE6 only*/
		-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
		-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
		box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	}
	
	#nav ul li:last-child {   
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;    
	}
	
	#nav ul a {    
		padding: 10px;
		width: 130px;
		_height: 10px; /*IE6 only*/
		display: block;
		white-space: nowrap;
		float: none;
		text-transform: none;
	}
	
	#nav ul a:hover {
		background-color: #47b029;
		background-image: -moz-linear-gradient(#45ba24,  #47b029);	
		background-image: -webkit-gradient(linear, left top, left bottom, from(#45ba24), to(#47b029));
		background-image: -webkit-linear-gradient(#45ba24, #47b029);
		background-image: -o-linear-gradient(#45ba24, #47b029);
		background-image: -ms-linear-gradient(#45ba24, #47b029);
		background-image: linear-gradient(#45ba24, #47b029);
		color:#fff;
	}
	
	#nav ul li:first-child > a {
		-moz-border-radius: 3px 3px 0 0;
		-webkit-border-radius: 3px 3px 0 0;
		border-radius: 3px 3px 0 0;
	}
	
	#nav ul li:first-child > a:after {
		content: '';
		position: absolute;
		left: 40px;
		top: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #444;
	}
	
	#nav ul ul li:first-child a:after {
		left: -6px;
		top: 50%;
		margin-top: -6px;
		border-left: 0;	
		border-bottom: 6px solid transparent;
		border-top: 6px solid transparent;
		border-right: 6px solid #3b3b3b;
	}
	
	#nav ul li:first-child a:hover:after {
		border-bottom-color: #45ba24; 
	}
	
	#nav ul ul li:first-child a:hover:after {
		border-right-color: #45ba24; 
		border-bottom-color: transparent; 	
	}
	
	#nav ul li:last-child > a {
		-moz-border-radius: 0 0 3px 3px;
		-webkit-border-radius: 0 0 3px 3px;
		border-radius: 0 0 3px 3px;
	}
	
	/* Mobile */
	#nav-trigger {
		display: none;
	}
	
	input[type=checkbox]
		{
			display:none;
		}
	.fa-bars 
	{
		display:none !important;
	}

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

		/* nav-wrap */
		#nav-wrap {
			position: relative;
			margin-top:-20px;
			
		}
		
		.fa-bars 
		{
			display:block !important;
		}
		
		input[type=checkbox]
		{
			display:block;
			opacity: 0;
			height: 48px;
    		width: 48px;
		}
		
		input[type=checkbox] + span {
    	height: 31px;
    	width: 31px;
		position:absolute;
		z-index:-1;
		margin-top:-50px;
		color:#4B4D58;
		padding:5px;
		font-size:35px;
		padding-top:-5px;
		}
		
		input[type=checkbox]:checked + span  {
    	background:#4B4D58;
    	height: 31px;
    	width: 31px;
    	padding: 0 0 0 0px;
		color:#fff;
		padding:5px;
		font-size:35px;
		}

		#nav-trigger {
		display: block;
		cursor:pointer
		}
		
		#nav-wrap * {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
	
		/* main nav */
		#nav {
			margin: 0; padding:10px 0px;
			position: absolute;
			top: 40px;
			width: 100%;
			z-index: 1;
			
		}

		#nav:after {
			content: '';
			position: absolute;
			left: 25px;
			top: -7px;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-bottom: 8px solid #4B4D58;
		}	

		#nav ul {
			position: static;
			visibility: visible;
			opacity: 1;
			margin: 0;
			display:none;
			
		}

		#nav ul ul {
			margin: 0 0 0 20px !important;			
		}

		#nav li {
			position: static;
			display: block;
			float: none;
			border: 0;
			padding:5px;
			width:100%;	
			padding-bottom:10px;
			border-bottom:1px solid #4B4D58;
			background:#333;
			text-shadow:none !important;
			
		}
		
		
		#nav li:hover ul
		{
			display:block;
		}
		
		#nav ul li:hover ul ul
		{
			display:block;
		}
		
		label {display:block;}
		label ~ input[type="checkbox"] ~ #nav-wrap #nav {display:none;}
		label ~ input[type="checkbox"]:checked ~ #nav-wrap #nav {display:block;}​
		
		

		#nav ul li{
			margin-left: 5px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;		
		}

		#nav a{
			display: block;
			float: none;
			padding: 0;
			color: #fff;
		}

		#nav a:hover{
			color: #fafafa;
		}	

		#nav ul a{
			padding: 0;
			width: auto;		
		}

		#nav ul a:hover{
			background: none;	
		}

		#nav ul li:first-child a:after,
		#nav ul ul li:first-child a:after {
			border: 0;
		}		

	}

	@media screen and (min-width: 600px) {
		#nav {
			display: block !important;
		}
	}	

	/* iPad */
	.no-transition {
		-webkit-transition: none;
		-moz-transition: none;
		-ms-transition: none;
		-o-transition: none;
		transition: none;
		opacity: 1;
		visibility: visible;
		display: none;  		
	}

	#nav li:hover > .no-transition {
		display: block;
	}
.menu,
.sub-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  background-color: #3E454D;
  cursor: pointer;
  position: relative;
  transition: background-color .5s;
  -moz-transition: background-color .5s;
  -o-transition: background-color .5s;
  -webkit-transition: background-color .5s;
  /* IE lt 10, Chrome lt 1, Opera lt 11.6, Safari lt 3, FF lt 4, Android lt 2.1 и iOS lt 2.0 не поддерэивают transition. */
}

.menu li:hover {
  background-color: #353B41 !important; /* .menu > li.home может иметь больше приоритета. Поэтому. */
}

.menu a {
  color: #FFF;
  display: block;
  height: 100%;
  margin: 0 5px;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  word-wrap: break-word;
}

.menu a:hover {
  /* Защита от простого a:hover. */
  color: #FFF;
}
/* END: Общие стили */

/* BEGIN: Главное меню */
.menu {
    /* Рекомендуется задать высоту главного меню именно отсюда. */
	height: 60px;
}

.menu > li {
  float: left;
  height: 100%;
  width: 15%; /* Мудакам которые не поддерживают calc. */
  width: calc((100% - 90px) / 5);
  width: -moz-calc((100% - 90px) / 5);
  width: -webkit-calc((100% - 90px) / 5);
  /* IE lt 9, Chrome lt 19, Opera lt 15, Safari lt 6, FF lt 4, Android и iOS не поддерэивают calc. */
}

.menu > li.home {
  background: #3E454D url(http://s26.postimg.org/qbf4q4j9h/home.png) center no-repeat;
  width: 90px;
}

.menu > li.current {
  background-color: #F2762E !important; /* !important VS .menu li:hover */
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  /* IE lt 9, Chrome lt 1, Opera lt 10.5, Safari lt 3, FF lt 3.5, Android lt 2.1 и iOS lt 2.0 не поддерэивают box-shadow. */
}

.menu > li:not(:first-child) {
  box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
  -moz-box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
  -webkit-box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
}

.menu > li.home > a {
  color: transparent !important;
}

.menu > li > a > span {	
	font-size: 1vw;
  left: 0; /* Селектор .menu a выравнивает содержимое по центру, из-за чего span начинается от центра. Исправляем. */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  /* IE lt 9, Chrome lt 5, Opera lt 10.5, Safari lt 3.1, FF lt 3.5, Android lt 2.1 и iOS lt 2.0 не поддерэивают transform. */
}
@media only screen and (max-width: 1366px) {
  .menu > li > a > span {
font-size: 10pt;
	}
@media only screen and (max-width: 600px) {
  .menu > li > a > span {
font-size: 9pt;
	}

/* END: Главное меню */

/* BEGIN: Подменю */
.sub-menu {
  max-height: 0;
  min-width: 100%;
  overflow: hidden;
  position: absolute;
  top: 100%;
  transition: max-height .5s .2s;
  -moz-transition: max-height .5s .2s;
  -o-transition: max-height .5s .2s;
  -webkit-transition: max-height .5s .2s;
}

li:hover > .sub-menu {
  max-height: 600px;
}

.sub-menu li {
  height: 60px;
}

.sub-menu a {
  line-height: 60px;
  transition: color .5s;
  -moz-transition: color .5s;
  -o-transition: color .5s;
  -webkit-transition: color .5s;
  white-space: nowrap;
}

.sub-menu li.current a,
.sub-menu a:hover {
  color: #F2762E !important; /* !important VS .menu a:hover */
}