/*
 * ASM Responsive Content Visibility
 *
 * Purpose:
 * Allow page editors to selectively display content
 * based on the SWOF theme's responsive layout widths.
 *
 * SWOF Layout Ranges:
 *   Wide:    1281px and above
 *   Medium:  641px through 1280px
 *   Narrow:  640px and below
 *
 * Classes:
 *   asm-wide-only    Wide only
 *   asm-not-wide     Medium + Narrow
 *   asm-medium-only  Medium only
 *   asm-narrow-only  Narrow only
 *   asm-not-narrow   Wide + Medium
 *
 * Usage:
 * <div class="asm-wide-only">
 *     Content here
 * </div>
 *
 * Applies site-wide to all page templates.
 * Uses CSS only; no PHP or JavaScript required.
 */

/* ==========================================
   DEFAULT: WIDE (1281px and above)
   ========================================== */

.asm-not-wide,
.asm-medium-only,
.asm-narrow-only {
    display: none !important;
}

/* ==========================================
   MEDIUM: 641px through 1280px
   ========================================== */

@media screen and (min-width: 641px)
                  and (max-width: 1280px) {

    .asm-wide-only {
        display: none !important;
    }

    .asm-not-wide,
    .asm-medium-only {
        display: block !important;
    }
}

/* ==========================================
   NARROW: 640px and below
   ========================================== */

@media screen and (max-width: 640px) {

    .asm-wide-only,
    .asm-medium-only,
    .asm-not-narrow {
        display: none !important;
    }

    .asm-not-wide,
    .asm-narrow-only {
        display: block !important;
    }
}