html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

* {
    box-sizing: inherit;
    line-height: 1.6;
    margin: 0;
    padding: 0
}

* ::after,
* ::before {
    box-sizing: inherit;
    line-height: 1.6;
    margin: 0;
    padding: 0
}

.top{
    align-self: flex-start;
}

.middle{
    align-self:center;
}

.bottom{
    align-self: flex-end;
}

.container {
    margin: 0 auto;
    position: relative;
    max-width: 70rem;
    width: 100%;
    padding: 0 1rem
}

.column {
    display: block;
    flex: 1;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
    min-width: 10rem;
    margin-bottom: 2.4rem;
    padding: 1rem 1rem
}

@media (max-width: 40rem) {
    .column {
        flex-basis: auto
    }
}


@media (min-width: 40rem) {
    .column.column-wide-1 {
        flex: 0 0 8.3333333333%;
        max-width: 8.3333333333%
    }

    .column.column-wide-2 {
        flex: 0 0 16.6666666667%;
        max-width: 16.6666666667%
    }

    .column.column-wide-3 {
        flex: 0 0 25%;
        max-width: 25%
    }

    .column.column-wide-4 {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }

    .column.column-wide-5 {
        flex: 0 0 41.6666666667%;
        max-width: 41.6666666667%
    }

    .column.column-wide-6 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .column.column-wide-7 {
        flex: 0 0 58.3333333333%;
        max-width: 58.3333333333%
    }

    .column.column-wide-8 {
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%
    }

    .column.column-wide-9 {
        flex: 0 0 75%;
        max-width: 75%
    }

    .column.column-wide-10 {
        flex: 0 0 83.3333333333%;
        max-width: 83.3333333333%
    }

    .column.column-wide-11 {
        flex: 0 0 91.6666666667%;
        max-width: 91.6666666667%
    }

    .column.column-wide-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width: 40rem) {
    .column.column-offset-1 {
        margin-left: 8.3333333333%
    }

    .column.column-offset-2 {
        margin-left: 16.6666666667%
    }

    .column.column-offset-3 {
        margin-left: 25%
    }

    .column.column-offset-4 {
        margin-left: 33.3333333333%
    }

    .column.column-offset-5 {
        margin-left: 41.6666666667%
    }

    .column.column-offset-6 {
        margin-left: 50%
    }

    .column.column-offset-7 {
        margin-left: 58.3333333333%
    }

    .column.column-offset-8 {
        margin-left: 66.6666666667%
    }

    .column.column-offset-9 {
        margin-left: 75%
    }

    .column.column-offset-10 {
        margin-left: 83.3333333333%
    }

    .column.column-offset-11 {
        margin-left: 91.6666666667%
    }

    .column.column-offset-12 {
        margin-left: 100%
    }
}

.row {
    padding: 0;
    margin: 0 0 0 -1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: calc(100% + 2rem)
}

@media (max-width: 40rem) {
    .row {
        flex-direction: column
    }
}

.row.row-top {
    align-items: flex-start
}

.row.row-bottom {
    align-items: flex-end
}

.row.row-center {
    align-items: center
}

.row.row-stretch {
    align-items: stretch
}

.row.row-baseline {
    align-items: baseline
}

.row.row-1 .column {
    min-width: 100%
}

.row.row-2 .column {
    min-width: 50%
}

.row.row-3 .column {
    min-width: 33.3333333333%
}

.row.row-4 .column {
    min-width: 25%
}

.row.row-5 .column {
    min-width: 20%
}

.row.row-6 .column {
    min-width: 16.6666666667%
}

.row.row-7 .column {
    min-width: 14.2857142857%
}

.row.row-8 .column {
    min-width: 12.5%
}

.row.row-9 .column {
    min-width: 11.1111111111%
}

.row.row-10 .column {
    min-width: 10%
}

.row.row-11 .column {
    min-width: 9.0909090909%
}

.row.row-12 .column {
    min-width: 8.3333333333%
}