vui-design/src/style/components/grid.less

A high quality UI Toolkit based on Vue.js

@vui-row: ~"@{vui}-row";
@vui-row-flex: ~"@{vui}-row-flex";
@vui-col: ~"@{vui}-col";

.@{vui-row} {
  position:relative;
  display:block;
  box-sizing:border-box;
  height:auto;
  margin-left:0;
  margin-right:0;

  .clearfix;

  .@{vui-col} {
    float:left;
  }
}

.@{vui-row-flex} {
  position:relative;
  display:flex;
  box-sizing:border-box;
  flex-direction:row;
  flex-wrap:wrap;
  height:auto;
  margin-left:0;
  margin-right:0;

  .@{vui-col} {
    flex:0 0 auto;
  }
}

.@{vui-row} {
  &-justify-start {
    justify-content:flex-start;
  }
  &-justify-center {
    justify-content:center;
  }
  &-justify-end {
    justify-content:flex-end;
  }
  &-justify-space-between {
    justify-content:space-between;
  }
  &-justify-space-around {
    justify-content:space-around;
  }

  &-align-top {
    align-items:flex-start;
  }
  &-align-middle {
    align-items:center;
  }
  &-align-bottom {
    align-items:flex-end;
  }
}

.@{vui-col} {
  box-sizing:border-box;

  &-0 { display:none; width:0; }
  &-offset-0 { margin-left:0; }
  &-pull-0 { position:relative; right:0; }
  &-push-0 { position:relative; left:0; }
  &-order-0 { order:0; }

  &-1 { width:4.16666667%; }
  &-offset-1 { margin-left:4.16666667%; }
  &-pull-1 { position:relative; right:4.16666667%; }
  &-push-1 { position:relative; left:4.16666667%; }
  &-order-1 { order:1; }

  &-2 { width:8.33333333%; }
  &-offset-2 { margin-left:8.33333333%; }
  &-pull-2 { position:relative; right:8.33333333%; }
  &-push-2 { position:relative; left:8.33333333%; }
  &-order-2 { order:2; }

  &-3 { width:12.5%; }
  &-offset-3 { margin-left:12.5%; }
  &-pull-3 { position:relative; right:12.5%; }
  &-push-3 { position:relative; left:12.5%; }
  &-order-3 { order:3; }

  &-4 { width:16.66666667%; }
  &-offset-4 { margin-left:16.66666667%; }
  &-pull-4 { position:relative; right:16.66666667%; }
  &-push-4 { position:relative; left:16.66666667%; }
  &-order-4 { order:4; }

  &-5 { width:20.83333333%; }
  &-offset-5 { margin-left:20.83333333%; }
  &-pull-5 { position:relative; right:20.83333333%; }
  &-push-5 { position:relative; left:20.83333333%; }
  &-order-5 { order:5; }

  &-6 { width:25%; }
  &-offset-6 { margin-left:25%; }
  &-pull-6 { position:relative; right:25%; }
  &-push-6 { position:relative; left:25%; }
  &-order-6 { order:6; }

  &-7 { width:29.16666667%; }
  &-offset-7 { margin-left:29.16666667%; }
  &-pull-7 { position:relative; right:29.16666667%; }
  &-push-7 { position:relative; left:29.16666667%; }
  &-order-7 { order:7; }

  &-8 { width:33.33333333%; }
  &-offset-8 { margin-left:33.33333333%; }
  &-pull-8 { position:relative; right:33.33333333%; }
  &-push-8 { position:relative; left:33.33333333%; }
  &-order-8 { order:8; }

  &-9 { width:37.5%; }
  &-offset-9 { margin-left:37.5%; }
  &-pull-9 { position:relative; right:37.5%; }
  &-push-9 { position:relative; left:37.5%; }
  &-order-9 { order:9; }

  &-10 { width:41.66666667%; }
  &-offset-10 { margin-left:41.66666667%; }
  &-pull-10 { position:relative; right:41.66666667%; }
  &-push-10 { position:relative; left:41.66666667%; }
  &-order-10 { order:10; }

  &-11 { width:45.83333333%; }
  &-offset-11 { margin-left:45.83333333%; }
  &-pull-11 { position:relative; right:45.83333333%; }
  &-push-11 { position:relative; left:45.83333333%; }
  &-order-11 { order:11; }

  &-12 { width:50%; }
  &-offset-12 { margin-left:50%; }
  &-pull-12 { position:relative; right:50%; }
  &-push-12 { position:relative; left:50%; }
  &-order-12 { order:12; }

  &-13 { width:54.16666667%; }
  &-offset-13 { margin-left:54.16666667%; }
  &-pull-13 { position:relative; right:54.16666667%; }
  &-push-13 { position:relative; left:54.16666667%; }
  &-order-13 { order:13; }

  &-14 { width:58.33333333%; }
  &-offset-14 { margin-left:58.33333333%; }
  &-pull-14 { position:relative; right:58.33333333%; }
  &-push-14 { position:relative; left:58.33333333%; }
  &-order-14 { order:14; }

  &-15 { width:62.5%; }
  &-offset-15 { margin-left:62.5%; }
  &-pull-15 { position:relative; right:62.5%; }
  &-push-15 { position:relative; left:62.5%; }
  &-order-15 { order:15; }

  &-16 { width:66.66666667%; }
  &-offset-16 { margin-left:66.66666667%; }
  &-pull-16 { position:relative; right:66.66666667%; }
  &-push-16 { position:relative; left:66.66666667%; }
  &-order-16 { order:16; }

  &-17 { width:70.83333333%; }
  &-offset-17 { margin-left:70.83333333%; }
  &-pull-17 { position:relative; right:70.83333333%; }
  &-push-17 { position:relative; left:70.83333333%; }
  &-order-17 { order:17; }

  &-18 { width:75%; }
  &-offset-18 { margin-left:75%; }
  &-pull-18 { position:relative; right:75%; }
  &-push-18 { position:relative; left:75%; }
  &-order-18 { order:18; }

  &-19 { width:79.16666667%; }
  &-offset-19 { margin-left:79.16666667%; }
  &-pull-19 { position:relative; right:79.16666667%; }
  &-push-19 { position:relative; left:79.16666667%; }
  &-order-19 { order:19; }

  &-20 { width:83.33333333%; }
  &-offset-20 { margin-left:83.33333333%; }
  &-pull-20 { position:relative; right:83.33333333%; }
  &-push-20 { position:relative; left:83.33333333%; }
  &-order-20 { order:20; }

  &-21 { width:87.5%; }
  &-offset-21 { margin-left:87.5%; }
  &-pull-21 { position:relative; right:87.5%; }
  &-push-21 { position:relative; left:87.5%; }
  &-order-21 { order:21; }

  &-22 { width:91.66666667%; }
  &-offset-22 { margin-left:91.66666667%; }
  &-pull-22 { position:relative; right:91.66666667%; }
  &-push-22 { position:relative; left:91.66666667%; }
  &-order-22 { order:22; }

  &-23 { width:95.83333333%; }
  &-offset-23 { margin-left:95.83333333%; }
  &-pull-23 { position:relative; right:95.83333333%; }
  &-push-23 { position:relative; left:95.83333333%; }
  &-order-23 { order:23; }

  &-24 { width:100%; }
  &-offset-24 { margin-left:100%; }
  &-pull-24 { position:relative; right:100%; }
  &-push-24 { position:relative; left:100%; }
  &-order-24 { order:24; }
}

