/* vars */
:root {
    --marginSide: 1.5rem;
    --marginTotal: 3rem;
}

.container {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 88%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
}

section,
.containers {
    width: 100%;
}

.container .column,
.container .columns {
    float: left;
    display: inline;
    margin-left: var(--marginSide);
    margin-right: var(--marginSide);
}

.row {
    margin-bottom: 30px;
}

section.block {
    margin-bottom: 2rem
}
.columns section.block:last-child {
    margin-bottom: 0
}

/* Nested Column Classes */
.column.alpha, .columns.alpha {
    margin-left: 0 !important;
}

.column.omega, .columns.omega {
    margin-right: 0 !important;
}

.container .columns .block .columns {
    margin-left: 0 !important;
    margin-right: 0 !important;
    --marginTotal: 0rem !important;
}

/* Base Grid */
.container .one.column,
.container .one.columns {
    width: calc(8.3333333% - var(--marginTotal));
}

.container .two.columns {
    width: calc(16.6666666% - var(--marginTotal));
}

.container .three.columns {
    width: calc(25% - var(--marginTotal));
}

.container .four.columns {
    width: calc(33.3333333% - var(--marginTotal));
}

.container .five.columns {
    width: calc(41.6666666% - var(--marginTotal));
}

.container .six.columns {
    width: calc(50% - var(--marginTotal));
}

.container .seven.columns {
    width: calc(58.3333333% - var(--marginTotal));
}

.container .eight.columns {
    width: calc(66.6666666% - var(--marginTotal));
}

.container .nine.columns {
    width: calc(75% - var(--marginTotal));
}

.container .ten.columns {
    width: calc(83.3333333% - var(--marginTotal));
}

.container .eleven.columns {
    width: calc(91.6666666% - var(--marginTotal));
}

.container .twelve.columns {
    width: calc(100% - var(--marginTotal));
}

.container .one.column.alpha,
.container .one.columns.alpha {
    width: calc(8.3333333% - var(--marginSide));
}

.container .two.columns.alpha {
    width: calc(16.6666666% - var(--marginSide));
}

.container .three.columns.alpha {
    width: calc(25% - var(--marginSide));
}

.container .four.columns.alpha {
    width: calc(33.3333333% - var(--marginSide));
}

.container .five.columns.alpha {
    width: calc(41.6666666% - var(--marginSide));
}

.container .six.columns.alpha {
    width: calc(50% - var(--marginSide));
}

.container .seven.columns.alpha {
    width: calc(58.3333333% - var(--marginSide));
}

.container .eight.columns.alpha {
    width: calc(66.6666666% - var(--marginSide));
}

.container .nine.columns.alpha {
    width: calc(75% - var(--marginSide));
}

.container .ten.columns.alpha {
    width: calc(83.3333333% - var(--marginSide));
}

.container .eleven.columns.alpha {
    width: calc(91.6666666% - var(--marginSide));
}

.container .twelve.columns.alpha {
    width: calc(100% - var(--marginSide));
}

.container .one.column.omega,
.container .one.columns.omega {
    width: calc(8.3333333% - var(--marginSide));
}

.container .two.columns.omega {
    width: calc(16.6666666% - var(--marginSide));
}

.container .three.columns.omega {
    width: calc(25% - var(--marginSide));
}

.container .four.columns.omega {
    width: calc(33.3333333% - var(--marginSide));
}

.container .five.columns.omega {
    width: calc(41.6666666% - var(--marginSide));
}

.container .six.columns.omega {
    width: calc(50% - var(--marginSide));
}

.container .seven.columns.omega {
    width: calc(58.3333333% - var(--marginSide));
}

.container .eight.columns.omega {
    width: calc(66.6666666% - var(--marginSide));
}

.container .nine.columns.omega {
    width: calc(75% - var(--marginSide));
}

.container .ten.columns.omega {
    width: calc(83.3333333% - var(--marginSide));
}

.container .eleven.columns.omega {
    width: calc(91.6666666% - var(--marginSide));
}

.container .twelve.columns.omega {
    width: calc(100% - var(--marginSide));
}

