/*!
 * Flexstrap v1.0.1 - A flex-based stand-in for Bootstrap
 * Copyright 2022-2024 Tim Fürer @ LEXO GmbH
 */

:root {
    --flexstrap-container-padding: 30px;
    --flexstrap-container-width: 1080px;
    --flexstrap-base-column-gap: 30px;
    --flexstrap-base-row-gap: 0;
    --flexstrap-12: 100%;
    --flexstrap-11: 91.66%;
    --flexstrap-10: 83.33%;
    --flexstrap-9: 75%;
    --flexstrap-8: 66.66%;
    --flexstrap-7: 58.33%;
    --flexstrap-6: 50%;
    --flexstrap-5: 41.66%;
    --flexstrap-4: 33.33%;
    --flexstrap-3: 25%;
    --flexstrap-2: 16.66%;
    --flexstrap-1: 8.33%;
}

body {
    overflow-x: hidden;
}

.container {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - var(--flexstrap-container-padding) * 2);
    max-width: var(--flexstrap-container-width);
    margin: 0 auto;
    padding: 0 var(--flexstrap-container-padding);
}

.row {
    --flexstrap-xs-column-gap: var(--flexstrap-base-column-gap);
    --flexstrap-xs-row-gap: var(--flexstrap-base-row-gap);
    --flexstrap-sm-column-gap: var(--flexstrap-base-column-gap);
    --flexstrap-sm-row-gap: var(--flexstrap-base-row-gap);
    --flexstrap-md-column-gap: var(--flexstrap-base-column-gap);
    --flexstrap-md-row-gap: var(--flexstrap-base-row-gap);
    --flexstrap-lg-column-gap: var(--flexstrap-base-column-gap);
    --flexstrap-lg-row-gap: var(--flexstrap-base-row-gap);
    --flexstrap-row-column-gap: var(--flexstrap-xs-column-gap);
    --flexstrap-row-row-gap: var(--flexstrap-xs-row-gap);
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--flexstrap-row-column-gap);
    row-gap: var(--flexstrap-row-row-gap);
    width: calc(100% + var(--flexstrap-row-column-gap));
}

.row:not(.row-reverse) {
    margin-right: calc(var(--flexstrap-row-column-gap) * -1);
}

.row.row-reverse {
    flex-direction: row-reverse;
    margin-left: calc(var(--flexstrap-row-column-gap) * -1);
}

.col-12,
.col-xs-12 {
    width: calc(var(--flexstrap-12) - var(--flexstrap-xs-column-gap));
}

.col-11,
.col-xs-11 {
    width: calc(var(--flexstrap-11) - var(--flexstrap-xs-column-gap));
}

.col-10,
.col-xs-10 {
    width: calc(var(--flexstrap-10) - var(--flexstrap-xs-column-gap));
}

.col-9,
.col-xs-9 {
    width: calc(var(--flexstrap-9) - var(--flexstrap-xs-column-gap));
}

.col-8,
.col-xs-8 {
    width: calc(var(--flexstrap-8) - var(--flexstrap-xs-column-gap));
}

.col-7,
.col-xs-7 {
    width: calc(var(--flexstrap-7) - var(--flexstrap-xs-column-gap));
} 

.col-6,
.col-xs-6 {
    width: calc(var(--flexstrap-6) - var(--flexstrap-xs-column-gap));
}

.col-5,
.col-xs-5 {
    width: calc(var(--flexstrap-5) - var(--flexstrap-xs-column-gap));
}

.col-4,
.col-xs-4 {
    width: calc(var(--flexstrap-4) - var(--flexstrap-xs-column-gap));
}

.col-3,
.col-xs-3 {
    width: calc(var(--flexstrap-3) - var(--flexstrap-xs-column-gap));
}

.col-2,
.col-xs-2 {
    width: calc(var(--flexstrap-2) - var(--flexstrap-xs-column-gap));
}

.col-1,
.col-xs-1 {
    width: calc(var(--flexstrap-1) - var(--flexstrap-xs-column-gap));
}

.hide,
.hidden {
    display: none !important;
}

