/* 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%; /* background: #333; border-bottom: 3px solid #FD5025; */ }
.ace-responsive-menu li{ list-style: none; }
.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 { color: #FFF; }
.ace-responsive-menu > li > a { display: block; position: relative; margin: 0; border: 0px; padding: 12px 25px; text-decoration: none; font-size: 16px; color: #FFF; }
.ace-responsive-menu li a i { padding-right: 5px; color: #FF5737; }
.ace-responsive-menu > li > a i { font-size: 16px; text-shadow: none; color: #FF5737; }
.ace-responsive-menu li ul.sub-menu li a i { padding-right: 10px; }
.ace-responsive-menu li.menu-active > a { background: #090909; color:#fff; }
.ace-responsive-menu li .menu-active { position: relative; }
.ace-responsive-menu > li > a > .arrow:before {  
    margin-left: 15px;
    display: inline;
    font-size: 16px;
    font-family: FontAwesome;
    height: auto;
    content: "\f107";
    font-weight: 300;
    text-shadow: none;
    width: 10px;
    display: inline-block;
}
.ace-responsive-menu li ul.sub-menu li > a > .arrow:before { content: "\f105" !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 {  }
.ace-responsive-menu li ul.sub-menu > li { width: 185px; }
.ace-responsive-menu li ul.sub-menu li a { display: block; text-decoration: none; font-size: 13px; font-weight: normal; background: none; background: #090909; }

.ace-responsive-menu li ul.sub-menu li a:hover { background: #56bc01; }

.ace-responsive-menu > li > ul.sub-menu > li { position: relative; z-index: 999; }
.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: 185px; 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: FontAwesome;
    height: auto;
    content: "\f104";
    font-weight: 300;
    text-shadow: none;
}

/* Menu Toggle Btn
----------------------------------------*/
.menu-toggle { display: none; float: left; width: 100%; }
.menu-toggle .icon-bar { display: block !important; width: 28px; height: 4px; margin: 5px 0; background-color: #FFF!important; }
.menu-toggle #menu-btn:hover .icon-bar { background-color: #56bc01!important; }
.menu-toggle #menu-btn { float: right; padding: 6px; margin-right: -6px; border-radius: 3px; background: none!important; cursor: pointer; }
.hide-menu { display: none; }

/* Accordion Menu Styles
----------------------------------------*/
ul[data-menu-style="accordion"] { width: 250px; }
ul[data-menu-style="accordion"] > li { display: block; margin: 0; padding: 0; border: 0px; float: none !important; }
ul[data-menu-style="accordion"] > li:first-child { /* border-top: 1px solid #FD5025; */ }
ul[data-menu-style="accordion"] li ul.sub-menu > li { width: 100%; }
ul[data-menu-style="accordion"] > li > a > .arrow:before { float: right; content: "\f105"; }
ul[data-menu-style="accordion"] li.menu-active > a > .arrow:before { content: "\f107" !important; }
ul[data-menu-style="accordion"] > li > ul.sub-menu { position: static; }
ul[data-menu-style="accordion"] > li > a i { padding-right: 10px; color: #FF5737; }
ul[data-menu-style="accordion"] > li > ul.sub-menu > li ul.sub-menu { position: static; }
ul[data-menu-style="accordion"] > li > ul.sub-menu > li ul.sub-menu > li ul.sub-menu { position: static; }
ul[data-menu-style="accordion"] > li { /* border-bottom: 1px solid #242424; */ }
ul[data-menu-style="accordion"] li a:hover { background: #272727 !important; }
ul[data-menu-style="accordion"] ul.sub-menu li.menu-active > a > .arrow:before { content: "\f107" !important; }

/* Vertical Menu Styles
----------------------------------------*/
ul[data-menu-style="vertical"] { width: 280px; z-index: 99999; }
ul[data-menu-style="vertical"] > li { float: none; }
ul[data-menu-style="vertical"] > li:first-child { /* border-top: 2px solid #FD5025; */ }
ul[data-menu-style="vertical"] li ul.sub-menu > li { width: 100%; }
ul[data-menu-style="vertical"] > li > a > .arrow:before { float: right; content: "\f105"; }
ul[data-menu-style="vertical"] > li.menu-active { position:relative; }
ul[data-menu-style="vertical"] > li > ul.sub-menu { position: absolute; left:280px; top:0; width:200px; z-index: 99999; }
ul[data-menu-style="vertical"] > li > a i { padding-right: 10px; color: #FF5737; }
ul[data-menu-style="vertical"]> li > ul.sub-menu > li ul.sub-menu { position: absolute; width:200px; left: 200px; z-index: 99999; }
ul[data-menu-style="vertical"] > li > ul.sub-menu > li ul.sub-menu > li ul.sub-menu { position: absolute; width:200px; left: 200px; z-index: 99999; }
ul[data-menu-style="vertical"] > li { /* border-bottom: 1px solid #242424; */ }
ul[data-menu-style="vertical"] li a:hover { background: #008001!important; }

/* 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 a { padding: 14px 22px 13px; }
	.ace-responsive-menu li ul.sub-menu { text-align: left; }
	.ace-responsive-menu li ul.sub-menu li a { padding: 12px 22px; }	
}

@media screen and (max-width: 1199px) {
    .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: 45px; background: rgba(28,28,28, 0.8); }
    .ace-responsive-menu > li { /* border-bottom: 1px solid #242424; */ float: none; text-align: left; }   
    .ace-responsive-menu li a:hover { background: #090909; }
	/* .ace-responsive-menu > li:first-child { border-top: 2px solid #FD5025; } */
    .ace-responsive-menu > li > a i { padding-right: 10px; color: #FF5737; }
    .ace-responsive-menu > li > a > .arrow:before { float: right; content: "\f105"; }
    li.menu-active > a > .arrow:before { content: "\f107" !important; }
    .ace-responsive-menu li ul.sub-menu > li { width: 100%; }
	.ace-responsive-menu li ul.sub-menu li a { padding: 12px 50px; }
    .ace-responsive-menu li ul.sub-menu li ul.sub-menu li a { padding-left: 30px; }  
    .ace-responsive-menu li ul.sub-menu li ul.sub-menu li ul.sub-menu li a { padding-left: 50px; }  
    .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: "\f107" !important; }	
	.sub-menu li a { border-radius: 0!important; }
}