.wolfo-col {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@for $i from 1 through 10 {
    .wolfo-all-#{$i * 10} {
        -webkit-box-flex: 0;
        max-width: #{$i * 10%};
        flex: 0 0 #{$i * 10%};
    }
}

@media screen and (min-width: 576px) {
    @for $i from 1 through 10 {
        .wolfo-small-#{$i * 10} {
            -webkit-box-flex: 0;
            max-width: #{$i * 10%};
            flex: 0 0 #{$i * 10%};
        }
    }
}

@media screen and (min-width: 768px) {
    @for $i from 1 through 10 {
        .wolfo-medium-#{$i * 10} {
            -webkit-box-flex: 0;
            max-width: #{$i * 10%};
            flex: 0 0 #{$i * 10%};
        }
    }
}

@media screen and (min-width: 992px) {
    @for $i from 1 through 10 {
        .wolfo-large-#{$i * 10} {
            -webkit-box-flex: 0;
            max-width: #{$i * 10%};
            flex: 0 0 #{$i * 10%};
        }
    }
}

@media screen and (min-width: 1200px) {
    @for $i from 1 through 10 {
        .wolfo-xlarge-#{$i * 10} {
            -webkit-box-flex: 0;
            max-width: #{$i * 10%};
            flex: 0 0 #{$i * 10%};
        }
    }
}

@media (max-width: $screen-xl) {
    .bigger-15 {
        .row {
            margin-left: -15px !important;
            margin-right: -15px !important;
        }

        .column {
            padding-left: 15px !important;
            padding-right: 15px !important;
        }
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .cols-md-5 {
        @include flex(20%);
    }
    .cols-md-8 {
        @include flex(12.5%);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .cols-lg-5 {
        @include flex(20%);
    }
    .cols-lg-8 {
        @include flex(12.5%);
    }
}

@media (min-width: 1200px) {
    .cols-xl-5 {
        @include flex(20%);
    }
    .cols-xl-7 {
        @include flex(14.28571%);
    }
    .cols-xl-8 {
        @include flex(12.5%);
    }
    .cols-xl-9 {
        @include flex(11.11111%);
    }
    .cols-xl-10 {
        @include flex(10%);
    }
}

@media (min-width: 768px) {
    .mgr-md-1 {
        margin-right: 8.33333%;
    }
    .mga-md {
        margin-left: auto;
        margin-right: auto;
    }
}