@media (min-width: 767px) {
 nav {
display: block;
background: #;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.menu {
display: block;
margin-bottom: 0px;
padding: 0px;
margin: 0px;
}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
float:left;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
 transition: 0.3s ease;
font-weight: 600;
text-decoration: none;
padding:12px 50px;
display: block;
color: #0d0f09;
transition: all 0.2s ease-in-out 0s;
font-size:18px;
border-right: 2px solid #fec600;
    border-bottom: 2px solid #fec600;
}

.menu li a:hover, .menu li:hover>a {
color: #0d0f09;
background: #fec600; 
border-bottom:2px solid #0000ff;
border-top-left-radius: 5px;
}



.menu li:last-child a {
border-right: 0px solid #cccc23;
}

.menu ul {
visibility:hidden;
opacity: .9;
margin: 0;
padding: 0;
width:100%;
position: absolute;
left: 0px;
 background: #000149;
z-index: 99; /* transform: translate(0, 20px); */
transition: all 0.2s ease-out;
}
 .menu .page-services.sub-active ul {
min-width: 540px ;
visibility:visible !important;
}
 .menu .page-services.sub-active ul li ul {
min-width:100%px !important;
visibility:visible !important;
width:100% !important;
}

.menu .page-services ul {

}
.menu .page-services ul{display: flex !important;}
.menu .page-services ul ul {
    display: inherit !important;
}




.menu .page-services ul li ul {
min-width: 100% !important;
}
.menu .sub-active ul li ul {
min-width: 100% !important;
}
.sub-active a{
color: #fff;
background: #fec600;
border-bottom: 2px solid #0000ff !important;
}   
  
li.sub-active.page-commercial a { border-bottom: 2px solid #0000ff !important;}
li.page-commercial a { border: 0px !important;}    
li.sub-active.page-residential a {border-bottom: 2px solid #0000ff !important;}
li.active.sub-active.page-transfer-stations    a {border-bottom: 2px solid #0000ff !important;}  
     
     
     

li.active.sub-active.page-commercial a {
color: #fff;
border-bottom: 0px solid #0000ff !important;
}
li.page-residential a {
color: #fff;
border-bottom: 0px solid #0000ff !important;
}

li.page-recycling a {
color: #fff;
border-bottom: 0px solid #0000ff !important;
}
li.page-transfer-stations a {
color: #fff;
border-bottom: 0px solid #0000ff !important;
}



li.page-feedback a:before {
display:none;
}
li.page-allocations a:before {
display:none;
}
 .menu ul li a:before {
content: '\f107';
font-family: 'FontAwesome';
float: right;
margin-left: -1.5em;
}
ul.sub-menu.noticon li a:before {
display:none;
}
 .menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
float: left;
}
.menu ul li {
border-right: 1px solid #000;
}
.menu ul li a {
font-size: 15px;
font-weight: normal;
display: block;
color: #fff;
background: #000149;
padding: 8px 20px;
border:0px solid #000;
width: 170px;
}
.menu ul li a:hover, .menu ul li:hover>a {
background: #000149;
color: #fecd4c;
border: 0px;
}



.menu li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0, 0);
}
.menu ul ul {
left:0px;
top: 35px;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease-out;
width: 170px;
background: transparent;
}
.menu ul ul li a:before {
display:none;
}
.menu ul ul li {
border:0px;
}

