/*------------------------------------*\
	НАВИГАЦИЯ
\*------------------------------------*/
#nav {
	margin: 0px auto;
    display: table;
}
#nav li {
	float: left;
	list-style-type: none;
	position: relative;
	display: block;
}
#nav li a {
	display: block;
	padding: 8px 10px;
	color: #fff;
	text-decoration: none;
	font-size: 17px;
}
#nav li a:hover {
	color: #fff;
}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav div {
	list-style: none;
	display:table;
	z-index:60;
	position: absolute;
	background: #f4f4f2;
	border: 1px solid #dfdfdd;
	left: -9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
	opacity: 0; /* Устнавливаем начальное состояние прозрачности */
	-webkit-transition: 0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav div ul {
	display:table-cell;
}
#nav div ul li {
	padding-bottom: 1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
	float: none;	
    color: #FFFFFF;

	
}
#nav div ul li:hover {
	color:#FFFFFF;
}

#nav div ul a {
	white-space: nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
	display: block;
	color: #00303F;
	font-size:16px;
	padding: 3px 20px 3px 25px;
}
#nav li:hover div { /* Выводим выпадающий пункт при наведении курсора */
	left: 0; /* Приносим его обратно на экран, когда нужно */
	opacity: 1; /* Делаем непрозрачным */
}
#nav li:hover a { /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
	text-decoration: underline;
	color:#4c7ba8;
    color: #fff;

}
#nav li:hover div ul a { /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
	text-decoration: none;
	-webkit-transition: -webkit-transform 0.075s linear;
	color:#003040;
}
#nav li:hover div ul li a:hover { /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
	color:#FFFFFF;
	background: #253340;
}