@media only screen and (max-width:576px) {
  .@{vui-col} {
    &-xs-0 { display:none; width:0; }
    &-xs-offset-0 { margin-left:0; }
    &-xs-pull-0 { position:relative; right:0; }
    &-xs-push-0 { position:relative; left:0; }
    &-xs-order-0 { order:0; }

    &-xs-1 { width:4.16666667%; }
    &-xs-offset-1 { margin-left:4.16666667%; }
    &-xs-pull-1 { position:relative; right:4.16666667%; }
    &-xs-push-1 { position:relative; left:4.16666667%; }
    &-xs-order-1 { order:1; }

    &-xs-2 { width:8.33333333%; }
    &-xs-offset-2 { margin-left:8.33333333%; }
    &-xs-pull-2 { position:relative; right:8.33333333%; }
    &-xs-push-2 { position:relative; left:8.33333333%; }
    &-xs-order-2 { order:2; }

    &-xs-3 { width:12.5%; }
    &-xs-offset-3 { margin-left:12.5%; }
    &-xs-pull-3 { position:relative; right:12.5%; }
    &-xs-push-3 { position:relative; left:12.5%; }
    &-xs-order-3 { order:3; }

    &-xs-4 { width:16.66666667%; }
    &-xs-offset-4 { margin-left:16.66666667%; }
    &-xs-pull-4 { position:relative; right:16.66666667%; }
    &-xs-push-4 { position:relative; left:16.66666667%; }
    &-xs-order-4 { order:4; }

    &-xs-5 { width:20.83333333%; }
    &-xs-offset-5 { margin-left:20.83333333%; }
    &-xs-pull-5 { position:relative; right:20.83333333%; }
    &-xs-push-5 { position:relative; left:20.83333333%; }
    &-xs-order-5 { order:5; }

    &-xs-6 { width:25%; }
    &-xs-offset-6 { margin-left:25%; }
    &-xs-pull-6 { position:relative; right:25%; }
    &-xs-push-6 { position:relative; left:25%; }
    &-xs-order-6 { order:6; }

    &-xs-7 { width:29.16666667%; }
    &-xs-offset-7 { margin-left:29.16666667%; }
    &-xs-pull-7 { position:relative; right:29.16666667%; }
    &-xs-push-7 { position:relative; left:29.16666667%; }
    &-xs-order-7 { order:7; }

    &-xs-8 { width:33.33333333%; }
    &-xs-offset-8 { margin-left:33.33333333%; }
    &-xs-pull-8 { position:relative; right:33.33333333%; }
    &-xs-push-8 { position:relative; left:33.33333333%; }
    &-xs-order-8 { order:8; }

    &-xs-9 { width:37.5%; }
    &-xs-offset-9 { margin-left:37.5%; }
    &-xs-pull-9 { position:relative; right:37.5%; }
    &-xs-push-9 { position:relative; left:37.5%; }
    &-xs-order-9 { order:9; }

    &-xs-10 { width:41.66666667%; }
    &-xs-offset-10 { margin-left:41.66666667%; }
    &-xs-pull-10 { position:relative; right:41.66666667%; }
    &-xs-push-10 { position:relative; left:41.66666667%; }
    &-xs-order-10 { order:10; }

    &-xs-11 { width:45.83333333%; }
    &-xs-offset-11 { margin-left:45.83333333%; }
    &-xs-pull-11 { position:relative; right:45.83333333%; }
    &-xs-push-11 { position:relative; left:45.83333333%; }
    &-xs-order-11 { order:11; }

    &-xs-12 { width:50%; }
    &-xs-offset-12 { margin-left:50%; }
    &-xs-pull-12 { position:relative; right:50%; }
    &-xs-push-12 { position:relative; left:50%; }
    &-xs-order-12 { order:12; }

    &-xs-13 { width:54.16666667%; }
    &-xs-offset-13 { margin-left:54.16666667%; }
    &-xs-pull-13 { position:relative; right:54.16666667%; }
    &-xs-push-13 { position:relative; left:54.16666667%; }
    &-xs-order-13 { order:13; }

    &-xs-14 { width:58.33333333%; }
    &-xs-offset-14 { margin-left:58.33333333%; }
    &-xs-pull-14 { position:relative; right:58.33333333%; }
    &-xs-push-14 { position:relative; left:58.33333333%; }
    &-xs-order-14 { order:14; }

    &-xs-15 { width:62.5%; }
    &-xs-offset-15 { margin-left:62.5%; }
    &-xs-pull-15 { position:relative; right:62.5%; }
    &-xs-push-15 { position:relative; left:62.5%; }
    &-xs-order-15 { order:15; }

    &-xs-16 { width:66.66666667%; }
    &-xs-offset-16 { margin-left:66.66666667%; }
    &-xs-pull-16 { position:relative; right:66.66666667%; }
    &-xs-push-16 { position:relative; left:66.66666667%; }
    &-xs-order-16 { order:16; }

    &-xs-17 { width:70.83333333%; }
    &-xs-offset-17 { margin-left:70.83333333%; }
    &-xs-pull-17 { position:relative; right:70.83333333%; }
    &-xs-push-17 { position:relative; left:70.83333333%; }
    &-xs-order-17 { order:17; }

    &-xs-18 { width:75%; }
    &-xs-offset-18 { margin-left:75%; }
    &-xs-pull-18 { position:relative; right:75%; }
    &-xs-push-18 { position:relative; left:75%; }
    &-xs-order-18 { order:18; }

    &-xs-19 { width:79.16666667%; }
    &-xs-offset-19 { margin-left:79.16666667%; }
    &-xs-pull-19 { position:relative; right:79.16666667%; }
    &-xs-push-19 { position:relative; left:79.16666667%; }
    &-xs-order-19 { order:19; }

    &-xs-20 { width:83.33333333%; }
    &-xs-offset-20 { margin-left:83.33333333%; }
    &-xs-pull-20 { position:relative; right:83.33333333%; }
    &-xs-push-20 { position:relative; left:83.33333333%; }
    &-xs-order-20 { order:20; }

    &-xs-21 { width:87.5%; }
    &-xs-offset-21 { margin-left:87.5%; }
    &-xs-pull-21 { position:relative; right:87.5%; }
    &-xs-push-21 { position:relative; left:87.5%; }
    &-xs-order-21 { order:21; }

    &-xs-22 { width:91.66666667%; }
    &-xs-offset-22 { margin-left:91.66666667%; }
    &-xs-pull-22 { position:relative; right:91.66666667%; }
    &-xs-push-22 { position:relative; left:91.66666667%; }
    &-xs-order-22 { order:22; }

    &-xs-23 { width:95.83333333%; }
    &-xs-offset-23 { margin-left:95.83333333%; }
    &-xs-pull-23 { position:relative; right:95.83333333%; }
    &-xs-push-23 { position:relative; left:95.83333333%; }
    &-xs-order-23 { order:23; }

    &-xs-24 { width:100%; }
    &-xs-offset-24 { margin-left:100%; }
    &-xs-pull-24 { position:relative; right:100%; }
    &-xs-push-24 { position:relative; left:100%; }
    &-xs-order-24 { order:24; }
  }
}