.menu ul ul li:hover>a {
background: #2f2fee !important;
color: #f4d000;
border: 0px;
}
.menu ul ul li a:hover{background: #2f2fee !important;
color: #f4d000;
border: 0px;}
.menu ul ul li a {
background: #2f2fee;
    margin-bottom: 1px;
    margin-top: 1px;
    border: 0px;
    padding: 5px;
    font-size: 12px;
}
.menu ul ul li a:hover, .menu ul ul li a:hover>a {
border-top-left-radius: 0px;
}
.menu li>ul ul:hover {
visibility: visible;
opacity: 1;
transform: translate(0, 0);
}
.responsive-menu {
display: none;
width: 100%;
padding: 20px 15px;
background: #;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.responsive-menu:hover {
 background: #;
color: #fff;
text-decoration: none;
}
a.homer {

border-bottom:2px solid #0000ff;
border-top-left-radius: 5px;
}
}
 @media (min-width:1000px) and (max-width:1200px) {
 .mainWrap {
width: 768px;
}
 .menu ul {
top: 37px;
}
 .menu li a {
    font-size: 15px;
    padding: 8px 26px;
}
 .menu ul li a {
     font-size: 13px !important;}    
     
     
 a.homer {
background: #f4cf00;
}
}
 @media (min-width: 768px) and (max-width:1000px) {
 .mainWrap {
width: 768px;
}
 .menu ul {
top: 37px;
}
 .menu li a {
    font-size: 15px;
    padding: 7px 25px;
}
 a.homer {
background: #f4cf00;
}
 
.menu ul li a {
    font-size: 13px !important;}     
     
     
}
 @media (max-width: 767px) {
 a:focus {
   outline: 0px auto -webkit-focus-ring-color !important;
    outline-offset: 0px !important;
    
}    
     
 nav {
 display: block;
 background: #f0f02c;
 -webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
 .menu {
display: block;
margin-bottom: 0px;
}
 .menu li {
 display: inline-block;
 position: relative;
 z-index: 100;
}
 .menu li:first-child {
margin-left: 0;
}
 .menu li a {
 font-weight: 600;
 text-decoration: none;
 padding:12px 38px;
 display: block;
 color: #000;
 transition: all 0.2s ease-in-out 0s;
font-size:18px;
border-right:0px solid #1614a3;
}
 .menu li:last-child a {
border-right: 0px solid #cccc23;
}
.menu li a:hover, .menu li:hover>a {
 color: #fff;
 background: #f4cf00;
border-bottom:2px solid #0000ff;
}
 .menu ul {
 visibility: hidden;
 opacity: 0;
 margin: 0;
 padding: 0;
 width: 170px;
 position: absolute;
 left: 0px;
 background: #fff;
 z-index: 99;
 transform: translate(0, 20px);
 transition: all 0.2s ease-out;
}
 .menu ul:after {
 bottom: 100%;
 left: 20%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
 border-color: rgba(255, 255, 255, 0);
 border-bottom-color: #fff;
 border-width: 6px;
 margin-left: -6px;
}
 .menu ul li {
 display: block;
 float: none;
 background: none;
 margin: 0;
 padding: 0;
}
 .menu ul li a {
 font-size: 12px;
 font-weight: normal;
 display: block;
 color: #797979;
 background: #fff;
}
 .menu ul li a:hover, .menu ul li:hover>a {
 background:#f4cf00;
 color: #fff;
}
 .menu li:hover>ul {
 visibility: visible;
 opacity: 1;
 transform: translate(0, 0);
}
 .menu ul ul {
 left: 169px;
 top: 0px;
 visibility: hidden;
 opacity: 0;
 transform: translate(20px, 20px);
 transition: all 0.2s ease-out;
}
 .main_menu {
 height: 37px;
}
 .menu ul ul:after {
 left: -6px;
 top: 10%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
 border-color: rgba(255, 255, 255, 0);
 border-right-color: #fff;
 border-width: 6px;
 margin-top: -6px;
}
 .menu li>ul ul:hover {
 visibility: visible;
 opacity: 1;
 transform: translate(0, 0);
}
 .responsive-menu {
 display: none;
 width: 100%;
 padding:2px 15px;
 background: #;
 color: #fff;
 text-transform: uppercase;
 font-weight: 600;
    /* line-height: 38px; */
    font-size: 18px;
    /* line-height: 38px; */
    text-transform: lowercase;
 text-decoration: none;
}
 .responsive-menu:hover {
 background: #;
 color: #fff;
 text-decoration: none;
}
 a.homer {
background: #f4cf00;
border-bottom: 2px solid #080658;
}
 .responsive-menu {
 display: none;
 width: 100%;
 padding: 7px 15px;
 background: #;
 color: #fff;
 text-transform: uppercase;
 font-weight: 600;
}

 .responsive-menu a{ text-decoration:none; border:0px;}
 .responsive-menu a:hover{ text-decoration:none; border:0px;}

 ul.menu {
 margin: 0px;
 padding: 0px;
display:none;     margin-top: -1px;
}
 .mainWrap {
 width: auto;
 padding: 50px 20px;
}
 .menu {
display: none;
}
 .responsive-menu {
display: block;
}
 nav {
 margin: 0;
 background: none;
}
 .menu li {
 display: block;
 margin: 0;
}
 .menu li a {
background: #020041;
 color: #fff;
 font-size: 14px;
}
 .menu li a:hover, .menu li:hover>a {
 background: #f4cf00;
 color: #000;
}
 .menu ul {
 visibility: hidden;
 opacity: 0;
 top: 0;
 left: 0;
 width: 100%;
 transform: initial;
}
 .menu li:hover>ul {
 visibility: visible;
 opacity: 1;
 position: relative;
 transform: initial;
}
 .menu ul ul {
 left: 0;
 transform: initial;
}
 .menu li>ul ul:hover {
transform: initial;
}
}
ul.nav li.dropdown:hover > ul.dropdown-menu { display: block !important; }
.menu li:hover>ul li:last-child a:before{ display:none;}

.menu li ul li:last-child a:before{ display:none;}