/* #### Default Styles #### */

html {
    font-size: var(--rem-font-size);
}

body {
    background: #fff;
    color: var(--text-color);
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

img,
video,
figure {
    max-width: 100%;
    height: auto;
}

img {
    text-align: center;
    vertical-align: middle;
}

img:-moz-loading {
    color: transparent;
}

img.img-2x,
figure.img-2x img {
    zoom: .5;
}

iframe {
    border: 0;
}

/* ## Scrollbars ## */

@media (min-width: 992px) {
    html {
        scrollbar-color: var(--highlight-color-hover, #222) rgba(0, 0, 0, .1);
        scrollbar-width: thin;
        scrollbar-gutter: auto;
    }

    ::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, .1);
    }

    ::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb:horizontal {
        background: var(--highlight-color-hover, #222);
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #111;
    }

}

/* ## Bootstrap Grid Customization ## */
.row {
    justify-content: space-between;
    width: auto;
    margin-left: calc(var(--df-column-gap) * -1);
    margin-right: calc(var(--df-column-gap) * -1);
    max-width: none;
}

.container {
    padding-left: var(--df-column-gap) !important;
    padding-right: var(--df-column-gap) !important;
    width: var(--container-width);
    max-width: 100%;
}

.editor-styles-wrapper .block-editor-writing-flow {
    width: var(--container-width);
    max-width: 100%;
}

.container .row .container:not(.inner-container) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
    max-width: 100%;
}

/* For outputs with no preceding .row elements */
.container>div[class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 993px) {
    :root {
        --rem-font-size: 55%;
        --container-width: 960px;
    }
}

@media (min-width: 1100px) {
    :root {
        --rem-font-size: 55%;
        --container-width: 1024px;
    }

    html.boxed {
        background: var(--highlight-color) no-repeat center center / cover;
        background-attachment: fixed;
    }

    html.boxed body {
        position: relative;
        background: #fff;
        max-width: 94%;
        width: 1300px;
        margin: 0 auto;
        box-shadow: 0 0 5rem rgba(0, 0, 0, .6);
    }
}

@media (min-width: 1250px) {
    :root {
        --rem-font-size: 55%;
        --container-width: 1200px;
    }
}

@media (min-width: 1441px) {
    :root {
        --rem-font-size: 62.5%;
    }

    html.boxed body {
        position: relative;
        background: #fff;
        max-width: 94%;
        width: 1600px;
        margin: 0 auto;
        box-shadow: 0 0 5rem rgba(0, 0, 0, .6);
    }
}

@media (max-width: 992px) {
    :root {
        --rem-font-size: 58%;
        --container-width: 100%;
    }

    html,
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    .row.half-column-gap-mobile {
        --double-column-gap: calc(var(--current-column-gap) * 1);
        --df-column-gap: calc(var(--current-column-gap) * 0.5);

        max-width: calc(100% + (var(--current-column-gap) * 2)) !important;

        margin-left: calc(var(--current-column-gap) * -0.5) !important;
        margin-right: calc(var(--current-column-gap) * -0.5) !important;
    }

    .col,
    .col-1,
    .col-10,
    .col-11,
    .col-12,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-auto,
    .col-lg,
    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-auto,
    .col-md,
    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-auto,
    .col-sm,
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-auto,
    .col-xl,
    .col-xl-1,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-auto {
        position: relative;
        width: 100%;
        min-height: 0;
        flex: 0 0 100%;
        padding-right: var(--df-column-gap);
        padding-left: var(--df-column-gap);
        max-width: 100%;
    }
}

@media (max-width: 992px) and (min-width: 560px) {

    .col-sm,
    .col-xs {
        flex: 1 0 0;
        max-width: 100%;
    }

    .col-sm-3,
    .col-xs-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-sm-5,
    .col-xs-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-sm-6,
    .col-xs-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-sm-4,
    .col-xs-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

@media (max-width: 560px) and (min-width: 360px) {

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

    .col-xs-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xs-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xs-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xs-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

@media (max-width: 360px) {

    .col-xxs-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}