/*Принцип работы меню различен для разрешения до 991 и свыше 991*/
#wrapper_mainmenu {
	position:absolute; /*так как все блоки с классом .dropdown_content имеют статическое позицианирование, то каждому блоку который должен быть показать в абсолюном позиционировании
	нужно конкретно указать его позицианирование, и при отображении блок .dropdown_content можно конкретизировать позиционирование для каждого меню или другого выпадающего элемента
	как он будет выклядить на сраничке при отображении посредствам JS+.dropdown_content*/
	/*z-index:-1; /* изначально планировалось делать меню без отступа с верхнего края странички, но так как wrapper_mainmenu позиционированна абсолютно, относительно topmenu (которое в свою очередь позиционированно fixed),
	то и wrapper_mainmenu тоже будет позиционироваться как fixed из-за своего родителя topmenu. Так как wrapper_mainmenu потомок topmenu и имеет абсолютное позиционирование, то оно будет выше своего родителя (topmenu)
	а следовательно будет закрывать его (topmenu). Для решения данной задачи нужно либо wrapper_mainmenu присвоить значение z-index=-1, что спрячет wrapper_mainmenu под topmenu.... но при этом появилась проблема 
	(некоторые мобильные браузеры (iOS Safary, OperaMini, Android browser), при горизонтальной ориентации контента игнорировали свойство overflow-y:auto; дочернего элемента #mainmenu и не пролистывали не вмещаюшееся
	содержимое дочернего блока #mainmenu!!!!)В связи с этим, пришлось отказаться от данного решения, и не использовать z-index=-1. Блок #wrapper_mainmenu шлось отставить НАД topmenu, а для того что бы #wrapper_mainmenu 
	не закрывал topmenu пришлось сместить #wrapper_mainmenu на высоту topmenu*/
	top:42px; /*опускаем #wrapper_mainmenu ниже topmenu что бы #wrapper_mainmenu  не закрывал topmenu при появлении*/
	left:4px; /*так как при ширине более 991px, topmenu имеет скгруленные края побокам, смещает для красоты выпадающее меню (#wrapper_mainmenu ) правее*/
