/*#############################################################################
    Grid CSS for the site
#############################################################################*/

@media all {
    html { box-sizing: border-box; }
    *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; }
    .device-check { visibility: hidden; height: 0; }
        .device-check:before { font-size: 0px; }

    .grid-container { margin-right: auto; margin-left: auto; clear: both; }
        .grid-container:before, .grid-container:after { content: " "; display: table; }
        .grid-container:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
    .grid-row { display: block; clear: both; }
        .grid-row:before, .grid-row:after { content: " "; display: table; }
        .grid-row:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
    .grid-cell { clear: none; float: left; position: relative; min-height: 1px; }

    /* gutter are twice the padding value */
    .grid-container.grid-gutter-0 { padding-left: 0px; padding-right: 0px; }
        .grid-container.grid-gutter-0 .grid-row { margin-left: 0px; margin-right: 0px; }
            .grid-container.grid-gutter-0 .grid-row .grid-cell { padding-left: 0px; padding-right: 0px; }
                .grid-container.grid-gutter-0 .grid-row .grid-cell.pad-0-sides { padding-left: 0; padding-right: 0; }
                .grid-container.grid-gutter-0 .grid-row .grid-cell.pad-0-left { padding-left: 0; }
                .grid-container.grid-gutter-0 .grid-row .grid-cell.pad-0-right { padding-right: 0; }

    .grid-container.grid-gutter-1 { padding-left: 4px; padding-right: 4px; }
        .grid-container.grid-gutter-1 .grid-row { margin-left: -4px; margin-right: -4px; }
            .grid-container.grid-gutter-1 .grid-row .grid-cell { padding-left: 4px; padding-right: 4px; }
                .grid-container.grid-gutter-1 .grid-row .grid-cell.pad-0-sides { padding-left: 0; padding-right: 0; }
                .grid-container.grid-gutter-1 .grid-row .grid-cell.pad-0-left { padding-left: 0; }
                .grid-container.grid-gutter-1 .grid-row .grid-cell.pad-0-right { padding-right: 0; }

    .grid-container.grid-gutter-2 { padding-left: 8px; padding-right: 8px; }
        .grid-container.grid-gutter-2 .grid-row { margin-left: -8px; margin-right: -8px; }
            .grid-container.grid-gutter-2 .grid-row .grid-cell { padding-left: 8px; padding-right: 8px; }
                .grid-container.grid-gutter-2 .grid-row .grid-cell.pad-0-sides { padding-left: 0; padding-right: 0; }
                .grid-container.grid-gutter-2 .grid-row .grid-cell.pad-0-left { padding-left: 0; }
                .grid-container.grid-gutter-2 .grid-row .grid-cell.pad-0-right { padding-right: 0; }

    .grid-container.grid-gutter-3 { padding-left: 12px; padding-right: 12px; }
        .grid-container.grid-gutter-3 .grid-row { margin-left: -12px; margin-right: -12px; }
            .grid-container.grid-gutter-3 .grid-row .grid-cell { padding-left: 12px; padding-right: 12px; }
                .grid-container.grid-gutter-3 .grid-row .grid-cell.pad-0-sides { padding-left: 0; padding-right: 0; }
                .grid-container.grid-gutter-3 .grid-row .grid-cell.pad-0-left { padding-left: 0; }
                .grid-container.grid-gutter-3 .grid-row .grid-cell.pad-0-right { padding-right: 0; }

    .grid-container.grid-gutter-4 { padding-left: 16px; padding-right: 16px; }
        .grid-container.grid-gutter-4 .grid-row { margin-left: -16px; margin-right: -16px; }
            .grid-container.grid-gutter-4 .grid-row .grid-cell { padding-left: 16px; padding-right: 16px; }
                .grid-container.grid-gutter-4 .grid-row .grid-cell.pad-0-sides { padding-left: 0; padding-right: 0; }
                .grid-container.grid-gutter-4 .grid-row .grid-cell.pad-0-left { padding-left: 0; }
                .grid-container.grid-gutter-4 .grid-row .grid-cell.pad-0-right { padding-right: 0; }

    .grid-container.grid-gutter-5 { padding-left: 20px; padding-right: 20px; }
        .grid-container.grid-gutter-5 .grid-row { margin-left: -20px; margin-right: -20px; }
            .grid-container.grid-gutter-5 .grid-row .grid-cell { padding-left: 20px; padding-right: 20px; }
                .grid-container.grid-gutter-5 .grid-row .grid-cell.pad-0-sides { padding-left: 0; padding-right: 0; }
                .grid-container.grid-gutter-5 .grid-row .grid-cell.pad-0-left { padding-left: 0; }
                .grid-container.grid-gutter-5 .grid-row .grid-cell.pad-0-right { padding-right: 0; }

    .grid-container.grid-gutter-6 { padding-left: 24px; padding-right: 24px; }
        .grid-container.grid-gutter-6 .grid-row { margin-left: -24px; margin-right: -24px; }
            .grid-container.grid-gutter-6 .grid-row .grid-cell { padding-left: 24px; padding-right: 24px; }
                .grid-container.grid-gutter-6 .grid-row .grid-cell.pad-0-sides { padding-left: 0; padding-right: 0; }
                .grid-container.grid-gutter-6 .grid-row .grid-cell.pad-0-left { padding-left: 0; }
                .grid-container.grid-gutter-6 .grid-row .grid-cell.pad-0-right { padding-right: 0; }

    .grid-container.grid-gutter-7 { padding-left: 28px; padding-right: 28px; }
        .grid-container.grid-gutter-7 .grid-row { margin-left: -28px; margin-right: -28px; }
            .grid-container.grid-gutter-7 .grid-row .grid-cell { padding-left: 28px; padding-right: 28px; }
                .grid-container.grid-gutter-7 .grid-row .grid-cell.pad-0-sides { padding-left: 0; padding-right: 0; }
                .grid-container.grid-gutter-7 .grid-row .grid-cell.pad-0-left { padding-left: 0; }
                .grid-container.grid-gutter-7 .grid-row .grid-cell.pad-0-right { padding-right: 0; }

    .grid-container.grid-gutter-8 { padding-left: 32px; padding-right: 32px; }
        .grid-container.grid-gutter-8 .grid-row { margin-left: -32px; margin-right: -32px; }
            .grid-container.grid-gutter-8 .grid-row .grid-cell { padding-left: 32px; padding-right: 32px; }
                .grid-container.grid-gutter-8 .grid-row .grid-cell.pad-0-sides { padding-left: 0; padding-right: 0; }
                .grid-container.grid-gutter-8 .grid-row .grid-cell.pad-0-left { padding-left: 0; }
                .grid-container.grid-gutter-8 .grid-row .grid-cell.pad-0-right { padding-right: 0; }

    .grid-container.grid-no-gutter-sides { padding-left: 0; padding-right: 0; }


    /* BASE GRID - 12 columns */
    .grid, .grid-0, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { clear: none; float: left; }
    .grid-0 { display: none; }
    .grid-1 { width: 8.33333%; }
    .grid-2 { width: 16.66667%; }
    .grid-3 { width: 25%; }
    .grid-4 { width: 33.33333%; }
    .grid-5 { width: 41.66667%; }
    .grid-6 { width: 50%; }
    .grid-7 { width: 58.33333%; }
    .grid-8 { width: 66.66667%; }
    .grid-9 { width: 75%; }
    .grid-10 { width: 83.33333%; }
    .grid-11 { width: 91.66667%; }
    .grid-12 { width: 100%; }


    /* BASE OFFSET */
    .offset-0 { margin-left: 0; }
    .offset-1 { margin-left: 8.33333%; }
    .offset-2 { margin-left: 16.66667%; }
    .offset-3 { margin-left: 25%; }
    .offset-4 { margin-left: 33.33333%; }
    .offset-5 { margin-left: 41.66667%; }
    .offset-6 { margin-left: 50%; }
    .offset-7 { margin-left: 58.33333%; }
    .offset-8 { margin-left: 66.66667%; }
    .offset-9 { margin-left: 75%; }
    .offset-10 { margin-left: 83.33333%; }
    .offset-11 { margin-left: 91.66667%; }
    .offset-12 { margin-left: 100%; }


    /* BASE PADDING */
    .pad-1 { padding: 8px; }
    .pad-1-left { padding-left: 8px; }
    .pad-1-right { padding-right: 8px; }
    .pad-1-top { padding-top: 8px; }
    .pad-1-bottom { padding-bottom: 8px; }
    .pad-1-sides { padding-left: 8px; padding-right: 8px; }
    .pad-1-vert { padding-top: 8px; padding-bottom: 8px; }

    .pad-2 { padding: 16px; }
    .pad-2-left { padding-left: 16px; }
    .pad-2-right { padding-right: 16px; }
    .pad-2-top { padding-top: 16px; }
    .pad-2-bottom { padding-bottom: 16px; }
    .pad-2-sides { padding-left: 16px; padding-right: 16px; }
    .pad-2-vert { padding-top: 16px; padding-bottom: 16px; }

    .pad-3 { padding: 24px; }
    .pad-3-left { padding-left: 24px; }
    .pad-3-right { padding-right: 24px; }
    .pad-3-top { padding-top: 24px; }
    .pad-3-bottom { padding-bottom: 24px; }
    .pad-3-sides { padding-left: 24px; padding-right: 24px; }
    .pad-3-vert { padding-top: 24px; padding-bottom: 24px; }

    .pad-4 { padding: 32px; }
    .pad-4-left { padding-left: 32px; }
    .pad-4-right { padding-right: 32px; }
    .pad-4-top { padding-top: 32px; }
    .pad-4-bottom { padding-bottom: 32px; }
    .pad-4-sides { padding-left: 32px; padding-right: 32px; }
    .pad-4-vert { padding-top: 32px; padding-bottom: 32px; }

    .pad-5 { padding: 40px; }
    .pad-5-left { padding-left: 40px; }
    .pad-5-right { padding-right: 40px; }
    .pad-5-top { padding-top: 40px; }
    .pad-5-bottom { padding-bottom: 40px; }
    .pad-5-sides { padding-left: 40px; padding-right: 40px; }
    .pad-5-vert { padding-top: 40px; padding-bottom: 40px; }

    .pad-6 { padding: 48px; }
    .pad-6-left { padding-left: 48px; }
    .pad-6-right { padding-right: 48px; }
    .pad-6-top { padding-top: 48px; }
    .pad-6-bottom { padding-bottom: 48px; }
    .pad-6-sides { padding-left: 48px; padding-right: 48px; }
    .pad-6-vert { padding-top: 48px; padding-bottom: 48px; }

    .pad-7 { padding: 56px; }
    .pad-7-left { padding-left: 56px; }
    .pad-7-right { padding-right: 56px; }
    .pad-7-top { padding-top: 56px; }
    .pad-7-bottom { padding-bottom: 56px; }
    .pad-7-sides { padding-left: 56px; padding-right: 56px; }
    .pad-7-vert { padding-top: 56px; padding-bottom: 56px; }

    .pad-0 { padding: 0; }
    .pad-0-left { padding-left: 0; }
    .pad-0-right { padding-right: 0; }
    .pad-0-top { padding-top: 0; }
    .pad-0-bottom { padding-bottom: 0; }
    .pad-0-sides { padding-left: 0; padding-right: 0; }
    .pad-0-vert { padding-top: 0; padding-bottom: 0; }


    /* BASE MARGIN for rows or cells */
    .marg-1 { margin: 8px; }
    .marg-1-left { margin-left: 8px; }
    .marg-1-right { margin-right: 8px; }
    .marg-1-top { margin-top: 8px; }
    .marg-1-bottom { margin-bottom: 8px; }
    .marg-1-sides { margin-left: 8px; margin-right: 8px; }
    .marg-1-vert { margin-top: 8px; margin-bottom: 8px; }

    .marg-2 { margin: 16px; }
    .marg-2-left { margin-left: 16px; }
    .marg-2-right { margin-right: 16px; }
    .marg-2-top { margin-top: 16px; }
    .marg-2-bottom { margin-bottom: 16px; }
    .marg-2-sides { margin-left: 16px; margin-right: 16px; }
    .marg-2-vert { margin-top: 16px; margin-bottom: 16px; }

    .marg-3 { margin: 24px; }
    .marg-3-left { margin-left: 24px; }
    .marg-3-right { margin-right: 24px; }
    .marg-3-top { margin-top: 24px; }
    .marg-3-bottom { margin-bottom: 24px; }
    .marg-3-sides { margin-left: 24px; margin-right: 24px; }
    .marg-3-vert { margin-top: 24px; margin-bottom: 24px; }

    .marg-4 { margin: 32px; }
    .marg-4-left { margin-left: 32px; }
    .marg-4-right { margin-right: 32px; }
    .marg-4-top { margin-top: 32px; }
    .marg-4-bottom { margin-bottom: 32px; }
    .marg-4-sides { margin-left: 32px; margin-right: 32px; }
    .marg-4-vert { margin-top: 32px; margin-bottom: 32px; }

    .marg-5 { margin: 40px; }
    .marg-5-left { margin-left: 40px; }
    .marg-5-right { margin-right: 40px; }
    .marg-5-top { margin-top: 40px; }
    .marg-5-bottom { margin-bottom: 40px; }
    .marg-5-sides { margin-left: 40px; margin-right: 40px; }
    .marg-5-vert { margin-top: 40px; margin-bottom: 40px; }

    .marg-6 { margin: 48px; }
    .marg-6-left { margin-left: 48px; }
    .marg-6-right { margin-right: 48px; }
    .marg-6-top { margin-top: 48px; }
    .marg-6-bottom { margin-bottom: 48px; }
    .marg-6-sides { margin-left: 48px; margin-right: 48px; }
    .marg-6-vert { margin-top: 48px; margin-bottom: 48px; }

    .marg-7 { margin: 56px; }
    .marg-7-left { margin-left: 56px; }
    .marg-7-right { margin-right: 56px; }
    .marg-7-top { margin-top: 56px; }
    .marg-7-bottom { margin-bottom: 56px; }
    .marg-7-sides { margin-left: 56px; margin-right: 56px; }
    .marg-7-vert { margin-top: 56px; margin-bottom: 56px; }

    .marg-0 { margin: 0; }
    .marg-0-left { margin-left: 0 !important; }
    .marg-0-right { margin-right: 0; }
    .marg-0-top { margin-top: 0; }
    .marg-0-bottom { margin-bottom: 0; }
    .marg-0-sides { margin-left: 0; margin-right: 0; }
    .marg-0-vert { margin-top: 0; margin-bottom: 0; }


    /* BASE NEGATIVE MARGIN (use for the last row to remove cell margin in responsive modes)*/
    .marg-m1 { margin: -8px; }
    .marg-m1-left { margin-left: -8px; }
    .marg-m1-right { margin-right: -8px; }
    .marg-m1-top { margin-top: -8px; }
    .marg-m1-bottom { margin-bottom: -8px; }
    .marg-m1-sides { margin-left: -8px; margin-right: -8px; }
    .marg-m1-vert { margin-top: -8px; margin-bottom: -8px; }

    .marg-m2 { margin: -16px; }
    .marg-m2-left { margin-left: -16px; }
    .marg-m2-right { margin-right: -16px; }
    .marg-m2-top { margin-top: -16px; }
    .marg-m2-bottom { margin-bottom: -16px; }
    .marg-m2-sides { margin-left: -16px; margin-right: -16px; }
    .marg-m2-vert { margin-top: -16px; margin-bottom: -16px; }

    .marg-m3 { margin: -24px; }
    .marg-m3-left { margin-left: -24px; }
    .marg-m3-right { margin-right: -24px; }
    .marg-m3-top { margin-top: -24px; }
    .marg-m3-bottom { margin-bottom: -24px; }
    .marg-m3-sides { margin-left: -24px; margin-right: -24px; }
    .marg-m3-vert { margin-top: -24px; margin-bottom: -24px; }

    .marg-m4 { margin: -32px; }
    .marg-m4-left { margin-left: -32px; }
    .marg-m4-right { margin-right: -32px; }
    .marg-m4-top { margin-top: -32px; }
    .marg-m4-bottom { margin-bottom: -32px; }
    .marg-m4-sides { margin-left: -32px; margin-right: -32px; }
    .marg-m4-vert { margin-top: -32px; margin-bottom: -32px; }

    .marg-m5 { margin: -40px; }
    .marg-m5-left { margin-left: -40px; }
    .marg-m5-right { margin-right: -40px; }
    .marg-m5-top { margin-top: -40px; }
    .marg-m5-bottom { margin-bottom: -40px; }
    .marg-m5-sides { margin-left: -40px; margin-right: -40px; }
    .marg-m5-vert { margin-top: -40px; margin-bottom: -40px; }

    .marg-m6 { margin: -48px; }
    .marg-m6-left { margin-left: -48px; }
    .marg-m6-right { margin-right: -48px; }
    .marg-m6-top { margin-top: -48px; }
    .marg-m6-bottom { margin-bottom: -48px; }
    .marg-m6-sides { margin-left: -48px; margin-right: -48px; }
    .marg-m6-vert { margin-top: -48px; margin-bottom: -48px; }

    .marg-m7 { margin: -56px; }
    .marg-m7-left { margin-left: -56px; }
    .marg-m7-right { margin-right: -56px; }
    .marg-m7-top { margin-top: -56px; }
    .marg-m7-bottom { margin-bottom: -56px; }
    .marg-m7-sides { margin-left: -56px; margin-right: -56px; }
    .marg-m7-vert { margin-top: -56px; margin-bottom: -56px; }

    .marg-auto-sides { margin-left: auto; margin-right: auto; }

    /* CONTAINERS */
    .container { margin-left: auto; margin-right: auto; max-width: 100%; }
    .container-fluid { margin-left: auto; margin-right: auto; width: 100%; }
        .container:after, .container-fluid:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
}

