/* Menu Styles */

/* Init Logic */
.menu-toggle-button{padding:1em;cursor:pointer;padding: 6px 13px;  margin-top: 10px;}
.menu-toggle-button{display:none;background: #7ac143; color:#fff}
.menu-toggle-button.active{color:#ffffff;background: #333;}

ul.menu-list{list-style:none;position:relative;display:inline-table;padding:0px;margin:0px;height:100%}
ul.menu-list li{float:right;position:relative;text-align:right;}
ul.menu-list li a{display:inline-block;}
ul.menu-list li a{display:block;}

/* Handling Submenu */
ul.menu-list ul{display:none;padding:0px;margin:0px;position:absolute;top:100%;right:0px !important; left:auto !important;list-style:none;z-index: 700}
ul.menu-list ul li{position:relative;float:none;padding:0px;margin:0px;}
ul.menu-list ul ul{position:absolute;top:0%;right:100% !important; left:auto !important;z-index: 700} 
ul.menu-list li:hover>ul{display:inline-block;}
/* End Init Logic */

/* Style */

ul.menu-list li:hover>ul{background:#fff!ie;} /* Fix for IE7 */

/* Submenu Expand Icon */
ul.menu-list li.has-submenu>a>span.menu-expand{padding-right:6px;margin-top:3px; float:left; display: inline; padding-left:0px;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);/*line-height:2.2em;font-size: 0.6em;*/} /* All levels */
  
ul.menu-list>li.has-submenu>a>span.menu-expand{float:none\9; } /* Fix for IE9 and below */
ul.menu-list>li.has-submenu>a>span.menu-expand{ color:#7ac143} /* Level 1 */
ul.menu-list>li.has-submenu>a>span.menu-expand:after{content: "\f107";} /* Level 1 */
ul.menu-list li li.has-submenu>a>span.menu-expand{} /* Level 2 */
ul.menu-list li li.has-submenu>a>span.menu-expand:after{content: "\f104";} /* Level 2 */

 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  /* IE10+ specific styles go here */  
  ul.menu-list li.has-submenu>a>span.menu-expand{float:none}
  
}


/* You can manage with of elements by width of a-tag */
ul.menu-list li a{color:#333;text-decoration:none;padding:5px 10px;} /* All levels */
ul.menu-list li>a{} /* Level 1 */
ul.menu-list li li>a{width:190px; font-size:14px;} /* Level 2 */
ul.menu-list li li li>a{} /* Level 3 */

/* First Level*/
ul.menu-list>li{ padding:0px 0px 0 0}
ul.menu-list>li>a{padding: 5px 18px;}
ul.menu-list>li:hover{/*background: rgba(15, 138, 210, 1);*/ }
ul.menu-list>li:hover > a{}
.navbar-right>ul#demo-menu>li:hover>a{color:#fff;}
ul.menu-list>li:hover>a{color:#7ac143;}
ul.menu-list>li>a:hover{}
/* End First Level*/

/* Second Level*/
ul.menu-list>li>ul{border:0;}
ul.menu-list>li>ul>li{background:#7ac143;}
ul.menu-list>li>ul>li>a{position:relative; color:#FFF;}
ul.menu-list>li>ul>li:hover{background:#474b4f;}
ul.menu-list>li>ul>li:hover>a{color:#FFF;}
ul.menu-list>li>ul>li>a:hover{}
/* End Second Level*/

/* Third Level*/
ul.menu-list>li>ul>li>ul{/*border:1px solid #f2f2f2;*/}
ul.menu-list>li>ul>li>ul>li{background:#7ac143;}
ul.menu-list>li>ul>li>ul>li>a{width: 190px;}
ul.menu-list>li>ul>li>ul>li:hover{background:#474b4f}
ul.menu-list>li>ul>li>ul>li:hover>a{}
ul.menu-list>li>ul>li>ul>li>a:hover{}
/* End Third Level*/

/* four Level*/
ul.menu-list>li>ul>li>ul>li>ul{/*border:1px solid #f2f2f2;*/}
ul.menu-list>li>ul>li>ul>li>ul>li{background:#7ac143;}
ul.menu-list>li>ul>li>ul>li>ul>li>a{width: 246px;}
ul.menu-list>li>ul>li>ul>li>ul>li:hover{background:#474b4f}
ul.menu-list>li>ul>li>ul>li>ul>li:hover>a{}
ul.menu-list>li>ul>li>ul>li>ul>li>a:hover{}
/* End Third Level*/







/* End Menu Styles */


/* RESPONSIVE MEDIA QUERIES */
@media screen and (max-width: 767px){

/* Menu Styles */

/* Init Logic */
.menu-toggle-button{display:block;float:right ; position:absolute; top:5px; left:0px; right:auto} 
.show-for-devices{display:block!important;opacity: 1 !important;}

ul.menu-list{display:none;opacity: 0;-webkit-transition: opacity 1s;/*background:#FFF;*/}

ul.menu-list li{clear:both;float:none;}

/* Handling Submenu */
ul.menu-list ul{display:none;position:relative;}
ul.menu-list ul li{}
ul.menu-list ul ul{position:relative;top:100%;left:0% !important; right:auto !important}
ul.menu-list li:hover>ul{display:none;}
/* End Init Logic */

/* Style */

ul.menu-list li:hover>ul{background:#fff!ie;} /* Fix for IE7 */

/* Submenu Expand Icon */
ul.menu-list li.has-submenu>a>span.menu-expand{font-size: 1em;padding:5px 10px;line-height:1em;position:absolute;right:0;z-index: 700;position:absolute;top:0;right:auto !important; left:2px !important} /* All levels */
ul.menu-list>li.has-submenu>a>span.menu-expand{} /* Level 1 */
ul.menu-list li li.has-submenu>a>span.menu-expand{padding:0.4em 0.5em;margin-top:0;} /* Level 2 */
ul.menu-list li li.has-submenu>a>span.menu-expand:after{content:'\f107'; padding-right:10px;} /* Level 2 */

/* You can manage with of elements by width of a-tag */
ul.menu-list li a{color:#333;position:relative} /* All levels */
ul.menu-list li>a{} /* Level 1 */
ul.menu-list li li>a{width:auto;} /* Level 2 */
ul.menu-list li li li>a{} /* Level 3 */

/* First Level*/
ul.menu-list>li{margin:0px;border:none;border-bottom:1px solid #6fab26;}
ul.menu-list>li>a{position:relative;}
ul.menu-list>li:hover{background:#474b4f;}
ul.menu-list>li:hover>a{color:#fff;}
ul.menu-list>li>a:hover{}
/* End First Level*/

/* Second Level*/
ul.menu-list>li>ul{border:none;}
/*ul.menu-list>li>ul>li{padding-left:5px;}*/
ul.menu-list>li>ul>li>a{}
ul.menu-list>li>ul>li:hover{}
ul.menu-list>li>ul>li:hover>a{}
ul.menu-list>li>ul>li>a:hover{}
/* End Second Level*/

/* Third Level*/
ul.menu-list>li>ul>li>ul{border:none;  }
ul.menu-list>li>ul>li>ul>li{ background:#383b3e; padding:0 5px}
ul.menu-list>li>ul>li>ul>li>a{}
ul.menu-list>li>ul>li>ul>li:hover{background:#5d8b26;}
ul.menu-list>li>ul>li>ul>li:hover>a{}
ul.menu-list>li>ul>li>ul>li>a:hover{}
/* End Third Level*/ 

/* End Style */


/* End Menu Styles */

#cssmenu{width:100%;float:none;}
ul.menu-list > li{ padding:0px !important}

}