/*
	This file has been auto-generated by a tool at 26/06/2025 02:18:58
	Any changes made will be overwritten the next time it is regenerated.
*/

/** 
 *
 *  Empresa Responsive Grid CSS
 *  Version: 0.2;
 *
 *  Config: values to change are commented #CONFIG#
 *
 */


/**
 *
 *  Large & Base - Large Desktops & high resolution devices 
 *
 *  These styles filter down into lower sizes
 * 
*/


/*  Container   */

.container
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0 auto;
    max-width: 990px; /* #CONFIG# - The maximum width the site will ever be, change to 100% for a full width site */
    padding-left: 32px; /* #CONFIG # - The padding on the left hand side of the container */
    padding-right: 32px; /* #CONFIG # - The padding on the right hand side of the container */
    width: 100%; /* #CONFIG# - The width the site will be, up to the max width (almost always 100%) */
}


/*  Show and hides  */

.hide,
.hide_Large
{
    display: none !important;
}

.show,
.show_Large
{
    display: block !important;
}

a.show,
a.show_Large,
span.show,
span.show_Large
{
    display: inline !important;
}

/*  Floats  */

.floatLeft,
.floatLeft_Lrg
{
    float: left;
}

.floatRight,
.floatRight_Lrg
{
    float: right;
}

/*  Clear  */