/* XS */
@media all and (max-width: 576px) {
    /* XS GRID - 4 columns */
    .device-check:before { content: "xs"; }
    .hidden-xs { display: none !important; }

    .xs-grid, .xs-grid-0, .xs-grid-1, .xs-grid-2, .xs-grid-3, .xs-grid-4, xs-grid-1_3, xs-grid-2_3 { clear: none; float: left; }
    .xs-grid-0 { display: none; }
    .xs-grid-1 { width: 25%; }
    .xs-grid-2 { width: 50%; }
    .xs-grid-3 { width: 75%; }
    .xs-grid-4 { width: 100%; }
    .xs-grid-1_3 { width: 33.33%; }
    .xs-grid-2_3 { width: 66.66%; }


    /* XS OFFSET */
    .xs-offset-0 { margin-left: 0; }
    .xs-offset-1 { margin-left: 25%; }
    .xs-offset-2 { margin-left: 50%; }
    .xs-offset-3 { margin-left: 75%; }
    .xs-offset-4 { margin-left: 100%; }


    /* XS PADDING */
    .xs-pad-1 { padding: 8px; }
    .xs-pad-1-left { padding-left: 8px; }
    .xs-pad-1-right { padding-right: 8px; }
    .xs-pad-1-top { padding-top: 8px; }
    .xs-pad-1-bottom { padding-bottom: 8px; }
    .xs-pad-1-sides { padding-left: 8px; padding-right: 8px; }
    .xs-pad-1-vert { padding-top: 8px; padding-bottom: 8px; }

    .xs-pad-2 { padding: 16px; }
    .xs-pad-2-left { padding-left: 16px; }
    .xs-pad-2-right { padding-right: 16px; }
    .xs-pad-2-top { padding-top: 16px; }
    .xs-pad-2-bottom { padding-bottom: 16px; }
    .xs-pad-2-sides { padding-left: 16px; padding-right: 16px; }
    .xs-pad-2-vert { padding-top: 16px; padding-bottom: 16px; }

    .xs-pad-3 { padding: 24px; }
    .xs-pad-3-left { padding-left: 24px; }
    .xs-pad-3-right { padding-right: 24px; }
    .xs-pad-3-top { padding-top: 24px; }
    .xs-pad-3-bottom { padding-bottom: 24px; }
    .xs-pad-3-sides { padding-left: 24px; padding-right: 24px; }
    .xs-pad-3-vert { padding-top: 24px; padding-bottom: 24px; }

    .xs-pad-4 { padding: 32px; }
    .xs-pad-4-left { padding-left: 32px; }
    .xs-pad-4-right { padding-right: 32px; }
    .xs-pad-4-top { padding-top: 32px; }
    .xs-pad-4-bottom { padding-bottom: 32px; }
    .xs-pad-4-sides { padding-left: 32px; padding-right: 32px; }
    .xs-pad-4-vert { padding-top: 32px; padding-bottom: 32px; }

    .xs-pad-5 { padding: 40px; }
    .xs-pad-5-left { padding-left: 40px; }
    .xs-pad-5-right { padding-right: 40px; }
    .xs-pad-5-top { padding-top: 40px; }
    .xs-pad-5-bottom { padding-bottom: 40px; }
    .xs-pad-5-sides { padding-left: 40px; padding-right: 40px; }
    .xs-pad-5-vert { padding-top: 40px; padding-bottom: 40px; }

    .xs-pad-6 { padding: 48px; }
    .xs-pad-6-left { padding-left: 48px; }
    .xs-pad-6-right { padding-right: 48px; }
    .xs-pad-6-top { padding-top: 48px; }
    .xs-pad-6-bottom { padding-bottom: 48px; }
    .xs-pad-6-sides { padding-left: 48px; padding-right: 48px; }
    .xs-pad-6-vert { padding-top: 48px; padding-bottom: 48px; }

    .xs-pad-7 { padding: 56px; }
    .xs-pad-7-left { padding-left: 56px; }
    .xs-pad-7-right { padding-right: 56px; }
    .xs-pad-7-top { padding-top: 56px; }
    .xs-pad-7-bottom { padding-bottom: 56px; }
    .xs-pad-7-sides { padding-left: 56px; padding-right: 56px; }
    .xs-pad-7-vert { padding-top: 56px; padding-bottom: 56px; }

    .xs-pad-0 { padding: 0; }
    .xs-pad-0-left { padding-left: 0; }
    .xs-pad-0-right { padding-right: 0; }
    .xs-pad-0-top { padding-top: 0; }
    .xs-pad-0-bottom { padding-bottom: 0; }
    .xs-pad-0-sides { padding-left: 0; padding-right: 0; }
    .xs-pad-0-vert { padding-top: 0; padding-bottom: 0; }


    /* XS MARGIN */
    .xs-marg-m2-top { margin-top: -16px; }

    .xs-marg-1 { margin: 8px; }
    .xs-marg-1-left { margin-left: 8px; }
    .xs-marg-1-right { margin-right: 8px; }
    .xs-marg-1-top { margin-top: 8px; }
    .xs-marg-1-bottom { margin-bottom: 8px; }
    .xs-marg-1-sides { margin-left: 8px; margin-right: 8px; }
    .xs-marg-1-vert { margin-top: 8px; margin-bottom: 8px; }

    .xs-marg-2 { margin: 16px; }
    .xs-marg-2-left { margin-left: 16px; }
    .xs-marg-2-right { margin-right: 16px; }
    .xs-marg-2-top { margin-top: 16px; }
    .xs-marg-2-bottom { margin-bottom: 16px; }
    .xs-marg-2-sides { margin-left: 16px; margin-right: 16px; }
    .xs-marg-2-vert { margin-top: 16px; margin-bottom: 16px; }

    .xs-marg-3 { margin: 24px; }
    .xs-marg-3-left { margin-left: 24px; }
    .xs-marg-3-right { margin-right: 24px; }
    .xs-marg-3-top { margin-top: 24px; }
    .xs-marg-3-bottom { margin-bottom: 24px; }
    .xs-marg-3-sides { margin-left: 24px; margin-right: 24px; }
    .xs-marg-3-vert { margin-top: 24px; margin-bottom: 24px; }

    .xs-marg-4 { margin: 32px; }
    .xs-marg-4-left { margin-left: 32px; }
    .xs-marg-4-right { margin-right: 32px; }
    .xs-marg-4-top { margin-top: 32px; }
    .xs-marg-4-bottom { margin-bottom: 32px; }
    .xs-marg-4-sides { margin-left: 32px; margin-right: 32px; }
    .xs-marg-4-vert { margin-top: 32px; margin-bottom: 32px; }

    .xs-marg-5 { margin: 40px; }
    .xs-marg-5-left { margin-left: 40px; }
    .xs-marg-5-right { margin-right: 40px; }
    .xs-marg-5-top { margin-top: 40px; }
    .xs-marg-5-bottom { margin-bottom: 40px; }
    .xs-marg-5-sides { margin-left: 40px; margin-right: 40px; }
    .xs-marg-5-vert { margin-top: 40px; margin-bottom: 40px; }

    .xs-marg-6 { margin: 48px; }
    .xs-marg-6-left { margin-left: 48px; }
    .xs-marg-6-right { margin-right: 48px; }
    .xs-marg-6-top { margin-top: 48px; }
    .xs-marg-6-bottom { margin-bottom: 48px; }
    .xs-marg-6-sides { margin-left: 48px; margin-right: 48px; }
    .xs-marg-6-vert { margin-top: 48px; margin-bottom: 48px; }

    .xs-marg-7 { margin: 56px; }
    .xs-marg-7-left { margin-left: 56px; }
    .xs-marg-7-right { margin-right: 56px; }
    .xs-marg-7-top { margin-top: 56px; }
    .xs-marg-7-bottom { margin-bottom: 56px; }
    .xs-marg-7-sides { margin-left: 56px; margin-right: 56px; }
    .xs-marg-7-vert { margin-top: 56px; margin-bottom: 56px; }

    .xs-marg-0 { margin: 0; }
    .xs-marg-0-left { margin-left: 0; }
    .xs-marg-0-right { margin-right: 0; }
    .xs-marg-0-top { margin-top: 0; }
    .xs-marg-0-bottom { margin-bottom: 0; }
    .xs-marg-0-sides { margin-left: 0; margin-right: 0; }
    .xs-marg-0-vert { margin-top: 0; margin-bottom: 0; }


    /* BASE NEGATIVE MARGIN (use for the last row to remove cell margin in responsive modes)*/
    .xs-marg-m0 { margin: 0; }
    .xs-marg-m0-left { margin-left: 0; }
    .xs-marg-m0-right { margin-right: 0; }
    .xs-marg-m0-top { margin-top: 0; }
    .xs-marg-m0-bottom { margin-bottom: 0; }
    .xs-marg-m0-sides { margin-left: 0; margin-right: 0; }
    .xs-marg-m0-vert { margin-top: 0; margin-bottom: 0; }

    .xs-marg-m1 { margin: -8px; }
    .xs-marg-m1-left { margin-left: -8px; }
    .xs-marg-m1-right { margin-right: -8px; }
    .xs-marg-m1-top { margin-top: -8px; }
    .xs-marg-m1-bottom { margin-bottom: -8px; }
    .xs-marg-m1-sides { margin-left: -8px; margin-right: -8px; }
    .xs-marg-m1-vert { margin-top: -8px; margin-bottom: -8px; }

    .xs-marg-m2 { margin: -16px; }
    .xs-marg-m2-left { margin-left: -16px; }
    .xs-marg-m2-right { margin-right: -16px; }
    .xs-marg-m2-top { margin-top: -16px; }
    .xs-marg-m2-bottom { margin-bottom: -16px; }
    .xs-marg-m2-sides { margin-left: -16px; margin-right: -16px; }
    .xs-marg-m2-vert { margin-top: -16px; margin-bottom: -16px; }

    .xs-marg-m3 { margin: -24px; }
    .xs-marg-m3-left { margin-left: -24px; }
    .xs-marg-m3-right { margin-right: -24px; }
    .xs-marg-m3-top { margin-top: -24px; }
    .xs-marg-m3-bottom { margin-bottom: -24px; }
    .xs-marg-m3-sides { margin-left: -24px; margin-right: -24px; }
    .xs-marg-m3-vert { margin-top: -24px; margin-bottom: -24px; }

    .xs-marg-m4 { margin: -32px; }
    .xs-marg-m4-left { margin-left: -32px; }
    .xs-marg-m4-right { margin-right: -32px; }
    .xs-marg-m4-top { margin-top: -32px; }
    .xs-marg-m4-bottom { margin-bottom: -32px; }
    .xs-marg-m4-sides { margin-left: -32px; margin-right: -32px; }
    .xs-marg-m4-vert { margin-top: -32px; margin-bottom: -32px; }

    .xs-marg-m5 { margin: -40px; }
    .xs-marg-m5-left { margin-left: -40px; }
    .xs-marg-m5-right { margin-right: -40px; }
    .xs-marg-m5-top { margin-top: -40px; }
    .xs-marg-m5-bottom { margin-bottom: -40px; }
    .xs-marg-m5-sides { margin-left: -40px; margin-right: -40px; }
    .xs-marg-m5-vert { margin-top: -40px; margin-bottom: -40px; }

    .xs-marg-m6 { margin: -48px; }
    .xs-marg-m6-left { margin-left: -48px; }
    .xs-marg-m6-right { margin-right: -48px; }
    .xs-marg-m6-top { margin-top: -48px; }
    .xs-marg-m6-bottom { margin-bottom: -48px; }
    .xs-marg-m6-sides { margin-left: -48px; margin-right: -48px; }
    .xs-marg-m6-vert { margin-top: -48px; margin-bottom: -48px; }

    .xs-marg-m7 { margin: -56px; }
    .xs-marg-m7-left { margin-left: -56px; }
    .xs-marg-m7-right { margin-right: -56px; }
    .xs-marg-m7-top { margin-top: -56px; }
    .xs-marg-m7-bottom { margin-bottom: -56px; }
    .xs-marg-m7-sides { margin-left: -56px; margin-right: -56px; }
    .xs-marg-m7-vert { margin-top: -56px; margin-bottom: -56px; }


    /* CONTAINERS */
    .container { width: 92%; padding: 0 8px;  }
}

