/*------ MENU START ------*/
.sidebar-navigation {min-height:100%; overflow-x:hidden; width:0%; position:fixed; z-index:-5; transform:translateX(-100%); -webkit-transition:all 1s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition:all 1s cubic-bezier(0.645, 0.045, 0.355, 1); transition:all 1s cubic-bezier(0.645, 0.045, 0.355, 1); background:var(--clr-b);}
.sidebar-navigation a {text-decoration: none;}
.main-menu {position:absolute; min-height:100%; background:var(--clr-b); width:40%; overflow-x:hidden; transform:translateX(-100%); -webkit-transition:all 1s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition:all 1s cubic-bezier(0.645, 0.045, 0.355, 1); transition:all 1s cubic-bezier(0.645, 0.045, 0.355, 1);}

.main-menu ul {position:absolute; top:0; width:100%; z-index:1; padding:15px 20px 0 10px; -webkit-transition:all 1s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition:all 1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1); background:var(--clr-b); min-height:100%;}
.main-menu ul ul {right:calc(200% + 10px); left:calc(100% + 10px);}




.main-menu ul li {list-style-type:none; padding-left:10px; background:var(--clr-b); border-bottom:0.5px solid var(--clr-b); border-image:linear-gradient(to right, var(--clr-b) 0%, var(--clr-b) 20%, var(--clr-b) 50%, var(--clr-b) 80%, var(--clr-b) 100%) 0 0 1 0; color:var(--clr-w); border-image:none; margin-bottom:5px;}
.main-menu ul li.back{color:var(--clr-w); background-color:; color:var(--clr-m);}
.main-menu ul li.back:before {content: "< "; color:var(--clr-m); font-size:1.2em; font-weight: 700;}
.main-menu ul li.back:focus, .main-menu ul li.back:hover {color:var(--clr-w);}



.main-menu ul li a {position: relative; color:var(--clr-w); font-size:1.2em; display: inline-flex; width: calc(100% - 40px); letter-spacing: 1px; margin: 0.3em 0px; text-transform: uppercase; text-decoration: none;-webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s;}
.main-menu ul li a:focus, .main-menu ul li a:hover {color:var(--clr-m);}
.main-menu ul .active {left: 0; right: 0; padding-bottom: 70px;}
.main-menu ul .active > li > a {opacity: 1;}
.main-menu ul.hidden > li > a {opacity: 0;}
.main-menu ul ul .active {left: -calc(100% + 10px); right: -calc(100% + 10px);}

/*.main-menu ul li span:after {content: " +"; color:var(--clr-m);} */
.main-menu ul li span {margin-top: 2px; color:var(--clr-m); padding: 7px 15px 5px 15px; background: url(https://ardenis.com.ua/main/images/mnext.png) no-repeat center left; background-size: contain; font-size:1.2em; text-transform: uppercase; font-weight: 700; content: " +";}


.back span {background:none!important;}

#menu-s-button {cursor:pointer; height:32px; width:32px; z-index:99900; position:relative; right:0px; top:0px;}
#menu-s-button.open-s {}
#menu-s-button span {background-color:var(--clr-m); display:block; height:4px; width:32px; left:0; opacity:1; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:all 0.25s ease-in-out 0s; -moz-transition:all 0.25s ease-in-out 0s; -o-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; position:absolute;}
#menu-s-button span:nth-child(1) {top:0;}
#menu-s-button span:nth-child(2) {top:14px}
#menu-s-button span:nth-child(3) {top:28px;}
#menu-s-button span:nth-child(4) {top:28px;}
#menu-s-button.open-s span:nth-child(1) {left:50%; top:18px; width:0;}
#menu-s-button.open-s span:nth-child(2) {transform:rotate(45deg); top:16px;}
#menu-s-button.open-s span:nth-child(3) {transform:rotate(-45deg); top:16px}
#menu-s-button.open-s span:nth-child(4) {left:50%; top:18px; width:0;}



.menu-s-r {z-index:991;}
.menu-s-r.sidebar-navigation {right:0; transform:translateX(100%);}
.menu-s-r .main-menu {transform:translateX(100%); right:0;}
.menu-s-r #menu-s-button {right:0;}

.menu-s-r.open-sm, .open-sm {width:100%; opacity:1; transform:translateX(0%); background:var(--clr-b-o); transition:all 1s cubic-bezier(0.645, 0.045, 0.355, 1);}
.menu-s-r.open-sm .main-menu, .open-sm .main-menu{transform:translateX(0%);}

.menu-s-l {z-index:999; left:0}
.menu-s-l.sidebar-navigation {left:0;}
.menu-s-l .main-menu {left:0;}
.menu-s-l #menu-s-button {left:0;}




/**/
.m-s-l-right-p {left: 9.8%; position: fixed;}
.m-s-l-right-p #menu-s-button {cursor: pointer; height: 10vh; position: fixed; left: 0; width: 9.8%; top: 45vh; z-index: 9999;}
.m-s-l-right-p #menu-s-button.open-s {cursor: pointer; height: 100vh; position: fixed;	left: 0; width: 9.8%; top: 0; z-index: 9999; background:var(--clr-m);}
.m-s-l-right-p #menu-s-button div {cursor: pointer; float: right; height: 25px; position: fixed; left: calc(50% - 15px); width: 30px; top: 50%; z-index: 9999;}



/*-------------------------------------------------------------------------*/
/*	2.	Category
/*-------------------------------------------------------------------------*/

@media (min-width: 1320px) {
#menu-s-button, #menu-s-button.open-s {width: 150px;}
.openm {left:150px;}
.openm .main-menu {width: 30%;}
.main-menu ul li {padding-left: 30px;}
}
@media (max-width:980px) {
.main-menu {width:50%;}
}
@media (max-width: 720px) {
.main-menu {width:60%;}
}
@media (max-width: 480px) {
.main-menu {width:100%;}
}

@media (max-width: 980px) {
.openm .main-menu {width: 50%;}
}
@media (max-width: 780px) {
	
.openm {left:100px;}
#menu-s-button, #menu-s-button.open-s {width: 100px}
.openm .main-menu {width: calc(100% - 115px);}
}
@media (max-width: 620px) {

#menu-s-button, #menu-s-button.open-s {width: 30px; top: 20px; height: 30px; right: 4%; left: auto; background: none; position: absolute;}
#menu-s-button div {top: 0}
.openm {left: 0px; position: relative;}
.openm .main-menu {width: calc(100% - 0px);}
.main-menu ul li a {font-size: 16px;}
}