:root {
    --col-1: 8.333333%;
    --col-2: 16.666667%;
    --col-3: 25%;
    --col-4: 33.333333%;
    --col-5: 41.666667%;
    --col-6: 50%;
    --col-7: 58.333333%;
    --col-8: 66.666667%;
    --col-9: 75%;
    --col-10: 83.333333%;
    --col-11: 91.666667%;
    --col-12: 100%;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.col, .col-sm, .col-md, .col-lg, .col-xl,
.col-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1,
.col-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xl-2,
.col-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3,
.col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4,
.col-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xl-5,
.col-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6,
.col-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xl-7,
.col-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8,
.col-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xl-9,
.col-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xl-10,
.col-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xl-11,
.col-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12,
.col-auto, .col-sm-auto, .col-md-auto, .col-lg-auto, .col-xl-auto {
    position: relative;
    width: 100%;
    padding: 15px;
}

.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

.col-1 {
    flex: 0 0 var(--col-1);
    max-width: var(--col-1);
}

.col-2 {
    flex: 0 0 var(--col-2);
    max-width: var(--col-2);
}

.col-3 {
    flex: 0 0 var(--col-3);
    max-width: var(--col-3);
}

.col-4 {
    flex: 0 0 var(--col-4);
    max-width: var(--col-4);
}

.col-5 {
    flex: 0 0 var(--col-5);
    max-width: var(--col-5);
}

.col-6 {
    flex: 0 0 var(--col-6);
    max-width: var(--col-6);
}

.col-7 {
    flex: 0 0 var(--col-7);
    max-width: var(--col-7);
}

.col-8 {
    flex: 0 0 var(--col-8);
    max-width: var(--col-8);
}

.col-9 {
    flex: 0 0 var(--col-9);
    max-width: var(--col-9);
}

.col-10 {
    flex: 0 0 var(--col-10);
    max-width: var(--col-10);
}

.col-11 {
    flex: 0 0 var(--col-11);
    max-width: var(--col-11);
}

.col-12 {
    flex: 0 0 var(--col-12);
    max-width: var(--col-12);
}

.flex-fill {
    flex: 1 1 auto;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-center {
    justify-content: center;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-center {
    align-items: center;
}

.align-content-start {
    align-content: flex-start;
}

.align-content-end {
    align-content: flex-end;
}

.align-content-center {
    align-content: center;
}

.align-self-start {
    align-self: flex-start;
}

.align-self-end {
    align-self: flex-end;
}

.align-self-center {
    align-self: center;
}

@media (min-width: 576px) {

    .container {
        max-width: 540px;
    }

    .col-sm {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .col-sm-1 {
        flex: 0 0 var(--col-1);
        max-width: var(--col-1);
    }

    .col-sm-2 {
        flex: 0 0 var(--col-2);
        max-width: var(--col-2);
    }

    .col-sm-3 {
        flex: 0 0 var(--col-3);
        max-width: var(--col-3);
    }

    .col-sm-4 {
        flex: 0 0 var(--col-4);
        max-width: var(--col-4);
    }

    .col-sm-5 {
        flex: 0 0 var(--col-5);
        max-width: var(--col-5);
    }

    .col-sm-6 {
        flex: 0 0 var(--col-6);
        max-width: var(--col-6);
    }

    .col-sm-7 {
        flex: 0 0 var(--col-7);
        max-width: var(--col-7);
    }

    .col-sm-8 {
        flex: 0 0 var(--col-8);
        max-width: var(--col-8);
    }

    .col-sm-9 {
        flex: 0 0 var(--col-9);
        max-width: var(--col-9);
    }

    .col-sm-10 {
        flex: 0 0 var(--col-10);
        max-width: var(--col-10);
    }

    .col-sm-11 {
        flex: 0 0 var(--col-11);
        max-width: var(--col-11);
    }

    .col-sm-12 {
        flex: 0 0 var(--col-12);
        max-width: var(--col-12);
    }

}

@media (min-width: 768px) {

    .container {
        max-width: 720px;
    }

    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .col-md {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-md-1 {
        flex: 0 0 var(--col-1);
        max-width: var(--col-1);
    }

    .col-md-2 {
        flex: 0 0 var(--col-2);
        max-width: var(--col-2);
    }

    .col-md-3 {
        flex: 0 0 var(--col-3);
        max-width: var(--col-3);
    }

    .col-md-4 {
        flex: 0 0 var(--col-4);
        max-width: var(--col-4);
    }

    .col-md-5 {
        flex: 0 0 var(--col-5);
        max-width: var(--col-5);
    }

    .col-md-6 {
        flex: 0 0 var(--col-6);
        max-width: var(--col-6);
    }

    .col-md-7 {
        flex: 0 0 var(--col-7);
        max-width: var(--col-7);
    }

    .col-md-8 {
        flex: 0 0 var(--col-8);
        max-width: var(--col-8);
    }

    .col-md-9 {
        flex: 0 0 var(--col-9);
        max-width: var(--col-9);
    }

    .col-md-10 {
        flex: 0 0 var(--col-10);
        max-width: var(--col-10);
    }

    .col-md-11 {
        flex: 0 0 var(--col-11);
        max-width: var(--col-11);
    }

    .col-md-12 {
        flex: 0 0 var(--col-12);
        max-width: var(--col-12);
    }

}

@media (min-width: 992px) {

    .container {
        max-width: 960px;
    }

    .col-lg {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .col-lg-1 {
        flex: 0 0 var(--col-1);
        max-width: var(--col-1);
    }

    .col-lg-2 {
        flex: 0 0 var(--col-2);
        max-width: var(--col-2);
    }

    .col-lg-3 {
        flex: 0 0 var(--col-3);
        max-width: var(--col-3);
    }

    .col-lg-4 {
        flex: 0 0 var(--col-4);
        max-width: var(--col-4);
    }

    .col-lg-5 {
        flex: 0 0 var(--col-5);
        max-width: var(--col-5);
    }

    .col-lg-6 {
        flex: 0 0 var(--col-6);
        max-width: var(--col-6);
    }

    .col-lg-7 {
        flex: 0 0 var(--col-7);
        max-width: var(--col-7);
    }

    .col-lg-8 {
        flex: 0 0 var(--col-8);
        max-width: var(--col-8);
    }

    .col-lg-9 {
        flex: 0 0 var(--col-9);
        max-width: var(--col-9);
    }

    .col-lg-10 {
        flex: 0 0 var(--col-10);
        max-width: var(--col-10);
    }

    .col-lg-11 {
        flex: 0 0 var(--col-11);
        max-width: var(--col-11);
    }

    .col-lg-12 {
        flex: 0 0 var(--col-12);
        max-width: var(--col-12);
    }

}

@media (min-width: 1200px) {

    .container {
        max-width: 1140px;
    }

    .col-xl {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .col-xl-1 {
        flex: 0 0 var(--col-1);
        max-width: var(--col-1);
    }

    .col-xl-2 {
        flex: 0 0 var(--col-2);
        max-width: var(--col-2);
    }

    .col-xl-3 {
        flex: 0 0 var(--col-3);
        max-width: var(--col-3);
    }

    .col-xl-4 {
        flex: 0 0 var(--col-4);
        max-width: var(--col-4);
    }

    .col-xl-5 {
        flex: 0 0 var(--col-5);
        max-width: var(--col-5);
    }

    .col-xl-6 {
        flex: 0 0 var(--col-6);
        max-width: var(--col-6);
    }

    .col-xl-7 {
        flex: 0 0 var(--col-7);
        max-width: var(--col-7);
    }

    .col-xl-8 {
        flex: 0 0 var(--col-8);
        max-width: var(--col-8);
    }

    .col-xl-9 {
        flex: 0 0 var(--col-9);
        max-width: var(--col-9);
    }

    .col-xl-10 {
        flex: 0 0 var(--col-10);
        max-width: var(--col-10);
    }

    .col-xl-11 {
        flex: 0 0 var(--col-11);
        max-width: var(--col-11);
    }

    .col-xl-12 {
        flex: 0 0 var(--col-12);
        max-width: var(--col-12);
    }

}