/* SM */
@media all and (min-width: 577px) and (max-width: 767px) {
    /* SM GRID - 8 columns */
    .device-check:before { content: "sm"; }
    .hidden-sm { display: none !important; }

    .sm-grid, .sm-grid-0, .sm-grid-1, .sm-grid-2, .sm-grid-3, .sm-grid-4, .sm-grid-5, .sm-grid-6, .sm-grid-7, .sm-grid-7, sm-grid-1_3, sm-grid-2_3 { clear: none; float: left; }
    .sm-grid-0 { display: none; }
    .sm-grid-1 { width: 12.5%; }
    .sm-grid-2 { width: 25%; }
    .sm-grid-3 { width: 37.5%; }
    .sm-grid-4 { width: 50%; }
    .sm-grid-5 { width: 62.5%; }
    .sm-grid-6 { width: 75%; }
    .sm-grid-7 { width: 87.5%; }
    .sm-grid-8 { width: 100%; }
    .sm-grid-1_3 { width: 33.33%; }
    .sm-grid-2_3 { width: 66.66%; }


    /* SM OFFSET */
    .sm-offset-0 { margin-left: 0; }
    .sm-offset-1 { margin-left: 12.5%; }
    .sm-offset-2 { margin-left: 25%; }
    .sm-offset-3 { margin-left: 37.5%; }
    .sm-offset-4 { margin-left: 50%; }
    .sm-offset-5 { margin-left: 62.5%; }
    .sm-offset-6 { margin-left: 75%; }
    .sm-offset-7 { margin-left: 87.5%; }
    .sm-offset-8 { margin-left: 100%; }


    /* SM PADDING */
    .sm-pad-1 { padding: 8px; }
    .sm-pad-1-left { padding-left: 8px; }
    .sm-pad-1-right { padding-right: 8px; }
    .sm-pad-1-top { padding-top: 8px; }
    .sm-pad-1-bottom { padding-bottom: 8px; }
    .sm-pad-1-sides { padding-left: 8px; padding-right: 8px; }
    .sm-pad-1-vert { padding-top: 8px; padding-bottom: 8px; }

    .sm-pad-2 { padding: 16px; }
    .sm-pad-2-left { padding-left: 16px; }
    .sm-pad-2-right { padding-right: 16px; }
    .sm-pad-2-top { padding-top: 16px; }
    .sm-pad-2-bottom { padding-bottom: 16px; }
    .sm-pad-2-sides { padding-left: 16px; padding-right: 16px; }
    .sm-pad-2-vert { padding-top: 16px; padding-bottom: 16px; }

    .sm-pad-3 { padding: 24px; }
    .sm-pad-3-left { padding-left: 24px; }
    .sm-pad-3-right { padding-right: 24px; }
    .sm-pad-3-top { padding-top: 24px; }
    .sm-pad-3-bottom { padding-bottom: 24px; }
    .sm-pad-3-sides { padding-left: 24px; padding-right: 24px; }
    .sm-pad-3-vert { padding-top: 24px; padding-bottom: 24px; }

    .sm-pad-4 { padding: 32px; }
    .sm-pad-4-left { padding-left: 32px; }
    .sm-pad-4-right { padding-right: 32px; }
    .sm-pad-4-top { padding-top: 32px; }
    .sm-pad-4-bottom { padding-bottom: 32px; }
    .sm-pad-4-sides { padding-left: 32px; padding-right: 32px; }
    .sm-pad-4-vert { padding-top: 32px; padding-bottom: 32px; }

    .sm-pad-5 { padding: 40px; }
    .sm-pad-5-left { padding-left: 40px; }
    .sm-pad-5-right { padding-right: 40px; }
    .sm-pad-5-top { padding-top: 40px; }
    .sm-pad-5-bottom { padding-bottom: 40px; }
    .sm-pad-5-sides { padding-left: 40px; padding-right: 40px; }
    .sm-pad-5-vert { padding-top: 40px; padding-bottom: 40px; }

    .sm-pad-6 { padding: 48px; }
    .sm-pad-6-left { padding-left: 48px; }
    .sm-pad-6-right { padding-right: 48px; }
    .sm-pad-6-top { padding-top: 48px; }
    .sm-pad-6-bottom { padding-bottom: 48px; }
    .sm-pad-6-sides { padding-left: 48px; padding-right: 48px; }
    .sm-pad-6-vert { padding-top: 48px; padding-bottom: 48px; }

    .sm-pad-7 { padding: 56px; }
    .sm-pad-7-left { padding-left: 56px; }
    .sm-pad-7-right { padding-right: 56px; }
    .sm-pad-7-top { padding-top: 56px; }
    .sm-pad-7-bottom { padding-bottom: 56px; }
    .sm-pad-7-sides { padding-left: 56px; padding-right: 56px; }
    .sm-pad-7-vert { padding-top: 56px; padding-bottom: 56px; }

    .sm-pad-0 { padding: 0; }
    .sm-pad-0-left { padding-left: 0; }
    .sm-pad-0-right { padding-right: 0; }
    .sm-pad-0-top { padding-top: 0; }
    .sm-pad-0-bottom { padding-bottom: 0; }
    .sm-pad-0-sides { padding-left: 0; padding-right: 0; }
    .sm-pad-0-vert { padding-top: 0; padding-bottom: 0; }


    /* SM MARGIN */
    .sm-marg-1 { margin: 8px; }
    .sm-marg-1-left { margin-left: 8px; }
    .sm-marg-1-right { margin-right: 8px; }
    .sm-marg-1-top { margin-top: 8px; }
    .sm-marg-1-bottom { margin-bottom: 8px; }
    .sm-marg-1-sides { margin-left: 8px; margin-right: 8px; }
    .sm-marg-1-vert { margin-top: 8px; margin-bottom: 8px; }

    .sm-marg-2 { margin: 16px; }
    .sm-marg-2-left { margin-left: 16px; }
    .sm-marg-2-right { margin-right: 16px; }
    .sm-marg-2-top { margin-top: 16px; }
    .sm-marg-2-bottom { margin-bottom: 16px; }
    .sm-marg-2-sides { margin-left: 16px; margin-right: 16px; }
    .sm-marg-2-vert { margin-top: 16px; margin-bottom: 16px; }

    .sm-marg-3 { margin: 24px; }
    .sm-marg-3-left { margin-left: 24px; }
    .sm-marg-3-right { margin-right: 24px; }
    .sm-marg-3-top { margin-top: 24px; }
    .sm-marg-3-bottom { margin-bottom: 24px; }
    .sm-marg-3-sides { margin-left: 24px; margin-right: 24px; }
    .sm-marg-3-vert { margin-top: 24px; margin-bottom: 24px; }

    .sm-marg-4 { margin: 32px; }
    .sm-marg-4-left { margin-left: 32px; }
    .sm-marg-4-right { margin-right: 32px; }
    .sm-marg-4-top { margin-top: 32px; }
    .sm-marg-4-bottom { margin-bottom: 32px; }
    .sm-marg-4-sides { margin-left: 32px; margin-right: 32px; }
    .sm-marg-4-vert { margin-top: 32px; margin-bottom: 32px; }

    .sm-marg-5 { margin: 40px; }
    .sm-marg-5-left { margin-left: 40px; }
    .sm-marg-5-right { margin-right: 40px; }
    .sm-marg-5-top { margin-top: 40px; }
    .sm-marg-5-bottom { margin-bottom: 40px; }
    .sm-marg-5-sides { margin-left: 40px; margin-right: 40px; }
    .sm-marg-5-vert { margin-top: 40px; margin-bottom: 40px; }

    .sm-marg-6 { margin: 48px; }
    .sm-marg-6-left { margin-left: 48px; }
    .sm-marg-6-right { margin-right: 48px; }
    .sm-marg-6-top { margin-top: 48px; }
    .sm-marg-6-bottom { margin-bottom: 48px; }
    .sm-marg-6-sides { margin-left: 48px; margin-right: 48px; }
    .sm-marg-6-vert { margin-top: 48px; margin-bottom: 48px; }

    .sm-marg-7 { margin: 56px; }
    .sm-marg-7-left { margin-left: 56px; }
    .sm-marg-7-right { margin-right: 56px; }
    .sm-marg-7-top { margin-top: 56px; }
    .sm-marg-7-bottom { margin-bottom: 56px; }
    .sm-marg-7-sides { margin-left: 56px; margin-right: 56px; }
    .sm-marg-7-vert { margin-top: 56px; margin-bottom: 56px; }

    .sm-marg-0 { margin: 0; }
    .sm-marg-0-left { margin-left: 0; }
    .sm-marg-0-right { margin-right: 0; }
    .sm-marg-0-top { margin-top: 0; }
    .sm-marg-0-bottom { margin-bottom: 0; }
    .sm-marg-0-sides { margin-left: 0; margin-right: 0; }
    .sm-marg-0-vert { margin-top: 0; margin-bottom: 0; }


    /* CONTAINERS */
    .container { width: 720px; padding: 0 16px; }
}