/*11.01.2020*/	/*width:276px; /*ширина выпадающего главного меню. От этого значения есть отступ у других элементов в #mainmenu>ul>li>.dropdown_content*/
/*11.01.2020*/width:320px;
	padding:0 0 0 0; /*Убираем все внутренние отступы у #wrapper_mainmenu*/
	overflow:visible; /* выяснилась проблема в CSS!!! Блоку нельзя задать одновременно разные значения overflow-x и overflow-y, например так, что бы по высоте не вмещающийся текст обрезался, а по ширине НЕ обрезался!
	Для решения этой задачи приходиться использовать 2 блока!!! Первый блок имеет overflow-x:visible и position:relative, относительно него (первого блока) позицианируються (дочерние) блоки с АБСОЛЮТНЫМ позиционированием.
	А внутри первого блока, второй блок, который имеет значение overflow-y:auto (для пролистывания не вмещающегося текста по вертикали!). Таким образом, абсолютные блоки которые расположенны внутри второго блока
	уже не будут обрезаться, благодаря тому, что позиционированны относительно первого блока!*/
	background-color:#fff;
    -webkit-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.3);/*тень*/
    -moz-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.3);/*тень*/
    box-shadow: 0 1px 5px 1px rgba(0,0,0,0.3);/*тень*/
}
#mainmenu /*Используеться в main.js*/
{
	/*max-height:100vh;/*Тут должно быть свойство max-height:100vh; но, как выяснилось браузер Сhrom и Safari не поддерживают данное свойство!! А оно очень важно! Почему? Если нам нужно прокручивать не вмещающееся в видимую часть экрана
	содержимое абсолютно позицианированного блока #mainmenu, то нам нужно установить высоту блока #mainmenu меньшую или равную чем высоту видимо части экрана! То есть, если содержимое #mainmenu имеет высоту 700px, 
	а видимая часть экрана 500px, то свойство max-height будет равно высоте видимой части экрана и тоже должно быть равно 500px. Таким образом 200px блока #mainmenu не будут вмещаться в видимую часть экрана, предельная высота
	#mainmenu будет 500px, и при этом будет работать свойство overflow-y:auto, которые добавит блоку #mainmenu вертикальную полосу прокрутки и позволить пользователю листать не видимые 200px текста.
	Для решения проблемы с не поддержкой некоторых браузеров свойства css VH,VW используем JS.
	*/
	overflow-y:auto;/*создаем полосы прокрутки для не вмящающегося текста в блок #mainmenu*/
}
#mainmenu>ul>li {
	border-bottom:1px solid #dfe2e8; /*создаем разделительные линии под каждым пунктом корневого меню. Все подменю в разрешении с выше 991px будут собранны в одном блоке для удобства пользователя и не будут иметь линий.*/
}
#mainmenu ul>li>a {
	position:relative; /*Для абсолютного позиционирования ::after относительно это ссылки*/
	width:100%; /*растянем ссылку раздела на всю ширину*/
	display:block; /*ссылка корневого меню растягиваеться на всю ширину корневого меню*/
	height:42px;line-height:42px; /*здесь a.height определяет высоту ВСЕГО корневого меню, расстягивая родительские элементы*/
	padding: 0 15px 0 10px; /*сузим текст такЮ что бы многоточие заканчивались пораньше от границы с права, что бы оставить место для стрелки*/
	overflow: hidden; /*что бы текс меню не вылазил за пределы блока выпадающего контента*/
    text-overflow: ellipsis; /* не вместившиеся символы обрезаем многоточием*/
	
}
#mainmenu ul>li ul {
	padding-left:25px; /*каждый подменю, корневого меню, сдвигается левее что бы визуализировать иерархию*/
}
#mainmenu a>span {
	display:table-cell;
}
#mainmenu a>span.icon {
	font-size: 1em;
	padding:0 10px 0 0;
}
#mainmenu a>span.caption {
	width:100%;
}
/*media--------------------------------------*/
@media (min-width:1200px){
	#mainmenu>ul>li>.dropdown_content a.dropdown_url
	{
		font-weight: 700;
	}
	#mainmenu>ul>li>.dropdown_content a.dropdown_url:after
	{
		display:inline-block;
		padding: 0 0 0 5px;
		font:normal normal normal 16px FontAwesome;	
		text-rendering:auto;
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;
		content:"\f107";
		/*-webkit-transition: all 200ms ease-out 0ms;
		-moz-transition: all 200ms ease-out 0ms;
		-o-transition: all 200ms ease-out 0ms;
		transition: all 200ms ease-out 0ms;*/
	}
	#mainmenu>ul>li>.dropdown_content{
		display:block;
		position:absolute; /*позиционируем главное выпадающеее подменю, которое будет сразу отображать все уровни вложенных в него подменю, абсолютно.*/
		top:0;
/*11.01.2020*/		/*left:276px;*/
/*11.01.2020*/		left:320px;
		/*max-height:calc(100vh - 42px); /*заменено функщией SetVhToElem() в main.js, работает только при разрешении >991*/		
		visibility: hidden; /*прячем выпадающий контент с подменюшками*/
		transition: all 0.1s ease 0.1s; /*замедляем сокрытие dropdown_content, так как если есть полосы прокрутки у mainmenu, то при перемещении мышки в блок dropdown_content из mainmenu, в момент когда курсор
		окажеться над полосой прокрутки блок dropdown_content спрячеться и мы не сможем в него попасть!*/
		overflow-y:auto; /*создаем вертикальные полосы прокрутки для не вмещающегося контента*/
/*11.01.2020*/		/*width:calc(1200px - 277px - 8px); /*растягиваем выпадающий контент на всю оставшуюся ширину обрасти экрана: 277px(ширина отступа от корневого меню), 8px(отступы от краев рабочей обрасти отведенные по 4px под скругленные углы)*/
/*11.01.2020*/		width:calc(1200px - 321px - 8px);
	    -webkit-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.3);/*тень*/
		-moz-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.3);/*тень*/
		box-shadow: 0 1px 5px 1px rgba(0,0,0,0.3);/*тень*/
	}
	#mainmenu>ul>li:hover{
		background-color:#f0f2f5;/*посвечиваем только корневое меню!*/
	}	
	#mainmenu>ul>li:hover>.dropdown_content{
		visibility: visible; /*при наведении на пункт меню (корневого меню), показывается выпадающее ПОДменюю*/
		transition: all 0.1s ease 0s;
	}
	#mainmenu>ul>li:hover>a:after { /*данный блок обеспечивает вращение стрелочки у раздела каталога*/
		transform: rotate(-90deg);
	}
	/***/
	#mainmenu>ul>li>.dropdown_content>ul{
		background-color:#fff;
