//
//Grid
//

.row {
  margin-left: -12px;
  margin-right: -12px;
  [class*=col-] {
    padding-left: 12px;
    padding-right: 12px
  }

  &.no-gutter {
    @include grid-row-box-model(0,0);

  }
  //row-lg
  &-lg {
    @include grid-row-box-model(-20px,20px);
  }

  //row-md
  &-md {
    @include grid-row-box-model(-16px,16px);
  }
  //row-md
  &-sm {
    @include grid-row-box-model(-8px,8px);
  }
  //row-xs
  &-xs {
    @include grid-row-box-model(-4px,4px);
  }

  &-body,&-col {
    width: 100%;
    height: 100%;
  }

  &-col {
    display: table;
    table-layout: fixed;
    border-spacing: 0;

    &>[class*=col-],&>[class*=" col-"] {
      vertical-align: top;
      float: none;
      padding: 0;
      position: static;
      &.show {
        display: table-cell!important
      }
    }
  }

  &-row {
    display: table-row;
    height: 100%
  }

  &-cell {
    display: table-cell;
    vertical-align: top
  }

  &-body {
    position: relative;

    .ie & {
      display: table-cell;
      overflow: auto;
    }
  }

  &-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .ie .row-body & {
      overflow: visible!important;
    }
  }
}


//vertical
.v {
  &-m {
    vertical-align: middle!important
  }
  &-t {
    vertical-align: top!important
  }
  &-b {
    vertical-align: bottom!important
  }
}

@each $key in (lg,md,sm,xs) {
  @each $key in (lg,md,sm,xs) {
    @include generate-media-min-breakpoint($key) {
      .row-col>[class*=col-lg],.row-col>[class*=" col-"#{$key}] {
        display: table-cell;
        height: 100%;
      }
    }
  }
}
.col-0 {
  clear: left
}

@media (min-width: map-get($media-min-breakpoints,'lg')) {
  .col-lg-2-4 {
    width: 20%;
    float: left
  }
}

@media (max-width: map-get($media-max-breakpoints,'lg')) {
  .row {
    margin-left: -8px;
    margin-right: -8px
  }

  .row [class*=col-] {
    padding-left: 8px;
    padding-right: 8px
  }

  .row-2 [class*=col] {
    width: 50%;
    float: left
  }

  .row-2 .col-0 {
    clear: none
  }

  .row-2 li:nth-child(odd) {
    clear: left;
    margin-left: 0
  }
}


@media (max-width:map-get($media-max-breakpoints,'md')) {
  .row {
    margin-left: -4px;
    margin-right: -4px
  }

  .row [class*=col-] {
    padding-left: 4px;
    padding-right: 4px
  }
}

@media (max-width:map-get($media-max-breakpoints,'sm')) {
  .row-col-xs {
    display: block
  }

  .row-col-xs .row-body {
    overflow: visible!important
  }

  .row-col-xs .row-inner {
    position: static
  }
}