/* ---------- Google Font ---------- */
/* @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800); */
/* @import url('http://fonts.googleapis.com/css?family=Basic&subset=latin,latin-ext'); */

/* basic */
.mobile-menu { display: none; padding: 11px; background: grey; color: #ffffff; text-align: left; text-decoration: none; }

/* body{  background: #fff; font: 15px 'Basic', sans-serif; }*/


nav{ background-color: grey; }
.menu { font: 15px Verdana, Tahoma, sans-serif; display: block; line-height: 150%;}
.menu li{ display: inline-block; position: relative; z-index: 100; }
.menu li a{ text-decoration: none; padding: 12px 25px 12px 25px; display: block; color: #fff; transition: all 0.2s ease-in-out 0s;}

.menu li a:hover,
.menu li:hover > a{ color: #fff; background: #bbb;}

/* hide the second level*/
.menu ul{ display: none; margin: 0px; padding: 0px; width: 200px; position: absolute;
  top: 46px; left: 0px; background: grey; text-transform: lowercase; text-align: left; }

/* display second level on hover*/
.menu li:hover > ul{ display: block;}
.menu ul li{display: block; background: none; margin: 0; padding: 0px;}
.menu ul li a{display: block;border-left: 3px solid #fff;}
.menu ul li a:hover,
.menu ul li:hover > a{background-color: #bbb;border-left: 3px solid #fff;}

/* change level 3 menu positions */
.menu ul ul { left: 149px; top: 0px;}


@media (max-width: 1100px) {
.menu li a{ padding: 10px 20px 10px 20px;}
}

@media (max-width: 1000px) {
.menu li a{ padding: 10px 12px 10px 12px;}
.menu { font-size: 13px;}
ul.menu {padding: 0 0 0 12px;}
}

@media (max-width: 800px) {
.menu li a{ padding: 11px 15px 11px 15px;}
.menu { font-size: 12px;}
ul.menu {padding: 0 0 0 10px;}
}

@media (max-width: 767px) {
    .menu { display:none; text-align: left; }
    .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:before { content: "\2022  "; }      
    .menu li a { background:#ffffff; padding: 12px 25px 12px 12px;
    color:#797979; border-top:1px solid #e0e0e0; }
    .sub-menu li a:before { content: "\25cb  "; color: black;}   
    .sub-menu li a {padding-left: 20px;}    
    .menu li a:hover, .menu li:hover > a{background:grey;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*/



/* menu bottom */
.menuBot {font: 14px;display: block;line-height: 150%;padding: 0px;margin: 0px;}
.menuBot li{display: inline-block; position: relative; z-index: 100;}
.menuBot li a{text-decoration: none;padding: 10px 20px 10px 20px;display: block;color: grey;}
.menuBot li a:hover, .menuBot li:hover > a{text-decoration: underline; background-color: #eee;}

@media (max-width: 767px) { 
    .menuBot li{display: block;}
}