@import "variables";

$extra_small_devices :  320px; // not used for now
$small_devices       :  768px;
$medium_devices      :  992px;
$large_devices       : 1200px;

@media (min-width: $small_devices) {
  .nav-sm-open, .nav-sm-close {
    display: none;
  }
  .nav.collapse {
    display: block;
  }
}
@media (max-width: ($small_devices - 1)) {
  header {
    .nav.collapse, .nav.collapsing {
      display: none;
      &.in {
        display: block;
      }
      position: absolute;
      top: 0;
      overflow-y: auto;
      overflow-x: hidden;
      background: $header_color;
      z-index: 2;
      padding-top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .navigation-widget {
        width: 100%;
        padding: 6px;
        li {
          float: none;
          display: block;
        }
      }
      .nav-sm-close {
        position: absolute;
        bottom: 20px;
        width: 50px;
        height: 50px;
        font-size: 32px;
        left: 50%;
        margin-left: -20px;
        text-align: center;
        padding: 0px;
      }
    }
  }
}