/*
========================================================
 VOLTCORE AFRICA
 INTERNAL CONTENT ZOOM
========================================================
*/

/* ------------------------------------------------------
   DESKTOP
   ------------------------------------------------------ */

@media (min-width: 1000px) {

    /*
       Increase the actual website presentation by 20%.
       The browser remains at 100%.
    */

    main {

        zoom: 1.20 !important;

        width:
            83.333333% !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

    }

}


/* ------------------------------------------------------
   LARGE DESKTOP
   ------------------------------------------------------ */

@media (min-width: 1500px) {

    main {

        zoom: 1.22 !important;

        width:
            81.967213% !important;

    }

}


/* ------------------------------------------------------
   TABLET
   ------------------------------------------------------ */

@media (min-width: 700px) and (max-width: 999px) {

    main {

        zoom: 1.10 !important;

        width:
            90.909090% !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

    }

}


/* ------------------------------------------------------
   MOBILE
   ------------------------------------------------------ */

@media (max-width: 699px) {

    /*
       Do NOT zoom the whole mobile page.
       Instead allow the phone layout to use the
       complete screen width.
    */

    html,
    body {

        width:
            100% !important;

        overflow-x:
            hidden !important;

    }

    main {

        zoom:
            1 !important;

        width:
            100% !important;

        margin:
            0 !important;

    }

}


/* ------------------------------------------------------
   MAKE TEXT INSIDE THE CONTENT MORE LEGIBLE
   ------------------------------------------------------ */

@media (min-width: 1000px) {

    main p {

        line-height:
            1.55 !important;

    }

    main h1 {

        line-height:
            1.0 !important;

    }

    main h2 {

        line-height:
            1.1 !important;

    }

    main h3 {

        line-height:
            1.25 !important;

    }

}


/* ------------------------------------------------------
   PREVENT HORIZONTAL SCROLL
   ------------------------------------------------------ */

html,
body {

    overflow-x:
        hidden !important;

}