.clear,
.clear_Lrg
{
    clear: both;
    content: "";
    height: 0;
    line-height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.clear_Med,
.clear_Sma,
.clear_XSma
{
    display: none;
    clear: none;
}

.clearContainer:before,
.clearContainer:after,
.colRow:before,
.colRow:after
{
    content: " ";
    display: table;
}

.clearContainer:after,
.colRow:after
{
    clear: both;
}


/*  columns  */

.colRow
{
    margin-left: -16px; /* #CONFIG# - Half of the column gutter size */
    margin-right: -16px; /* #CONFIG# - Half of the column gutter size */
    width: auto;
}

    .colRow .col
    {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        float: left;
        margin-bottom: 0; /* #CONFIG# - Bottom margin size for columns */
        padding-left: 16px; /* #CONFIG# - Half of the column gutter size */
        padding-right: 16px; /* #CONFIG# - Half of the column gutter size */
    }

.col01
{
    width: 8.333333333333332%;
}

.col02
{
    width: 16.666666666666664%;
}

.col03
{
    width: 25%;
}

.col04
{
    width: 33.33333333333333%;
}

.col05
{
    width: 41.66666666666667%;
}

.col06
{
    width: 50%;
}

.col07
{
    width: 58.333333333333336%;
}

.col08
{
    width: 66.66666666666666%;
}

.col09
{
    width: 75%;
}

.col10
{
    width: 83.33333333333334%;
}

.col11
{
    width: 91.66666666666666%;
}

.col12
{
    width: 100%;
}

.col .colColour
{
    background-color: #000;
    color: #fff !important;
    min-height: 200px;
    padding: 10px;
}

/*.col > *:last-child,
.col > p:only-child,
.col article > *:last-child,
.col article > p:only-child
{
    margin-bottom: 0;
}*/

/**
 *
 *  Medium - New Phones & Tablets
 * 
*/

@media (max-width: 1023px) /* #CONFIG# - Maximum width for medium devices, any device larger than this is large/base */
{
    /* Text align */
    .centered_Med { text-align: center !important; }
    .lefted_Med { text-align: left !important; }
    .righted_Med { text-align: right !important; }

    /*  Container   */

    .container,
    .container_Med
    {
        margin: 0;
        padding-left: 20px; /* #CONFIG # - The padding on the left hand side of the container */
        padding-right: 20px; /* #CONFIG # - The padding on the right hand side of the container */
    }

    /*  Show and hides  */

    .noMargin_Med {
        margin: 0 !important;
    }

    .hide_Med
    {
        display: none !important;
    }

    .show_Med
    {
        display: block !important;
    }

    a.show_Med,
    span.show_Med
    {
        display: inline !important;
    }

    /*  Floats  */

    .floatLeft_Med
    {
        float: left;
    }

    .floatRight_Med
    {
        float: right;
    }

    .floatLeft_Lrg,
    .floatRight_Lrg
    {
        float: none;
    }

    /*  Clear  */

    .clear_Med
    {
        clear: both;
        content: "";
        display: block;
        height: 0;
        line-height: 0;
        margin: 0;
        overflow: hidden;
        padding: 0;
    }

    .clear_Lrg,
    .clear_Sma,
    .clear_XSma
    {
        display: none;
        clear: none;
    }

    /*  columns  */

    .colRow
    {
        margin-left: -12px; /* #CONFIG# - Medium gutter size */
        margin-right: -12px; /* #CONFIG# - Medium gutter size */
    }

        .colRow .col
        {
            margin-bottom: 0; /* #CONFIG# - Bottom margin size for columns */
            padding-left: 12px; /* #CONFIG# - Half of the column gutter size */
            padding-right: 12px; /* #CONFIG# - Half of the column gutter size */
        }

    .col00_Med
    {
        display: none;
        width: 0%;
    }

    .col01_Med
    {
        width: 8.333333333333332%;
    }

    .col02_Med
    {
        width: 16.666666666666664%;
    }

    .col03_Med
    {
        width: 25%;
    }

    .col04_Med
    {
        width: 33.33333333333333%;
    }

    .col05_Med
    {
        width: 41.66666666666667%;
    }

    .col06_Med
    {
        width: 50%;
    }

    .col07_Med
    {
        width: 58.333333333333336%;
    }

    .col08_Med
    {
        width: 66.66666666666666%;
    }

    .col09_Med
    {
        width: 75%;
    }

    .col10_Med
    {
        width: 83.33333333333334%;
    }

    .col11_Med
    {
        width: 91.66666666666666%;
    }

    .col12_Med
    {
        width: 100%;
    }

    .col .colColour
    {
        background-color: blue;
    }

    .Framework_Header .Framework_Login .Framework_Login  
    {
        display: none;
    }
}

/**
 *
 *  Small - Phones & Tablets
 * 
*/

@media (max-width: 768px) /* #CONFIG# - Maxiumum width for small devices, any device larger than this is medium */
{
    /* Text align */
    .centered_Sma { text-align: center !important; }
    .lefted_Sma { text-align: left !important; }
    .righted_Sma { text-align: right !important; }

    /*  Container   */

    .container,
    .container_Sma
    {
        padding-left: 20px; /* #CONFIG # - The padding on the left hand side of the container */
        padding-right: 20px; /* #CONFIG # - The padding on the right hand side of the container */
    }


    /*  Show and hides  */   

    .hide_Sma
    {
        display: none !important;
    }

    .show_Sma
    {
        display: block !important;
    }

    a.show_Sma,
    span.show_Sma
    {
        display: inline !important;
    }


    /*  Floats  */

    .floatLeft_Sma
    {
        float: left;
    }

    .floatRight_Sma
    {
        float: right;
    }

    .floatLeft_Lrg,
    .floatRight_Lrg,
    .floatLeft_Med,
    .floatRight_Med
    {
        float: none;
    }


    /*  Clear  */

    .clear_Sma
    {
        clear: both;
        content: "";
        display: block; 
        height: 0;
        line-height: 0;
        margin: 0;
        overflow: hidden;
        padding: 0;
    }

    .clear_Lrg,
    .clear_Med,
    .clear_XSma
    {
        clear: none;
        display: none;
    }


    /*  columns  */

    .colRow
    {
        margin-left: -12px; /* #CONFIG# - Half of the column gutter size */
        margin-right: -12px; /* #CONFIG# - Half of the column gutter size */
    }

        .colRow .col
        {
            margin-bottom: 0; /* #CONFIG# - Small bottom margin size for columns */
            padding-left: 12px; /* #CONFIG# - Half of the column gutter size */
            padding-right: 12px; /* #CONFIG# - Half of the column gutter size */
        }

    .col00_Sma
    {
        display: none;
        width: 0%;
    }

    .col01_Sma
    {
        width: 8.333333333333332%;
    }

    .col02_Sma
    {
        width: 16.666666666666664%;
    }

    .col03_Sma
    {
        width: 25%;
    }

    .col04_Sma
    {
        width: 33.33333333333333%;
    }

    .col05_Sma
    {
        width: 41.66666666666667%;
    }

    .col06_Sma
    {
        width: 50%;
    }

    .col07_Sma
    {
        width: 58.333333333333336%;
    }

    .col08_Sma
    {
        width: 66.66666666666666%;
    }

    .col09_Sma
    {
        width: 75%;
    }

    .col10_Sma
    {
        width: 83.33333333333334%;
    }

    .col11_Sma
    {
        width: 91.66666666666666%;
    }

    .col12_Sma
    {
        width: 100%;
    }

    .col .colColour
    {
        background-color: green;
    }
}

/**
 *
 *  Extra Small - Old Phones
 * 
*/

@media (max-width: 320px) /* #CONFIG# - Maxiumum width for extra small devices, any device larger than this is small */
{
    /* Text align */
    .centered_XSma { text-align: center !important; }
    .lefted_XSma { text-align: left !important; }
    .righted_XSma { text-align: right !important; }

    /*  Container   */

    .container,
    .container_XSma
    {
        padding-left: 10px; /* #CONFIG # - The padding on the left hand side of the container */
        padding-right: 10px; /* #CONFIG # - The padding on the right hand side of the container */
    }

    /*  Show and hides  */

    .hide_XSma
    {
        display: none !important;
    }

    .show_XSma
    {
        display: block !important;
    }

    a.show_XSma,
    span.show_XSma
    {
        display: inline !important;
    }


    /*  Floats  */

    .floatLeft_XSma
    {
        float: left;
    }

    .floatRight_XSma
    {
        float: right;
    }

    .floatLeft_Lrg,
    .floatRight_Lrg,
    .floatLeft_Med,
    .floatRight_Med,
    .floatLeft_Sma,
    .floatRight_Sma
    {
        float: none;
    }


    /*  Clear  */

    .clear_XSma
    {
        clear: both;
        content: "";
        display: block; 
        height: 0;
        line-height: 0;
        margin: 0;
        overflow: hidden;
        padding: 0;
    }

    .clear_Lrg,
    .clear_Med,
    .clear_Sma
    {
        clear: none;
        display: none;
    }


    /*  columns  */

    .colRow
    {
        margin-left: -8px; /* #CONFIG# - Half of the column gutter size */
        margin-right: -8px; /* #CONFIG# - Half of the column gutter size */
    }

        .colRow .col
        {
            margin-bottom: 0; /* #CONFIG# - Small bottom margin size for columns */
            padding-left: 8px; /* #CONFIG# - Half of the column gutter size */
            padding-right: 8px; /* #CONFIG# - Half of the column gutter size */
        }

    .col00_XSma
    {
        display: none;
        width: 0%;
    }

    .col01_XSma
    {
        width: 8.333333333333332%;
    }

    .col02_XSma
    {
        width: 16.666666666666664%;
    }

    .col03_XSma
    {
        width: 25%;
    }

    .col04_XSma
    {
        width: 33.33333333333333%;
    }

    .col05_XSma
    {
        width: 41.66666666666667%;
    }

    .col06_XSma
    {
        width: 50%;
    }

    .col07_XSma
    {
        width: 58.333333333333336%;
    }

    .col08_XSma
    {
        width: 66.66666666666666%;
    }

    .col09_XSma
    {
        width: 75%;
    }

    .col10_XSma
    {
        width: 83.33333333333334%;
    }

    .col11_XSma
    {
        width: 91.66666666666666%;
    }

    .col12_XSma
    {
        width: 100%;
    }

    .col .colColour
    {
        background-color: red;
    }
}


/*
    Override certain styles for the modal
*/

body.modal .container {
    max-width: 100%;
    padding: 0;
}

body.modal .container .colRow {
    margin: 0;
}

/* Padding */

@media (min-width: 1024px)
{
    .noPaddingLeft_Lrg
    {
        padding-left: 0 !important;
    }
}