@media (max-width: 991.98px) {
  .navbar-toggler {
    background: black;
  }

  .navbar-collapse {
    position: fixed;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #000000;
    transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
  }
  .navbar-collapse.open {
    visibility: visible;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}


/* This sets when the canvas should be turned on. Currently tablet for all - if we need specifics for different sites
   this should be moved into each of the sites CSS. The above media query will need to change too.
   Note: Secondary nab assumes tablet as well - see html for v4, has d-lg-none
 */

@media (max-width: 991.98px) {
  /* Off canvas is now on */
  #mqCanvasIndicator {
    display: block;
  }
}

@media (min-width: 992px) {
  /* Off canvas is now off */
  #mqCanvasIndicator {
    display: none;
  }
}

#mqIndicator, #mqCanvasIndicator {
  visibility: hidden;
}