/* MD */
@media (min-width: 768px) and (max-width: 991px) {
    /* MD GRID - 8 columns */
    .device-check:before { content: "md"; }
    .hidden-md { display: none !important; }

    .md-grid, .md-grid-0, .md-grid-1, .md-grid-2, .md-grid-3, .md-grid-4, .md-grid-5, .md-grid-6, .md-grid-7, .md-grid-7 { clear: none; float: left; }
    .md-grid-0 { display: none; }
    .md-grid-1 { width: 12.5%; }
    .md-grid-2 { width: 25%; }
    .md-grid-3 { width: 37.5%; }
    .md-grid-4 { width: 50%; }
    .md-grid-5 { width: 62.5%; }
    .md-grid-6 { width: 75%; }
    .md-grid-7 { width: 87.5%; }
    .md-grid-8 { width: 100%; }


    /* MD OFFSET */
    .md-offset-0 { margin-left: 0; }
    .md-offset-1 { margin-left: 12.5%; }
    .md-offset-2 { margin-left: 25%; }
    .md-offset-3 { margin-left: 37.5%; }
    .md-offset-4 { margin-left: 50%; }
    .md-offset-5 { margin-left: 62.5%; }
    .md-offset-6 { margin-left: 75%; }
    .md-offset-7 { margin-left: 87.5%; }
    .md-offset-8 { margin-left: 100%; }


    /* MD PADDING */
    .md-pad-1 { padding: 8px; }
    .md-pad-1-left { padding-left: 8px; }
    .md-pad-1-right { padding-right: 8px; }
    .md-pad-1-top { padding-top: 8px; }
    .md-pad-1-bottom { padding-bottom: 8px; }
    .md-pad-1-sides { padding-left: 8px; padding-right: 8px; }
    .md-pad-1-vert { padding-top: 8px; padding-bottom: 8px; }

    .md-pad-2 { padding: 16px; }
    .md-pad-2-left { padding-left: 16px; }
    .md-pad-2-right { padding-right: 16px; }
    .md-pad-2-top { padding-top: 16px; }
    .md-pad-2-bottom { padding-bottom: 16px; }
    .md-pad-2-sides { padding-left: 16px; padding-right: 16px; }
    .md-pad-2-vert { padding-top: 16px; padding-bottom: 16px; }

    .md-pad-3 { padding: 24px; }
    .md-pad-3-left { padding-left: 24px; }
    .md-pad-3-right { padding-right: 24px; }
    .md-pad-3-top { padding-top: 24px; }
    .md-pad-3-bottom { padding-bottom: 24px; }
    .md-pad-3-sides { padding-left: 24px; padding-right: 24px; }
    .md-pad-3-vert { padding-top: 24px; padding-bottom: 24px; }

    .md-pad-4 { padding: 32px; }
    .md-pad-4-left { padding-left: 32px; }
    .md-pad-4-right { padding-right: 32px; }
    .md-pad-4-top { padding-top: 32px; }
    .md-pad-4-bottom { padding-bottom: 32px; }
    .md-pad-4-sides { padding-left: 32px; padding-right: 32px; }
    .md-pad-4-vert { padding-top: 32px; padding-bottom: 32px; }

    .md-pad-5 { padding: 40px; }
    .md-pad-5-left { padding-left: 40px; }
    .md-pad-5-right { padding-right: 40px; }
    .md-pad-5-top { padding-top: 40px; }
    .md-pad-5-bottom { padding-bottom: 40px; }
    .md-pad-5-sides { padding-left: 40px; padding-right: 40px; }
    .md-pad-5-vert { padding-top: 40px; padding-bottom: 40px; }

    .md-pad-6 { padding: 48px; }
    .md-pad-6-left { padding-left: 48px; }
    .md-pad-6-right { padding-right: 48px; }
    .md-pad-6-top { padding-top: 48px; }
    .md-pad-6-bottom { padding-bottom: 48px; }
    .md-pad-6-sides { padding-left: 48px; padding-right: 48px; }
    .md-pad-6-vert { padding-top: 48px; padding-bottom: 48px; }

    .md-pad-7 { padding: 56px; }
    .md-pad-7-left { padding-left: 56px; }
    .md-pad-7-right { padding-right: 56px; }
    .md-pad-7-top { padding-top: 56px; }
    .md-pad-7-bottom { padding-bottom: 56px; }
    .md-pad-7-sides { padding-left: 56px; padding-right: 56px; }
    .md-pad-7-vert { padding-top: 56px; padding-bottom: 56px; }

    .md-pad-0 { padding: 0; }
    .md-pad-0-left { padding-left: 0; }
    .md-pad-0-right { padding-right: 0; }
    .md-pad-0-top { padding-top: 0; }
    .md-pad-0-bottom { padding-bottom: 0; }
    .md-pad-0-sides { padding-left: 0; padding-right: 0; }
    .md-pad-0-vert { padding-top: 0; padding-bottom: 0; }


    /* MD MARGIN */
    .md-marg-1 { margin: 8px; }
    .md-marg-1-left { margin-left: 8px; }
    .md-marg-1-right { margin-right: 8px; }
    .md-marg-1-top { margin-top: 8px; }
    .md-marg-1-bottom { margin-bottom: 8px; }
    .md-marg-1-sides { margin-left: 8px; margin-right: 8px; }
    .md-marg-1-vert { margin-top: 8px; margin-bottom: 8px; }

    .md-marg-2 { margin: 16px; }
    .md-marg-2-left { margin-left: 16px; }
    .md-marg-2-right { margin-right: 16px; }
    .md-marg-2-top { margin-top: 16px; }
    .md-marg-2-bottom { margin-bottom: 16px; }
    .md-marg-2-sides { margin-left: 16px; margin-right: 16px; }
    .md-marg-2-vert { margin-top: 16px; margin-bottom: 16px; }

    .md-marg-3 { margin: 24px; }
    .md-marg-3-left { margin-left: 24px; }
    .md-marg-3-right { margin-right: 24px; }
    .md-marg-3-top { margin-top: 24px; }
    .md-marg-3-bottom { margin-bottom: 24px; }
    .md-marg-3-sides { margin-left: 24px; margin-right: 24px; }
    .md-marg-3-vert { margin-top: 24px; margin-bottom: 24px; }

    .md-marg-4 { margin: 32px; }
    .md-marg-4-left { margin-left: 32px; }
    .md-marg-4-right { margin-right: 32px; }
    .md-marg-4-top { margin-top: 32px; }
    .md-marg-4-bottom { margin-bottom: 32px; }
    .md-marg-4-sides { margin-left: 32px; margin-right: 32px; }
    .md-marg-4-vert { margin-top: 32px; margin-bottom: 32px; }

    .md-marg-5 { margin: 40px; }
    .md-marg-5-left { margin-left: 40px; }
    .md-marg-5-right { margin-right: 40px; }
    .md-marg-5-top { margin-top: 40px; }
    .md-marg-5-bottom { margin-bottom: 40px; }
    .md-marg-5-sides { margin-left: 40px; margin-right: 40px; }
    .md-marg-5-vert { margin-top: 40px; margin-bottom: 40px; }

    .md-marg-6 { margin: 48px; }
    .md-marg-6-left { margin-left: 48px; }
    .md-marg-6-right { margin-right: 48px; }
    .md-marg-6-top { margin-top: 48px; }
    .md-marg-6-bottom { margin-bottom: 48px; }
    .md-marg-6-sides { margin-left: 48px; margin-right: 48px; }
    .md-marg-6-vert { margin-top: 48px; margin-bottom: 48px; }

    .md-marg-7 { margin: 56px; }
    .md-marg-7-left { margin-left: 56px; }
    .md-marg-7-right { margin-right: 56px; }
    .md-marg-7-top { margin-top: 56px; }
    .md-marg-7-bottom { margin-bottom: 56px; }
    .md-marg-7-sides { margin-left: 56px; margin-right: 56px; }
    .md-marg-7-vert { margin-top: 56px; margin-bottom: 56px; }

    .md-marg-0 { margin: 0; }
    .md-marg-0-left { margin-left: 0; }
    .md-marg-0-right { margin-right: 0; }
    .md-marg-0-top { margin-top: 0; }
    .md-marg-0-bottom { margin-bottom: 0; }
    .md-marg-0-sides { margin-left: 0; margin-right: 0; }
    .md-marg-0-vert { margin-top: 0; margin-bottom: 0; }


    /* CONTAINERS */
    .container { width: 750px; }
}

