/* =====================================================
   FreeITTools Framework v2.3
   responsive.css
   Global Responsive Utilities
   Final Production Version
===================================================== */


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1400px) {

    .container {
        max-width: 1320px;
    }

}


/* =====================================================
   DESKTOP
===================================================== */

@media (max-width: 1200px) {

    .hide-desktop-lg {
        display: none !important;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 992px) {

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .stats-grid {
        grid-template-columns: 1fr;
    }

}


/* =====================================================
   HIDE / SHOW
===================================================== */


/* Default */

.hide-mobile {
    display: initial;
}

.show-mobile {
    display: none;
}


.hide-tablet {
    display: initial;
}

.show-tablet {
    display: none;
}


.hide-desktop {
    display: none;
}

.show-desktop {
    display: initial;
}


/* =====================================================
   MOBILE VISIBILITY
===================================================== */

@media (max-width: 768px) {

    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

}


/* =====================================================
   TABLET VISIBILITY
===================================================== */

@media (min-width: 769px) and (max-width: 992px) {

    .hide-tablet {
        display: none !important;
    }

    .show-tablet {
        display: block !important;
    }

}


/* =====================================================
   DESKTOP VISIBILITY
===================================================== */

@media (min-width: 993px) {

    .hide-desktop {
        display: none !important;
    }

    .show-desktop {
        display: block !important;
    }

}


/* =====================================================
   FLEX DISPLAY HELPERS
===================================================== */

.show-flex {
    display: flex !important;
}

.show-inline {
    display: inline !important;
}

.show-inline-block {
    display: inline-block !important;
}


/* =====================================================
   MOBILE FLEX
===================================================== */

@media (max-width: 768px) {

    .mobile-flex-column {
        flex-direction: column !important;
    }

    .mobile-flex-wrap {
        flex-wrap: wrap !important;
    }

}


/* =====================================================
   ORIENTATION
===================================================== */

.landscape-only {
    display: none;
}

.portrait-only {
    display: none;
}


/* Landscape */

@media (orientation: landscape) {

    .landscape-only {
        display: block !important;
    }

    .portrait-only {
        display: none !important;
    }

}


/* Portrait */

@media (orientation: portrait) {

    .portrait-only {
        display: block !important;
    }

    .landscape-only {
        display: none !important;
    }

}


/* =====================================================
   SMALL SCREEN SAFETY
===================================================== */

@media (max-width: 480px) {

    .desktop-only {
        display: none !important;
    }

}


/* =====================================================
   TOUCH DEVICE
===================================================== */

@media (hover: none) and (pointer: coarse) {

    .touch-only {
        display: block !important;
    }

}


/* =====================================================
   POINTER DEVICE
===================================================== */

@media (hover: hover) and (pointer: fine) {

    .touch-only {
        display: none !important;
    }

}


/* =====================================================
   PRINT
===================================================== */

@media print {

    .no-print {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

}


/* =====================================================
   PRINT DEFAULT
===================================================== */

.print-only {
    display: none;
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {

        animation: none !important;

        transition: none !important;

    }

}


/* =====================================================
   END OF RESPONSIVE.CSS
===================================================== */
/* =====================================================
   V2.3 MOBILE GUTTER OPTIMIZATION
===================================================== */

@media (max-width: 768px) {

    .container,
    .container-sm,
    .container-lg,
    .content,
    .container-fluid {
        padding-left: var(--container-gutter-mobile);
        padding-right: var(--container-gutter-mobile);
    }

}

/* =====================================================
   V2.3 REDUCED MOTION / ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}