/*
=========================================================
 VOLTCORE DISPLAY SIZE FIX
=========================================================

Purpose:
Make the existing website much easier to read at 100%
browser zoom.

This does NOT redesign the website.

=========================================================
*/


/* ======================================================
   FULL WIDTH WEBSITE
====================================================== */

html,
body {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
}


/* ======================================================
   REMOVE ARTIFICIAL MAX WIDTH
====================================================== */

main,
main > *,
.site,
.page,
.home,
.homepage,
.content,
.container,
.wrapper {

    max-width:none !important;
}


/* ======================================================
   MAIN CONTENT
====================================================== */

main {

    width:100% !important;

    margin-left:0 !important;
    margin-right:0 !important;

}


/* ======================================================
   LARGE SCREEN
====================================================== */

@media (min-width:1200px) {

    main,
    .site,
    .page,
    .home,
    .homepage,
    .content {

        width:100% !important;

        max-width:
            100% !important;

    }

}


/* ======================================================
   COMMON INNER WEBSITE CONTAINERS
====================================================== */

main .container,
main .wrapper,
main .content-wrapper,
main .site-container {

    width:
        calc(100% - 40px) !important;

    max-width:
        1700px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

}


/* ======================================================
   HERO / MAIN IMAGE
====================================================== */

.hero img,
.hero-image,
.hero-banner,
.banner img {

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        auto !important;

}


/* ======================================================
   LARGE PRESENTATION IMAGE
====================================================== */

main img {

    max-width:
        100% !important;

}


/* ======================================================
   SECTIONS
====================================================== */

section {

    width:
        100% !important;

}


/* ======================================================
   SERVICE / PRODUCT GRIDS
====================================================== */

.services,
.service-grid,
.services-grid {

    width:
        100% !important;

}


/* ======================================================
   CARDS
====================================================== */

.service-card,
.services-card,
.product-card,
.products-card {

    min-width:
        0 !important;

}


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

@media (min-width:1400px) {

    main .container,
    main .wrapper,
    main .content-wrapper,
    main .site-container {

        width:
            calc(100% - 60px) !important;

        max-width:
            1700px !important;

    }

}


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

@media (max-width:768px) {

    main,
    .site,
    .page,
    .home,
    .homepage,
    .content {

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

    }


    main .container,
    main .wrapper,
    main .content-wrapper,
    main .site-container {

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        padding-left:
            12px !important;

        padding-right:
            12px !important;

    }


    /*
       Images use the entire available phone width.
    */

    main img {

        width:
            100% !important;

        max-width:
            100% !important;

        height:
            auto !important;

    }


    /*
       No horizontal scrolling.
    */

    html,
    body {

        overflow-x:
            hidden !important;

    }

}


/* ======================================================
   SMALL PHONE
====================================================== */

@media (max-width:480px) {

    main .container,
    main .wrapper,
    main .content-wrapper,
    main .site-container {

        padding-left:
            8px !important;

        padding-right:
            8px !important;

    }

}