/*
 *
 * Uncomment and set these variables to customize the grid.
 *
 * :root {
 *  --gutter-width: 1rem;
 *  --outer-margin: 2rem;
 *  --gutter-compensation: calc( var( --gutter-width / 2 ) * -1 );
 *  --half-gutter-width: calc( var( --gutter-width / 2 ) );
 *  --screen-xs-min: 30em;
 *  --screen-sm-min: 48em;
 *  --screen-md-min: 62em;
 *  --screen-lg-min: 75em;
 *  --container-sm: calc( 45rem + var( --gutter-width ) );
 *  --container-md: calc( 60rem + var( --gutter-width ) );
 *  --container-lg: calc( 70rem + var( --gutter-width ) );
 * }
 *
 */
.container-responsive {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.row {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

.hidden-xs {
    display: none;
}

.center-xs {
    justify-content: center;
    text-align: center;
}

.last-xs {
    order: 1;
}

.padding-sm {
    padding:0 1.5rem;
}

.col-xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}

@media (orientation:portrait) and (min-height: 1000px) {
    .col-sm-3,
    .col-sm-6,
    .col-sm-offset-1 {
        box-sizing: border-box;
        display: flex;
        flex: 0 1 auto;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .col-sm-3 {
        flex-basis: 25%;
        max-width: 25%;
    }

    .col-sm-6 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .col-sm-offset-1 {
        margin-left: 8.333333333%;
    }

    .hidden-sm {
        display: none;
    }

    .start-sm {
        justify-content: flex-start;
        text-align: start;
    }

    .first-sm {
        order: -1;
    }

}
@media (orientation:portrait) and (min-height: 1000px) {
    .visible-sm {
        display: block;
    }
}

@media (orientation:landscape) and (min-height:1000px), all and (min-width:1000px) {
    .col-md-3,
    .col-md-4,
    .col-md-6,
    .col-md-offset-1 {
        box-sizing: border-box;
        display: flex;
        flex: 0 1 auto;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .col-md-3 {
        flex-basis: 25%;
        max-width: 25%;
    }

    .col-md-4 {
        flex-basis: 33.333333333%;
        max-width: 33.333333333%;
    }

    .col-md-6 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .col-md-offset-1 {
        margin-left: 8.333333333%;
    }

    .padding-sm {
        padding:0 0.5rem;
    }
    
    .hidden-md {
        display: none;
    }
    
    .visible-md {
        display: block;
    }
    
    .start-md {
        justify-content: flex-start;
        text-align: start;
    }

    .center-md {
        justify-content: center;
    }

    .middle-md {
        align-items: center;
    }

    .first-md {
        order: -1;
    }
}