/*11.01.2020*/		/*width:300px;*/
/*11.01.2020*/		width:100%;
	}
	/***/
	/**/
	#mainmenu>ul>li> a.dropdown_url:after { /*для корневого списка разделов делаем отдельную вращаящуюся стрелку, так как ее нужно прижать к правому краю строки. У внутренних разделов стрелку прижимать к краю не будем, поэтому для них будет отдельный блок*/
		display:/*table-cell*/block; /*делаем из :after блочный элемент*/
		position:absolute;right:10px;top:13px; /*так как трудно разместить :after (которая представляет из себя стрелочку говорящую о том, что у раздела есть выпадающее меню) в притык к правой стороне, то позиционируем ее абсолютно и размещаем уже где хотим.*/
		font:normal normal normal 16px FontAwesome;	
		text-rendering:auto;
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;
		content:"\f107";
		-webkit-transition: all 200ms ease-out 0ms;
		-moz-transition: all 200ms ease-out 0ms;
		-o-transition: all 200ms ease-out 0ms;
		transition: all 200ms ease-out 0ms;		
	}
	/**/
}
@media (min-width:992px) and (max-width:1199px){
	#mainmenu>ul>li>.dropdown_content a.dropdown_url
	{
		font-weight: 700;
	}
	#mainmenu>ul>li>.dropdown_content a.dropdown_url:after
	{
		display:inline-block;
		padding: 0 0 0 5px;
		font:normal normal normal 16px FontAwesome;	
		text-rendering:auto;
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;
		content:"\f107";
		/*-webkit-transition: all 200ms ease-out 0ms;
		-moz-transition: all 200ms ease-out 0ms;
		-o-transition: all 200ms ease-out 0ms;
		transition: all 200ms ease-out 0ms;*/
	}
	/****/
	#mainmenu>ul>li>.dropdown_content{
		display:block;		
		position:absolute; /*позиционируем главное выпадающеее подменю, которое будет сразу отображать все уровни вложенных в него подменю, абсолютно.*/
		top:0;
/*11.01.2020*/		/*left:276px;*/
/*11.01.2020*/		left:320px;
		/*max-height:calc(100vh - 42px); /*заменено функщией SetVhToElem() в main.js, работает только при разрешении >991*/		
		visibility: hidden; /*прячем выпадающий контент с подменюшками*/
		transition: all 0.1s ease 0.1s;
		overflow-y:auto; /*создаем вертикальные полосы прокрутки для не вмещающегося контента*/
		/*width:calc(960px - 277px - 8px); /*растягиваем выпадающий контент на всю оставшуюся ширину обрасти экрана: 277px(ширина отступа от корневого меню), 8px(отступы от краев рабочей обрасти отведенные по 4px под скругленные углы)*/
/*11.01.2020*/		width:calc(960px - 321px - 8px); /*растягиваем выпадающий контент на всю оставшуюся ширину обрасти экрана: 277px(ширина отступа от корневого меню), 8px(отступы от краев рабочей обрасти отведенные по 4px под скругленные углы)*/
	    -webkit-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.3);/*тень*/
		-moz-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.3);/*тень*/
		box-shadow: 0 1px 5px 1px rgba(0,0,0,0.3);/*тень*/	
	}
	#mainmenu>ul>li:hover{
		background-color:#f0f2f5;/*посвечиваем только корневое меню!*/
	}	
	#mainmenu>ul>li:hover>.dropdown_content{
		visibility: visible; /*при наведении на пункт меню (корневого меню), показывается выпадающее ПОДменюю*/
		transition: all 0.1s ease 0s;
	}
	#mainmenu>ul>li:hover>a:after { /*данный блок обеспечивает вращение стрелочки у раздела каталога*/
		transform: rotate(-90deg);
	}
	/***/
	#mainmenu>ul>li>.dropdown_content>ul{
		background-color:#fff;
