/*------------------------------------*\
    $RESPONSIVE UTILITIES
\*------------------------------------*/
/**
 * Designed and built @kurenn  
 */

.hidden {
  display: none !important;
  visibility: hidden !important;
}


.visible-xs {
  @include responsive-invisibility();
  @media (max-width: $screen-xs-max) {
    @include responsive-visibility();
  }
  &.visible-sm {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
      @include responsive-visibility();
    }
  }
  &.visible-md {
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
      @include responsive-visibility();
    }
  }
  &.visible-lg {
    @media (min-width: $screen-lg-min) {
      @include responsive-visibility();
    }
  }
}
.visible-sm {
  @include responsive-invisibility();
  &.visible-xs {
    @media (max-width: $screen-xs-max) {
      @include responsive-visibility();
    }
  }
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    @include responsive-visibility();
  }
  &.visible-md {
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
      @include responsive-visibility();
    }
  }
  &.visible-lg {
    @media (min-width: $screen-lg-min) {
      @include responsive-visibility();
    }
  }
}
.visible-md {
  @include responsive-invisibility();
  &.visible-xs {
    @media (max-width: $screen-xs-max) {
      @include responsive-visibility();
    }
  }
  &.visible-sm {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
      @include responsive-visibility();
    }
  }
  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    @include responsive-visibility();
  }
  &.visible-lg {
    @media (min-width: $screen-lg-min) {
      @include responsive-visibility();
    }
  }
}
.visible-lg {
  @include responsive-invisibility();
  &.visible-xs {
    @media (max-width: $screen-xs-max) {
      @include responsive-visibility();
    }
  }
  &.visible-sm {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
      @include responsive-visibility();
    }
  }
  &.visible-md {
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
      @include responsive-visibility();
    }
  }
  @media (min-width: $screen-lg-min) {
    @include responsive-visibility();
  }
}

.hidden-xs {
  @include responsive-visibility();
  @media (max-width: $screen-xs-max) {
    @include responsive-invisibility();
  }
  &.hidden-sm {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
      @include responsive-invisibility();
    }
  }
  &.hidden-md {
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
      @include responsive-invisibility();
    }
  }
  &.hidden-lg {
    @media (min-width: $screen-lg-min) {
      @include responsive-invisibility();
    }
  }
}
.hidden-sm {
  @include responsive-visibility();
  &.hidden-xs {
    @media (max-width: $screen-xs-max) {
      @include responsive-invisibility();
    }
  }
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    @include responsive-invisibility();
  }
  &.hidden-md {
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
      @include responsive-invisibility();
    }
  }
  &.hidden-lg {
    @media (min-width: $screen-lg-min) {
      @include responsive-invisibility();
    }
  }
}
.hidden-md {
  @include responsive-visibility();
  &.hidden-xs {
    @media (max-width: $screen-xs-max) {
      @include responsive-invisibility();
    }
  }
  &.hidden-sm {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
      @include responsive-invisibility();
    }
  }
  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    @include responsive-invisibility();
  }
  &.hidden-lg {
    @media (min-width: $screen-lg-min) {
      @include responsive-invisibility();
    }
  }
}
.hidden-lg {
  @include responsive-visibility();
  &.hidden-xs {
    @media (max-width: $screen-xs-max) {
      @include responsive-invisibility();
    }
  }
  &.hidden-sm {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
      @include responsive-invisibility();
    }
  }
  &.hidden-md {
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
      @include responsive-invisibility();
    }
  }
  @media (min-width: $screen-lg-min) {
    @include responsive-invisibility();
  }
}