/* LG */
@media (min-width: 992px) and (max-width: 1199px) {
    /* LG GRID - 12 columns */
    .device-check:before { content: "lg"; }
    .hidden-lg { display: none !important; }

    .lg-grid, .lg-grid-0, .lg-grid-1, .lg-grid-2, .lg-grid-3, .lg-grid-4, .lg-grid-5, .lg-grid-6, .lg-grid-7, .lg-grid-8, .lg-grid-9, .lg-grid-10, .lg-grid-11, .lg-grid-12 { clear: none; float: left; }
    .lg-grid-0 { display: none; }
    .lg-grid-1 { width: 8.33333%; }
    .lg-grid-2 { width: 16.66667%; }
    .lg-grid-3 { width: 25%; }
    .lg-grid-4 { width: 33.33333%; }
    .lg-grid-5 { width: 41.66667%; }
    .lg-grid-6 { width: 50%; }
    .lg-grid-7 { width: 58.33333%; }
    .lg-grid-8 { width: 66.66667%; }
    .lg-grid-9 { width: 75%; }
    .lg-grid-10 { width: 83.33333%; }
    .lg-grid-11 { width: 91.66667%; }
    .lg-grid-12 { width: 100%; }


    /* LG OFFSET */
    .lg-offset-0 { margin-left: 0; }
    .lg-offset-1 { margin-left: 8.33333%; }
    .lg-offset-2 { margin-left: 16.66667%; }
    .lg-offset-3 { margin-left: 25%; }
    .lg-offset-4 { margin-left: 33.33333%; }
    .lg-offset-5 { margin-left: 41.66667%; }
    .lg-offset-6 { margin-left: 50%; }
    .lg-offset-7 { margin-left: 58.33333%; }
    .lg-offset-8 { margin-left: 66.66667%; }
    .lg-offset-9 { margin-left: 75%; }
    .lg-offset-10 { margin-left: 83.33333%; }
    .lg-offset-11 { margin-left: 91.66667%; }
    .lg-offset-12 { margin-left: 100%; }


    /* LG PADDING */
    .lg-pad-1 { padding: 8px; }
    .lg-pad-1-left { padding-left: 8px; }
    .lg-pad-1-right { padding-right: 8px; }
    .lg-pad-1-top { padding-top: 8px; }
    .lg-pad-1-bottom { padding-bottom: 8px; }
    .lg-pad-1-sides { padding-left: 8px; padding-right: 8px; }
    .lg-pad-1-vert { padding-top: 8px; padding-bottom: 8px; }

    .lg-pad-2 { padding: 16px; }
    .lg-pad-2-left { padding-left: 16px; }
    .lg-pad-2-right { padding-right: 16px; }
    .lg-pad-2-top { padding-top: 16px; }
    .lg-pad-2-bottom { padding-bottom: 16px; }
    .lg-pad-2-sides { padding-left: 16px; padding-right: 16px; }
    .lg-pad-2-vert { padding-top: 16px; padding-bottom: 16px; }

    .lg-pad-3 { padding: 24px; }
    .lg-pad-3-left { padding-left: 24px; }
    .lg-pad-3-right { padding-right: 24px; }
    .lg-pad-3-top { padding-top: 24px; }
    .lg-pad-3-bottom { padding-bottom: 24px; }
    .lg-pad-3-sides { padding-left: 24px; padding-right: 24px; }
    .lg-pad-3-vert { padding-top: 24px; padding-bottom: 24px; }

    .lg-pad-4 { padding: 32px; }
    .lg-pad-4-left { padding-left: 32px; }
    .lg-pad-4-right { padding-right: 32px; }
    .lg-pad-4-top { padding-top: 32px; }
    .lg-pad-4-bottom { padding-bottom: 32px; }
    .lg-pad-4-sides { padding-left: 32px; padding-right: 32px; }
    .lg-pad-4-vert { padding-top: 32px; padding-bottom: 32px; }

    .lg-pad-5 { padding: 40px; }
    .lg-pad-5-left { padding-left: 40px; }
    .lg-pad-5-right { padding-right: 40px; }
    .lg-pad-5-top { padding-top: 40px; }
    .lg-pad-5-bottom { padding-bottom: 40px; }
    .lg-pad-5-sides { padding-left: 40px; padding-right: 40px; }
    .lg-pad-5-vert { padding-top: 40px; padding-bottom: 40px; }

    .lg-pad-6 { padding: 48px; }
    .lg-pad-6-left { padding-left: 48px; }
    .lg-pad-6-right { padding-right: 48px; }
    .lg-pad-6-top { padding-top: 48px; }
    .lg-pad-6-bottom { padding-bottom: 48px; }
    .lg-pad-6-sides { padding-left: 48px; padding-right: 48px; }
    .lg-pad-6-vert { padding-top: 48px; padding-bottom: 48px; }

    .lg-pad-7 { padding: 56px; }
    .lg-pad-7-left { padding-left: 56px; }
    .lg-pad-7-right { padding-right: 56px; }
    .lg-pad-7-top { padding-top: 56px; }
    .lg-pad-7-bottom { padding-bottom: 56px; }
    .lg-pad-7-sides { padding-left: 56px; padding-right: 56px; }
    .lg-pad-7-vert { padding-top: 56px; padding-bottom: 56px; }

    .lg-pad-0 { padding: 0; }
    .lg-pad-0-left { padding-left: 0; }
    .lg-pad-0-right { padding-right: 0; }
    .lg-pad-0-top { padding-top: 0; }
    .lg-pad-0-bottom { padding-bottom: 0; }
    .lg-pad-0-sides { padding-left: 0; padding-right: 0; }
    .lg-pad-0-vert { padding-top: 0; padding-bottom: 0; }


    /* LG MARGIN */
    .lg-marg-1 { margin: 8px; }
    .lg-marg-1-left { margin-left: 8px; }
    .lg-marg-1-right { margin-right: 8px; }
    .lg-marg-1-top { margin-top: 8px; }
    .lg-marg-1-bottom { margin-bottom: 8px; }
    .lg-marg-1-sides { margin-left: 8px; margin-right: 8px; }
    .lg-marg-1-vert { margin-top: 8px; margin-bottom: 8px; }

    .lg-marg-2 { margin: 16px; }
    .lg-marg-2-left { margin-left: 16px; }
    .lg-marg-2-right { margin-right: 16px; }
    .lg-marg-2-top { margin-top: 16px; }
    .lg-marg-2-bottom { margin-bottom: 16px; }
    .lg-marg-2-sides { margin-left: 16px; margin-right: 16px; }
    .lg-marg-2-vert { margin-top: 16px; margin-bottom: 16px; }

    .lg-marg-3 { margin: 24px; }
    .lg-marg-3-left { margin-left: 24px; }
    .lg-marg-3-right { margin-right: 24px; }
    .lg-marg-3-top { margin-top: 24px; }
    .lg-marg-3-bottom { margin-bottom: 24px; }
    .lg-marg-3-sides { margin-left: 24px; margin-right: 24px; }
    .lg-marg-3-vert { margin-top: 24px; margin-bottom: 24px; }

    .lg-marg-4 { margin: 32px; }
    .lg-marg-4-left { margin-left: 32px; }
    .lg-marg-4-right { margin-right: 32px; }
    .lg-marg-4-top { margin-top: 32px; }
    .lg-marg-4-bottom { margin-bottom: 32px; }
    .lg-marg-4-sides { margin-left: 32px; margin-right: 32px; }
    .lg-marg-4-vert { margin-top: 32px; margin-bottom: 32px; }

    .lg-marg-5 { margin: 40px; }
    .lg-marg-5-left { margin-left: 40px; }
    .lg-marg-5-right { margin-right: 40px; }
    .lg-marg-5-top { margin-top: 40px; }
    .lg-marg-5-bottom { margin-bottom: 40px; }
    .lg-marg-5-sides { margin-left: 40px; margin-right: 40px; }
    .lg-marg-5-vert { margin-top: 40px; margin-bottom: 40px; }

    .lg-marg-6 { margin: 48px; }
    .lg-marg-6-left { margin-left: 48px; }
    .lg-marg-6-right { margin-right: 48px; }
    .lg-marg-6-top { margin-top: 48px; }
    .lg-marg-6-bottom { margin-bottom: 48px; }
    .lg-marg-6-sides { margin-left: 48px; margin-right: 48px; }
    .lg-marg-6-vert { margin-top: 48px; margin-bottom: 48px; }

    .lg-marg-7 { margin: 56px; }
    .lg-marg-7-left { margin-left: 56px; }
    .lg-marg-7-right { margin-right: 56px; }
    .lg-marg-7-top { margin-top: 56px; }
    .lg-marg-7-bottom { margin-bottom: 56px; }
    .lg-marg-7-sides { margin-left: 56px; margin-right: 56px; }
    .lg-marg-7-vert { margin-top: 56px; margin-bottom: 56px; }

    .lg-marg-0 { margin: 0; }
    .lg-marg-0-left { margin-left: 0; }
    .lg-marg-0-right { margin-right: 0; }
    .lg-marg-0-top { margin-top: 0; }
    .lg-marg-0-bottom { margin-bottom: 0; }
    .lg-marg-0-sides { margin-left: 0; margin-right: 0; }
    .lg-marg-0-vert { margin-top: 0; margin-bottom: 0; }


    /* CONTAINERS */
    .container { width: 970px; }
}

