/* Services detail menu widget (.menu-services-detail-container inside .menu_bg):
   contain its floated <li> items so it doesn't collapse and overflow into
   following content, and use a greyscale palette instead of black/orange. */
.menu_bg {
  overflow: hidden;
  background: #4d4d4d;
}

/* On pages where .menu_bg wraps the widget instead of being the grid column
   itself (e.g. what-we-do), make it fill the column's full width. */
.wpb_widgetised_column.menu_bg {
  float: none;
  width: 100%;
}

.menu_bg li {
  background: #333333;
}

.menu_bg li:hover {
  background: #e0e0e0;
}

.menu_bg li:hover a {
  color: #333333 !important;
}

/* Services page: align each service's "Read More" button to the right
   side of its containing column instead of the default left/inline flow. */
.page-services .vc_btn3-container {
  padding-top: 1em;
}

/* Mobile nav: the theme's own .dropOpen:before rule (style.css) references
   content:'\e85e', which decodes to fontello's "clock" glyph (not a chevron)
   and never sets font-family, so it renders blank. Swap the existing,
   correctly-positioned chevron on the link itself (down-open-mini, \e805)
   for up-open-mini (\e806) when the submenu is expanded. */
.responsive_menu .menuTopWrap > ul > li.menu-item-has-children.dropOpen > a:after {
  content: '\e806';
}

/* Homepage revolution slider: revslider's own CSS sets .rev_slider to
   position:relative; overflow:visible, with its slides absolutely
   positioned inside. Its JS is supposed to size .rev_slider_wrapper to
   exactly match the rendered slide height (jQuery(window).height()), but
   in practice the two end up mismatched, so the taller slide content
   bleeds past the wrapper's box and paints over the section below (the
   "Communications Evolution" article row) instead of pushing it down.
   Clipping the wrapper guarantees the article row always starts where the
   document flow actually places it. */
.rev_slider_wrapper {
  overflow: hidden;
}

/* Header at very small widths: the logo centers itself (responsive.css) and
   the "Menu" label pushes .openResponsiveMenu wide enough that it wraps onto
   its own line beneath the logo. Drop the label and shrink the button down
   to an icon-only hamburger trigger, matching common mobile nav convention. */
@media (max-width: 479px) {
  .openResponsiveMenu .menu-label {
    display: none;
  }
  .openResponsiveMenu {
    width: 45px;
    height: 45px;
    padding: 0;
    margin: 11px 0 22px;
  }
  .openResponsiveMenu:before {
    position: static;
    display: block;
    width: 100%;
    text-align: center;
  }

  /* responsive.css forces the logo full-width/centered (float:none, with
     !important on text-align), which pushes .wrap_menu - and the hamburger
     button inside it - onto its own line below. Keep the logo floated and
     shrink it so it fits on the same row as the icon-only trigger, and
     replace the theme's fixed 280px header column with a fluid one so the
     row actually has room, bottoming out at a 375px floor instead of
     squeezing further (below that width the header simply overflows). */
  .mainmenu_area .main {
    width: 100%;
    min-width: 375px;
    box-sizing: border-box;
    padding: 0 15px;
    overflow: hidden;
  }

  .topWrap .logo {
    float: left !important;
    text-align: left !important;
    width: auto;
    padding: 11px 0;
  }

  .logo img {
    height: 22px;
    margin-top: 0;
  }
}