/* ————————– */ /* ==Responsive helpers */ /* ————————– */

/* large screens */ /* ————- */

@media (min-width: ($large + 1)) {

/* layouts for large screens */
.#{$kna-namespace}large-hidden {
  display: none !important;
}

.#{$kna-namespace}large-visible {
  display: block !important;
}

.#{$kna-namespace}large-no-float {
  float: none;
}

.#{$kna-namespace}large-inbl {
  display: inline-block;
  float: none;
  vertical-align: top;
}

/* widths for large screens */
.#{$kna-namespace}large-w25 {
  width: 25% !important;
}

.#{$kna-namespace}large-w33 {
  width: 33.333333% !important;
}

.#{$kna-namespace}large-w50 {
  width: 50% !important;
}

.#{$kna-namespace}large-w66 {
  width: 66.666666% !important;
}

.#{$kna-namespace}large-w75 {
  width: 75% !important;
}

.#{$kna-namespace}large-w100,
.#{$kna-namespace}large-wauto {
  display: block !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0;
}

/* margins for large screens */
.#{$kna-namespace}large-man,
.#{$kna-namespace}large-ma0 {
  margin: 0 !important;
}

}

/* medium screens */ /* ————– */

@media (min-width: ($small + 1)) and (max-width: $large) {

/* layouts for medium screens */
.#{$kna-namespace}medium-hidden {
  display: none !important;
}

.#{$kna-namespace}medium-visible {
  display: block !important;
}

.#{$kna-namespace}medium-no-float {
  float: none;
}

.#{$kna-namespace}medium-inbl {
  display: inline-block;
  float: none;
  vertical-align: top;
}

/* widths for medium screens */
.#{$kna-namespace}medium-w25 {
  width: 25% !important;
}

.#{$kna-namespace}medium-w33 {
  width: 33.333333% !important;
}

.#{$kna-namespace}medium-w50 {
  width: 50% !important;
}

.#{$kna-namespace}medium-w66 {
  width: 66.666666% !important;
}

.#{$kna-namespace}medium-w75 {
  width: 75% !important;
}

.#{$kna-namespace}medium-w100,
.#{$kna-namespace}medium-wauto {
  display: block !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0;
}

/* margins for medium screens */
.#{$kna-namespace}medium-man,
.#{$kna-namespace}medium-ma0 {
  margin: 0 !important;
}

}

/* small screens */ /* ————- */

@media (min-width: ($tiny + 1)) and (max-width: $small) {

/* layouts for small screens */
.#{$kna-namespace}small-hidden {
  display: none !important;
}

.#{$kna-namespace}small-visible {
  display: block !important;
}

.#{$kna-namespace}small-no-float {
  float: none;
}

.#{$kna-namespace}small-inbl {
  display: inline-block;
  float: none;
  vertical-align: top;
}

/* widths for small screens */
.#{$kna-namespace}small-w25 {
  width: 25% !important;
}

.#{$kna-namespace}small-w33 {
  width: 33.333333% !important;
}

.#{$kna-namespace}small-w50 {
  width: 50% !important;
}

.#{$kna-namespace}small-w66 {
  width: 66.666666% !important;
}

.#{$kna-namespace}small-w75 {
  width: 75% !important;
}

.#{$kna-namespace}small-w100,
.#{$kna-namespace}small-wauto {
  display: block !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0;
}

/* margins for small screens */
.#{$kna-namespace}small-man,
.#{$kna-namespace}small-ma0 {
  margin: 0 !important;
}

.#{$kna-namespace}small-pan,
.#{$kna-namespace}small-pa0 {
  padding: 0 !important;
}

}

/* tiny screens */ /* ———— */

@media (max-width: $tiny) {

/* quick small resolution reset */
.#{$kna-namespace}mod,
.#{$kna-namespace}col,
fieldset {
  display: block !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0;
}

.#{$kna-namespace}flex-container {
  flex-direction: column;
}

/* layouts for tiny screens */
.#{$kna-namespace}tiny-hidden {
  display: none !important;
}

.#{$kna-namespace}tiny-visible {
  display: block !important;
}

.#{$kna-namespace}tiny-no-float {
  float: none;
}

.#{$kna-namespace}tiny-inbl {
  display: inline-block;
  float: none;
  vertical-align: top;
}

/* widths for tiny screens */
.#{$kna-namespace}tiny-w25 {
  width: 25% !important;
}

.#{$kna-namespace}tiny-w33 {
  width: 33.333333% !important;
}

.#{$kna-namespace}tiny-w50 {
  width: 50% !important;
}

.#{$kna-namespace}tiny-w66 {
  width: 66.666666% !important;
}

.#{$kna-namespace}tiny-w75 {
  width: 75% !important;
}

.#{$kna-namespace}tiny-w100,
.#{$kna-namespace}tiny-wauto {
  display: block !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0;
}

/* margins for tiny screens */
.#{$kna-namespace}tiny-man,
.#{$kna-namespace}tiny-ma0 {
  margin: 0 !important;
}

.#{$kna-namespace}tiny-pan,
.#{$kna-namespace}tiny-pa0 {
  padding: 0 !important;
}

}