/*11.01.2020*/		/*width:300px;*/
/*11.01.2020*/		width:100%;
	}
	/***/
	/**/
	#mainmenu>ul>li> a.dropdown_url:after { /*для корневого списка разделов делаем отдельную вращаящуюся стрелку, так как ее нужно прижать к правому краю строки. У внутренних разделов стрелку прижимать к краю не будем, поэтому для них будет отдельный блок*/
		display:/*table-cell*/block; /*делаем из :after блочный элемент*/
		position:absolute;right:10px;top:13px; /*так как трудно разместить :after (которая представляет из себя стрелочку говорящую о том, что у раздела есть выпадающее меню) в притык к правой стороне, то позиционируем ее абсолютно и размещаем уже где хотим.*/
		font:normal normal normal 16px FontAwesome;	
		text-rendering:auto;
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;
		content:"\f107";
		-webkit-transition: all 200ms ease-out 0ms;
		-moz-transition: all 200ms ease-out 0ms;
		-o-transition: all 200ms ease-out 0ms;
		transition: all 200ms ease-out 0ms;		
	}
	/**/	
}
@media (min-width:768px) and (max-width:991px){
	#wrapper_mainmenu {
		left:0; /*прижимаем меню к левому краю*/
	}
	#mainmenu ul>li>a.dropdown_url:after {
		display:/*table-cell*/block; /*делаем из :after блочный элемент*/
		position:absolute;right:10px;top:13px; /*так как трудно разместить :after (которая представляет из себя стрелочку говорящую о том, что у раздела есть выпадающее меню) в притык к правой стороне, то позиционируем ее абсолютно и размещаем уже где хотим.*/
		font:normal normal normal 16px FontAwesome;	
		text-rendering:auto;
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;		
		content:"\f107";
	}
	/**/
}
@media (max-width:767px) {
	#wrapper_mainmenu {
		left:0; /*прижимаем меню к левому краю*/
	}
	/**/
	#mainmenu ul>li>a.dropdown_url:after {
		display:/*table-cell*/block; /*делаем из :after блочный элемент*/
		position:absolute;right:10px;top:13px; /*так как трудно разместить :after (которая представляет из себя стрелочку говорящую о том, что у раздела есть выпадающее меню) в притык к правой стороне, то позиционируем ее абсолютно и размещаем уже где хотим.*/
		font:normal normal normal 16px FontAwesome;	
		text-rendering:auto;
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;		
		content:"\f107";
	}
	/**/
}
/*--------------------------------------media*/
#m11 {
	position:absolute; top:42px; /*опускаем #wrapper_mainmenu ниже topmenu что бы #wrapper_mainmenu  не закрывал topmenu при появлении*/
	right:0; /*так как при ширине более 991px, topmenu имеет скгруленные края побокам, смещает для красоты выпадающее меню (#wrapper_mainmenu ) правее*/
	width:276px; /*ширина выпадающего главного меню*/
	padding:0 0 0 0; /*Убираем все внутренние отступы у #wrapper_mainmenu*/
	overflow:visible; /* выяснилась проблема в CSS!!! Блоку нельзя задать одновременно разные значения overflow-x и overflow-y, например так, что бы по высоте не вмещающийся текст обрезался, а по ширине НЕ обрезался!
	Для решения этой задачи приходиться использовать 2 блока!!! Первый блок имеет overflow-x:visible и position:relative, относительно него (первого блока) позицианируються (дочерние) блоки с АБСОЛЮТНЫМ позиционированием.
	А внутри первого блока, второй блок, который имеет значение overflow-y:auto (для пролистывания не вмещающегося текста по вертикали!). Таким образом, абсолютные блоки которые расположенны внутри второго блока
	уже не будут обрезаться, благодаря тому, что позиционированны относительно первого блока!*/
	background-color:green;	
}