@import (reference) "_elements";

[class*="col-"] {
   width: 100%;
}

.top {
   -webkit-align-items: flex-start;
   -ms-flex-align: start;
   align-items: flex-start;
}

.middle {
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
}

.bottom {
   -webkit-align-items: flex-end;
   -ms-flex-align: end;
   align-items: flex-end;
}

.start {
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
   text-align: start;
}

.center {
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   text-align: center;
}

.end {
   -webkit-justify-content: flex-end;
   -ms-flex-pack: end;
   justify-content: flex-end;
   text-align: end;
}

.around {
   -webkit-justify-content: space-around;
   -ms-flex-pack: distribute;
   justify-content: space-around;
}

.between {
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
}

.first {
   -webkit-order: -1;
   -ms-flex-order: -1;
   order: -1;
}

.last {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
}

.container {
   margin-right: auto;
   margin-left: auto;
   padding-left: (@gutter / 2);
   padding-right: (@gutter / 2);
}

.row {
   box-sizing: border-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin-left: (@gutter / -2);
   margin-right: (@gutter / -2);
}

.row.reverse {
   -webkit-flex-direction: row-reverse;
   -ms-flex-direction: row-reverse;
   flex-direction: row-reverse;
}

.col.reverse {
   -webkit-flex-direction: column-reverse;
   -ms-flex-direction: column-reverse;
   flex-direction: column-reverse;
}

.container {
   width: @container-md;
}

.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-offset-1,
.col-md-offset-2,
.col-md-offset-3,
.col-md-offset-4,
.col-md-offset-5,
.col-md-offset-6,
.col-md-offset-7,
.col-md-offset-8,
.col-md-offset-9,
.col-md-offset-10,
.col-md-offset-11,
.col-md-offset-12 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   padding-right: (@gutter / 2);
   padding-left: (@gutter / 2);
}

.col-md {
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
   -webkit-flex-basis: 0;
   -ms-flex-preferred-size: 0;
   flex-basis: 0;
   max-width: 100%;
}

.col-md-1 {
   -webkit-flex-basis: 8.333%;
   -ms-flex-preferred-size: 8.333%;
   flex-basis: 8.333%;
   max-width: 8.333%;
}

.col-md-2 {
   -webkit-flex-basis: 16.667%;
   -ms-flex-preferred-size: 16.667%;
   flex-basis: 16.667%;
   max-width: 16.667%;
}

.col-md-3 {
   -webkit-flex-basis: 25%;
   -ms-flex-preferred-size: 25%;
   flex-basis: 25%;
   max-width: 25%;
}

.col-md-4 {
   -webkit-flex-basis: 33.333%;
   -ms-flex-preferred-size: 33.333%;
   flex-basis: 33.333%;
   max-width: 33.333%;
}

.col-md-5 {
   -webkit-flex-basis: 41.667%;
   -ms-flex-preferred-size: 41.667%;
   flex-basis: 41.667%;
   max-width: 41.667%;
}

.col-md-6 {
   -webkit-flex-basis: 50%;
   -ms-flex-preferred-size: 50%;
   flex-basis: 50%;
   max-width: 50%;
}

.col-md-7 {
   -webkit-flex-basis: 58.333%;
   -ms-flex-preferred-size: 58.333%;
   flex-basis: 58.333%;
   max-width: 58.333%;
}

.col-md-8 {
   -webkit-flex-basis: 66.667%;
   -ms-flex-preferred-size: 66.667%;
   flex-basis: 66.667%;
   max-width: 66.667%;
}

.col-md-9 {
   -webkit-flex-basis: 75%;
   -ms-flex-preferred-size: 75%;
   flex-basis: 75%;
   max-width: 75%;
}

.col-md-10 {
   -webkit-flex-basis: 83.333%;
   -ms-flex-preferred-size: 83.333%;
   flex-basis: 83.333%;
   max-width: 83.333%;
}

.col-md-11 {
   -webkit-flex-basis: 91.667%;
   -ms-flex-preferred-size: 91.667%;
   flex-basis: 91.667%;
   max-width: 91.667%;
}

.col-md-12 {
   -webkit-flex-basis: 100%;
   -ms-flex-preferred-size: 100%;
   flex-basis: 100%;
   max-width: 100%;
}

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

.col-md-offset-2 {
   margin-left: 16.667%;
}

.col-md-offset-3 {
   margin-left: 25%;
}

.col-md-offset-4 {
   margin-left: 33.333%;
}

.col-md-offset-5 {
   margin-left: 41.667%;
}

.col-md-offset-6 {
   margin-left: 50%;
}

.col-md-offset-7 {
   margin-left: 58.333%;
}

.col-md-offset-8 {
   margin-left: 66.667%;
}

.col-md-offset-9 {
   margin-left: 75%;
}

.col-md-offset-10 {
   margin-left: 83.333%;
}

.col-md-offset-11 {
   margin-left: 91.667%;
}

.start-md {
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
   text-align: start;
}

.center-md {
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   text-align: center;
}

.end-md {
   -webkit-justify-content: flex-end;
   -ms-flex-pack: end;
   justify-content: flex-end;
   text-align: end;
}

.top-md {
   -webkit-align-items: flex-start;
   -ms-flex-align: start;
   align-items: flex-start;
}

.middle-md {
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
}

.bottom-md {
   -webkit-align-items: flex-end;
   -ms-flex-align: end;
   align-items: flex-end;
}

.around-md {
   -webkit-justify-content: space-around;
   -ms-flex-pack: distribute;
   justify-content: space-around;
}

.between-md {
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
}

.first-md {
   -webkit-order: -1;
   -ms-flex-order: -1;
   order: -1;
}

.last-md {
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
}