@media only screen and (min-width:576px) {
  .@{vui-col} {
    &-sm-0 { display:none; width:0; }
    &-sm-offset-0 { margin-left:0; }
    &-sm-pull-0 { position:relative; right:0; }
    &-sm-push-0 { position:relative; left:0; }
    &-sm-order-0 { order:0; }

    &-sm-1 { width:4.16666667%; }
    &-sm-offset-1 { margin-left:4.16666667%; }
    &-sm-pull-1 { position:relative; right:4.16666667%; }
    &-sm-push-1 { position:relative; left:4.16666667%; }
    &-sm-order-1 { order:1; }

    &-sm-2 { width:8.33333333%; }
    &-sm-offset-2 { margin-left:8.33333333%; }
    &-sm-pull-2 { position:relative; right:8.33333333%; }
    &-sm-push-2 { position:relative; left:8.33333333%; }
    &-sm-order-2 { order:2; }

    &-sm-3 { width:12.5%; }
    &-sm-offset-3 { margin-left:12.5%; }
    &-sm-pull-3 { position:relative; right:12.5%; }
    &-sm-push-3 { position:relative; left:12.5%; }
    &-sm-order-3 { order:3; }

    &-sm-4 { width:16.66666667%; }
    &-sm-offset-4 { margin-left:16.66666667%; }
    &-sm-pull-4 { position:relative; right:16.66666667%; }
    &-sm-push-4 { position:relative; left:16.66666667%; }
    &-sm-order-4 { order:4; }

    &-sm-5 { width:20.83333333%; }
    &-sm-offset-5 { margin-left:20.83333333%; }
    &-sm-pull-5 { position:relative; right:20.83333333%; }
    &-sm-push-5 { position:relative; left:20.83333333%; }
    &-sm-order-5 { order:5; }

    &-sm-6 { width:25%; }
    &-sm-offset-6 { margin-left:25%; }
    &-sm-pull-6 { position:relative; right:25%; }
    &-sm-push-6 { position:relative; left:25%; }
    &-sm-order-6 { order:6; }

    &-sm-7 { width:29.16666667%; }
    &-sm-offset-7 { margin-left:29.16666667%; }
    &-sm-pull-7 { position:relative; right:29.16666667%; }
    &-sm-push-7 { position:relative; left:29.16666667%; }
    &-sm-order-7 { order:7; }

    &-sm-8 { width:33.33333333%; }
    &-sm-offset-8 { margin-left:33.33333333%; }
    &-sm-pull-8 { position:relative; right:33.33333333%; }
    &-sm-push-8 { position:relative; left:33.33333333%; }
    &-sm-order-8 { order:8; }

    &-sm-9 { width:37.5%; }
    &-sm-offset-9 { margin-left:37.5%; }
    &-sm-pull-9 { position:relative; right:37.5%; }
    &-sm-push-9 { position:relative; left:37.5%; }
    &-sm-order-9 { order:9; }

    &-sm-10 { width:41.66666667%; }
    &-sm-offset-10 { margin-left:41.66666667%; }
    &-sm-pull-10 { position:relative; right:41.66666667%; }
    &-sm-push-10 { position:relative; left:41.66666667%; }
    &-sm-order-10 { order:10; }

    &-sm-11 { width:45.83333333%; }
    &-sm-offset-11 { margin-left:45.83333333%; }
    &-sm-pull-11 { position:relative; right:45.83333333%; }
    &-sm-push-11 { position:relative; left:45.83333333%; }
    &-sm-order-11 { order:11; }

    &-sm-12 { width:50%; }
    &-sm-offset-12 { margin-left:50%; }
    &-sm-pull-12 { position:relative; right:50%; }
    &-sm-push-12 { position:relative; left:50%; }
    &-sm-order-12 { order:12; }

    &-sm-13 { width:54.16666667%; }
    &-sm-offset-13 { margin-left:54.16666667%; }
    &-sm-pull-13 { position:relative; right:54.16666667%; }
    &-sm-push-13 { position:relative; left:54.16666667%; }
    &-sm-order-13 { order:13; }

    &-sm-14 { width:58.33333333%; }
    &-sm-offset-14 { margin-left:58.33333333%; }
    &-sm-pull-14 { position:relative; right:58.33333333%; }
    &-sm-push-14 { position:relative; left:58.33333333%; }
    &-sm-order-14 { order:14; }

    &-sm-15 { width:62.5%; }
    &-sm-offset-15 { margin-left:62.5%; }
    &-sm-pull-15 { position:relative; right:62.5%; }
    &-sm-push-15 { position:relative; left:62.5%; }
    &-sm-order-15 { order:15; }

    &-sm-16 { width:66.66666667%; }
    &-sm-offset-16 { margin-left:66.66666667%; }
    &-sm-pull-16 { position:relative; right:66.66666667%; }
    &-sm-push-16 { position:relative; left:66.66666667%; }
    &-sm-order-16 { order:16; }

    &-sm-17 { width:70.83333333%; }
    &-sm-offset-17 { margin-left:70.83333333%; }
    &-sm-pull-17 { position:relative; right:70.83333333%; }
    &-sm-push-17 { position:relative; left:70.83333333%; }
    &-sm-order-17 { order:17; }

    &-sm-18 { width:75%; }
    &-sm-offset-18 { margin-left:75%; }
    &-sm-pull-18 { position:relative; right:75%; }
    &-sm-push-18 { position:relative; left:75%; }
    &-sm-order-18 { order:18; }

    &-sm-19 { width:79.16666667%; }
    &-sm-offset-19 { margin-left:79.16666667%; }
    &-sm-pull-19 { position:relative; right:79.16666667%; }
    &-sm-push-19 { position:relative; left:79.16666667%; }
    &-sm-order-19 { order:19; }

    &-sm-20 { width:83.33333333%; }
    &-sm-offset-20 { margin-left:83.33333333%; }
    &-sm-pull-20 { position:relative; right:83.33333333%; }
    &-sm-push-20 { position:relative; left:83.33333333%; }
    &-sm-order-20 { order:20; }

    &-sm-21 { width:87.5%; }
    &-sm-offset-21 { margin-left:87.5%; }
    &-sm-pull-21 { position:relative; right:87.5%; }
    &-sm-push-21 { position:relative; left:87.5%; }
    &-sm-order-21 { order:21; }

    &-sm-22 { width:91.66666667%; }
    &-sm-offset-22 { margin-left:91.66666667%; }
    &-sm-pull-22 { position:relative; right:91.66666667%; }
    &-sm-push-22 { position:relative; left:91.66666667%; }
    &-sm-order-22 { order:22; }

    &-sm-23 { width:95.83333333%; }
    &-sm-offset-23 { margin-left:95.83333333%; }
    &-sm-pull-23 { position:relative; right:95.83333333%; }
    &-sm-push-23 { position:relative; left:95.83333333%; }
    &-sm-order-23 { order:23; }

    &-sm-24 { width:100%; }
    &-sm-offset-24 { margin-left:100%; }
    &-sm-pull-24 { position:relative; right:100%; }
    &-sm-push-24 { position:relative; left:100%; }
    &-sm-order-24 { order:24; }
  }
}