/* Offsets */
.container .offset-by-one {
    margin-left: calc(8.3333333% + var(--marginSide));
}

.container .offset-by-two {
    margin-left: calc(16.6666666% + var(--marginSide));
}

.container .offset-by-three {
    margin-left: calc(25% + var(--marginSide));
}

.container .offset-by-four {
    margin-left: calc(33.3333333% + var(--marginSide));
}

.container .offset-by-five {
    margin-left: calc(41.6666666% + var(--marginSide));
}

.container .offset-by-six {
    margin-left: calc(50% + var(--marginSide));
}

.container .offset-by-seven {
    margin-left: calc(58.3333333% + var(--marginSide));
}

.container .offset-by-eight {
    margin-left: calc(66.6666666% + var(--marginSide));
}

.container .offset-by-nine {
    margin-left: calc(75% + var(--marginSide));
}

.container .offset-by-ten {
    margin-left: calc(83.3333333% + var(--marginSide));
}

.container .offset-by-eleven {
    margin-left: calc(91.6666666% + var(--marginSide));
}


/*  #Media queries
================================================== */

@media only screen and (max-width: 1280px) {
    .container {
        width: 96%;
        box-sizing: border-box;
    }

    .block {
        margin-bottom: 3rem;
    }
}

@media only screen and (min-width: 881px) and (max-width: 1279px) {
    .container .column,
    .container .columns {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .container .one.column,
    .container .one.columns {
        width: calc(8.3333333% - 2rem);
    }

    .container .two.columns {
        width: calc(16.6666666% - 2rem);
    }

    .container .three.columns {
        width: calc(25% - 2rem);
    }

    .container #sideBar.three.columns,
    .container .four.columns {
        width: calc(33.3333333% - 2rem);
    }

    .container .five.columns {
        width: calc(41.6666666% - 2rem);
    }

    .container .six.columns {
        width: calc(50% - 2rem);
    }

    .container .seven.columns {
        width: calc(58.3333333% - 2rem);
    }

    .container .six.columns.to-eight,
    .container .eight.columns {
        width: calc(66.6666666% - 2rem);
    }

    .container .nine.columns {
        width: calc(75% - 2rem);
    }

    .container .ten.columns {
        width: calc(83.3333333% - 2rem);
    }

    .container .eleven.columns {
        width: calc(91.6666666% - 2rem);
    }

    .container .twelve.columns {
        width: calc(100% - 2rem);
    }

    .container .one.column.alpha,
    .container .one.columns.alpha {
        width: calc(8.3333333% - 1rem);
    }

    .container .two.columns.alpha {
        width: calc(16.6666666% - 1rem);
    }

    .container .three.columns.alpha {
        width: calc(25% - 1rem);
    }

    .container .four.columns.alpha {
        width: calc(33.3333333% - 1rem);
    }

    .container .five.columns.alpha {
        width: calc(41.6666666% - 1rem);
    }

    .container .six.columns.alpha {
        width: calc(50% - 1rem);
    }

    .container .seven.columns.alpha {
        width: calc(58.3333333% - 1rem);
    }

    .container .eight.columns.alpha {
        width: calc(66.6666666% - 1rem);
    }

    .container .nine.columns.alpha {
        width: calc(75% - 1rem);
    }

    .container .ten.columns.alpha {
        width: calc(83.3333333% - 1rem);
    }

    .container .eleven.columns.alpha {
        width: calc(91.6666666% - 1rem);
    }

    .container .twelve.columns.alpha {
        width: calc(100% - 1rem);
    }

    .container .one.column.omega,
    .container .one.columns.omega {
        width: calc(8.3333333% - 1rem);
    }

    .container .two.columns.omega {
        width: calc(16.6666666% - 1rem);
    }

    .container .three.columns.omega {
        width: calc(25% - 1rem);
    }

    .container .four.columns.omega {
        width: calc(33.3333333% - 1rem);
    }

    .container .five.columns.omega {
        width: calc(41.6666666% - 1rem);
    }

    .container .six.columns.omega {
        width: calc(50% - 1rem);
    }

    .container .seven.columns.omega {
        width: calc(58.3333333% - 1rem);
    }

    .container .eight.columns.omega {
        width: calc(66.6666666% - 1rem);
    }

    .container .nine.columns.omega {
        width: calc(75% - 1rem);
    }

    .container .ten.columns.omega {
        width: calc(83.3333333% - 1rem);
    }

    .container .eleven.columns.omega {
        width: calc(91.6666666% - 1rem);
    }

    .container .twelve.columns.omega {
        width: calc(100% - 1rem);
    }

    /* Offsets */
    .container .offset-by-one {
        margin-left: calc(8.3333333% + 1rem);
    }

    .container .six.columns.to-eight.offset-by-three,
    .container .offset-by-two {
        margin-left: calc(16.6666666% + 1rem);
    }

    .container .offset-by-three {
        margin-left: calc(25% + 1rem);
    }

    .container .six.columns.to-eight.offset-by-six,
    .container .offset-by-four {
        margin-left: calc(33.3333333% + 1rem);
    }

    .container .offset-by-five {
        margin-left: calc(41.6666666% + 1rem);
    }

    .container .offset-by-six {
        margin-left: calc(50% + 1rem);
    }

    .container .offset-by-seven {
        margin-left: calc(58.3333333% + 1rem);
    }

    .container .offset-by-eight {
        margin-left: calc(66.6666666% + 1rem);
    }

    .container .offset-by-nine {
        margin-left: calc(75% + 1rem);
    }

    .container .offset-by-ten {
        margin-left: calc(83.3333333% + 1rem);
    }

    .container .offset-by-eleven {
        margin-left: calc(91.6666666% + 1rem);
    }

    .container .eight.columns.offset-by-one.longText {
        margin-left: 1rem
    }
}

@media only screen and (max-width: 880px) {
    .container {
        width: 92%;
    }

        .container .columns,
        .container .column {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .one.column.alpha,
        .container .one.columns.alpha,
        .container .two.columns.alpha,
        .container .three.columns.alpha,
        .container .four.columns.alpha,
        .container .five.columns.alpha,
        .container .six.columns.alpha,
        .container .seven.columns.alpha,
        .container .eight.columns.alpha,
        .container .nine.columns.alpha,
        .container .ten.columns.alpha,
        .container .eleven.columns.alpha,
        .container .twelve.columns.alpha,
        .container .one.column.omega,
        .container .one.columns.omega,
        .container .two.columns.omega,
        .container .three.columns.omega,
        .container .four.columns.omega,
        .container .five.columns.omega,
        .container .six.columns.omega,
        .container .seven.columns.omega,
        .container .eight.columns.omega,
        .container .nine.columns.omega,
        .container .ten.columns.omega,
        .container .eleven.columns.omega,
        .container .twelve.columns.omega {
            width: 100%;
        }

        .container .callOut .one.column,
        .container .callOut .one.columns,
        .container .callOut .two.columns,
        .container .callOut .three.columns,
        .container .callOut .four.columns,
        .container .callOut .five.columns,
        .container .callOut .six.columns,
        .container .callOut .seven.columns,
        .container .callOut .eight.columns,
        .container .callOut .nine.columns,
        .container .callOut .ten.columns,
        .container .callOut .eleven.columns,
        .container .callOut .twelve.columns {
            box-sizing: border-box;
        }

        .container .columns.half, .container .column.half {
            width: calc(50% - 0.5rem) !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-sizing: border-box;
            padding: 0;
        }

        .container .columns.first.half, .container .column.first.half {
            margin-right: 1rem !important;
        }

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven {
            margin-left: 0;
        }

    .block {
        margin-bottom: 2rem;
    }

        .block:last-child {
            margin-bottom: 0;
        }
}


/* #Mobile (small)
================================================== */

@media only screen and (max-width: 420px) {
}



/* #Clearing
================================================== */

/* Self Clearing Goodness */
.container:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.row:after,
.clearfix:after {
    clear: both;
}

.row,
.clearfix {
    zoom: 1;
}

/* You can also use a <br class="clear" /> to clear columns */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}