@media (min-width: 576px) {
    [class*=" grid-"], [class^=grid-] {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    [class*=" grid-"] > *, [class^=grid-] > * {
        box-sizing: border-box;
        min-width: 0;
        min-height: 0
    }

    .grid, .grid--reverse {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .grid--reverse > *, .grid > * {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 0%;
        flex: 1 1 0%;
        box-sizing: border-box;
        min-width: 0;
        min-height: 0
    }

    .grid--reverse.has-gutter > * + *, .grid.has-gutter > * + * {
        margin-left: calc(1rem - .01px)
    }

    .grid--reverse.has-gutter-l > * + *, .grid.has-gutter-l > * + * {
        margin-left: calc(2rem - .01px)
    }

    .grid--reverse.has-gutter-xl > * + *, .grid.has-gutter-xl > * + * {
        margin-left: calc(4rem - .01px)
    }







    [class*=grid-1] > * {
        width: calc(100% / 2 - .01px)
    }

    [class*=grid-1].has-gutter {
        margin-right: -.5rem;
        margin-left: -.5rem
    }

    [class*=grid-1].has-gutter > * {
        width: calc(100%  - 1rem - .01px);
        margin-right: .5rem;
        margin-left: .5rem
    }

    [class*=grid-1].has-gutter-l {
        margin-right: -1rem;
        margin-left: -1rem
    }

    [class*=grid-1].has-gutter-l > * {
        width: calc(100%  - 2rem - .01px);
        margin-right: 1rem;
        margin-left: 1rem
    }

    [class*=grid-1].has-gutter-xl {
        margin-right: -2rem;
        margin-left: -2rem
    }

    [class*=grid-1].has-gutter-xl > * {
        width: calc(100%  - 4rem - .01px);
        margin-right: 2rem;
        margin-left: 2rem
    }











    [class*=grid-2] > * {
        width: calc(100% / 2 - .01px)
    }

    [class*=grid-2].has-gutter {
        margin-right: -.5rem;
        margin-left: -.5rem
    }

    [class*=grid-2].has-gutter > * {
        width: calc(100% / 2 - 1rem - .01px);
        margin-right: .5rem;
        margin-left: .5rem
    }

    [class*=grid-2].has-gutter-l {
        margin-right: -1rem;
        margin-left: -1rem
    }

    [class*=grid-2].has-gutter-l > * {
        width: calc(100% / 2 - 2rem - .01px);
        margin-right: 1rem;
        margin-left: 1rem
    }

    [class*=grid-2].has-gutter-xl {
        margin-right: -2rem;
        margin-left: -2rem
    }

    [class*=grid-2].has-gutter-xl > * {
        width: calc(100% / 2 - 4rem - .01px);
        margin-right: 2rem;
        margin-left: 2rem
    }

    [class*=grid-3] > * {
        width: calc(100% / 3 - .01px)
    }

    [class*=grid-3].has-gutter {
        margin-right: -.5rem;
        margin-left: -.5rem
    }

    [class*=grid-3].has-gutter > * {
        width: calc(100% / 3 - 1rem - .01px);
        margin-right: .5rem;
        margin-left: .5rem
    }

    [class*=grid-3].has-gutter-l {
        margin-right: -1rem;
        margin-left: -1rem
    }

    [class*=grid-3].has-gutter-l > * {
        width: calc(100% / 3 - 2rem - .01px);
        margin-right: 1rem;
        margin-left: 1rem
    }

    [class*=grid-3].has-gutter-xl {
        margin-right: -2rem;
        margin-left: -2rem
    }

    [class*=grid-3].has-gutter-xl > * {
        width: calc(100% / 3 - 4rem - .01px);
        margin-right: 2rem;
        margin-left: 2rem
    }

    [class*=grid-4] > * {
        width: calc(100% / 4 - .01px)
    }

    [class*=grid-4].has-gutter {
        margin-right: -.5rem;
        margin-left: -.5rem
    }

    [class*=grid-4].has-gutter > * {
        width: calc(100% / 4 - 1rem - .01px);
        margin-right: .5rem;
        margin-left: .5rem
    }

    [class*=grid-4].has-gutter-l {
        margin-right: -1rem;
        margin-left: -1rem
    }

    [class*=grid-4].has-gutter-l > * {
        width: calc(100% / 4 - 2rem - .01px);
        margin-right: 1rem;
        margin-left: 1rem
    }

    [class*=grid-4].has-gutter-xl {
        margin-right: -2rem;
        margin-left: -2rem
    }

    [class*=grid-4].has-gutter-xl > * {
        width: calc(100% / 4 - 4rem - .01px);
        margin-right: 2rem;
        margin-left: 2rem
    }

    [class*=grid-5] > * {
        width: calc(100% / 5 - .01px)
    }

    [class*=grid-5].has-gutter {
        margin-right: -.5rem;
        margin-left: -.5rem
    }

    [class*=grid-5].has-gutter > * {
        width: calc(100% / 5 - 1rem - .01px);
        margin-right: .5rem;
        margin-left: .5rem
    }

    [class*=grid-5].has-gutter-l {
        margin-right: -1rem;
        margin-left: -1rem
    }

    [class*=grid-5].has-gutter-l > * {
        width: calc(100% / 5 - 2rem - .01px);
        margin-right: 1rem;
        margin-left: 1rem
    }

    [class*=grid-5].has-gutter-xl {
        margin-right: -2rem;
        margin-left: -2rem
    }

    [class*=grid-5].has-gutter-xl > * {
        width: calc(100% / 5 - 4rem - .01px);
        margin-right: 2rem;
        margin-left: 2rem
    }

    [class*=grid-6] > * {
        width: calc(100% / 6 - .01px)
    }

    [class*=grid-6].has-gutter {
        margin-right: -.5rem;
        margin-left: -.5rem
    }

    [class*=grid-6].has-gutter > * {
        width: calc(100% / 6 - 1rem - .01px);
        margin-right: .5rem;
        margin-left: .5rem
    }

    [class*=grid-6].has-gutter-l {
        margin-right: -1rem;
        margin-left: -1rem
    }

    [class*=grid-6].has-gutter-l > * {
        width: calc(100% / 6 - 2rem - .01px);
        margin-right: 1rem;
        margin-left: 1rem
    }

    [class*=grid-6].has-gutter-xl {
        margin-right: -2rem;
        margin-left: -2rem
    }

    [class*=grid-6].has-gutter-xl > * {
        width: calc(100% / 6 - 4rem - .01px);
        margin-right: 2rem;
        margin-left: 2rem
    }

    [class*=grid-7] > * {
        width: calc(100% / 7 - .01px)
    }

    [class*=grid-7].has-gutter {
        margin-right: -.5rem;
        margin-left: -.5rem
    }

    [class*=grid-7].has-gutter > * {
        width: calc(100% / 7 - 1rem - .01px);
        margin-right: .5rem;
        margin-left: .5rem
    }

    [class*=grid-7].has-gutter-l {
        margin-right: -1rem;
        margin-left: -1rem
    }

    [class*=grid-7].has-gutter-l > * {
        width: calc(100% / 7 - 2rem - .01px);
        margin-right: 1rem;
        margin-left: 1rem
    }

    [class*=grid-7].has-gutter-xl {
        margin-right: -2rem;
        margin-left: -2rem
    }

    [class*=grid-7].has-gutter-xl > * {
        width: calc(100% / 7 - 4rem - .01px);
        margin-right: 2rem;
        margin-left: 2rem
    }

    [class*=grid-8] > * {
        width: calc(100% / 8 - .01px)
    }

    [class*=grid-8].has-gutter {
        margin-right: -.5rem;
        margin-left: -.5rem
    }

    [class*=grid-8].has-gutter > * {
        width: calc(100% / 8 - 1rem - .01px);
        margin-right: .5rem;
        margin-left: .5rem
    }

    [class*=grid-8].has-gutter-l {
        margin-right: -1rem;
        margin-left: -1rem
    }

    [class*=grid-8].has-gutter-l > * {
        width: calc(100% / 8 - 2rem - .01px);
        margin-right: 1rem;
        margin-left: 1rem
    }

    [class*=grid-8].has-gutter-xl {
        margin-right: -2rem;
        margin-left: -2rem
    }

    [class*=grid-8].has-gutter-xl > * {
        width: calc(100% / 8 - 4rem - .01px);
        margin-right: 2rem;
        margin-left: 2rem
    }

    [class*=grid-9] > * {
        width: calc(100% / 9 - .01px)
    }

    [class*=grid-9].has-gutter {
        margin-right: -.5rem;
        margin-left: -.5rem
    }

    [class*=grid-9].has-gutter > * {
        width: calc(100% / 9 - 1rem - .01px);
        margin-right: .5rem;
        margin-left: .5rem
    }

    [class*=grid-9].has-gutter-l {
        margin-right: -1rem;
        margin-left: -1rem
    }

    [class*=grid-9].has-gutter-l > * {
        width: calc(100% / 9 - 2rem - .01px);
        margin-right: 1rem;
        margin-left: 1rem
    }

    [class*=grid-9].has-gutter-xl {
        margin-right: -2rem;
        margin-left: -2rem
    }

    [class*=grid-9].has-gutter-xl > * {
        width: calc(100% / 9 - 4rem - .01px);
        margin-right: 2rem;
        margin-left: 2rem
    }

    [class*=grid-10] > * {
        width: calc(100% / 10 - .01px)
    }

    [class*=grid-10].has-gutter {
        margin-right: -.5rem;
        margin-left: -.5rem
    }

    [class*=grid-10].has-gutter > * {
        width: calc(100% / 10 - 1rem - .01px);
        margin-right: .5rem;
        margin-left: .5rem
    }

    [class*=grid-10].has-gutter-l {
        margin-right: -1rem;
        margin-left: -1rem
    }

    [class*=grid-10].has-gutter-l > * {
        width: calc(100% / 10 - 2rem - .01px);
        margin-right: 1rem;
        margin-left: 1rem
    }

    [class*=grid-10].has-gutter-xl {
        margin-right: -2rem;
        margin-left: -2rem
    }

    [class*=grid-10].has-gutter-xl > * {
        width: calc(100% / 10 - 4rem - .01px);
        margin-right: 2rem;
        margin-left: 2rem
    }

    [class*=grid-11] > * {
        width: calc(100% / 11 - .01px)
    }

    [class*=grid-11].has-gutter {
        margin-right: -.5rem;
        margin-left: -.5rem
    }

    [class*=grid-11].has-gutter > * {
        width: calc(100% / 11 - 1rem - .01px);
        margin-right: .5rem;
        margin-left: .5rem
    }

    [class*=grid-11].has-gutter-l {
        margin-right: -1rem;
        margin-left: -1rem
    }

    [class*=grid-11].has-gutter-l > * {
        width: calc(100% / 11 - 2rem - .01px);
        margin-right: 1rem;
        margin-left: 1rem
    }

    [class*=grid-11].has-gutter-xl {
        margin-right: -2rem;
        margin-left: -2rem
    }

    [class*=grid-11].has-gutter-xl > * {
        width: calc(100% / 11 - 4rem - .01px);
        margin-right: 2rem;
        margin-left: 2rem
    }

    [class*=grid-12] > * {
        width: calc(100% / 12 - .01px)
    }

    [class*=grid-12].has-gutter {
        margin-right: -.5rem;
        margin-left: -.5rem
    }

    [class*=grid-12].has-gutter > * {
        width: calc(100% / 12 - 1rem - .01px);
        margin-right: .5rem;
        margin-left: .5rem
    }

    [class*=grid-12].has-gutter-l {
        margin-right: -1rem;
        margin-left: -1rem
    }

    [class*=grid-12].has-gutter-l > * {
        width: calc(100% / 12 - 2rem - .01px);
        margin-right: 1rem;
        margin-left: 1rem
    }

    [class*=grid-12].has-gutter-xl {
        margin-right: -2rem;
        margin-left: -2rem
    }

    [class*=grid-12].has-gutter-xl > * {
        width: calc(100% / 12 - 4rem - .01px);
        margin-right: 2rem;
        margin-left: 2rem
    }
}

.push {
    margin-left: auto !important
}

.pull {
    margin-right: auto !important
}

.item-first {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1
}

.item-last {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
}

[class*=grid-][class*="--reverse"] {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

@media (min-width: 576px) {
    .full, .one-half {
        -webkit-box-flex: 0
    }

    .full {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: calc(100% / 1 - .01px)
    }

    .has-gutter > .full {
        width: calc(100% / 1 - 1rem - .01px)
    }

    .has-gutter-l > .full {
        width: calc(100% / 1 - 2rem - .01px)
    }

    .has-gutter-xl > .full {
        width: calc(100% / 1 - 4rem - .01px)
    }

    .one-half {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: calc(100% / 2 - .01px)
    }

    .has-gutter > .one-half {
        width: calc(100% / 2 - 1rem - .01px)
    }

    .has-gutter-l > .one-half {
        width: calc(100% / 2 - 2rem - .01px)
    }

    .has-gutter-xl > .one-half {
        width: calc(100% / 2 - 4rem - .01px)
    }

    .one-third {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: calc(100% / 3 - .01px)
    }

    .has-gutter > .one-third {
        width: calc(100% / 3 - 1rem - .01px)
    }

    .has-gutter-l > .one-third {
        width: calc(100% / 3 - 2rem - .01px)
    }

    .has-gutter-xl > .one-third {
        width: calc(100% / 3 - 4rem - .01px)
    }

    .one-quarter {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: calc(100% / 4 - .01px)
    }

    .has-gutter > .one-quarter {
        width: calc(100% / 4 - 1rem - .01px)
    }

    .has-gutter-l > .one-quarter {
        width: calc(100% / 4 - 2rem - .01px)
    }

    .has-gutter-xl > .one-quarter {
        width: calc(100% / 4 - 4rem - .01px)
    }

    .one-fifth {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: calc(100% / 5 - .01px)
    }

    .has-gutter > .one-fifth {
        width: calc(100% / 5 - 1rem - .01px)
    }

    .has-gutter-l > .one-fifth {
        width: calc(100% / 5 - 2rem - .01px)
    }

    .has-gutter-xl > .one-fifth {
        width: calc(100% / 5 - 4rem - .01px)
    }

    .one-sixth {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: calc(100% / 6 - .01px)
    }

    .has-gutter > .one-sixth {
        width: calc(100% / 6 - 1rem - .01px)
    }

    .has-gutter-l > .one-sixth {
        width: calc(100% / 6 - 2rem - .01px)
    }

    .has-gutter-xl > .one-sixth {
        width: calc(100% / 6 - 4rem - .01px)
    }

    .two-thirds {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: calc(100% / 3 * 2 - .01px)
    }

    .has-gutter > .two-thirds {
        width: calc(100% / 3 * 2 - 1rem - .01px)
    }

    .has-gutter-l > .two-thirds {
        width: calc(100% / 3 * 2 - 2rem - .01px)
    }

    .has-gutter-xl > .two-thirds {
        width: calc(100% / 3 * 2 - 4rem - .01px)
    }

    .three-quarters {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: calc(100% / 4 * 3 - .01px)
    }

    .has-gutter > .three-quarters {
        width: calc(100% / 4 * 3 - 1rem - .01px)
    }

    .has-gutter-l > .three-quarters {
        width: calc(100% / 4 * 3 - 2rem - .01px)
    }

    .has-gutter-xl > .three-quarters {
        width: calc(100% / 4 * 3 - 4rem - .01px)
    }

    .five-sixths {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: calc(100% / 6 * 5 - .01px)
    }

    .has-gutter > .five-sixths {
        width: calc(100% / 6 * 5 - 1rem - .01px)
    }

    .has-gutter-l > .five-sixths {
        width: calc(100% / 6 * 5 - 2rem - .01px)
    }

    .has-gutter-xl > .five-sixths {
        width: calc(100% / 6 * 5 - 4rem - .01px)
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    [class*="-small-1"] > * {
        width: calc(100% / 1 - .01px)
    }

    [class*="-small-1"].has-gutter > * {
        width: calc(100% / 1 - 1rem - .01px)
    }

    [class*="-small-1"].has-gutter-l > * {
        width: calc(100% / 1 - 2rem - .01px)
    }

    [class*="-small-1"].has-gutter-xl > * {
        width: calc(100% / 1 - 4rem - .01px)
    }

    [class*="-small-2"] > * {
        width: calc(100% / 2 - .01px)
    }

    [class*="-small-2"].has-gutter > * {
        width: calc(100% / 2 - 1rem - .01px)
    }

    [class*="-small-2"].has-gutter-l > * {
        width: calc(100% / 2 - 2rem - .01px)
    }

    [class*="-small-2"].has-gutter-xl > * {
        width: calc(100% / 2 - 4rem - .01px)
    }

    [class*="-small-3"] > * {
        width: calc(100% / 3 - .01px)
    }

    [class*="-small-3"].has-gutter > * {
        width: calc(100% / 3 - 1rem - .01px)
    }

    [class*="-small-3"].has-gutter-l > * {
        width: calc(100% / 3 - 2rem - .01px)
    }

    [class*="-small-3"].has-gutter-xl > * {
        width: calc(100% / 3 - 4rem - .01px)
    }

    [class*="-small-4"] > * {
        width: calc(100% / 4 - .01px)
    }

    [class*="-small-4"].has-gutter > * {
        width: calc(100% / 4 - 1rem - .01px)
    }

    [class*="-small-4"].has-gutter-l > * {
        width: calc(100% / 4 - 2rem - .01px)
    }

    [class*="-small-4"].has-gutter-xl > * {
        width: calc(100% / 4 - 4rem - .01px)
    }
}