@media (max-width: 767px) {
    .xs-hide,
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .row {
        --flexstrap-row-column-gap: var(--flexstrap-sm-column-gap);
        --flexstrap-row-row-gap: var(--flexstrap-sm-row-gap);
    }

    .col-sm-12 {
        width: calc(var(--flexstrap-12) - var(--flexstrap-sm-column-gap));
    }

    .col-sm-11 {
        width: calc(var(--flexstrap-11) - var(--flexstrap-sm-column-gap));
    }

    .col-sm-10 {
        width: calc(var(--flexstrap-10) - var(--flexstrap-sm-column-gap));
    }

    .col-sm-9 {
        width: calc(var(--flexstrap-9) - var(--flexstrap-sm-column-gap));
    }

    .col-sm-8 {
        width: calc(var(--flexstrap-8) - var(--flexstrap-sm-column-gap));
    }

    .col-sm-7 {
        width: calc(var(--flexstrap-7) - var(--flexstrap-sm-column-gap));
    }

    .col-sm-6 {
        width: calc(var(--flexstrap-6) - var(--flexstrap-sm-column-gap));
    }

    .col-sm-5 {
        width: calc(var(--flexstrap-5) - var(--flexstrap-sm-column-gap));
    }

    .col-sm-4 {
        width: calc(var(--flexstrap-4) - var(--flexstrap-sm-column-gap));
    }

    .col-sm-3 {
        width: calc(var(--flexstrap-3) - var(--flexstrap-sm-column-gap));
    }

    .col-sm-2 {
        width: calc(var(--flexstrap-2) - var(--flexstrap-sm-column-gap));
    }

    .col-sm-1 {
        width: calc(var(--flexstrap-1) - var(--flexstrap-sm-column-gap));
    }
}

@media (min-width: 768px) and (max-width:991px) {
    .sm-hide,
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .row {
        --flexstrap-row-column-gap: var(--flexstrap-md-column-gap);
        --flexstrap-row-row-gap: var(--flexstrap-md-row-gap);
    }

    .col-md-12 {
        width: calc(var(--flexstrap-12) - var(--flexstrap-md-column-gap));
    }

    .col-md-11 {
        width: calc(var(--flexstrap-11) - var(--flexstrap-md-column-gap));
    }

    .col-md-10 {
        width: calc(var(--flexstrap-10) - var(--flexstrap-md-column-gap));
    }

    .col-md-9 {
        width: calc(var(--flexstrap-9) - var(--flexstrap-md-column-gap));
    }

    .col-md-8 {
        width: calc(var(--flexstrap-8) - var(--flexstrap-md-column-gap));
    }

    .col-md-7 {
        width: calc(var(--flexstrap-7) - var(--flexstrap-md-column-gap));
    }

    .col-md-6 {
        width: calc(var(--flexstrap-6) - var(--flexstrap-md-column-gap));
    }

    .col-md-5 {
        width: calc(var(--flexstrap-5) - var(--flexstrap-md-column-gap));
    }

    .col-md-4 {
        width: calc(var(--flexstrap-4) - var(--flexstrap-md-column-gap));
    }

    .col-md-3 {
        width: calc(var(--flexstrap-3) - var(--flexstrap-md-column-gap));
    }

    .col-md-2 {
        width: calc(var(--flexstrap-2) - var(--flexstrap-md-column-gap));
    }

    .col-md-1 {
        width: calc(var(--flexstrap-1) - var(--flexstrap-md-column-gap));
    }
}

@media (min-width: 992px) and (max-width:1199px) {
    .md-hide,
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .row {
        --flexstrap-row-column-gap: var(--flexstrap-lg-column-gap);
        --flexstrap-row-row-gap: var(--flexstrap-lg-row-gap);
    }

    .col-lg-12 {
        width: calc(var(--flexstrap-12) - var(--flexstrap-lg-column-gap));
    }

    .col-lg-11 {
        width: calc(var(--flexstrap-11) - var(--flexstrap-lg-column-gap));
    }

    .col-lg-10 {
        width: calc(var(--flexstrap-10) - var(--flexstrap-lg-column-gap));
    }

    .col-lg-9 {
        width: calc(var(--flexstrap-9) - var(--flexstrap-lg-column-gap));
    }

    .col-lg-8 {
        width: calc(var(--flexstrap-8) - var(--flexstrap-lg-column-gap));
    }

    .col-lg-7 {
        width: calc(var(--flexstrap-7) - var(--flexstrap-lg-column-gap));
    }

    .col-lg-6 {
        width: calc(var(--flexstrap-6) - var(--flexstrap-lg-column-gap));
    }

    .col-lg-5 {
        width: calc(var(--flexstrap-5) - var(--flexstrap-lg-column-gap));
    }

    .col-lg-4 {
        width: calc(var(--flexstrap-4) - var(--flexstrap-lg-column-gap));
    }

    .col-lg-3 {
        width: calc(var(--flexstrap-3) - var(--flexstrap-lg-column-gap));
    }

    .col-lg-2 {
        width: calc(var(--flexstrap-2) - var(--flexstrap-lg-column-gap));
    }

    .col-lg-1 {
        width: calc(var(--flexstrap-1) - var(--flexstrap-lg-column-gap));
    }

    .lg-hide,
    .hidden-lg {
        display: none !important;
    }
}