/*! Flexible Grid System 5.6.0 | Less | MIT License | dnomak.com/flexiblegs */

.wrap() {
  display: block;
  width: 100%;
  font-size: 0;
  letter-spacing: 0;
  text-align: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  > * {
    display: inline-block;
    vertical-align: top;
  }
}
.wrap(@prop) when (@prop = "table") {
  display: table;
  table-layout: fixed;
  -webkit-flex-direction: initial;
  -ms-flex-direction: initial;
  flex-direction: initial;
  -webkit-flex-wrap: initial;
  -ms-flex-wrap: initial;
  flex-wrap: initial;
  -webkit-justify-content: initial;
  -ms-justify-content: initial;
  justify-content: initial;
  -webkit-align-content: initial;
  -ms-align-content: initial;
  align-content: initial;
  -webkit-align-items: initial;
  -ms-align-items: initial;
  align-items: initial;
  -webkit-column-count: auto;
  -moz-column-count: auto;
  column-count: auto;
  > * {
    display: table-cell;
  }
}
.wrap(@prop) when (@prop = "flexbox") {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  table-layout: auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-content: center;
  -ms-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-column-count: auto;
  -moz-column-count: auto;
  column-count: auto;
  > * {
    display: inline-block;
  }
}
.wrap(@prop) when (@prop = "normal") {
  display: block;
  table-layout: auto;
  -webkit-flex-direction: initial;
  -ms-flex-direction: initial;
  flex-direction: initial;
  -webkit-flex-wrap: initial;
  -ms-flex-wrap: initial;
  flex-wrap: initial;
  -webkit-justify-content: initial;
  -ms-justify-content: initial;
  justify-content: initial;
  -webkit-align-content: initial;
  -ms-align-content: initial;
  align-content: initial;
  -webkit-align-items: initial;
  -ms-align-items: initial;
  align-items: initial;
  -webkit-column-count: auto;
  -moz-column-count: auto;
  column-count: auto;
  > * {
    display: inline-block;
  }
}
.wrap(@prop) when (@prop = "left") {
  -webkit-justify-content: flex-start;
  -ms-justify-content: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.wrap(@prop) when (@prop = "center") {
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  text-align: center;
}
.wrap(@prop) when (@prop = "right") {
  -webkit-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content: flex-end;
  text-align: right;
}
.wrap(@prop) when (@prop = "top") {
  -webkit-align-items: flex-start;
  -ms-align-items: flex-start;
  align-items: flex-start;
  > * {
    vertical-align: top;
  }
}
.wrap(@prop) when (@prop = "middle") {
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  > * {
    vertical-align: middle;
  }
}
.wrap(@prop) when (@prop = "bottom") {
  -webkit-align-items: flex-end;
  -ms-align-items: flex-end;
  align-items: flex-end;
  > * {
    vertical-align: bottom;
  }
}
.wrap(@prop) when (@prop = "stretch") {
  -webkit-align-content: stretch;
  -ms-align-content: stretch;
  align-content: stretch;
  -webkit-align-items: stretch;
  -ms-align-items: stretch;
  align-items: stretch;
}
.wrap(@prop) when (@prop = "between") {
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-content: space-between;
  -ms-align-content: space-between;
  align-content: space-between;
}
.wrap(@prop) when (@prop = "around") {
  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-content: space-around;
  -ms-align-content: space-around;
  align-content: space-around;
}
.wrap(@prop) when (@prop = "baseline") {
  -webkit-align-items: baseline;
  -ms-align-items: baseline;
  align-items: baseline;
}
.wrap(@prop) when (@prop = "reverse") {
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-flex-wrap: wrap-reverse;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
.wrap(@prop) when (@prop = "not-reverse") {
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.wrap(@prop, @val) when (@prop = "gutter") {
  width: calc(~"100% + @{val}px");
  margin-left: -@val / 2px;
  margin-right: -@val / 2px;
  padding-left: 0;
  padding-right: 0;
  > * {
    padding-left: @val / 2px;
    padding-right: @val / 2px;
  }
}
.wrap(@prop, @val) when (@prop = "outside") {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: @val / 2px;
  padding-right: @val / 2px;
}
.wrap(@prop) when (@prop = "auto") {
  > * {
    width: auto;
  }
}
.wrap(@prop) when (isnumber(@prop)) {
  > * {
    width: 100% / @prop;
  }
}

.col() {
  min-height: 1px;
  font-size: 1rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.col(@prop, @val) when (@prop = "width") {
  width: ~"@{val}px";
}
.col(@prop) when (@prop = "hidden") {
  display: none;
}
.col(@prop) when (@prop = "not-hidden") {
  display: inline-block;
}
.col(@prop) when (@prop = "first") {
  -ms-flex-order: -1;
  -webkit-order: -1;
  order: -1;
}
.col(@prop) when (@prop = "not-first") {
  -ms-flex-order: 0;
  -webkit-order: 0;
  order: 0;
}
.col(@prop) when (@prop = "last") {
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}
.col(@prop) when (@prop = "not-last") {
  -ms-flex-order: 0;
  -webkit-order: 0;
  order: 0;
}
.col(@prop, @val) when (isnumber(@prop)) {
  width: 100% / @val * @prop;
}