/*
 * Canonical responsive utilities for native CSS.
 *
 * CSS custom properties cannot be used reliably inside @media conditions.
 * Component styles should therefore use these same explicit breakpoints.
 */
:root {
  --balter-nav-menu-width: 260px;
}

.show_on_768,
.show_on_960 {
  display: none;
}

@media only screen and (max-width: 500px) {
  .hide_on_500 {
    display: none !important;
  }
}

@media only screen and (max-width: 600px) {
  .hide_on_600 {
    display: none !important;
  }
}

@media only screen and (max-width: 767px) {
  .hide_on_768 {
    display: none !important;
  }

  .show_on_768 {
    display: block;
  }
}

@media only screen and (max-width: 960px) {
  .hide_on_960 {
    display: none !important;
  }

  .show_on_960 {
    display: block;
  }
}

@media only screen and (max-width: 1020px) {
  .hide_on_1020 {
    display: none !important;
  }
}

@media only screen and (max-width: 1280px) {
  .hide_on_1280 {
    display: none !important;
  }
}

@media only screen and (max-width: 1600px) {
  .hide_on_1600 {
    display: none !important;
  }
}