/* Custom Styles for the sticky-header
-------------------------------------------- */
/*
We need to take the content in the black logo bar, and move it from the header, 
down into the body content on mobile, because it's too buggy to deal with
as a part of the show-hide sticky header stuff. Set up the holder divs for both:
*/
.black-logo-bar-holder {
  margin: 0;
  padding: 0;
  with: 100%;
}
.black-logo-bar-holder-mobile {
  margin: 0 0 1rem 0;
  padding: 0;
  with: 100%;
}

/* Style the (smaller, dynamically added) logo, in the utility nav bar */
.utility-nav-logo {
  display: inline-block;
  float: left;
  padding: 8px 10px 0 0;
}
/* hide the mobile version of the black logo bar until mobile */
.black-logo-bar-holder-mobile { display: none; }

/*
Only apply THESE sticky header styles below 960 (in responsive nav mode)
*/
@media all and (max-width: 959px){
  
  /* make sure the desktop 'sticky' header logo (in the utility nav bar) doesn't show */
  .utility-nav-logo { 
    /*display: none !important;*/
  }
  
  .mobile-sticky-hide-logo {  
    /*display: none !important;*/
  }

  /* then we add another (smaller) logo in the mobile-only nav bar */
  .mobile-sticky-logo {
    float: left;
    margin: 8px 0 0 10px;
    cursor: pointer;
  }
  /* 
  Now hide the desktop version of the black logo bar, 
  and show the mobile version.
  */
  .black-logo-bar-holder {  
    height: 0px !important;
    display: none!important;
  }
  .black-logo-bar-holder-mobile { display: block!important; }

  /*
  There's an odd shift on the MENU button, in mobile mode, 
  because of all the sticky header code. This sets a background color
  on the parent element, same as the button.
  */
  /* #page .wrapper-sticky { background-color: #d50c41; } */

}