.container {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.row {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
}

[class*='col-'] {
    clear: right;
    float: left;
    overflow: hidden;
}

.float-right [class*='col-'] {
    clear: left;
    float: right;
}

.gutters [class*='col-'] {
    margin-left: 2%;
}

.gutters [class*='col-']:first-child {
    margin-left: 0;
}

/* ===================================
        1
=================================== */

.col-1 {
    width: calc(100% / 12 * 1);
}

.gutters .col-1 {
    width: calc(98% / 12 * 1);
}

[class*='col-'].push-1 {
    margin-left: calc(100% / 12 * 1);
}

[class*='col-'].break-1 {
    margin-left: calc(100% / 12 * -1);
}

.hi-1 {
    height: calc(100vh / 12 * 1);
}

[class*='hi-'].break-1 {
    margin-top: calc(100vh / 12 * -1);
}

/* ===================================
        2
=================================== */

.col-2 {
    width: calc(100% / 12 * 2);
}

.gutters .col-2 {
    width: calc(98% / 12 * 2);
}

[class*='col-'].push-2 {
    margin-left: calc(100% / 12 * 2);
}

[class*='col-'].break-2 {
    margin-left: calc(100% / 12 * -2);
}

.hi-2 {
    height: calc(100vh / 12 * 2);
}

[class*='hi-'].break-2 {
    margin-top: calc(100vh / 12 * -2);
}

/* ===================================
        3
=================================== */

.col-3 {
    width: calc(100% / 12 * 3);
}

.gutters .col-3 {
    width: calc(98% / 12 * 3);
}

[class*='col-'].push-3 {
    margin-left: calc(100% / 12 * 3);
}

[class*='col-'].break-3 {
    margin-left: calc(100% / 12 * -3);
}

.hi-3 {
    height: calc(100vh / 12 * 3);
}

[class*='hi-'].break-3 {
    margin-top: calc(100vh / 12 * -3);
}

/* ===================================
        4
=================================== */

.col-4 {
    width: calc(100% / 12 * 4);
}

.gutters .col-4 {
    width: calc(98% / 12 * 4);
}

[class*='col-'].push-4 {
    margin-left: calc(100% / 12 * 4);
}

[class*='col-'].break-4 {
    margin-left: calc(100% / 12 * -4);
}

.hi-4 {
    height: calc(100vh / 12 * 4);
}

[class*='hi-'].break-4 {
    margin-top: calc(100vh / 12 * -4);
}

/* ===================================
        5
=================================== */

.col-5 {
    width: calc(100% / 12 * 5);
}

.gutters .col-5 {
    width: calc(98% / 12 * 5);
}

[class*='col-'].push-5 {
    margin-left: calc(100% / 12 * 5);
}

[class*='col-'].break-5 {
    margin-left: calc(100% / 12 * -5);
}

.hi-5 {
    height: calc(100vh / 12 * 5);
}

[class*='hi-'].break-5 {
    margin-top: calc(100vh / 12 * -5);
}

/* ===================================
        6
=================================== */

.col-6 {
    width: calc(100% / 12 * 6);
}

.gutters .col-6 {
    width: calc(98% / 12 * 6);
}

[class*='col-'].push-6 {
    margin-left: calc(100% / 12 * 6);
}

[class*='col-'].break-6 {
    margin-left: calc(100% / 12 * -6);
}

.hi-6 {
    height: calc(100vh / 12 * 6);
}

[class*='hi-'].break-6 {
    margin-top: calc(100vh / 12 * -6);
}

/* ===================================
        7
=================================== */

.col-7 {
    width: calc(100% / 12 * 7);
}

.gutters .col-7 {
    width: calc(98% / 12 * 7);
}

[class*='col-'].push-7 {
    margin-left: calc(100% / 12 * 7);
}

[class*='col-'].break-7 {
    margin-left: calc(100% / 12 * -7);
}

.hi-7 {
    height: calc(100vh / 12 * 7);
}

[class*='hi-'].break-7 {
    margin-top: calc(100vh / 12 * -7);
}

/* ===================================
        8
=================================== */

.col-8 {
    width: calc(100% / 12 * 8);
}

.gutters .col-8 {
    width: calc(98% / 12 * 8);
}

[class*='col-'].push-8 {
    margin-left: calc(100% / 12 * 8);
}

[class*='col-'].break-8 {
    margin-left: calc(100% / 12 * -8);
}

.hi-8 {
    height: calc(100vh / 12 * 8);
}

[class*='hi-'].break-8 {
    margin-top: calc(100vh / 12 * -8);
}

/* ===================================
        9
=================================== */

.col-9 {
    width: calc(100% / 12 * 9);
}

.gutters .col-9 {
    width: calc(98% / 12 * 9);
}

[class*='col-'].push-9 {
    margin-left: calc(100% / 12 * 9);
}

[class*='col-'].break-9 {
    margin-left: calc(100% / 12 * -9);
}

.hi-9 {
    height: calc(100vh / 12 * 9);
}

[class*='hi-'].break-9 {
    margin-top: calc(100vh / 12 * -9);
}

/* ===================================
        10
=================================== */

.col-10 {
    width: calc(100% / 12 * 10);
}

.gutters .col-10 {
    width: calc(98% / 12 * 10);
}

[class*='col-'].push-10 {
    margin-left: calc(100% / 12 * 10);
}

[class*='col-'].break-10 {
    margin-left: calc(100% / 12 * -10);
}

.hi-10 {
    height: calc(100vh / 12 * 10);
}

[class*='hi-'].break-10 {
    margin-top: calc(100vh / 12 * -10);
}

/* ===================================
        11
=================================== */

.col-11 {
    width: calc(100% / 12 * 11);
}

.gutters .col-11 {
  width: calc(98% / 12 * 11);
}

[class*='col-'].push-11 {
    margin-left: calc(100% / 12 * 11);
}

[class*='col-'].break-11 {
    margin-left: calc(100% / 12 * -11);
}

.hi-11 {
    height: calc(100vh / 12 * 11);
}

[class*='hi-'].break-11 {
    margin-top: calc(100vh / 12 * -11);
}

/* ===================================
        12
=================================== */

.col-12,
.gutters .col-12 {
    width: calc(100% / 12 * 12);
}

[class*='col-'].push-12 {
    margin-left: calc(100% / 12 * 12);
}

[class*='col-'].break-12 {
    margin-left: calc(100% / 12 * -12);
}

.hi-12 {
    height: calc(100vh / 12 * 12);
}

[class*='hi-'].break-12 {
    margin-top: calc(100vh / 12 * -12);
}