/* 
Ace Responsive Menu Plugin
Version: 1.0
Author: Samson Onna
E-mail: samson3d@gmail.com
Website: www.webthemez.com
----------------------------------------*/
/* Import Fonts
----------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Roboto);

/* Ace Responsive Menu
----------------------------------------*/
a { text-shadow: none; color: #0d638f; }
ul { margin: 0px; padding: 0px; }
.ace-responsive-menu { list-style: none; margin: 0; padding: 0; background: #ffffff; position: absolute; right: 10px; z-index: 99; width: 90%; white-space:nowrap; font-family: 'Roboto', sans-serif; /* 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: #000000; }
.ace-responsive-menu > li > a { display: block; position: relative; margin: 0; border: 0px; padding: 5px 20px 5px 12px; text-decoration: none; font-size: 14px; font-weight: 300; color: #000000; }
.ace-responsive-menu li a i { padding-right: 5px; color: #FF5737; }
.ace-responsive-menu > li > a i { font-size: 16px; text-shadow: none; color: #84c225; }
.ace-responsive-menu li.menu-active > a { background: #ffffff; color: #000000; }
.ace-responsive-menu li ul.sub-menu li a i { padding-right: 10px; color: #FF0000 !important; }
.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: " \276F"; font-weight: 300; text-shadow: none; width: 10px; display: inline-block; transform: rotate(90deg); }
.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; z-index: 999; }
.ace-responsive-menu li ul.sub-menu { background: #ffffff; }
.ace-responsive-menu li ul.sub-menu > li { width: 185px; }
.ace-responsive-menu li ul.sub-menu li a { display: block; margin: 0px 0px; padding: 5px 20px 5px 38px; text-decoration: none; font-size: 13px; font-weight: normal; background: none; }
.ace-responsive-menu > li > ul.sub-menu > li { position: relative; }
.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 { float: left; z-index: 999; position: fixed; width: 30px; right: 0px; top:6px; }
.menu-toggle h3 { float: left; color: #FFF; padding: 0px 10px; font-weight: 600; font-size: 16px; }
.menu-toggle .icon-bar { display: block !important; width: 18px; height: 2px; background-color: #F5F5F5 !important; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); margin: 3px; }
.menu-toggle .icon-bar:hover { background-color: #F5F5F5 !important; }
.menu-toggle #menu-btn { float: right; background: #202020; border: 1px solid #0C0C0C; padding: 8px; border-radius: 5px; cursor: pointer; margin: 10px; }
.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: 2px 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: 200px; }
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: 200px; top: 0px; width: 200px; }
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; }
ul[data-menu-style="vertical"] > li > ul.sub-menu > li ul.sub-menu > li ul.sub-menu { position: absolute; width: 200px; left: 200px; }
ul[data-menu-style="vertical"] > li { border-bottom: 1px solid #242424; }
ul[data-menu-style="vertical"] li a:hover { background: #272727 !important; }

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

@media screen and (max-width: 768px) {
    .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 > li { border-bottom: 1px solid #242424; float: none; } 
    .ace-responsive-menu > li:first-child { border-top: 2px solid #FD5025; } 
    .ace-responsive-menu > li > a > .arrow:before { float: right; content: " \276F"; font-weight: 300; text-shadow: none; width: 10px; display: inline-block; transform: rotate(90deg); }
    li.menu-active > a > .arrow:before { content: " \276F"; font-weight: 300; text-shadow: none; width: 10px; display: inline-block; transform: rotate(90deg); }
    .ace-responsive-menu li ul.sub-menu > li { width: 100%; }
    .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: " \276F"; font-weight: 300; text-shadow: none; width: 10px; display: inline-block; transform: rotate(90deg); }
}