/* XL */
@media (min-width: 1200px) and (max-width: 1399px) {
    /* XL GRID - 12 columns */
    .device-check:before { content: "xl"; }
    .hidden-xl { display: none !important; }

    .xl-grid, .xl-grid-1, .xl-grid-2, .xl-grid-3, .xl-grid-4, .xl-grid-5, .xl-grid-6, .xl-grid-7, .xl-grid-8, .xl-grid-9, .xl-grid-10, .xl-grid-11, .xl-grid-12 { clear: none; float: left; }
    .xl-grid-0 { display: none; }
    .xl-grid-1 { width: 8.33333%; }
    .xl-grid-2 { width: 16.66667%; }
    .xl-grid-3 { width: 25%; }
    .xl-grid-4 { width: 33.33333%; }
    .xl-grid-5 { width: 41.66667%; }
    .xl-grid-6 { width: 50%; }
    .xl-grid-7 { width: 58.33333%; }
    .xl-grid-8 { width: 66.66667%; }
    .xl-grid-9 { width: 75%; }
    .xl-grid-10 { width: 83.33333%; }
    .xl-grid-11 { width: 91.66667%; }
    .xl-grid-12 { width: 100%; }


    /* XL OFFSET */
    .xl-offset-0 { margin-left: 0; }
    .xl-offset-1 { margin-left: 8.33333%; }
    .xl-offset-2 { margin-left: 16.66667%; }
    .xl-offset-3 { margin-left: 25%; }
    .xl-offset-4 { margin-left: 33.33333%; }
    .xl-offset-5 { margin-left: 41.66667%; }
    .xl-offset-6 { margin-left: 50%; }
    .xl-offset-7 { margin-left: 58.33333%; }
    .xl-offset-8 { margin-left: 66.66667%; }
    .xl-offset-9 { margin-left: 75%; }
    .xl-offset-10 { margin-left: 83.33333%; }
    .xl-offset-11 { margin-left: 91.66667%; }
    .xl-offset-12 { margin-left: 100%; }


    /* XL PADDING */
    .xl-pad-1 { padding: 8px; }
    .xl-pad-1-left { padding-left: 8px; }
    .xl-pad-1-right { padding-right: 8px; }
    .xl-pad-1-top { padding-top: 8px; }
    .xl-pad-1-bottom { padding-bottom: 8px; }
    .xl-pad-1-sides { padding-left: 8px; padding-right: 8px; }
    .xl-pad-1-vert { padding-top: 8px; padding-bottom: 8px; }

    .xl-pad-2 { padding: 16px; }
    .xl-pad-2-left { padding-left: 16px; }
    .xl-pad-2-right { padding-right: 16px; }
    .xl-pad-2-top { padding-top: 16px; }
    .xl-pad-2-bottom { padding-bottom: 16px; }
    .xl-pad-2-sides { padding-left: 16px; padding-right: 16px; }
    .xl-pad-2-vert { padding-top: 16px; padding-bottom: 16px; }

    .xl-pad-3 { padding: 24px; }
    .xl-pad-3-left { padding-left: 24px; }
    .xl-pad-3-right { padding-right: 24px; }
    .xl-pad-3-top { padding-top: 24px; }
    .xl-pad-3-bottom { padding-bottom: 24px; }
    .xl-pad-3-sides { padding-left: 24px; padding-right: 24px; }
    .xl-pad-3-vert { padding-top: 24px; padding-bottom: 24px; }

    .xl-pad-4 { padding: 32px; }
    .xl-pad-4-left { padding-left: 32px; }
    .xl-pad-4-right { padding-right: 32px; }
    .xl-pad-4-top { padding-top: 32px; }
    .xl-pad-4-bottom { padding-bottom: 32px; }
    .xl-pad-4-sides { padding-left: 32px; padding-right: 32px; }
    .xl-pad-4-vert { padding-top: 32px; padding-bottom: 32px; }

    .xl-pad-5 { padding: 40px; }
    .xl-pad-5-left { padding-left: 40px; }
    .xl-pad-5-right { padding-right: 40px; }
    .xl-pad-5-top { padding-top: 40px; }
    .xl-pad-5-bottom { padding-bottom: 40px; }
    .xl-pad-5-sides { padding-left: 40px; padding-right: 40px; }
    .xl-pad-5-vert { padding-top: 40px; padding-bottom: 40px; }

    .xl-pad-6 { padding: 48px; }
    .xl-pad-6-left { padding-left: 48px; }
    .xl-pad-6-right { padding-right: 48px; }
    .xl-pad-6-top { padding-top: 48px; }
    .xl-pad-6-bottom { padding-bottom: 48px; }
    .xl-pad-6-sides { padding-left: 48px; padding-right: 48px; }
    .xl-pad-6-vert { padding-top: 48px; padding-bottom: 48px; }

    .xl-pad-7 { padding: 56px; }
    .xl-pad-7-left { padding-left: 56px; }
    .xl-pad-7-right { padding-right: 56px; }
    .xl-pad-7-top { padding-top: 56px; }
    .xl-pad-7-bottom { padding-bottom: 56px; }
    .xl-pad-7-sides { padding-left: 56px; padding-right: 56px; }
    .xl-pad-7-vert { padding-top: 56px; padding-bottom: 56px; }

    .xl-pad-0 { padding: 0; }
    .xl-pad-0-left { padding-left: 0; }
    .xl-pad-0-right { padding-right: 0; }
    .xl-pad-0-top { padding-top: 0; }
    .xl-pad-0-bottom { padding-bottom: 0; }
    .xl-pad-0-sides { padding-left: 0; padding-right: 0; }
    .xl-pad-0-vert { padding-top: 0; padding-bottom: 0; }


    /* XL MARGIN */
    .xl-marg-1 { margin: 8px; }
    .xl-marg-1-left { margin-left: 8px; }
    .xl-marg-1-right { margin-right: 8px; }
    .xl-marg-1-top { margin-top: 8px; }
    .xl-marg-1-bottom { margin-bottom: 8px; }
    .xl-marg-1-sides { margin-left: 8px; margin-right: 8px; }
    .xl-marg-1-vert { margin-top: 8px; margin-bottom: 8px; }

    .xl-marg-2 { margin: 16px; }
    .xl-marg-2-left { margin-left: 16px; }
    .xl-marg-2-right { margin-right: 16px; }
    .xl-marg-2-top { margin-top: 16px; }
    .xl-marg-2-bottom { margin-bottom: 16px; }
    .xl-marg-2-sides { margin-left: 16px; margin-right: 16px; }
    .xl-marg-2-vert { margin-top: 16px; margin-bottom: 16px; }

    .xl-marg-3 { margin: 24px; }
    .xl-marg-3-left { margin-left: 24px; }
    .xl-marg-3-right { margin-right: 24px; }
    .xl-marg-3-top { margin-top: 24px; }
    .xl-marg-3-bottom { margin-bottom: 24px; }
    .xl-marg-3-sides { margin-left: 24px; margin-right: 24px; }
    .xl-marg-3-vert { margin-top: 24px; margin-bottom: 24px; }

    .xl-marg-4 { margin: 32px; }
    .xl-marg-4-left { margin-left: 32px; }
    .xl-marg-4-right { margin-right: 32px; }
    .xl-marg-4-top { margin-top: 32px; }
    .xl-marg-4-bottom { margin-bottom: 32px; }
    .xl-marg-4-sides { margin-left: 32px; margin-right: 32px; }
    .xl-marg-4-vert { margin-top: 32px; margin-bottom: 32px; }

    .xl-marg-5 { margin: 40px; }
    .xl-marg-5-left { margin-left: 40px; }
    .xl-marg-5-right { margin-right: 40px; }
    .xl-marg-5-top { margin-top: 40px; }
    .xl-marg-5-bottom { margin-bottom: 40px; }
    .xl-marg-5-sides { margin-left: 40px; margin-right: 40px; }
    .xl-marg-5-vert { margin-top: 40px; margin-bottom: 40px; }

    .xl-marg-6 { margin: 48px; }
    .xl-marg-6-left { margin-left: 48px; }
    .xl-marg-6-right { margin-right: 48px; }
    .xl-marg-6-top { margin-top: 48px; }
    .xl-marg-6-bottom { margin-bottom: 48px; }
    .xl-marg-6-sides { margin-left: 48px; margin-right: 48px; }
    .xl-marg-6-vert { margin-top: 48px; margin-bottom: 48px; }

    .xl-marg-7 { margin: 56px; }
    .xl-marg-7-left { margin-left: 56px; }
    .xl-marg-7-right { margin-right: 56px; }
    .xl-marg-7-top { margin-top: 56px; }
    .xl-marg-7-bottom { margin-bottom: 56px; }
    .xl-marg-7-sides { margin-left: 56px; margin-right: 56px; }
    .xl-marg-7-vert { margin-top: 56px; margin-bottom: 56px; }

    .xl-marg-0 { margin: 0; }
    .xl-marg-0-left { margin-left: 0; }
    .xl-marg-0-right { margin-right: 0; }
    .xl-marg-0-top { margin-top: 0; }
    .xl-marg-0-bottom { margin-bottom: 0; }
    .xl-marg-0-sides { margin-left: 0; margin-right: 0; }
    .xl-marg-0-vert { margin-top: 0; margin-bottom: 0; }


    /* CONTAINERS */
    .container { width: 1170px; }
}

