:root{
	--width-top-menu: 100%;
	--width-top-sub-menu: 300px;
	--fon-top-menu: #FFFFFF;
	--fon-top-sub-menu: #EFEFEF;
}

/* ÎÏÈÑÀÍÈÅ ÃÎÐÈÇÎÍÒÀËÜÍÎÃÎ ÌÅÍÞ*/
.top-menu {
	width: var(--width-top-menu);
	margin: 0px;
	padding: 0px;
	display: inline-block;
    
	/* ÐÀÌÊÀ ÂÎÊÐÓÃ ÌÅÍÞ */
	-moz-border-radius: 8px;
	border-radius: 8px;	
	/* border: 1px solid #333333; */
	

	/* ÔÎÍ ÌÅÍÞ */
	background-color: var(--fon-top-menu);
	
	text-align:center;
	color: #000;
	
}

/* ÎÏÈÑÀÍÈÅ ÝËÅÌÅÍÒÀ ÌÅÍÞ*/
.element-top-menu {
	display: block;
	
	/* ÎÒÑÒÓÏÛ */
	margin: 0px; /* ñíàðóæè */
	padding: 5px 8px 5px 8px; /* âíóòðè (âåðõ ïðàâî íèç ëåâî)*/

	/* ÐÀÌÊÀ ÂÎÊÐÓÃ ÏÓÍÊÒÀ ÌÅÍÞ 
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;

	-moz-border-radius: 8px;
	border-radius: 8px;	

	box-shadow: 1px 1px 3px 0 gray;
	min-width: calc(var(--shirina)-20px);
	*/
    
	/* ÔÎÍ ÏÓÍÊÒÀ ÌÅÍÞ
	background-color: #CCC;
	*/

	text-align: left;
}

/* ÎÏÈÑÀÍÈÅ ÝËÅÌÅÍÒÀ ÏÎÄÌÅÍÞ*/
.element-top-sub-menu {
	display: block;

	/* ÎÒÑÒÓÏÛ */
	margin: 0px; /* ñíàðóæè */
	padding: 2px 6px 2px 6px; /* âíóòðè (âåðõ ïðàâî íèç ëåâî)*/

	/* ÐÀÌÊÀ ÂÎÊÐÓÃ ÏÓÍÊÒÀ ÌÅÍÞ
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;

	-moz-border-radius: 8px;
	border-radius: 8px;	

	box-shadow: 1px 1px 3px 0 gray;
	min-width: calc(var(--shirina)-20px);
	*/
    
	/* ÔÎÍ ÏÓÍÊÒÀ ÌÅÍÞ
	background-color: #CCC;
	*/

}


/* ÑÒÈËÈ ÃÈÏÅÐÑÑÛËÊÈ */
.top-menu a {
	text-decoration: none;
	color: #000;
}

/* ÍÀÂÅÄÅÍÈÅ ÌÛØÊÈ ÍÀ ÌÅÍÞ */
.element-top-menu:hover {
	color: #000;
	background: rgba(0, 0, 0, 0.2);

	/* ÐÀÌÊÀ ÂÎÊÐÓÃ ÏÓÍÊÒÀ ÌÅÍÞ 
	border-width: 1px ;
	border-style: solid;
	border-color: #999;
	*/

	-moz-border-radius: 7px 7px 0 0;
	border-radius: 7px 7px 0 0;	

}

/* ÍÀÂÅÄÅÍÈÅ ÌÛØÊÈ ÍÀ ÌÅÍÞ */
.element-top-sub-menu:hover {
	color: #000;
	background: rgba(0, 0, 0, 0.2);
}


/* *************************************************************************************** */

@keyframes anim {
    from {opacity: 0;}
    to {opacity: 1;}
}

