.row {
  --max_cols: 12;
}
.row:after {
  display: block;
  content: "";
  float: none;
  clear: both;
  width: 100%;
  height: 0px;
}
.row .col {
  float: left;
  box-sizing: border-box;
}
.row.centerize .col {
  float: none;
  margin: auto;
}

.row.cols_padding {
  margin: calc( var( --padding ) * -1 );
}
.row.cols_padding > .col {
  padding: calc( var( --padding ) * 1 );
}
.row.cols_padding.cols_padding_2x {
  margin: calc( var( --padding ) * -2 );
}
.row.cols_padding.cols_padding_2x > .col {
  padding: calc( var( --padding ) * 2 );
}
.row.cols_padding.cols_padding_3x {
  margin: calc( var( --padding ) * -1 ) calc( var( --padding ) * -3 );
  overflow: hidden;
}
.row.cols_padding.cols_padding_3x > .col {
  padding: calc( var( --padding ) * 3 );
}
.row.cols_padding.cols_padding_4x {
  margin: calc( var( --padding ) * -4 );
}
.row.cols_padding.cols_padding_4x > .col {
  padding: calc( var( --padding ) * 4 );
}

.row.cols_padding.cols_padding_c_padding {
  margin: calc( var( --c_padding ) * -1 );
}
.row.cols_padding.cols_padding_c_padding > .col {
  padding: calc( var( --c_padding ) * 1 );
}
.row.cols_padding.cols_padding_c_padding.cols_padding_2x {
  margin: calc( var( --c_padding ) * -2 );
}
.row.cols_padding.cols_padding_c_padding.cols_padding_2x > .col {
  padding: calc( var( --c_padding ) * 2 );
}
.row.cols_padding.cols_padding_c_padding.cols_padding_3x {
  margin: calc( var( --c_padding ) * -3 );
}
.row.cols_padding.cols_padding_c_padding.cols_padding_3x > .col {
  padding: calc( var( --c_padding ) * 3 );
}
.row.cols_padding.cols_padding_c_padding.cols_padding_4x {
  margin: calc( var( --c_padding ) * -4 );
}
.row.cols_padding.cols_padding_c_padding.cols_padding_4x > .col {
  padding: calc( var( --c_padding ) * 4 );
}

.row .col.col-1 {
  width: calc( 1% * 1 / var(--max_cols) * 100 )
}
.row .col.col-2 {
  width: calc( 1% * 2 / var(--max_cols) * 100 )
}
.row .col.col-3 {
  width: calc( 1% * 3 / var(--max_cols) * 100 )
}
.row .col.col-4 {
  width: calc( 1% * 4 / var(--max_cols) * 100 )
}
.row .col.col-5 {
  width: calc( 1% * 5 / var(--max_cols) * 100 )
}
.row .col.col-6 {
  width: calc( 1% * 6 / var(--max_cols) * 100 )
}
.row .col.col-7 {
  width: calc( 1% * 7 / var(--max_cols) * 100 )
}
.row .col.col-8 {
  width: calc( 1% * 8 / var(--max_cols) * 100 )
}
.row .col.col-9 {
  width: calc( 1% * 9 / var(--max_cols) * 100 )
}
.row .col.col-10 {
  width: calc( 1% * 10 / var(--max_cols) * 100 )
}
.row .col.col-11 {
  width: calc( 1% * 11 / var(--max_cols) * 100 )
}
.row .col.col-12 {
  width: calc( 1% * 12 / var(--max_cols) * 100 )
}
.row .col.col-13 {
  width: calc( 1% * 13 / var(--max_cols) * 100 )
}
.row .col.col-14 {
  width: calc( 1% * 14 / var(--max_cols) * 100 )
}
.row .col.col-15 {
  width: calc( 1% * 15 / var(--max_cols) * 100 )
}
.row .col.col-16 {
  width: calc( 1% * 16 / var(--max_cols) * 100 )
}
.row .col.col-17 {
  width: calc( 1% * 17 / var(--max_cols) * 100 )
}
.row .col.col-18 {
  width: calc( 1% * 18 / var(--max_cols) * 100 )
}
.row .col.col-19 {
  width: calc( 1% * 19 / var(--max_cols) * 100 )
}
.row .col.col-20 {
  width: calc( 1% * 20 / var(--max_cols) * 100 )
}

