/* additional column sizes */

.col-xs-2_4, .col-sm-2_4, .col-md-2_4, .col-lg-2_4,
.col-xs-3_5, .col-sm-3_5, .col-md-3_5, .col-lg-3_5 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (max-width: 767px) {
    .col-xs-offset-2_4 {
        margin-left: 20%;
    }

    .col-xs-2_4 {
        float: left;
        width: 20%;
    }

    .col-xs-3_5 {
        float: left;
        width: 29.16666665%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .col-sm-offset-2_4 {
        margin-left: 20%;
    }

    .col-sm-2_4 {
        float: left;
        width: 20%;
    }

    .col-sm-3_5 {
        float: left;
        width: 29.16666665%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .col-md-offset-2_4 {
        margin-left: 20%;
    }

    .col-md-2_4 {
        float: left;
        width: 20%;
    }

    .col-md-3_5 {
        float: left;
        width: 29.16666665%;
    }
}

@media (min-width: 1200px) {
    .col-lg-offset-2_4 {
        margin-left: 20%;
    }

    .col-lg-2_4 {
        float: left;
        width: 20%;
    }

    .col-lg-3_5 {
        float: left;
        width: 29.16666665%;
    }
}

/* Clearfix */

@media (min-width: 1200px) {
    .row-auto-clear .col-lg-1:nth-child(12n+1),
    .row-auto-clear .col-lg-2:nth-child(6n+1),
    .row-auto-clear .col-lg-2_4:nth-child(5n+1),
    .row-auto-clear .col-lg-3:nth-child(4n+1),
    .row-auto-clear .col-lg-4:nth-child(3n+1),
    .row-auto-clear .col-lg-6:nth-child(odd) {
        clear: left;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .row-auto-clear .col-md-1:nth-child(12n+1),
    .row-auto-clear .col-md-2:nth-child(6n+1),
    .row-auto-clear .col-md-2_4:nth-child(5n+1),
    .row-auto-clear .col-md-3:nth-child(4n+1),
    .row-auto-clear .col-md-4:nth-child(3n+1),
    .row-auto-clear .col-md-6:nth-child(odd) {
        clear: left;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .row-auto-clear .col-sm-1:nth-child(12n+1),
    .row-auto-clear .col-sm-2:nth-child(6n+1),
    .row-auto-clear .col-sm-2_4:nth-child(5n+1),
    .row-auto-clear .col-sm-3:nth-child(4n+1),
    .row-auto-clear .col-sm-4:nth-child(3n+1),
    .row-auto-clear .col-sm-6:nth-child(odd) {
        clear: left;
    }
}

@media (max-width: 767px) {
    .row-auto-clear .col-xs-1:nth-child(12n+1),
    .row-auto-clear .col-xs-2:nth-child(6n+1),
    .row-auto-clear .col-xs-2_4:nth-child(5n+1),
    .row-auto-clear .col-xs-3:nth-child(4n+1),
    .row-auto-clear .col-xs-4:nth-child(3n+1),
    .row-auto-clear .col-xs-6:nth-child(odd) {
        clear: left;
    }
}

/* defines custom row and cells spacing */

.row-cols-spacing-0 {
    margin-right: 0;
    margin-left: 0;
}

.row-cols-spacing-0 > * {
    padding-right: 0;
    padding-left: 0;
}

.row-cols-spacing-5 {
    margin-right: -5px;
    margin-left: -5px;
}

.row-cols-spacing-5 > * {
    padding-right: 5px;
    padding-left: 5px;
}

.row-cols-spacing-10 {
    margin-right: -10px;
    margin-left: -10px;
}

.row-cols-spacing-10 > * {
    padding-right: 10px;
    padding-left: 10px;
}

/* util styles */

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

.flex-direction-column, .flex-column { flex-direction: column !important; }
.flex-direction-row, .flex-row { flex-direction: row !important; }

.gap-4 { gap: 1.5rem!important; }

.justify-content-center { justify-content: center !important; }
.align-content-center { align-content: center !important; }
.align-items-center { align-items: center !important; }

.gap-2em { gap: 2em !important; }

@media (min-width: 992px) {
    .gap-md-0 { gap: 0 !important; }
}

.form-label { margin-bottom: 0.5rem; }
.form-control-lg {
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
}

.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1em { margin-top: 1em !important; }
.mt-2em { margin-top: 2em !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1em { margin-bottom: 1em !important; }
.mb-2em { margin-bottom: 2em !important; }
.mb-2_5em { margin-bottom: 2.5em !important; }
.mb-3em { margin-bottom: 3em !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-0_5em { margin-top: .5em !important; margin-bottom: .5em !important; }
.my-1em { margin-top: 1em !important; margin-bottom: 1em !important; }
.my-2em { margin-top: 2em !important; margin-bottom: 2em !important; }
.my-3em { margin-top: 3em !important; margin-bottom: 3em !important; }

.pt-0 { padding-top: 0 !important; }
.px-2em { padding-left: 2em !important; padding-right: 2em !important; }
.py-2em { padding-top: 2em !important; padding-bottom: 2em !important; }

.border-0 { border: none !important; }

.shadow-0 { box-shadow: none !important; }
.shadow-3-6 { box-shadow: 0 3px 6px rgba(0,0,0,.175) !important; }

@media (max-width: 767px) {
    .d-xs-none { display: none !important; }
    .my-xs-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .full-width-xs { margin-left: -15px; width: calc(100% + 30px); }
    .line-height-2-xs { line-height: 2 !important; }
    .font-size-reset-xs { font-size: 100% !important; }
}

@media (min-width: 768px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .mt-sm-2em { margin-top: 2em !important; }
    .shadow-sm-0 { box-shadow: none !important; }
    .shadow-sm-3-6 { box-shadow: 0 3px 6px rgba(0,0,0,.175) !important; }
}

@media (min-width: 992px) {
    .mt-md-0 { margin-top: 0 !important; }
    .my-md-3em { margin-top: 3em !important; margin-bottom: 3em !important; }
}

.flex-equal-columns {
    display: flex;
}

.flex-equal-columns > .item {
    flex: 1;
    padding-right: 1em;
    padding-left: 1em;
}

.flex-equal-columns > .item.self-center {
    align-self: center;
}

.flex-equal-columns > .item:first-of-type {
    padding-left: 0;
}

.flex-equal-columns > .item:last-of-type {
    padding-right: 0;
}

@media (max-width: 767px) {
    .flex-equal-columns {
        flex-direction: column;
    }
    .flex-equal-columns > .item {
        padding-right: 0;
        padding-left: 0;
    }
}

.ratio {
    position: relative;
    width: 100%;
}

.ratio::before {
    display: block;
    padding-top: var(--bs-aspect-ratio);
    content: '';
}

.ratio > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.ratio-1x1 {
    --bs-aspect-ratio: 100%;
}

.ratio-3x2 {
    --bs-aspect-ratio: 66.667%;
}

.ratio-16x9 {
    --bs-aspect-ratio: 56.25%;
}

.ratio-2x1 {
    --bs-aspect-ratio: 50%;
}