.top-sub-menu1 {
	/* ýôôåêò ïðè îòêðûòèè */
	animation: anim 0.7s;

	/* ôîí ïîäìåíþ */
	background-color: var(--fon-top-sub-menu);

	display: none;
	position: absolute;
	width: var(--width-top-sub-menu);

	/* ÎÒÑÒÓÏÛ */
	margin: 0px; /* ñíàðóæè */
	padding: -2px; /* âíóòðè (âåðõ ïðàâî íèç ëåâî)*/

	/* ðàìêà ïîäìåíþ */
	-moz-border-radius: 0 0 7px 7px;
	border-radius: 0 0 7px 7px;
	border: 1px solid #333333;
	
	/* òåíü ïîäìåíþ */
	box-shadow: 2px 2px 5px 0 gray;
	
	z-index: 9999;
	
}

.top-sub-menu2 {
	/* ýôôåêò ïðè îòêðûòèè */
	animation: anim 0.7s;

	/* ôîí ïîäìåíþ */
	background-color: var(--fon-top-sub-menu);

	display: none;
	position: absolute;
	width: var(--width-top-sub-menu);

	/* ÎÒÑÒÓÏÛ */
	margin: 0px; /* ñíàðóæè */
	padding: -2px; /* âíóòðè (âåðõ ïðàâî íèç ëåâî)*/

	/* ðàìêà ïîäìåíþ */
	-moz-border-radius: 7px;
	border-radius: 7px;
	border: 1px solid #333333;
	
	/* òåíü ïîäìåíþ */
	box-shadow: 2px 2px 5px 0 gray;
	
	z-index: 9999;
}

.top-sub-menu3 {
	/* ýôôåêò ïðè îòêðûòèè */
	animation: anim 0.7s;

	/* ôîí ïîäìåíþ */
	background-color: var(--fon-top-sub-menu);

	display: none;
	position: absolute;
	width: var(--width-top-sub-menu);

	/* ÎÒÑÒÓÏÛ */
	margin: 0px; /* ñíàðóæè */
	padding: -2px; /* âíóòðè (âåðõ ïðàâî íèç ëåâî)*/

	/* ðàìêà ïîäìåíþ */
	-moz-border-radius: 7px;
	border-radius: 7px;
	border: 1px solid #333333;
	
	/* òåíü ïîäìåíþ */
	box-shadow: 2px 2px 5px 0 gray;
	
	z-index: 9999;
}


/* *************************************************************************************** */



/* ----------------  ÍÀÂÅÄÅÍÈÅ ÍÀ ÏÎÄÌÅÍÞ 0 ÓÐÎÂÍß  -------------------------*/
.top-parent0 {
	position:relative;
}

.top-parent0:hover .top-sub-menu1 {
	display: inline-block;
	left: 0;
	top: 30px;
}

.top-parent0:after {
	display: inline-block;
	padding: 3px 0 0 7px;
	content: "\25BD";
	vertical-align: top;
	right: 0;
	font-size: 15px;
	color:#000;
}

/* ----------------  ÍÀÂÅÄÅÍÈÅ ÍÀ ÏÎÄÌÅÍÞ 1 ÓÐÎÂÍß  -------------------------*/
.top-parent1 {
	position:relative;
}

.top-parent1:hover .top-sub-menu2 {
	display: inline-block;
	left: calc(var(--width-top-sub-menu) - 5px);
	top: 0;
}

.top-parent1:after {
	display: inline-block;
	padding: 3px 0 0 7px;
	content: "\25B7";
	vertical-align: top;
	font-size: 15px;
	color:#000;
}

/* ----------------  ÍÀÂÅÄÅÍÈÅ ÍÀ ÏÎÄÌÅÍÞ 2 ÓÐÎÂÍß  -------------------------*/
.top-parent2 {
	position:relative;
}

.top-parent2:hover .top-sub-menu3 {
	display: inline-block;
	left: calc(var(--width-top-sub-menu) - 5px);
	top: 0;
}

.top-parent2:after {
	display: inline-block;
	padding: 3px 0 0 7px;
	content: "\25B7";
	vertical-align: top;
	font-size: 15px;
	color:#000;
}