@media( min-width: 570px ){

  .row {
  }
  .row .col.col-sm-1 {
    width: calc( 1% * 1 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-2 {
    width: calc( 1% * 2 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-3 {
    width: calc( 1% * 3 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-4 {
    width: calc( 1% * 4 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-5 {
    width: calc( 1% * 5 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-6 {
    width: calc( 1% * 6 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-7 {
    width: calc( 1% * 7 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-8 {
    width: calc( 1% * 8 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-9 {
    width: calc( 1% * 9 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-10 {
    width: calc( 1% * 10 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-11 {
    width: calc( 1% * 11 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-12 {
    width: calc( 1% * 12 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-13 {
    width: calc( 1% * 13 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-14 {
    width: calc( 1% * 14 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-15 {
    width: calc( 1% * 15 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-16 {
    width: calc( 1% * 16 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-17 {
    width: calc( 1% * 17 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-18 {
    width: calc( 1% * 18 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-19 {
    width: calc( 1% * 19 / var(--max_cols) * 100 )
  }
  .row .col.col-sm-20 {
    width: calc( 1% * 20 / var(--max_cols) * 100 )
  }

}
@media( min-width: 990px ){

  .row {
  }
  .row .col.col-md-1 {
    width: calc( 1% * 1 / var(--max_cols) * 100 )
  }
  .row .col.col-md-2 {
    width: calc( 1% * 2 / var(--max_cols) * 100 )
  }
  .row .col.col-md-3 {
    width: calc( 1% * 3 / var(--max_cols) * 100 )
  }
  .row .col.col-md-4 {
    width: calc( 1% * 4 / var(--max_cols) * 100 )
  }
  .row .col.col-md-5 {
    width: calc( 1% * 5 / var(--max_cols) * 100 )
  }
  .row .col.col-md-6 {
    width: calc( 1% * 6 / var(--max_cols) * 100 )
  }
  .row .col.col-md-7 {
    width: calc( 1% * 7 / var(--max_cols) * 100 )
  }
  .row .col.col-md-8 {
    width: calc( 1% * 8 / var(--max_cols) * 100 )
  }
  .row .col.col-md-9 {
    width: calc( 1% * 9 / var(--max_cols) * 100 )
  }
  .row .col.col-md-10 {
    width: calc( 1% * 10 / var(--max_cols) * 100 )
  }
  .row .col.col-md-11 {
    width: calc( 1% * 11 / var(--max_cols) * 100 )
  }
  .row .col.col-md-12 {
    width: calc( 1% * 12 / var(--max_cols) * 100 )
  }
  .row .col.col-md-13 {
    width: calc( 1% * 13 / var(--max_cols) * 100 )
  }
  .row .col.col-md-14 {
    width: calc( 1% * 14 / var(--max_cols) * 100 )
  }
  .row .col.col-md-15 {
    width: calc( 1% * 15 / var(--max_cols) * 100 )
  }
  .row .col.col-md-16 {
    width: calc( 1% * 16 / var(--max_cols) * 100 )
  }
  .row .col.col-md-17 {
    width: calc( 1% * 17 / var(--max_cols) * 100 )
  }
  .row .col.col-md-18 {
    width: calc( 1% * 18 / var(--max_cols) * 100 )
  }
  .row .col.col-md-19 {
    width: calc( 1% * 19 / var(--max_cols) * 100 )
  }
  .row .col.col-md-20 {
    width: calc( 1% * 20 / var(--max_cols) * 100 )
  }

}
@media( min-width: 1300px ){

  .row {
  }
  .row .col.col-lg-1 {
    width: calc( 1% * 1 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-2 {
    width: calc( 1% * 2 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-3 {
    width: calc( 1% * 3 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-4 {
    width: calc( 1% * 4 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-5 {
    width: calc( 1% * 5 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-6 {
    width: calc( 1% * 6 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-7 {
    width: calc( 1% * 7 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-8 {
    width: calc( 1% * 8 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-9 {
    width: calc( 1% * 9 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-10 {
    width: calc( 1% * 10 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-11 {
    width: calc( 1% * 11 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-12 {
    width: calc( 1% * 12 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-13 {
    width: calc( 1% * 13 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-14 {
    width: calc( 1% * 14 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-15 {
    width: calc( 1% * 15 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-16 {
    width: calc( 1% * 16 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-17 {
    width: calc( 1% * 17 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-18 {
    width: calc( 1% * 18 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-19 {
    width: calc( 1% * 19 / var(--max_cols) * 100 )
  }
  .row .col.col-lg-20 {
    width: calc( 1% * 20 / var(--max_cols) * 100 )
  }

}
@media( min-width: 1500px ){

  .row {
  }
  .row .col.col-xl-1 {
    width: calc( 1% * 1 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-2 {
    width: calc( 1% * 2 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-3 {
    width: calc( 1% * 3 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-4 {
    width: calc( 1% * 4 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-5 {
    width: calc( 1% * 5 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-6 {
    width: calc( 1% * 6 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-7 {
    width: calc( 1% * 7 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-8 {
    width: calc( 1% * 8 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-9 {
    width: calc( 1% * 9 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-10 {
    width: calc( 1% * 10 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-11 {
    width: calc( 1% * 11 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-12 {
    width: calc( 1% * 12 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-13 {
    width: calc( 1% * 13 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-14 {
    width: calc( 1% * 14 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-15 {
    width: calc( 1% * 15 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-16 {
    width: calc( 1% * 16 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-17 {
    width: calc( 1% * 17 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-18 {
    width: calc( 1% * 18 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-19 {
    width: calc( 1% * 19 / var(--max_cols) * 100 )
  }
  .row .col.col-xl-20 {
    width: calc( 1% * 20 / var(--max_cols) * 100 )
  }

}