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

.containers {
    width: 100%;
}

.container .column,
.container .columns {
    float: left;
    display: inline;
    margin-left: 1em;
    margin-right: 1em;
}

.row {
    margin-bottom: 30px;
}

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

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

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

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

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

.container .four.columns {
    width: calc(33.3333333% - 2em);
}

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

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

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

.container .eight.columns {
    width: calc(66.6666666% - 2em);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* internal offsets */
.container .columns .offset-by-one {
    margin-left: 8.3333333%;
}

.container .columns .offset-by-two {
    margin-left: 16.6666666%;
}

.container .columns .columns .offset-by-three {
    margin-left: 25%;
}

.container .columns .offset-by-four {
    margin-left: 33.3333333%;
}

.container .columns .offset-by-five {
    margin-left: 41.6666666%;
}

.container .columns .offset-by-six {
    margin-left: 50%;
}

.container .columns .offset-by-seven {
    margin-left: 58.3333333%;
}

.container .columns .offset-by-eight {
    margin-left: 66.6666666%;
}

.container .columns .columns .offset-by-nine {
    margin-left: 75%;
}

.container .columns .offset-by-ten {
    margin-left: 83.3333333%;
}

.container .columns .offset-by-eleven {
    margin-left: 91.6666666%;
}

div.narrow-width {
    width: 50%;
    margin: 0 auto;
}
div.medium-width {
    width: 66.6666%;
    margin: 0 auto;
}
 div.full-width {
    width: 100%;
    margin: 0 auto;
}


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

@media only screen and (max-width: 1100px) {
    .container {
        width: 94%;
        box-sizing: border-box;
    }
    div.narrow-width {
        width: 66.6666%;
        margin: 0 auto;
    }

    div.medium-width {
        width: 80%;
        margin: 0 auto;
    }
}

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

        .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.5em) !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: 1em !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;
        }
}


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

@media only screen and (max-width: 479px) {
    div.narrow-width, div.medium-width {
        width: 100%;
        margin: 0 auto;
    }
}



/* #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;
}