@media only screen and (min-width:768px) {
  .@{vui-col} {
    &-md-0 { display:none; width:0; }
    &-md-offset-0 { margin-left:0; }
    &-md-pull-0 { position:relative; right:0; }
    &-md-push-0 { position:relative; left:0; }
    &-md-order-0 { order:0; }

    &-md-1 { width:4.16666667%; }
    &-md-offset-1 { margin-left:4.16666667%; }
    &-md-pull-1 { position:relative; right:4.16666667%; }
    &-md-push-1 { position:relative; left:4.16666667%; }
    &-md-order-1 { order:1; }

    &-md-2 { width:8.33333333%; }
    &-md-offset-2 { margin-left:8.33333333%; }
    &-md-pull-2 { position:relative; right:8.33333333%; }
    &-md-push-2 { position:relative; left:8.33333333%; }
    &-md-order-2 { order:2; }

    &-md-3 { width:12.5%; }
    &-md-offset-3 { margin-left:12.5%; }
    &-md-pull-3 { position:relative; right:12.5%; }
    &-md-push-3 { position:relative; left:12.5%; }
    &-md-order-3 { order:3; }

    &-md-4 { width:16.66666667%; }
    &-md-offset-4 { margin-left:16.66666667%; }
    &-md-pull-4 { position:relative; right:16.66666667%; }
    &-md-push-4 { position:relative; left:16.66666667%; }
    &-md-order-4 { order:4; }

    &-md-5 { width:20.83333333%; }
    &-md-offset-5 { margin-left:20.83333333%; }
    &-md-pull-5 { position:relative; right:20.83333333%; }
    &-md-push-5 { position:relative; left:20.83333333%; }
    &-md-order-5 { order:5; }

    &-md-6 { width:25%; }
    &-md-offset-6 { margin-left:25%; }
    &-md-pull-6 { position:relative; right:25%; }
    &-md-push-6 { position:relative; left:25%; }
    &-md-order-6 { order:6; }

    &-md-7 { width:29.16666667%; }
    &-md-offset-7 { margin-left:29.16666667%; }
    &-md-pull-7 { position:relative; right:29.16666667%; }
    &-md-push-7 { position:relative; left:29.16666667%; }
    &-md-order-7 { order:7; }

    &-md-8 { width:33.33333333%; }
    &-md-offset-8 { margin-left:33.33333333%; }
    &-md-pull-8 { position:relative; right:33.33333333%; }
    &-md-push-8 { position:relative; left:33.33333333%; }
    &-md-order-8 { order:8; }

    &-md-9 { width:37.5%; }
    &-md-offset-9 { margin-left:37.5%; }
    &-md-pull-9 { position:relative; right:37.5%; }
    &-md-push-9 { position:relative; left:37.5%; }
    &-md-order-9 { order:9; }

    &-md-10 { width:41.66666667%; }
    &-md-offset-10 { margin-left:41.66666667%; }
    &-md-pull-10 { position:relative; right:41.66666667%; }
    &-md-push-10 { position:relative; left:41.66666667%; }
    &-md-order-10 { order:10; }

    &-md-11 { width:45.83333333%; }
    &-md-offset-11 { margin-left:45.83333333%; }
    &-md-pull-11 { position:relative; right:45.83333333%; }
    &-md-push-11 { position:relative; left:45.83333333%; }
    &-md-order-11 { order:11; }

    &-md-12 { width:50%; }
    &-md-offset-12 { margin-left:50%; }
    &-md-pull-12 { position:relative; right:50%; }
    &-md-push-12 { position:relative; left:50%; }
    &-md-order-12 { order:12; }

    &-md-13 { width:54.16666667%; }
    &-md-offset-13 { margin-left:54.16666667%; }
    &-md-pull-13 { position:relative; right:54.16666667%; }
    &-md-push-13 { position:relative; left:54.16666667%; }
    &-md-order-13 { order:13; }

    &-md-14 { width:58.33333333%; }
    &-md-offset-14 { margin-left:58.33333333%; }
    &-md-pull-14 { position:relative; right:58.33333333%; }
    &-md-push-14 { position:relative; left:58.33333333%; }
    &-md-order-14 { order:14; }

    &-md-15 { width:62.5%; }
    &-md-offset-15 { margin-left:62.5%; }
    &-md-pull-15 { position:relative; right:62.5%; }
    &-md-push-15 { position:relative; left:62.5%; }
    &-md-order-15 { order:15; }

    &-md-16 { width:66.66666667%; }
    &-md-offset-16 { margin-left:66.66666667%; }
    &-md-pull-16 { position:relative; right:66.66666667%; }
    &-md-push-16 { position:relative; left:66.66666667%; }
    &-md-order-16 { order:16; }

    &-md-17 { width:70.83333333%; }
    &-md-offset-17 { margin-left:70.83333333%; }
    &-md-pull-17 { position:relative; right:70.83333333%; }
    &-md-push-17 { position:relative; left:70.83333333%; }
    &-md-order-17 { order:17; }

    &-md-18 { width:75%; }
    &-md-offset-18 { margin-left:75%; }
    &-md-pull-18 { position:relative; right:75%; }
    &-md-push-18 { position:relative; left:75%; }
    &-md-order-18 { order:18; }

    &-md-19 { width:79.16666667%; }
    &-md-offset-19 { margin-left:79.16666667%; }
    &-md-pull-19 { position:relative; right:79.16666667%; }
    &-md-push-19 { position:relative; left:79.16666667%; }
    &-md-order-19 { order:19; }

    &-md-20 { width:83.33333333%; }
    &-md-offset-20 { margin-left:83.33333333%; }
    &-md-pull-20 { position:relative; right:83.33333333%; }
    &-md-push-20 { position:relative; left:83.33333333%; }
    &-md-order-20 { order:20; }

    &-md-21 { width:87.5%; }
    &-md-offset-21 { margin-left:87.5%; }
    &-md-pull-21 { position:relative; right:87.5%; }
    &-md-push-21 { position:relative; left:87.5%; }
    &-md-order-21 { order:21; }

    &-md-22 { width:91.66666667%; }
    &-md-offset-22 { margin-left:91.66666667%; }
    &-md-pull-22 { position:relative; right:91.66666667%; }
    &-md-push-22 { position:relative; left:91.66666667%; }
    &-md-order-22 { order:22; }

    &-md-23 { width:95.83333333%; }
    &-md-offset-23 { margin-left:95.83333333%; }
    &-md-pull-23 { position:relative; right:95.83333333%; }
    &-md-push-23 { position:relative; left:95.83333333%; }
    &-md-order-23 { order:23; }

    &-md-24 { width:100%; }
    &-md-offset-24 { margin-left:100%; }
    &-md-pull-24 { position:relative; right:100%; }
    &-md-push-24 { position:relative; left:100%; }
    &-md-order-24 { order:24; }
  }
}

