/*
=========================================================
 ONMOBILE - LARGE SCREEN / TV OVERRIDES
 Bootstrap 4.6.2 compatible
 --------------------------------------------------------
 IMPORTANT:
 Load this CSS AFTER bootstrap.css and your existing CSS.
=========================================================
*/


/* ======================================================
   1. BASE - Bootstrap XL (1200px+)
   ====================================================== */

@media (min-width: 1200px) {

    /* Keep the page from looking too compressed */
    .navbar {
        width: 100%;
    }

    /* Navigation */
    .navbar-nav {
        align-items: center;
    }

    .navbar-nav .nav-link {
        font-size: 14px;
        line-height: 1.4;
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
    }

}


/* ======================================================
   2. LARGE DESKTOP - 1440px+
   ====================================================== */

@media (min-width: 1440px) {

    /* Wider Bootstrap container */
    .navbar .container,
    .header .container {
        max-width: 1320px;
    }

    /* Navigation */
    .navbar-nav .nav-link {
        font-size: 14px;
        padding-left: 12px;
        padding-right: 12px;
    }

}


/* ======================================================
   3. LARGE SCREEN / TV - 1600px+
   ====================================================== */

@media (min-width: 1600px) {

    /* Wider layout */
    .navbar .container,
    .header .container {
        max-width: 1500px;
    }

    /* Header */
    .navbar {
        min-height: 60px;
    }

    /* Navigation becomes readable on large TV */
    .navbar-nav .nav-link {
        font-size: 15px;
        padding-left: 13px;
        padding-right: 13px;
    }

    /* Logo */
    .navbar-brand img {
        max-height: 36px;
        width: auto;
    }

}


/* ======================================================
   4. FULL HD / 1920px+
   ====================================================== */

@media (min-width: 1920px) {

    /* Use more of the available screen */
    .navbar .container,
    .header .container {
        max-width: 1750px;
    }

    /* Header */
    .navbar {
        min-height: 70px;
    }

    /* Navigation */
    .navbar-nav .nav-link {
        font-size: 16px;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Logo */
    .navbar-brand img {
        max-height: 40px;
        width: auto;
    }

}


/* ======================================================
   5. 2K / LARGE TV - 2200px+
   ====================================================== */

@media (min-width: 2200px) {

    .navbar .container,
    .header .container {
        max-width: 2000px;
    }

    .navbar-nav .nav-link {
        font-size: 17px;
        padding-left: 16px;
        padding-right: 16px;
    }

}


/* ======================================================
   6. 4K TV - 2560px+
   ====================================================== */

@media (min-width: 2560px) {

    .navbar .container,
    .header .container {
        max-width: 2200px;
    }

    /* Header */
    .navbar {
        min-height: 80px;
    }

    /* Navigation */
    .navbar-nav .nav-link {
        font-size: 18px;
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Logo */
    .navbar-brand img {
        max-height: 46px;
        width: auto;
    }

}


/* ======================================================
   7. HERO / HOME PAGE
   ====================================================== */

/*
   The hero should use more horizontal space on
   large screens instead of remaining constrained
   to Bootstrap's 1140px container.
*/

@media (min-width: 1440px) {

    .home .container,
    .homepage .container,
    .home-page .container {
        max-width: 1320px;
    }

}


@media (min-width: 1600px) {

    .home .container,
    .homepage .container,
    .home-page .container {
        max-width: 1500px;
    }

}


@media (min-width: 1920px) {

    .home .container,
    .homepage .container,
    .home-page .container {
        max-width: 1750px;
    }

}


@media (min-width: 2200px) {

    .home .container,
    .homepage .container,
    .home-page .container {
        max-width: 2000px;
    }

}


@media (min-width: 2560px) {

    .home .container,
    .homepage .container,
    .home-page .container {
        max-width: 2200px;
    }

}


/* ======================================================
   8. COMMON HERO/BANNER CONTAINER
   ====================================================== */

/*
   These selectors cover common names.
   If your homepage uses one of these classes,
   the hero content will become wider.
*/

@media (min-width: 1600px) {

    .hero .container,
    .banner .container,
    .home-banner .container,
    .main-banner .container,
    .slider .container,
    .carousel .container {
        max-width: 1500px;
    }

}


@media (min-width: 1920px) {

    .hero .container,
    .banner .container,
    .home-banner .container,
    .main-banner .container,
    .slider .container,
    .carousel .container {
        max-width: 1750px;
    }

}


@media (min-width: 2560px) {

    .hero .container,
    .banner .container,
    .home-banner .container,
    .main-banner .container,
    .slider .container,
    .carousel .container {
        max-width: 2200px;
    }

}


/* ======================================================
   9. COMMON HERO COLUMNS
   ====================================================== */

/*
   Prevent hero content from becoming too narrow.
*/

@media (min-width: 1920px) {

    .hero .row,
    .banner .row,
    .home-banner .row,
    .main-banner .row {
        width: 100%;
    }

}


/* ======================================================
   10. LARGE HERO IMAGES
   ====================================================== */

@media (min-width: 1600px) {

    .hero img,
    .banner img,
    .home-banner img,
    .main-banner img {
        max-width: 100%;
        height: auto;
    }

}


/* ======================================================
   11. REMOVE UNNECESSARY SMALL-SCREEN LIMITS
   ====================================================== */

@media (min-width: 1600px) {

    .navbar .row,
    .header .row {
        width: 100%;
    }

}


/* ======================================================
   12. IMPORTANT:
       DO NOT SCALE THE ENTIRE PAGE
   ====================================================== */

/*
   Do NOT use:

       body {
           zoom: 1.2;
       }

   or:

       body {
           transform: scale(...);
       }

   The layout above is intentionally resized using
   Bootstrap-compatible containers instead.
*/


/* ======================================================
   13. OPTIONAL - VERY LARGE TV TYPOGRAPHY
   ====================================================== */

@media (min-width: 1920px) {

    /*
       Only applies to common hero text classes.
       Remove this section if your existing hero text
       is already the correct size.
    */

    .hero h1,
    .banner h1,
    .home-banner h1,
    .main-banner h1 {
        font-size: 3rem;
    }

}


@media (min-width: 2560px) {

    .hero h1,
    .banner h1,
    .home-banner h1,
    .main-banner h1 {
        font-size: 3.5rem;
    }

}