/* ---------- Google Font ---------- */
@import url(../../../fonts.googleapis.com/css@family=Open+Sans_3A400,400italic,600,700,800);

/* basic */
.mobile-menu {
display: none;
padding: 11px;
/*background: #3E4156;*/
color: #999;
text-transform: uppercase;
font-weight: 600;
}

/*body{
  background: #fff;
  font: 14px "Open Sans", Helvetica, Arial, sans-serif;
}
*/
nav{
  /*background-color: #3E4156;*/
}
.menu{ display: block;}
.menu li{
  display: inline-block;
  position: relative;
  z-index: 100;
}

.menu li a{
 font-weight: 600;
	text-decoration: none;
	padding: 14px;
	display: block;
	color: #626262;
	transition: all 0.2s ease-in-out 0s;
	line-height: 4;
	outline:none !important;
}

.menu li a:hover,
.menu li:hover > a{
  color: #31b944;
  background: ;
   -moz-outline:none;
}

ul{ margin-bottom:0px !important;}

/* hide the second level*/
.menu ul{
  display: none;
  margin: 0;
  padding: 0;
  width: 150px;
  position: absolute;
  top: 43px;
  left: 0px;
  background: #9CA3DA;
}

/* display second level on hover*/
.menu li:hover > ul{
  display: block;
}
.menu ul li{
  display: block;
  background: none;
  margin: 0;
  padding: 0;
}

.menu ul li a{
  font-size: 12px;
  display: block;
  border-left: 3px solid #fff;
   -moz-outline:none;
  
}

.menu ul li a:hover,
.menu ul li:hover > a{
  background-color: #9CA3DA;
  border-left: 3px solid #fff;
}

/* change level 3 menu positions */
.menu ul ul {left: 149px;
	top: 0px;
}


@media (max-width: 992px) {
	.menu li a{ padding:10px;}		
}
	
@media (max-width: 767px) {
	
	.menu li a{ line-height:1.5;}
 
    .menu{display:none; }
 
    .mobile-menu{display:block;
    margin-top:0px;}
     
    nav{margin:0;padding: 0;
    background:none;}
    ul{ margin: 0;padding: 0;}
    .menu li{display:block;
    margin:0;}
     
    .menu li a {background:#ffffff;
    color:#797979;
    border-top:1px solid #e0e0e0;
    border-left:3px solid #ffffff;}
     
    .menu li a:hover, .menu li:hover > a{
    background:#59ABE3;
    color:#fff;
    border-left:3px solid #fff;}
     
    /*level 2 and 3 - make same width as all items*/
    .menu ul {
      display:block;
      position:relative;
      top:0;
      left:0;
      width:100%;}
     
    .menu ul ul {left:0;}
 
}
/*end media queries*/