@media only screen and (min-width:992px) {
  .@{vui-col} {
    &-lg-0 { display:none; width:0; }
    &-lg-offset-0 { margin-left:0; }
    &-lg-pull-0 { position:relative; right:0; }
    &-lg-push-0 { position:relative; left:0; }
    &-lg-order-0 { order:0; }

    &-lg-1 { width:4.16666667%; }
    &-lg-offset-1 { margin-left:4.16666667%; }
    &-lg-pull-1 { position:relative; right:4.16666667%; }
    &-lg-push-1 { position:relative; left:4.16666667%; }
    &-lg-order-1 { order:1; }

    &-lg-2 { width:8.33333333%; }
    &-lg-offset-2 { margin-left:8.33333333%; }
    &-lg-pull-2 { position:relative; right:8.33333333%; }
    &-lg-push-2 { position:relative; left:8.33333333%; }
    &-lg-order-2 { order:2; }

    &-lg-3 { width:12.5%; }
    &-lg-offset-3 { margin-left:12.5%; }
    &-lg-pull-3 { position:relative; right:12.5%; }
    &-lg-push-3 { position:relative; left:12.5%; }
    &-lg-order-3 { order:3; }

    &-lg-4 { width:16.66666667%; }
    &-lg-offset-4 { margin-left:16.66666667%; }
    &-lg-pull-4 { position:relative; right:16.66666667%; }
    &-lg-push-4 { position:relative; left:16.66666667%; }
    &-lg-order-4 { order:4; }

    &-lg-5 { width:20.83333333%; }
    &-lg-offset-5 { margin-left:20.83333333%; }
    &-lg-pull-5 { position:relative; right:20.83333333%; }
    &-lg-push-5 { position:relative; left:20.83333333%; }
    &-lg-order-5 { order:5; }

    &-lg-6 { width:25%; }
    &-lg-offset-6 { margin-left:25%; }
    &-lg-pull-6 { position:relative; right:25%; }
    &-lg-push-6 { position:relative; left:25%; }
    &-lg-order-6 { order:6; }

    &-lg-7 { width:29.16666667%; }
    &-lg-offset-7 { margin-left:29.16666667%; }
    &-lg-pull-7 { position:relative; right:29.16666667%; }
    &-lg-push-7 { position:relative; left:29.16666667%; }
    &-lg-order-7 { order:7; }

    &-lg-8 { width:33.33333333%; }
    &-lg-offset-8 { margin-left:33.33333333%; }
    &-lg-pull-8 { position:relative; right:33.33333333%; }
    &-lg-push-8 { position:relative; left:33.33333333%; }
    &-lg-order-8 { order:8; }

    &-lg-9 { width:37.5%; }
    &-lg-offset-9 { margin-left:37.5%; }
    &-lg-pull-9 { position:relative; right:37.5%; }
    &-lg-push-9 { position:relative; left:37.5%; }
    &-lg-order-9 { order:9; }

    &-lg-10 { width:41.66666667%; }
    &-lg-offset-10 { margin-left:41.66666667%; }
    &-lg-pull-10 { position:relative; right:41.66666667%; }
    &-lg-push-10 { position:relative; left:41.66666667%; }
    &-lg-order-10 { order:10; }

    &-lg-11 { width:45.83333333%; }
    &-lg-offset-11 { margin-left:45.83333333%; }
    &-lg-pull-11 { position:relative; right:45.83333333%; }
    &-lg-push-11 { position:relative; left:45.83333333%; }
    &-lg-order-11 { order:11; }

    &-lg-12 { width:50%; }
    &-lg-offset-12 { margin-left:50%; }
    &-lg-pull-12 { position:relative; right:50%; }
    &-lg-push-12 { position:relative; left:50%; }
    &-lg-order-12 { order:12; }

    &-lg-13 { width:54.16666667%; }
    &-lg-offset-13 { margin-left:54.16666667%; }
    &-lg-pull-13 { position:relative; right:54.16666667%; }
    &-lg-push-13 { position:relative; left:54.16666667%; }
    &-lg-order-13 { order:13; }

    &-lg-14 { width:58.33333333%; }
    &-lg-offset-14 { margin-left:58.33333333%; }
    &-lg-pull-14 { position:relative; right:58.33333333%; }
    &-lg-push-14 { position:relative; left:58.33333333%; }
    &-lg-order-14 { order:14; }

    &-lg-15 { width:62.5%; }
    &-lg-offset-15 { margin-left:62.5%; }
    &-lg-pull-15 { position:relative; right:62.5%; }
    &-lg-push-15 { position:relative; left:62.5%; }
    &-lg-order-15 { order:15; }

    &-lg-16 { width:66.66666667%; }
    &-lg-offset-16 { margin-left:66.66666667%; }
    &-lg-pull-16 { position:relative; right:66.66666667%; }
    &-lg-push-16 { position:relative; left:66.66666667%; }
    &-lg-order-16 { order:16; }

    &-lg-17 { width:70.83333333%; }
    &-lg-offset-17 { margin-left:70.83333333%; }
    &-lg-pull-17 { position:relative; right:70.83333333%; }
    &-lg-push-17 { position:relative; left:70.83333333%; }
    &-lg-order-17 { order:17; }

    &-lg-18 { width:75%; }
    &-lg-offset-18 { margin-left:75%; }
    &-lg-pull-18 { position:relative; right:75%; }
    &-lg-push-18 { position:relative; left:75%; }
    &-lg-order-18 { order:18; }

    &-lg-19 { width:79.16666667%; }
    &-lg-offset-19 { margin-left:79.16666667%; }
    &-lg-pull-19 { position:relative; right:79.16666667%; }
    &-lg-push-19 { position:relative; left:79.16666667%; }
    &-lg-order-19 { order:19; }

    &-lg-20 { width:83.33333333%; }
    &-lg-offset-20 { margin-left:83.33333333%; }
    &-lg-pull-20 { position:relative; right:83.33333333%; }
    &-lg-push-20 { position:relative; left:83.33333333%; }
    &-lg-order-20 { order:20; }

    &-lg-21 { width:87.5%; }
    &-lg-offset-21 { margin-left:87.5%; }
    &-lg-pull-21 { position:relative; right:87.5%; }
    &-lg-push-21 { position:relative; left:87.5%; }
    &-lg-order-21 { order:21; }

    &-lg-22 { width:91.66666667%; }
    &-lg-offset-22 { margin-left:91.66666667%; }
    &-lg-pull-22 { position:relative; right:91.66666667%; }
    &-lg-push-22 { position:relative; left:91.66666667%; }
    &-lg-order-22 { order:22; }

    &-lg-23 { width:95.83333333%; }
    &-lg-offset-23 { margin-left:95.83333333%; }
    &-lg-pull-23 { position:relative; right:95.83333333%; }
    &-lg-push-23 { position:relative; left:95.83333333%; }
    &-lg-order-23 { order:23; }

    &-lg-24 { width:100%; }
    &-lg-offset-24 { margin-left:100%; }
    &-lg-pull-24 { position:relative; right:100%; }
    &-lg-push-24 { position:relative; left:100%; }
    &-lg-order-24 { order:24; }
  }
}

