.menu {width: 100%; border-bottom: 1px solid var(--color-greenLight);}

.menu .fontello{opacity: initial; padding: 0 10px 0 0;}
.menu .fontello:not(.orange){color: var(--color-greenLight);}
.menu ul li:hover .fontello:not(.orange){color: var(--color-green);}

.menu a {text-decoration: none;}
.menu a:hover{text-decoration: underline; color: var(--color-text);}

.menu li:hover > ul{display: block;}
.menu li:nth-child(n+3) ul{right: -1px; left: initial;}
.menu > ul > li:hover{background: var(--color-bg-greyLight); border-color: var(--color-bg-grey);}

.menu ul {
	z-index: 10;
	display: flex;
	min-width: 100%;
	list-style-type: none;
	margin: 0; padding: 0;
	justify-content: space-around;
}

.menu li {
	position: relative;
	border-left: 1px solid transparent; 
	border-right: 1px solid transparent;
	margin: 0; padding: 10px 24px 0; 
	text-wrap: nowrap;
	height: 41px;
}

/* второй уровень */
.menu li > ul {
	background: var(--color-bg-greyLight);
	top: 41px; left: -1px;
	position: absolute;
    display: none;
}

.menu li > ul > li{
	padding: 10px 24px 0;
	border: 1px solid var(--color-bg-grey);
	border-bottom: 1px solid transparent;
}
.menu li > ul > li:last-child {border-bottom-color: var(--color-bg-grey);}


/* sidebar */
.sidebar{
	position: absolute;
	top: 43px; left: 16px;
	width: 150px;
	z-index: 5;
}

.sidebar dl{padding: 0; margin: 0;min-width: 150px;}
.sidebar li{
	list-style: none;
	border: 1px solid var(--color-bg-orange);
	background: var(--color-bg-yellow);
	border-radius: 10px;
	position: relative;	
	padding: 0; margin: 2px 0 4px;
}
.sidebar li a{display: block; padding: 7px 10px 9px;text-decoration: none;}
/* .sidebar li a{display: block; padding: 5px 10px 7px;text-decoration: none;} */
.sidebar li:hover{background: var(--color-bg-orange); transition:0.5s;}

/* .sidebar form input{width: 100%;} */
.sidebar form{display: flex; padding: 0; margin:0; height: 34px;}
.sidebar form input, .sidebar form > button{border-radius: 10px;border: 1px solid var(--color-purpLight);}
.sidebar form > button{margin-left: 5px; background-color: var(--color-bg-purp); width: 34px;}
.sidebar form > button:active{box-shadow: 3px 3px 3px var(--color-purpLight) inset;}

.sidebar dl > li > span,
.sidebar dl > li > span a{  
  border-radius: 10px;
  width: 34px; height: 100%;
  transition: all 0.2s ease-in-out;
  opacity: 0.3;
}

.sidebar dl > li > span{position: absolute;}
.sidebar dl > li:not(.navi_arrow) > span{
  background: url(../img/plus.jpg) no-repeat center / cover;
  top: 0; right: 0;
}
.sidebar dl > li.navi_arrow {text-align: center;}
.sidebar dl > li.navi_arrow > span:nth-child(2){
  background: url(../img/left.jpg) no-repeat center / cover;
  top: 0; left: 0;
}
.sidebar dl > li.navi_arrow > span:last-child{
  background: url(../img/right.jpg) no-repeat center / cover;
  top: 0; right: 0;
}

.sidebar dl > li > span:hover { opacity: 1; transition: all 0.5s ease-in-out; }

@media (max-width: 758px) {
	.menu ul {justify-content:baseline;}
	.menu .fontello:not(.orange){color: var(--color-green);}
	.menu{padding-left: 150px;}
	.sidebar{top: 0; left: 4px; width: 32px;}
	.menu > ul > li{padding: 10px 16px 0 16px; width: 100%;}
	.menu a:not(.orange) > span:last-child{display: none;}
	.sidebar > dl > dl{display: none;}
	.sidebar > dl:hover > dl{display: block;border: 1ps xolid red}
}

@media (max-width: 512px) {
	.menu > ul > li{padding: 10px 4px 0 12px; letter-spacing: -1px;}
	.menu > ul > li span:first-child{padding: 0 8px 0 0;}
	.menu a:not(.orange) > span{padding: 0; margin:0;}
}