/*******************************
 * Grid System
 *******************************/

.column-wrap, .column {
    box-sizing: border-box;
    position: relative;
}

.column-wrap {
    margin: 0 auto;
    max-width: 1500px;
    width: 90%;
}

.column-wrap:after, .one-column:after, div:not(.header) .two-column:after, .three-column:after, .four-column:after, .five-column:after, .six-column:after, .seven-column:after, .eight-column:after {
    clear: both;
    content: "";
    display: table;
}

.column {
    float: left;
    margin: 40px 2.5% 0;
    padding: 10px;
}

.column.centered {
    float: none;
    margin: 0 auto;
}

.column.offset-right {
    float: right;
}

.one-column .column {
    width: 95%;
}

.two-column .column {
    width: 45%;
}

.three-column .column {
    width: 28.333333%;
}

.four-column .column {
    width: 20%;
}

.five-column .column {
    width: 15%;
}

.six-column .column {
    width: 11.666666%;
}

.seven-column .column {
    width: 9.2857142%;
}

.eight-column .column {
    width: 7.5%;
}

.column-10 {
    width: 5%!important;
}

.column-20 {
    width: 15%!important;
}

.column-30 {
    width: 25%!important;
}

.column-40 {
    width: 35%!important;
}

.column-50 {
    width: 45%!important;
}

.column-60 {
    width: 55%!important;
}

.column-70 {
    width: 65%!important;
}

.column-80 {
    width: 75%!important;
}

.column-90 {
    width: 85%!important;
}

.column-wrap .one-column, .column-wrap .two-column, .column-wrap .two-column-uneven, .column-wrap .three-column, .column-wrap .four-column, .column-wrap .five-column, .column-wrap .six-column, .column-wrap .seven-column, .column-wrap .eight-column {
    width: 105%;
    margin: 0 -2.5%;
}

.two-column-uneven .column:first-of-type {
    width: 61.66%;
}

.two-column-uneven .column:last-of-type {
    width: 28.33%;
}

.bottom-left {
    bottom: 0;
    left: -2.5%;
    position: absolute;
}

.bottom-right {
    bottom: 0;
    position: absolute;
    right: -2.5%;
}

.three-column .column:nth-child(3n+1), .four-column .column:nth-child(4n+1), .five-column .column:nth-child(5n+1), .six-column .column:nth-child(6n+1), .seven-column .column:nth-child(7n+1), .eight-column .column:nth-child(8n+1) {
    clear: left;
}

/* Let's go to 3 columns */

@media all and (max-width: 1200px) {
    .three-column .column, .four-column .column, .five-column .column, .six-column .column, .seven-column .column, .eight-column .column {
        width: 28.333333%;
    }
    .three-column .column:nth-child(3n+1), .four-column .column:nth-child(4n+1), .five-column .column:nth-child(5n+1), .six-column .column:nth-child(6n+1), .seven-column .column:nth-child(7n+1), .eight-column .column:nth-child(8n+1) {
        clear: none;
    }
    .three-column .column:nth-child(3n+1), .four-column .column:nth-child(3n+1), .five-column .column:nth-child(3n+1), .six-column .column:nth-child(3n+1), .seven-column .column:nth-child(3n+1), .eight-column .column:nth-child(3n+1) {
        clear: left;
    }
    .three-column .column:nth-child(2n+1){
        clear: left;
    }
    .three-column .column {
        width: 45%;
    }
}

/* Let's go to 2 columns */

@media all and (max-width: 800px) {
    .two-column-uneven .column:first-of-type, .two-column-uneven .column:last-of-type, .three-column .column, .four-column .column, .five-column .column, .six-column .column, .seven-column .column, .eight-column .column {
        width: 45%;
    }
    .three-column .column:nth-child(3n+1), .four-column .column:nth-child(3n+1), .five-column .column:nth-child(3n+1), .six-column .column:nth-child(3n+1), .seven-column .column:nth-child(3n+1), .eight-column .column:nth-child(3n+1) {
        clear: none;
    }
    .three-column .column:nth-child(2n+1), .four-column .column:nth-child(2n+1), .five-column .column:nth-child(2n+1), .six-column .column:nth-child(2n+1), .seven-column .column:nth-child(2n+1), .eight-column .column:nth-child(2n+1) {
        clear: left;
    }
    .three-column .column {
        clear: both;
        width: 95% !important;
    }
    /* Nested */
    .column-wrap .column .column-wrap .column, .column-wrap .column .column-wrap .column .column-wrap .column, .column-wrap .column .column-wrap .column .column-wrap .column .column-wrap .column {
        width: 95%;
    }
    .bottom-right {
        bottom: auto;
        left: auto;
        position: relative;
        right: auto;
        top: auto;
    }
    .two-column .column:not(.logo) {
        width: 95% !important;
    }
}

/* Let's go to 1 column */

@media all and (max-width: 550px) {
    .column {
        padding-left: 0;
        padding-right: 0;
    }
}