@media only screen and (min-width:1200px) {
  .@{vui-col} {
    &-xl-0 { display:none; width:0; }
    &-xl-offset-0 { margin-left:0; }
    &-xl-pull-0 { position:relative; right:0; }
    &-xl-push-0 { position:relative; left:0; }
    &-xl-order-0 { order:0; }

    &-xl-1 { width:4.16666667%; }
    &-xl-offset-1 { margin-left:4.16666667%; }
    &-xl-pull-1 { position:relative; right:4.16666667%; }
    &-xl-push-1 { position:relative; left:4.16666667%; }
    &-xl-order-1 { order:1; }

    &-xl-2 { width:8.33333333%; }
    &-xl-offset-2 { margin-left:8.33333333%; }
    &-xl-pull-2 { position:relative; right:8.33333333%; }
    &-xl-push-2 { position:relative; left:8.33333333%; }
    &-xl-order-2 { order:2; }

    &-xl-3 { width:12.5%; }
    &-xl-offset-3 { margin-left:12.5%; }
    &-xl-pull-3 { position:relative; right:12.5%; }
    &-xl-push-3 { position:relative; left:12.5%; }
    &-xl-order-3 { order:3; }

    &-xl-4 { width:16.66666667%; }
    &-xl-offset-4 { margin-left:16.66666667%; }
    &-xl-pull-4 { position:relative; right:16.66666667%; }
    &-xl-push-4 { position:relative; left:16.66666667%; }
    &-xl-order-4 { order:4; }

    &-xl-5 { width:20.83333333%; }
    &-xl-offset-5 { margin-left:20.83333333%; }
    &-xl-pull-5 { position:relative; right:20.83333333%; }
    &-xl-push-5 { position:relative; left:20.83333333%; }
    &-xl-order-5 { order:5; }

    &-xl-6 { width:25%; }
    &-xl-offset-6 { margin-left:25%; }
    &-xl-pull-6 { position:relative; right:25%; }
    &-xl-push-6 { position:relative; left:25%; }
    &-xl-order-6 { order:6; }

    &-xl-7 { width:29.16666667%; }
    &-xl-offset-7 { margin-left:29.16666667%; }
    &-xl-pull-7 { position:relative; right:29.16666667%; }
    &-xl-push-7 { position:relative; left:29.16666667%; }
    &-xl-order-7 { order:7; }

    &-xl-8 { width:33.33333333%; }
    &-xl-offset-8 { margin-left:33.33333333%; }
    &-xl-pull-8 { position:relative; right:33.33333333%; }
    &-xl-push-8 { position:relative; left:33.33333333%; }
    &-xl-order-8 { order:8; }

    &-xl-9 { width:37.5%; }
    &-xl-offset-9 { margin-left:37.5%; }
    &-xl-pull-9 { position:relative; right:37.5%; }
    &-xl-push-9 { position:relative; left:37.5%; }
    &-xl-order-9 { order:9; }

    &-xl-10 { width:41.66666667%; }
    &-xl-offset-10 { margin-left:41.66666667%; }
    &-xl-pull-10 { position:relative; right:41.66666667%; }
    &-xl-push-10 { position:relative; left:41.66666667%; }
    &-xl-order-10 { order:10; }

    &-xl-11 { width:45.83333333%; }
    &-xl-offset-11 { margin-left:45.83333333%; }
    &-xl-pull-11 { position:relative; right:45.83333333%; }
    &-xl-push-11 { position:relative; left:45.83333333%; }
    &-xl-order-11 { order:11; }

    &-xl-12 { width:50%; }
    &-xl-offset-12 { margin-left:50%; }
    &-xl-pull-12 { position:relative; right:50%; }
    &-xl-push-12 { position:relative; left:50%; }
    &-xl-order-12 { order:12; }

    &-xl-13 { width:54.16666667%; }
    &-xl-offset-13 { margin-left:54.16666667%; }
    &-xl-pull-13 { position:relative; right:54.16666667%; }
    &-xl-push-13 { position:relative; left:54.16666667%; }
    &-xl-order-13 { order:13; }

    &-xl-14 { width:58.33333333%; }
    &-xl-offset-14 { margin-left:58.33333333%; }
    &-xl-pull-14 { position:relative; right:58.33333333%; }
    &-xl-push-14 { position:relative; left:58.33333333%; }
    &-xl-order-14 { order:14; }

    &-xl-15 { width:62.5%; }
    &-xl-offset-15 { margin-left:62.5%; }
    &-xl-pull-15 { position:relative; right:62.5%; }
    &-xl-push-15 { position:relative; left:62.5%; }
    &-xl-order-15 { order:15; }

    &-xl-16 { width:66.66666667%; }
    &-xl-offset-16 { margin-left:66.66666667%; }
    &-xl-pull-16 { position:relative; right:66.66666667%; }
    &-xl-push-16 { position:relative; left:66.66666667%; }
    &-xl-order-16 { order:16; }

    &-xl-17 { width:70.83333333%; }
    &-xl-offset-17 { margin-left:70.83333333%; }
    &-xl-pull-17 { position:relative; right:70.83333333%; }
    &-xl-push-17 { position:relative; left:70.83333333%; }
    &-xl-order-17 { order:17; }

    &-xl-18 { width:75%; }
    &-xl-offset-18 { margin-left:75%; }
    &-xl-pull-18 { position:relative; right:75%; }
    &-xl-push-18 { position:relative; left:75%; }
    &-xl-order-18 { order:18; }

    &-xl-19 { width:79.16666667%; }
    &-xl-offset-19 { margin-left:79.16666667%; }
    &-xl-pull-19 { position:relative; right:79.16666667%; }
    &-xl-push-19 { position:relative; left:79.16666667%; }
    &-xl-order-19 { order:19; }

    &-xl-20 { width:83.33333333%; }
    &-xl-offset-20 { margin-left:83.33333333%; }
    &-xl-pull-20 { position:relative; right:83.33333333%; }
    &-xl-push-20 { position:relative; left:83.33333333%; }
    &-xl-order-20 { order:20; }

    &-xl-21 { width:87.5%; }
    &-xl-offset-21 { margin-left:87.5%; }
    &-xl-pull-21 { position:relative; right:87.5%; }
    &-xl-push-21 { position:relative; left:87.5%; }
    &-xl-order-21 { order:21; }

    &-xl-22 { width:91.66666667%; }
    &-xl-offset-22 { margin-left:91.66666667%; }
    &-xl-pull-22 { position:relative; right:91.66666667%; }
    &-xl-push-22 { position:relative; left:91.66666667%; }
    &-xl-order-22 { order:22; }

    &-xl-23 { width:95.83333333%; }
    &-xl-offset-23 { margin-left:95.83333333%; }
    &-xl-pull-23 { position:relative; right:95.83333333%; }
    &-xl-push-23 { position:relative; left:95.83333333%; }
    &-xl-order-23 { order:23; }

    &-xl-24 { width:100%; }
    &-xl-offset-24 { margin-left:100%; }
    &-xl-pull-24 { position:relative; right:100%; }
    &-xl-push-24 { position:relative; left:100%; }
    &-xl-order-24 { order:24; }
  }
}

