/*Кастомизируем скролбар*/
custom-menu ::-webkit-scrollbar-button{background-image:url(''); background-repeat:no-repeat; width:2px; height:0px;}
custom-menu ::-webkit-scrollbar-track{background-color:#32312e; box-shadow:0px 0px 3px #000 inset;}
custom-menu ::-webkit-scrollbar-thumb{-webkit-border-radius: 3px; border-radius: 3px; background-color:#FFF; box-shadow:0px 1px 1px #000 inset; background-position:center; background-repeat:no-repeat; cursor:pointer;}
custom-menu ::-webkit-resizer{background-image:url(''); background-repeat:no-repeat; width:2px; height:0px;}
custom-menu ::-webkit-scrollbar{width:2px;}
/*Кастомизируем скролбар*/

*{outline:0px solid;}
section.vc{width:100%; height:100vh;}

html > body, html > body > *, custom-menu > close-menu, custom-menu > nav > a, custom-menu > nav > sub-menu > a, custom-menu > nav > sub-menu > a::after, custom-menu > nav > sub-menu > div > a, html > body > div, [open-nav] > body > div, custom-menu + #open-menu{transition:all .5s;}

custom-menu{display:block; width:100%; max-width:350px; height:100vh; max-height:100%; background:#310754; filter:blur(0) !important; position:fixed; top:0px; transition:top, translateX .5s !important; opacity:1 !important; z-index:500; transform:translateX(-100%);}
[open-nav] custom-menu{box-shadow:3px 0px 5px rgba(0,0,0,0.35);}	
	custom-menu > nav{display:flex; flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:flex-end; width:100%; height:100%; overflow-y:auto; overflow-x:hidden; padding:25px 0px;}
		custom-menu > nav > span{display:block; padding:10px 20px; color:#000; background:#FFF; font-size:15px; width:100%; text-align:center;}
		custom-menu > nav > a, custom-menu > nav > sub-menu > a, custom-menu > nav > sub-menu > div > a{display:block; width:100%; padding:10px 25px; color:#FFF; font-size:17px; text-decoration:none;}
			custom-menu > nav > a:hover, custom-menu > nav > sub-menu:hover > a, custom-menu > nav > sub-menu > div > a:hover{background:rgba(0,0,0,0.15);}
			custom-menu > nav > a > i, custom-menu > nav > sub-menu > a > i, custom-menu > nav > sub-menu > div > a > i{width:30px; text-align:center;}
		custom-menu > nav > sub-menu{width:100%; position:relative;}
		custom-menu > nav > sub-menu{display:flex; align-items:flex-start; justify-content:flex-start; flex-direction:column;}
			custom-menu > nav > sub-menu > a{position:relative; order:2;}
			custom-menu > nav > sub-menu > a::after{content:"\f105"; font-family:"Font Awesome 5 Pro"; font-weight:bold; position:absolute; top:0px; right:0px; display:flex; align-items:center; justify-content:center; height:100%; color:#FFF; font-size:20px; padding:0px 10px 0px 10px; }
			custom-menu > nav > sub-menu[open] > a{background:rgba(0,0,0,0.2);}
			/*custom-menu > nav > sub-menu:hover > a::after, */custom-menu > nav > sub-menu[open] > a::after{transform:rotate(90deg);}
			custom-menu > nav > sub-menu > div{width:100%; background:rgba(0,0,0,0.1); order:1;}
				custom-menu > nav > sub-menu > div > a{font-size:15px;}
	custom-menu > close-menu{position:relative; z-index:2; width:50px; height:50px; border:5px solid rgba(34,34,34,.3); border-radius:100px; display:flex !important; align-items:center; justify-content:center; opacity:0; visibility:hidden; position:fixed; left:calc(100% + 25px); bottom:-100px; cursor:pointer; background:rgba(75,20,125,1);}
	[open-nav] custom-menu > close-menu{opacity:1; visibility:visible; bottom:25px;}
	/*custom-menu > close-menu:hover{transform:rotate(360deg);}*/
@media(min-width:500px){
	custom-menu > close-menu:hover{background:#FFF; border-radius:100px; color:#000; border-color:rgba(34,34,34,1);}
		custom-menu > close-menu::after, custom-menu > close-menu::before{content:""; display:block; background:#FFF; transform:rotate(0deg); position:absolute; width:20px; height:2px; border-radius:6px;}
		custom-menu > close-menu::after{transform:rotate(45deg);}
		custom-menu > close-menu::before{transform:rotate(-45deg);}
		custom-menu > close-menu:hover::after, custom-menu > close-menu:hover::before{background:#000;}
}

custom-menu + #open-menu{display:flex; align-items:center; justify-content:center; flex-direction:column; position:fixed; bottom:25px; left:25px; z-index:500; color:#FFF; background:none; border:none; filter:drop-shadow(2px 2px 3px rgba(0,0,0,0)); cursor:pointer; opacity:1 !important;}
[open-nav] custom-menu + #open-menu{bottom:-100px;}
	custom-menu + #open-menu:hover{filter:drop-shadow(2px 2px 3px rgba(0,0,0,0.35));}
	custom-menu + #open-menu > i{position:relative; z-index:2;  width:50px; height:50px; border:5px solid rgba(34,34,34,.3); border-radius:100px; display:flex !important; align-items:center; justify-content:center; filter:drop-shadow(0px 0px 0px rgba(75,20,125,1)); font-size:20px; background:rgba(75,20,125,1); transition:all .3s linear;}
	custom-menu + #open-menu:hover > i{background:#FFF; border-radius:100px; color:#000; border-color:rgba(34,34,34,1);}
	custom-menu + #open-menu > span{display:block; position:absolute; left:90%; background:rgba(75,20,125,1); padding:5px 0px; color:#FFF; border-radius:0px 99px 99px 0px; overflow:hidden; width:0px; transition:all .3s; z-index:1;}
	custom-menu + #open-menu:hover > span{width:150px; padding:5px 15px; text-align:center;}
@media(min-width:500px){
html{overflow-x:hidden;}
html[open-nav]{overflow:hidden; max-height:100vh;}
	html[open-nav] > body{transform:translateX(350px);}
		html[open-nav] > body > close-menu{display:block; width:100%; height:100%; position:absolute; top:0px; left:0px; cursor:pointer;}
}
[open-nav] > body > *{/*filter:blur(10px);*/ opacity:0.2;}
@media(max-width:500px){
[open-nav] custom-menu{transform:translateX(0%);}
custom-menu + #open-menu{bottom:10px; left:10px;}
custom-menu{padding-bottom:30px; transition:all .5s !important;}
	custom-menu > close-menu{top:auto; bottom:0px; left:0px; width:100%; height:30px; background:#FFF; border:none; border-radius:0px; display:flex; align-items:center; justify-content:center; position:absolute; color:#000; transition:all 0s;}
		custom-menu > close-menu::after{display:none;}
		custom-menu > close-menu::before{content:"Закрыть меню"; transform:rotate(0); position:static; width:auto; height:auto;}
	custom-menu > nav{padding-bottom:45px;}
}