/* Clonext
 *
 * Responsive visibility utilities.
 *
 * .no            → always hidden
 * .no_X          → hidden when viewport matches breakpoint X
 * .only_X        → visible only when viewport matches breakpoint X; hidden otherwise
 *
 * Single values (e.g. _1280) match screens up to that width (max-width).
 * Exception: _1920 matches screens from 1920px up (min-width — it is the upper bound).
 * Range values (e.g. _1280_1025) match screens between both values (max + min).
 *
 * @package    clonext
 * @since      1.0.0
 */


/* Always hidden */

.no { display: none; }


/* Hidden by default — revealed only at their breakpoint */

.only_1920      { display: none; }
.only_1920_1440 { display: none; }
.only_1440      { display: none; }
.only_1440_1367 { display: none; }
.only_1366      { display: none; }
.only_1366_1280 { display: none; }
.only_1280      { display: none; }
.only_1280_1025 { display: none; }
.only_1024      { display: none; }
.only_1024_871  { display: none; }
.only_870       { display: none; }
.only_870_768   { display: none; }
.only_767       { display: none; }
.only_767_481   { display: none; }
.only_480       { display: none; }
.only_480_415   { display: none; }
.only_414       { display: none; }
.only_414_361   { display: none; }
.only_360       { display: none; }
.only_360_320   { display: none; }
.only_319       { display: none; }


/* ≥ 1920px */
@media screen and (min-width: 1920px) {
    .no_1920    { display: none; }
    .only_1920  { display: block; }
}

/* 1440px – 1920px */
@media screen and (max-width: 1920px) and (min-width: 1440px) {
    .no_1920_1440    { display: none; }
    .only_1920_1440  { display: block; }
}

/* ≤ 1440px */
@media screen and (max-width: 1440px) {
    .no_1440    { display: none; }
    .only_1440  { display: block; }
}

/* 1367px – 1440px */
@media screen and (max-width: 1440px) and (min-width: 1367px) {
    .no_1440_1367    { display: none; }
    .only_1440_1367  { display: block; }
}

/* ≤ 1366px */
@media screen and (max-width: 1366px) {
    .no_1366    { display: none; }
    .only_1366  { display: block; }
}

/* 1280px – 1366px */
@media screen and (max-width: 1366px) and (min-width: 1280px) {
    .no_1366_1280    { display: none; }
    .only_1366_1280  { display: block; }
}

/* ≤ 1280px */
@media screen and (max-width: 1280px) {
    .no_1280    { display: none; }
    .only_1280  { display: block; }
}

/* 1025px – 1280px */
@media screen and (max-width: 1280px) and (min-width: 1025px) {
    .no_1280_1025    { display: none; }
    .only_1280_1025  { display: block; }
}

/* ≤ 1024px */
@media screen and (max-width: 1024px) {
    .no_1024    { display: none; }
    .only_1024  { display: block; }
}

/* 871px – 1024px */
@media screen and (max-width: 1024px) and (min-width: 871px) {
    .no_1024_871    { display: none; }
    .only_1024_871  { display: block; }
}

/* ≤ 870px */
@media screen and (max-width: 870px) {
    .no_870    { display: none; }
    .only_870  { display: block; }
}

/* 768px – 870px */
@media screen and (max-width: 870px) and (min-width: 768px) {
    .no_870_768    { display: none; }
    .only_870_768  { display: block; }
}

/* ≤ 767px */
@media screen and (max-width: 767px) {
    .no_767    { display: none; }
    .only_767  { display: block; }
}

/* 481px – 767px */
@media screen and (max-width: 767px) and (min-width: 481px) {
    .no_767_481    { display: none; }
    .only_767_481  { display: block; }
}

/* ≤ 480px */
@media screen and (max-width: 480px) {
    .no_480    { display: none; }
    .only_480  { display: block; }
}

/* 415px – 480px */
@media screen and (max-width: 480px) and (min-width: 415px) {
    .no_480_415    { display: none; }
    .only_480_415  { display: block; }
}

/* ≤ 414px */
@media screen and (max-width: 414px) {
    .no_414    { display: none; }
    .only_414  { display: block; }
}

/* 361px – 414px */
@media screen and (max-width: 414px) and (min-width: 361px) {
    .no_414_361    { display: none; }
    .only_414_361  { display: block; }
}

/* ≤ 360px */
@media screen and (max-width: 360px) {
    .no_360    { display: none; }
    .only_360  { display: block; }
}

/* 320px – 360px */
@media screen and (max-width: 360px) and (min-width: 320px) {
    .no_360_320    { display: none; }
    .only_360_320  { display: block; }
}

/* ≤ 319px */
@media screen and (max-width: 319px) {
    .no_319    { display: none; }
    .only_319  { display: block; }
}