@media only screen and (min-width:1600px) {
  .@{vui-col} {
    &-xxl-0 { display:none; width:0; }
    &-xxl-offset-0 { margin-left:0; }
    &-xxl-pull-0 { position:relative; right:0; }
    &-xxl-push-0 { position:relative; left:0; }
    &-xxl-order-0 { order:0; }

    &-xxl-1 { width:4.16666667%; }
    &-xxl-offset-1 { margin-left:4.16666667%; }
    &-xxl-pull-1 { position:relative; right:4.16666667%; }
    &-xxl-push-1 { position:relative; left:4.16666667%; }
    &-xxl-order-1 { order:1; }

    &-xxl-2 { width:8.33333333%; }
    &-xxl-offset-2 { margin-left:8.33333333%; }
    &-xxl-pull-2 { position:relative; right:8.33333333%; }
    &-xxl-push-2 { position:relative; left:8.33333333%; }
    &-xxl-order-2 { order:2; }

    &-xxl-3 { width:12.5%; }
    &-xxl-offset-3 { margin-left:12.5%; }
    &-xxl-pull-3 { position:relative; right:12.5%; }
    &-xxl-push-3 { position:relative; left:12.5%; }
    &-xxl-order-3 { order:3; }

    &-xxl-4 { width:16.66666667%; }
    &-xxl-offset-4 { margin-left:16.66666667%; }
    &-xxl-pull-4 { position:relative; right:16.66666667%; }
    &-xxl-push-4 { position:relative; left:16.66666667%; }
    &-xxl-order-4 { order:4; }

    &-xxl-5 { width:20.83333333%; }
    &-xxl-offset-5 { margin-left:20.83333333%; }
    &-xxl-pull-5 { position:relative; right:20.83333333%; }
    &-xxl-push-5 { position:relative; left:20.83333333%; }
    &-xxl-order-5 { order:5; }

    &-xxl-6 { width:25%; }
    &-xxl-offset-6 { margin-left:25%; }
    &-xxl-pull-6 { position:relative; right:25%; }
    &-xxl-push-6 { position:relative; left:25%; }
    &-xxl-order-6 { order:6; }

    &-xxl-7 { width:29.16666667%; }
    &-xxl-offset-7 { margin-left:29.16666667%; }
    &-xxl-pull-7 { position:relative; right:29.16666667%; }
    &-xxl-push-7 { position:relative; left:29.16666667%; }
    &-xxl-order-7 { order:7; }

    &-xxl-8 { width:33.33333333%; }
    &-xxl-offset-8 { margin-left:33.33333333%; }
    &-xxl-pull-8 { position:relative; right:33.33333333%; }
    &-xxl-push-8 { position:relative; left:33.33333333%; }
    &-xxl-order-8 { order:8; }

    &-xxl-9 { width:37.5%; }
    &-xxl-offset-9 { margin-left:37.5%; }
    &-xxl-pull-9 { position:relative; right:37.5%; }
    &-xxl-push-9 { position:relative; left:37.5%; }
    &-xxl-order-9 { order:9; }

    &-xxl-10 { width:41.66666667%; }
    &-xxl-offset-10 { margin-left:41.66666667%; }
    &-xxl-pull-10 { position:relative; right:41.66666667%; }
    &-xxl-push-10 { position:relative; left:41.66666667%; }
    &-xxl-order-10 { order:10; }

    &-xxl-11 { width:45.83333333%; }
    &-xxl-offset-11 { margin-left:45.83333333%; }
    &-xxl-pull-11 { position:relative; right:45.83333333%; }
    &-xxl-push-11 { position:relative; left:45.83333333%; }
    &-xxl-order-11 { order:11; }

    &-xxl-12 { width:50%; }
    &-xxl-offset-12 { margin-left:50%; }
    &-xxl-pull-12 { position:relative; right:50%; }
    &-xxl-push-12 { position:relative; left:50%; }
    &-xxl-order-12 { order:12; }

    &-xxl-13 { width:54.16666667%; }
    &-xxl-offset-13 { margin-left:54.16666667%; }
    &-xxl-pull-13 { position:relative; right:54.16666667%; }
    &-xxl-push-13 { position:relative; left:54.16666667%; }
    &-xxl-order-13 { order:13; }

    &-xxl-14 { width:58.33333333%; }
    &-xxl-offset-14 { margin-left:58.33333333%; }
    &-xxl-pull-14 { position:relative; right:58.33333333%; }
    &-xxl-push-14 { position:relative; left:58.33333333%; }
    &-xxl-order-14 { order:14; }

    &-xxl-15 { width:62.5%; }
    &-xxl-offset-15 { margin-left:62.5%; }
    &-xxl-pull-15 { position:relative; right:62.5%; }
    &-xxl-push-15 { position:relative; left:62.5%; }
    &-xxl-order-15 { order:15; }

    &-xxl-16 { width:66.66666667%; }
    &-xxl-offset-16 { margin-left:66.66666667%; }
    &-xxl-pull-16 { position:relative; right:66.66666667%; }
    &-xxl-push-16 { position:relative; left:66.66666667%; }
    &-xxl-order-16 { order:16; }

    &-xxl-17 { width:70.83333333%; }
    &-xxl-offset-17 { margin-left:70.83333333%; }
    &-xxl-pull-17 { position:relative; right:70.83333333%; }
    &-xxl-push-17 { position:relative; left:70.83333333%; }
    &-xxl-order-17 { order:17; }

    &-xxl-18 { width:75%; }
    &-xxl-offset-18 { margin-left:75%; }
    &-xxl-pull-18 { position:relative; right:75%; }
    &-xxl-push-18 { position:relative; left:75%; }
    &-xxl-order-18 { order:18; }

    &-xxl-19 { width:79.16666667%; }
    &-xxl-offset-19 { margin-left:79.16666667%; }
    &-xxl-pull-19 { position:relative; right:79.16666667%; }
    &-xxl-push-19 { position:relative; left:79.16666667%; }
    &-xxl-order-19 { order:19; }

    &-xxl-20 { width:83.33333333%; }
    &-xxl-offset-20 { margin-left:83.33333333%; }
    &-xxl-pull-20 { position:relative; right:83.33333333%; }
    &-xxl-push-20 { position:relative; left:83.33333333%; }
    &-xxl-order-20 { order:20; }

    &-xxl-21 { width:87.5%; }
    &-xxl-offset-21 { margin-left:87.5%; }
    &-xxl-pull-21 { position:relative; right:87.5%; }
    &-xxl-push-21 { position:relative; left:87.5%; }
    &-xxl-order-21 { order:21; }

    &-xxl-22 { width:91.66666667%; }
    &-xxl-offset-22 { margin-left:91.66666667%; }
    &-xxl-pull-22 { position:relative; right:91.66666667%; }
    &-xxl-push-22 { position:relative; left:91.66666667%; }
    &-xxl-order-22 { order:22; }

    &-xxl-23 { width:95.83333333%; }
    &-xxl-offset-23 { margin-left:95.83333333%; }
    &-xxl-pull-23 { position:relative; right:95.83333333%; }
    &-xxl-push-23 { position:relative; left:95.83333333%; }
    &-xxl-order-23 { order:23; }

    &-xxl-24 { width:100%; }
    &-xxl-offset-24 { margin-left:100%; }
    &-xxl-pull-24 { position:relative; right:100%; }
    &-xxl-push-24 { position:relative; left:100%; }
    &-xxl-order-24 { order:24; }
  }
}