.wrapper {
    @include clearfix();
    height: 100vh;
    transition: transform 0.2s ease;
}

.content-wrapper {
    box-sizing: border-box;
    width: 100%;
    height: 100%; // this has no effect on desktop, but on mobile it helps aesthetics of menu popout action
    float: left;
    position: relative;
    background-color: $color-grey-4;
    border-bottom: 1px solid $color-grey-3;
}

.content {
    @include row();
    background: $color-white;
    border-top: 0 solid $color-grey-5; // this top border provides space for the floating logo to toggle the menu
    min-height: 100%;
    position: relative; // yuk. necessary for positions for jquery ui widgets

    @include media-breakpoint-up(sm) {
        padding-bottom: 4em;
    }
}

@include media-breakpoint-up(sm) {
    .content-wrapper {
        border-bottom-right-radius: 5px;
    }

    .content {
        border-top: 0;
        background-color: none;
        padding-top: 0;
    }
}

.row {
    @include clearfix();
}

@include media-breakpoint-up(sm) {
    .col1 {
        @include column(1);
    }

    .col2 {
        @include column(2);
    }

    .col3 {
        @include column(3);
    }

    .col4 {
        @include column(4);
    }

    .col5 {
        @include column(5);
    }

    .col6 {
        @include column(6);
    }

    .col7 {
        @include column(7);
    }

    .col8 {
        @include column(8);
    }

    .col9 {
        @include column(9);
    }

    .col10 {
        @include column(10);
    }

    .col11 {
        @include column(11);
    }

    .col12 {
        @include column(12);
    }

    .row {
        @include row();
    }

    .row-flush {
        @include row-flush();
    }
}