/* Ace Responsive Menu Plugin, Version: 1.0, Author: Samson Onna, E-mail: samson3d@gmail.com */

.ace-responsive-menu { list-style: none; margin: 0; padding: 0; width:100%; }
.ace-responsive-menu li{ list-style: none; line-height: 21px; }
.ace-responsive-menu li ul { display:none; }
.ace-responsive-menu > li { display: block; margin: 0; padding: 0; border: 0px; /* float: left; */ }
.ace-responsive-menu li a { font-weight: 700; }
.ace-responsive-menu li a:hover { transition:all 0.5s ease; }
.ace-responsive-menu > li > a { display: block; position: relative; margin: 0; border: 0px; padding: 10px 18px; text-decoration: none; }
.ace-responsive-menu li a i { padding-right: 5px; color: #1a1a1a; }
.ace-responsive-menu > li > a i { font-size: 16px; text-shadow: none; color: #1a1a1a; }
.ace-responsive-menu li ul.sub-menu li a i { padding-right: 10px; }
.ace-responsive-menu li .menu-active { position: relative; }
.ace-responsive-menu > li > a > .arrow:before { 
	vertical-align: -3px;
    margin-left: 15px;
    display: inline;
    font-size: 17px;
    font-family: "Material Symbols Outlined";
    height: auto;
    content: "\e5cf";
    text-shadow: none;
    display: inline-block;
}
.ace-responsive-menu li ul.sub-menu li > a > .arrow:before { content: "\e5ce" !important; }
.ace-responsive-menu > li > ul.sub-menu { display: none; list-style: none; clear: both; margin: 0; position: absolute; }
.ace-responsive-menu li ul.sub-menu { z-index: 9999; }
.ace-responsive-menu li ul.sub-menu > li { text-align: left; }
.ace-responsive-menu li ul.sub-menu li a { display: block; text-decoration: none; font-weight: normal; background: none; background: #1b1b1b; color: #FFF; }
.ace-responsive-menu li ul.sub-menu li a:hover { background: #a78c52; }

.ace-responsive-menu > li > ul.sub-menu > li { position: relative; z-index: 9999; }
.ace-responsive-menu > li > ul.sub-menu > li ul.sub-menu { position: absolute; left: 185px; top: 0px; display: none; list-style: none; }
.ace-responsive-menu > li > ul.sub-menu > li ul.sub-menu > li ul.sub-menu { position: absolute; left: 210px; top: 0px; display: none; list-style: none; }
.ace-responsive-menu > li > ul.sub-menu li > a > .arrow:before {
    float: right;
    margin-top: 1px;
    margin-right: 0px;
    display: inline;
    font-size: 16px;
    font-family: "Material Symbols Outlined";
    height: auto;
    content: "\e5cf";
    font-weight: 300;
    text-shadow: none;
}

/* Menu Toggle Btn
----------------------------------------*/
.menu-toggle { display: none; text-align: center; }
.menu-toggle #menu-btn { float: right; padding: 8px 0 8px 15px; cursor: pointer; background: none; }
.menu-toggle .icon-bar { display: block!important; width: 28px; height: 4px; margin: 5px auto; background: #3b3b3b; transition:all 0.5s ease; }
.menu-toggle:hover .icon-bar  { background: #a78c52!important; }
.hide-menu { display: none; }


/* Responsive Menu Styles
----------------------------------------*/
/*Note: change the max-width asper your requirment and change the same in aceResponsiveMenu({resizeWidth: "768" }) function*/


@media screen and (min-width: 1200px) {
	.ace-responsive-menu > li { display: inline-block; }
	.ace-responsive-menu li a { padding: 6px 25px; margin-bottom: 1px; }
	.ace-responsive-menu li a:hover { color: #a78c52; }
	
	.ace-responsive-menu li ul.sub-menu > li { min-width: 270px; }
	.ace-responsive-menu li ul.sub-menu > li > a { margin-bottom: 0; padding: 15px 25px!important; }
	
	.ace-responsive-menu li ul.sub-menu > li:first-child a { border-top-left-radius: 15px; border-top-right-radius: 15px; }
	.ace-responsive-menu li ul.sub-menu > li:last-child a { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
	
	.ace-responsive-menu li.menu-active > a { color: #a78c52; }
}

@media screen and (max-width: 1199px) {
	ul#respMenu { display: none; }
    .demo { width:96%; padding:2%; }
    ul[data-menu-style="vertical"], ul[data-menu-style="accordion"], ul[data-menu-style="vertical"] li ul.sub-menu { width: 100% !important; } 
    .ace-responsive-menu { margin-top: 48px; width:100%; }
	.ace-responsive-menu > li > a { color: #FFF!important; background: #1b1b1b; padding: 12px 40px 14px; }	
	.ace-responsive-menu > li > a.przesun { padding-left: 55px; }
    .ace-responsive-menu li a:hover { background: #ae9371; }
	.ace-responsive-menu li.menu-active > a { background: #000; color: #FFF; }
    .ace-responsive-menu > li > a i { padding-right: 10px; color: #FF5737; }
    .ace-responsive-menu > li > a > .arrow:before { float: right; content: "\e5cf"; }
    li.menu-active > a > .arrow:before { content: "\e5ce" !important; }
    .ace-responsive-menu li ul.sub-menu > li { width: 100%; }
	
	.ace-responsive-menu > li:first-child a { border-top-left-radius: 15px; border-top-right-radius: 15px; }
	.ace-responsive-menu > li:last-child a { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
	
	.ace-responsive-menu li ul.sub-menu > li > a { padding: 12px 40px; background: #272727; }

    .ace-responsive-menu > li > ul.sub-menu { position: static; }
    .ace-responsive-menu > li > ul.sub-menu > li ul.sub-menu { position: static; }
    .ace-responsive-menu > li > ul.sub-menu > li ul.sub-menu > li ul.sub-menu { position: static; }
    .ace-responsive-menu li ul.sub-menu li.menu-active > a > .arrow:before { content: "\e5ce" !important; }	
	.sub-menu li a { border-radius: 0!important; }
}

@media screen and (min-width: 600px) and (max-width: 1199px) {	
	.ace-responsive-menu { min-width: 420px; }
}

@media screen and (max-width: 599px) {	
	#respMenu { z-index: 9999; }
}