/* XXL */
@media (min-width: 1400px) {
    /* XXL GRID - 12 columns */
    .device-check:before { content: "xxl"; }
    .hidden-xxl { display: none !important; }

    .xxl-grid, .xxl-grid-1, .xxl-grid-2, .xxl-grid-3, .xxl-grid-4, .xxl-grid-5, .xxl-grid-6, .xxl-grid-7, .xxl-grid-8, .xxl-grid-9, .xxl-grid-10, .xxl-grid-11, .xxl-grid-12 { clear: none; float: left; }
    .xxl-grid-0 { display: none; }
    .xxl-grid-1 { width: 8.33333%; }
    .xxl-grid-2 { width: 16.66667%; }
    .xxl-grid-3 { width: 25%; }
    .xxl-grid-4 { width: 33.33333%; }
    .xxl-grid-5 { width: 41.66667%; }
    .xxl-grid-6 { width: 50%; }
    .xxl-grid-7 { width: 58.33333%; }
    .xxl-grid-8 { width: 66.66667%; }
    .xxl-grid-9 { width: 75%; }
    .xxl-grid-10 { width: 83.33333%; }
    .xxl-grid-11 { width: 91.66667%; }
    .xxl-grid-12 { width: 100%; }


    /* XXL OFFSET */
    .xxl-offset-0 { margin-left: 0; }
    .xxl-offset-1 { margin-left: 8.33333%; }
    .xxl-offset-2 { margin-left: 16.66667%; }
    .xxl-offset-3 { margin-left: 25%; }
    .xxl-offset-4 { margin-left: 33.33333%; }
    .xxl-offset-5 { margin-left: 41.66667%; }
    .xxl-offset-6 { margin-left: 50%; }
    .xxl-offset-7 { margin-left: 58.33333%; }
    .xxl-offset-8 { margin-left: 66.66667%; }
    .xxl-offset-9 { margin-left: 75%; }
    .xxl-offset-10 { margin-left: 83.33333%; }
    .xxl-offset-11 { margin-left: 91.66667%; }
    .xxl-offset-12 { margin-left: 100%; }


    /* XXL PADDING */
    .xxl-pad-1 { padding: 8px; }
    .xxl-pad-1-left { padding-left: 8px; }
    .xxl-pad-1-right { padding-right: 8px; }
    .xxl-pad-1-top { padding-top: 8px; }
    .xxl-pad-1-bottom { padding-bottom: 8px; }
    .xxl-pad-1-sides { padding-left: 8px; padding-right: 8px; }
    .xxl-pad-1-vert { padding-top: 8px; padding-bottom: 8px; }

    .xxl-pad-2 { padding: 16px; }
    .xxl-pad-2-left { padding-left: 16px; }
    .xxl-pad-2-right { padding-right: 16px; }
    .xxl-pad-2-top { padding-top: 16px; }
    .xxl-pad-2-bottom { padding-bottom: 16px; }
    .xxl-pad-2-sides { padding-left: 16px; padding-right: 16px; }
    .xxl-pad-2-vert { padding-top: 16px; padding-bottom: 16px; }

    .xxl-pad-3 { padding: 24px; }
    .xxl-pad-3-left { padding-left: 24px; }
    .xxl-pad-3-right { padding-right: 24px; }
    .xxl-pad-3-top { padding-top: 24px; }
    .xxl-pad-3-bottom { padding-bottom: 24px; }
    .xxl-pad-3-sides { padding-left: 24px; padding-right: 24px; }
    .xxl-pad-3-vert { padding-top: 24px; padding-bottom: 24px; }

    .xxl-pad-4 { padding: 32px; }
    .xxl-pad-4-left { padding-left: 32px; }
    .xxl-pad-4-right { padding-right: 32px; }
    .xxl-pad-4-top { padding-top: 32px; }
    .xxl-pad-4-bottom { padding-bottom: 32px; }
    .xxl-pad-4-sides { padding-left: 32px; padding-right: 32px; }
    .xxl-pad-4-vert { padding-top: 32px; padding-bottom: 32px; }

    .xxl-pad-5 { padding: 40px; }
    .xxl-pad-5-left { padding-left: 40px; }
    .xxl-pad-5-right { padding-right: 40px; }
    .xxl-pad-5-top { padding-top: 40px; }
    .xxl-pad-5-bottom { padding-bottom: 40px; }
    .xxl-pad-5-sides { padding-left: 40px; padding-right: 40px; }
    .xxl-pad-5-vert { padding-top: 40px; padding-bottom: 40px; }

    .xxl-pad-6 { padding: 48px; }
    .xxl-pad-6-left { padding-left: 48px; }
    .xxl-pad-6-right { padding-right: 48px; }
    .xxl-pad-6-top { padding-top: 48px; }
    .xxl-pad-6-bottom { padding-bottom: 48px; }
    .xxl-pad-6-sides { padding-left: 48px; padding-right: 48px; }
    .xxl-pad-6-vert { padding-top: 48px; padding-bottom: 48px; }

    .xxl-pad-7 { padding: 56px; }
    .xxl-pad-7-left { padding-left: 56px; }
    .xxl-pad-7-right { padding-right: 56px; }
    .xxl-pad-7-top { padding-top: 56px; }
    .xxl-pad-7-bottom { padding-bottom: 56px; }
    .xxl-pad-7-sides { padding-left: 56px; padding-right: 56px; }
    .xxl-pad-7-vert { padding-top: 56px; padding-bottom: 56px; }

    .xxl-pad-0 { padding: 0; }
    .xxl-pad-0-left { padding-left: 0; }
    .xxl-pad-0-right { padding-right: 0; }
    .xxl-pad-0-top { padding-top: 0; }
    .xxl-pad-0-bottom { padding-bottom: 0; }
    .xxl-pad-0-sides { padding-left: 0; padding-right: 0; }
    .xxl-pad-0-vert { padding-top: 0; padding-bottom: 0; }


    /* XXL MARGIN */
    .xxl-marg-1 { margin: 8px; }
    .xxl-marg-1-left { margin-left: 8px; }
    .xxl-marg-1-right { margin-right: 8px; }
    .xxl-marg-1-top { margin-top: 8px; }
    .xxl-marg-1-bottom { margin-bottom: 8px; }
    .xxl-marg-1-sides { margin-left: 8px; margin-right: 8px; }
    .xxl-marg-1-vert { margin-top: 8px; margin-bottom: 8px; }

    .xxl-marg-2 { margin: 16px; }
    .xxl-marg-2-left { margin-left: 16px; }
    .xxl-marg-2-right { margin-right: 16px; }
    .xxl-marg-2-top { margin-top: 16px; }
    .xxl-marg-2-bottom { margin-bottom: 16px; }
    .xxl-marg-2-sides { margin-left: 16px; margin-right: 16px; }
    .xxl-marg-2-vert { margin-top: 16px; margin-bottom: 16px; }

    .xxl-marg-3 { margin: 24px; }
    .xxl-marg-3-left { margin-left: 24px; }
    .xxl-marg-3-right { margin-right: 24px; }
    .xxl-marg-3-top { margin-top: 24px; }
    .xxl-marg-3-bottom { margin-bottom: 24px; }
    .xxl-marg-3-sides { margin-left: 24px; margin-right: 24px; }
    .xxl-marg-3-vert { margin-top: 24px; margin-bottom: 24px; }

    .xxl-marg-4 { margin: 32px; }
    .xxl-marg-4-left { margin-left: 32px; }
    .xxl-marg-4-right { margin-right: 32px; }
    .xxl-marg-4-top { margin-top: 32px; }
    .xxl-marg-4-bottom { margin-bottom: 32px; }
    .xxl-marg-4-sides { margin-left: 32px; margin-right: 32px; }
    .xxl-marg-4-vert { margin-top: 32px; margin-bottom: 32px; }

    .xxl-marg-5 { margin: 40px; }
    .xxl-marg-5-left { margin-left: 40px; }
    .xxl-marg-5-right { margin-right: 40px; }
    .xxl-marg-5-top { margin-top: 40px; }
    .xxl-marg-5-bottom { margin-bottom: 40px; }
    .xxl-marg-5-sides { margin-left: 40px; margin-right: 40px; }
    .xxl-marg-5-vert { margin-top: 40px; margin-bottom: 40px; }

    .xxl-marg-6 { margin: 48px; }
    .xxl-marg-6-left { margin-left: 48px; }
    .xxl-marg-6-right { margin-right: 48px; }
    .xxl-marg-6-top { margin-top: 48px; }
    .xxl-marg-6-bottom { margin-bottom: 48px; }
    .xxl-marg-6-sides { margin-left: 48px; margin-right: 48px; }
    .xxl-marg-6-vert { margin-top: 48px; margin-bottom: 48px; }

    .xxl-marg-7 { margin: 56px; }
    .xxl-marg-7-left { margin-left: 56px; }
    .xxl-marg-7-right { margin-right: 56px; }
    .xxl-marg-7-top { margin-top: 56px; }
    .xxl-marg-7-bottom { margin-bottom: 56px; }
    .xxl-marg-7-sides { margin-left: 56px; margin-right: 56px; }
    .xxl-marg-7-vert { margin-top: 56px; margin-bottom: 56px; }

    .xxl-marg-0 { margin: 0; }
    .xxl-marg-0-left { margin-left: 0; }
    .xxl-marg-0-right { margin-right: 0; }
    .xxl-marg-0-top { margin-top: 0; }
    .xxl-marg-0-bottom { margin-bottom: 0; }
    .xxl-marg-0-sides { margin-left: 0; margin-right: 0; }
    .xxl-marg-0-vert { margin-top: 0; margin-bottom: 0; }


    /* CONTAINERS */
    .container { width: 100%; padding: 0 32px; }
}

@media all {
    /* BASE PADDING */
    .pad-half { padding: 4px; }
    .pad-half-left { padding-left: 4px; }
    .pad-half-right { padding-right: 4px; }
    .pad-half-top { padding-top: 4px; }
    .pad-half-bottom { padding-bottom: 4px; }
    .pad-half-sides { padding-left: 4px; padding-right: 4px; }
    .pad-half-vert { padding-top: 4px; padding-bottom: 4px; }


    /* BASE MARGIN */
    .marg-half { margin: 4px; }
    .marg-half-left { margin-left: 4px; }
    .marg-half-right { margin-right: 4px; }
    .marg-half-top { margin-top: 4px; }
    .marg-half-bottom { margin-bottom: 4px; }
    .marg-half-sides { margin-left: 4px; margin-right: 4px; }
    .marg-half-vert { margin-top: 4px; margin-bottom: 4px; }


    .grid-flex { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -moz-box-wrap: wrap; -webkit-box-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flexbox-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
}