/*------ MENU START ------ 

v09.10.23
#menu-s				= #menuslide
.sidebar-navigation	= .menu-slide-navigation
.main-menu			= .menu-s
.open-s				= .menu-s-button-open
.open-sm			= .menu-s-block-open
.back				= .menu-s-back


*/
.menu-slide-navigation {min-height:100%; overflow-x:hidden; width:0%; position:fixed; top:0; 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);}
.menu-slide-navigation a {text-decoration: none;}
.menu-s {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);}
.menu-s 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%;}
.menu-s ul ul {right:calc(200% + 10px); left:calc(100% + 10px);}
.menu-s 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;}


.menu-s ul li.menu-s-back{color:var(--clr-w); background-color:rgba(128, 153, 194, 0.2); padding:1em; color:var(--clr-m);}
.menu-s ul li.menu-s-back span {min-width:100%; cursor:pointer; color:var(--clr-m); text-transform:uppercase; display:flex; align-items:center;}
.menu-s ul li.menu-s-back span::before {content:"→"; font-family:"e-Ukraine Head"; color:var(--clr-m); font-size:1.2em; font-weight:700; line-height:0; margin-right:10px; display:inline-block; transform:rotate(-180deg);}
.menu-s ul li.menu-s-back span::after {display:none}
.menu-s ul li.menu-s-back:focus span, .menu-s ul li.menu-s-back:hover span, .menu-s ul li.menu-s-back:hover span::before {color:var(--clr-w);}

.menu-s 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;}
.menu-s ul li a:focus, .menu-s ul li a:hover {color:var(--clr-m);}
.menu-s ul .active {left:0; right:0; padding-bottom:70px;}
.menu-s ul .active > li > a {opacity:1;}
.menu-s ul.hidden > li > a {opacity:0;}
.menu-s ul ul .active {left:-calc(100% + 10px); right:-calc(100% + 10px);}

/*.menu-s ul li span:after {content: " +"; color:var(--clr-m);} */
/* !!!!!!!!!!!!!!!!!!!!!!! .menu-s 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: " +";} */
.menu-s ul li span {margin-top:2px;}
.menu-s ul li span::after {color:var(--clr-m); cursor:pointer; position:relative; top:2px; line-height:0; font-size:2em; content:"→"; font-family:"e-Ukraine Head"; font-weight:300;}

#menu-s-button {cursor:pointer; height:32px; width:32px; z-index:99900; position:relative; right:0px; top:0px;}
#menu-s-button.menu-s-button-open {}
#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.menu-s-button-open span:nth-child(1) {left:50%; top:18px; width:0;}
#menu-s-button.menu-s-button-open span:nth-child(2) {transform:rotate(45deg); top:16px;}
#menu-s-button.menu-s-button-open span:nth-child(3) {transform:rotate(-45deg); top:16px}
#menu-s-button.menu-s-button-open span:nth-child(4) {left:50%; top:18px; width:0;}

.menu-slide-navigation .menu-slide-logo {position:absolute; width:calc(40% - 2em); text-align:center; bottom:0vh; background:; padding:2em; right: 1em;}
.menu-slide-navigation .menu-slide-logo img {width: auto}

.menu-s-r {z-index:991;}
.menu-slide-navigation.menu-s-r {right:0; transform:translateX(100%);}
.menu-s-r .menu-s {transform:translateX(100%); right:0;}
.menu-s-r #menu-s-button {right:0;}
.menu-s-r.menu-s-block-open, .menu-s-block-open {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.menu-s-block-open .menu-s, .menu-s-block-open .menu-s{transform:translateX(0%);}

.menu-s-l {z-index:999; left:0}
.menu-slide-navigation.menu-s-l {left:0;}
.menu-s-l .menu-s {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.menu-s-button-open {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;}

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

@media (max-width: 620px) {
#menu-s-button.menu-s-button-open {width:30px; top:20px; height:30px; right:5%; left:auto; background:none; position:fixed;}
#menu-s-button div {top:0}
.menu-s ul li a {font-size:16px;}
}
@media (max-width: 480px) {
.menu-s {width:100%;}
}