.grid-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

[class*="col-"] {
    position: relative;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

[class*="col-xs-"],
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"] {
    flex: 0 0 auto;
}

.col-xs-1-com {
    width: 8.3333%;
}

.col-xs-2-com {
    width: 16.6667%;
}

.col-xs-3-com {
    width: 25%;
}

.col-xs-4-com {
    width: 33.3333%;
}

.col-xs-5-com {
    width: 41.6667%;
}

.col-xs-6-com {
    width: 50%;
}

.col-xs-7-com {
    width: 58.3333%;
}

.col-xs-8-com {
    width: 66.6667%;
}

.col-xs-9-com {
    width: 75%;
}

.col-xs-10-com {
    width: 83.3333%;
}

.col-xs-11-com {
    width: 91.6667%;
}

.col-xs-12-com {
    width: 100%;
}

@media (min-width: 768px) {
    .col-sm-1-com {
        width: 8.3333%;
    }

    .col-sm-2-com {
        width: 16.6667%;
    }

    .col-sm-3-com {
        width: 25%;
    }

    .col-sm-4-com {
        width: 33.3333%;
    }

    .col-sm-5-com {
        width: 41.6667%;
    }

    .col-sm-6-com {
        width: 50%;
    }

    .col-sm-7-com {
        width: 58.3333%;
    }

    .col-sm-8-com {
        width: 66.6667%;
    }

    .col-sm-9-com {
        width: 75%;
    }

    .col-sm-10-com {
        width: 83.3333%;
    }

    .col-sm-11-com {
        width: 91.6667%;
    }

    .col-sm-12-com {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .col-md-1-com {
        width: 8.3333%;
    }

    .col-md-2-com {
        width: 16.6667%;
    }

    .col-md-3-com {
        width: 25%;
    }

    .col-md-4-com {
        width: 33.3333%;
    }

    .col-md-5-com {
        width: 41.6667%;
    }

    .col-md-6-com {
        width: 50%;
    }

    .col-md-7-com {
        width: 58.3333%;
    }

    .col-md-8-com {
        width: 66.6667%;
    }

    .col-md-9-com {
        width: 75%;
    }

    .col-md-10-com {
        width: 83.3333%;
    }

    .col-md-11-com {
        width: 91.6667%;
    }

    .col-md-12-com {
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .col-lg-1-com {
        width: 8.3333%;
    }

    .col-lg-2-com {
        width: 16.6667%;
    }

    .col-lg-3-com {
        width: 25%;
    }

    .col-lg-4-com {
        width: 33.3333%;
    }

    .col-lg-5-com {
        width: 41.6667%;
    }

    .col-lg-6-com {
        width: 50%;
    }

    .col-lg-7-com {
        width: 58.3333%;
    }

    .col-lg-8-com {
        width: 66.6667%;
    }

    .col-lg-9-com {
        width: 75%;
    }

    .col-lg-10-com {
        width: 83.3333%;
    }

    .col-lg-11-com {
        width: 91.6667%;
    }

    .col-lg-12-com {
        width: 100%;
    }
}

[class*="col-xs-push-"],
[class*="col-sm-push-"],
[class*="col-md-push-"],
[class*="col-lg-push-"] {
    margin-left: auto;
}

.col-xs-push-0-com {
    margin-left: 0;
}

.col-xs-push-1-com {
    margin-left: 8.3333%;
}

.col-xs-push-2-com {
    margin-left: 16.6667%;
}

.col-xs-push-3-com {
    margin-left: 25%;
}

.col-xs-push-4-com {
    margin-left: 33.3333%;
}

.col-xs-push-5-com {
    margin-left: 41.6667%;
}

.col-xs-push-6-com {
    margin-left: 50%;
}

.col-xs-push-7-com {
    margin-left: 58.3333%;
}

.col-xs-push-8-com {
    margin-left: 66.6667%;
}

.col-xs-push-9-com {
    margin-left: 75%;
}

.col-xs-push-10-com {
    margin-left: 83.3333%;
}

.col-xs-push-11-com {
    margin-left: 91.6667%;
}

.col-xs-push-12-com {
    margin-left: 100%;
}

[class*="col-xs-pull-"],
[class*="col-sm-pull-"],
[class*="col-md-pull-"],
[class*="col-lg-pull-"] {
    margin-right: auto;
}

.col-xs-pull-0-com {
    margin-right: 0;
}

.col-xs-pull-1-com {
    margin-right: 8.3333%;
}

.col-xs-pull-2-com {
    margin-right: 16.6667%;
}

.col-xs-pull-3-com {
    margin-right: 25%;
}

.col-xs-pull-4-com {
    margin-right: 33.3333%;
}

.col-xs-pull-5-com {
    margin-right: 41.6667%;
}

.col-xs-pull-6-com {
    margin-right: 50%;
}

.col-xs-pull-7-com {
    margin-right: 58.3333%;
}

.col-xs-pull-8-com {
    margin-right: 66.6667%;
}

.col-xs-pull-9-com {
    margin-right: 75%;
}

.col-xs-pull-10-com {
    margin-right: 83.3333%;
}

.col-xs-pull-11-com {
    margin-right: 91.6667%;
}

.col-xs-pull-12-com {
    margin-right: 100%;
}

[class*="col-xs-offset-"],
[class*="col-sm-offset-"],
[class*="col-md-offset-"],
[class*="col-lg-offset-"] {
    margin: auto;
}

.col-xs-offset-0-com {
    margin-left: 0;
}

.col-xs-offset-1-com {
    margin-left: 8.3333%;
}

.col-xs-offset-2-com {
    margin-left: 16.6667%;
}

.col-xs-offset-3-com {
    margin-left: 25%;
}

.col-xs-offset-4-com {
    margin-left: 33.3333%;
}

.col-xs-offset-5-com {
    margin-left: 41.6667%;
}

.col-xs-offset-6-com {
    margin-left: 50%;
}

.col-xs-offset-7-com {
    margin-left: 58.3333%;
}

.col-xs-offset-8-com {
    margin-left: 66.6667%;
}

.col-xs-offset-9-com {
    margin-left: 75%;
}

.col-xs-offset-10-com {
    margin-left: 83.3333%;
}

.col-xs-offset-11-com {
    margin-left: 91.6667%;
}

.col-xs-offset-12-com {
    margin-left: 100%;
}


@media (min-width: 992px) {
    .grid-row {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .col-md-3-com {
        flex: 1 1 22%;
        max-width: 22%;
        box-sizing: border-box;
    }
}