@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,300);

#navbar{
	background-color: #56595C; /*background of menu bar (default state)*/
	width: 100%;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-size: 0.8rem;
	text-transform: lowercase;
	letter-spacing: 1px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #00cc00;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #00cc00;
	position: relative;
	z-index: 100;	/*z-index: 1000;*/
}

#nav-inner {
	margin:0px auto !important;
	}

a {text-decoration: none;}

.toggleMenu {
    display:  none;
   /*background-color: #56595C;*/
    padding: 10px 15px;
    color: #fff;
}
.nav {
    list-style: none;
     *zoom: 1;
     background-color: #56595C;
	 
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    /*width: 9em;
	margin-top: -1px;*/
}
.nav a {
	color:#fff;
	margin-top: 0px;
	padding:5px;
	white-space: nowrap;
	font-weight: 100;
	border: solid 10px #56595C
}

.nav a:hover {
	/*text-decoration: underline !important;*/
}

.nav li {
    position: relative;
}
.nav > li {
    float: left;
    /*border-top: 1px solid #104336;*/
}
.nav > li > .parent {
   /* background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right; */
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    /*position: absolute;
    left: -9999px;*/
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;
    background-color:  #56595C;
    position: relative;
    z-index:100;
	/*width: 110px;*/
    /*border-top: 1px solid #175e4c;*/
}
.nav li li li a {
    background-color: #5c5e61;
    z-index:200;
    border-top: 1px solid #1d7a62;
}

.current a {
	background-color: #00cc00;
	color: #56595C;
	font-weight: 700;
	border: solid 10px #00cc00
	}
.current a:after {    
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #56595C;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
/* CSS TRANSITIONS – SUBMENUS */

.sub-menu-parent {position: relative}

.sub-menu { 
  visibility: hidden; /* hides sub-menu */
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  /*width: 100%;*/
  transform: translateY(-2em);
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.sub-menu-parent:hover .sub-menu {
  visibility: visible; /* shows sub-menu */
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}

/* presentational */
/*body { padding: 2%; font: 18px/1.4 sans-serif; }

nav a { color: #E00; display: block; padding: 0.5em 1em; text-decoration: none; }
nav a:hover { color: #F55; }
nav ul,
nav ul li { list-style-type: none; padding: 0; margin: 0; }

nav > ul { background: #EEE; text-align: center; }
nav > ul > li { display: inline-block; border-left: solid 1px #aaa; }
nav > ul > li:first-child { border-left: none; }

.sub-menu {
  background: #DDD;
}*/
   

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
	.container {
		/*width: 100%;*/
		position: relative;
		}
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("../../../../../themes/mhdesign/css/images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
    .sub-menu {
        visibility:visible;
        opacity: 100;
        transform: translateY(0em);
    }

	

}