/* ==================== 
1. resets & defaults
2. base styles
3. layout
4. components
5. content by pages
==================== */


:root{
    --font-family: 'Noto Sans Georgian', sans-serif;
    --font-family-secondary: 'Noto Serif Georgian', serif;

    --bs-font-sans-serif: var(--font-family);
    --bs-body-font-size: var(--body-font-size);

    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;

    --bs-body-color-rgb: 35,31,32;
    --bs-body-color: #231F20;
    --bs-secondary-color-rgb: 44,54,63;
    --bs-secondary-color: #2C363F;
    --bs-tertiary-color-rgb: 76,91,92;
    --bs-tertiary-color: #4C5B5C;

    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0,0,0;

    --bs-heading-color: var(--bs-body-color);


    --bs-primary-rgb: 26,105,159;
    --bs-primary: #1A699F;
    --bs-primary-bg-subtle: #2986C6;
    --bs-primary-text-emphasis: #15537E;

    --bs-secondary-rgb: 76,91,92;
    --bs-secondary: #4C5B5C;
    --bs-secondary-bg-subtle: #d9d9d9;
    --bs-secondary-text-emphasis: #2C363F;

    --bs-danger-rgb: 240,122,129;
    --bs-danger: #F07A81;
    --bs-danger-bg-subtle: #F9989E;
    --bs-danger-text-emphasis: #D73E47;

    --bs-light-rgb: 235,235,235;
    --bs-light: #ebebeb;
    --bs-light-bg-subtle: #f2f1ef;
    --bs-light-text-emphasis: #fcfcfc;

    --bs-dark-rgb: 35,31,32;
    --bs-dark: #231F20;
    --bs-dark-bg-subtle: #D5D7D9;
    --bs-dark-text-emphasis: #000;


    --bs-link-color: var(--bs-body-color);
    --bs-link-color-rgb: var(--bs-body-color-rgb);
    --bs-link-decoration: none;
    --bs-link-hover-color: var(--bs-primary-bg-subtle);
    --bs-link-hover-color-rgb: 41,134,198;
    --bs-link-active-color: var(--bs-primary-text-emphasis);
    --bs-link-active-color-rgb: 21,83,126;


    --bs-border-color: #d9d9d9;
    --bs-border-color-translucent: rgba(217,217,217,1);

    --bs-form-invalid-color: #D7263D;
    --bs-form-invalid-border-color: #D7263D;


    --btn-primary: var(--bs-primary);
    --btn-primary-hover: var(--bs-primary-bg-subtle);
    --btn-primary-active: var(--bs-primary-text-emphasis);

    --btn-secondary: var(--bs-secondary);
    --btn-secondary-hover: #7C8D8E;
    --btn-secondary-active: var(--bs-secondary-text-emphasis);

    --btn-danger: var(--bs-danger);
    --btn-danger-hover: var(--bs-danger-bg-subtle);
    --btn-danger-active: var(--bs-danger-text-emphasis);

    /*--btn-dark: var(--bs-dark);
    --btn-dark-hover: var(--bs-dark-bg-subtle);
    --btn-dark-active: var(--bs-dark-text-emphasis);*/

    --btn-default-color: var(--bs-dark);
    /*--btn-disabled-color: #C6C6C6;
    --btn-disabled-bg: #F6F6F6;*/

    --icon-color: var(--bs-dark);

    --app-scrollbar-width: 5px;

    --app-header-height: 100px;
    --app-content-px: 16px;


    --container-size-1: 400px;
    --container-size-2: 668px;
    --container-size-3: 900px;
    --container-size-4: 1200px;
    --container-size-5: 1368px;


    --fs-h1: 2rem;
    --fs-h2: 1.875rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.25rem;
    --fs-h5: 1.125rem;
    --fs-h6: 1rem;

    --body-font-size: var(--fs-text3);
    --fs-text1: 1.25rem;
    --fs-text2: 1.125rem;
    --fs-text3: 1rem;
    --fs-text4: 14px;
    --fs-text5: 13px;
    --fs-text6: 12px;


    --element-size-1: 1.375rem;
    --element-size-2: 1.75rem;
    --element-size-3: 2.125rem;
    --element-size-4: 2.375rem;
    --element-size-5: 2.75rem;
    --element-size-6: 3.25rem;

    --icon-size-xs: 1rem;
    --icon-size-sm: 1.25rem;
    --icon-size-md: 1.5rem;
    --icon-size-lg: 1.75rem;
    --icon-size-xl: 2rem;

    --img-wrap-xs: 3rem;
    --img-wrap-sm: 4rem;
    --img-wrap-md: 4.5rem;
    --img-wrap-lg: 5rem;
    --img-wrap-xl: 6.875rem;


    --form-control-height: var(--element-size-4);
    --form-control-px: .875rem;
    --form-control-py: .375rem;
    --form-control-fs: 1rem;
    --form-control-color: var(--bs-body-color);
    --form-control-placeholder-color: var(--bs-secondary);
    --form-control-bg: var(--bs-body-bg);
    --form-control-border-color: var(--bs-secondary);
    --form-control-border-radius: 0;
    --form-control-active-color: var(--form-control-color);
    --form-control-active-bg: var(--form-control-bg);
    --form-control-active-border-color: var(--bs-primary);
    --form-control-disabled-bg: #F8F9FB;
    --form-control-disabled-border-color: var(--bs-border-color-translucent);
    --form-control-disabled-color: #959BA4;


    --bs-border-radius: 0;
}

@media (min-width: 768px) {
    :root{
        --app-content-px: 32px;
    }
}



/* ==================== 1. resets & defaults ==================== */
html,body,
h1,h2,h3,h4,h5,h6,
ul,ol,p,figure,
form,fieldset,input,textarea{
    margin: 0;
    padding: 0;
}

header,nav,main,article,section,aside,footer,figure{
    display: block;
}

*{box-sizing: border-box; -webkit-tap-highlight-color: transparent;}

/* ----- */

html,body{
    width: 100%;
    height: 100%;
}

nav ul,.nav ul{list-style: none;}
a img,fieldset{border:0;}

.logo img{display: block;}
.img-container img,
.thumb img,
figure img{
    display: block;
    max-width: 100%;
}

button,
input[type=button],
input[type=submit]{
    cursor: pointer;
    outline: none !important;
}

/*a,a:hover,a:focus{text-decoration: none;}*/
a.is-active{cursor: default;}

.disabled-click{pointer-events: none;}

/* ----- */

.no-scroll,
.no-scroll body{
    height: 100% !important;
    overflow: hidden;
}

.item-fade{opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; z-index: -1;}
.item-fade.fade-in{opacity: 1; visibility: visible; z-index: 1;}

/* ----- */

.highlight {background-color: #ffff00;}

b{font-weight: 500}
strong{font-weight: 700}

/* ----- */

body{
    background: #fff;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

    color: var(--bs-body-color);
    font-size: 14px;
    /*font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;*/
}



/* ==================== 2. base styles ==================== */


/* ----------- fonts ----------- */
.title,.text,.text-wrap,
.page-title,.section-title{
    font-family: var(--font-family-secondary);
}
.font-primary{
    font-family: var(--font-family) !important;
}
.font-secondary{
    font-family: var(--font-family-secondary) !important;
}
.text-uppercase{font-feature-settings: "case" on !important;}
.text-nocase{text-transform: none !important;font-feature-settings: "case" off !important;}
/* ----------- /fonts ----------- */


/* ----------- container ----------- */
.container,
.container-xxs,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-fluid{
    width: 100%;
    padding-left: var(--app-content-px);
    padding-right: var(--app-content-px);
    margin: 0 auto;
}
.container,
.container-xxs,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl{
    --container-width: var(--container-size-5, 100%);
    max-width: calc(var(--container-width) + var(--app-content-px) * 2);
}

.container .container-xxs,
.container .container-xs,
.container .container-sm,
.container .container-md,
.container .container-lg{
    max-width: var(--container-width);
    padding-left: 0;
    padding-right: 0;
}

/*.container,
.container-md,
.t63-section[data-content-size="md"] .container{
    --container-width: calc(var(--container-size-3) + var(--app-content-px) * 2);
}*/

.container-xxs,
.t63-section[data-content-size="xxs"] .container{
    --container-width: var(--container-size-1);
}

.container-xs,
.t63-section[data-content-size="xs"] .container{
    --container-width: var(--container-size-2);
}

.container-sm,
.t63-section[data-content-size="sm"] .container{
    --container-width: var(--container-size-3);
}

.container-md,
.t63-section[data-content-size="md"] .container{
	--container-width: var(--container-size-4);
}

/*.container-lg,
.t63-section[data-content-size="lg"] .container{
    --container-width: var(--container-size-5);
}*/

/*.container-xl,
.t63-section[data-content-size="xl"] .container{
    --container-width: var(--container-size-6);
}*/

.container-fluid,
.t63-section[data-content-size="fluid"] .container{
    max-width: 100%;
}
/* ----------- /container ----------- */


/* ----------- row ----------- */
.grid .row > div,
.grid-items-stretch > div{
    display: flex;
    flex-direction: column;
}
.grid .row > div > *,
.grid-items-stretch > div > *{
    flex-grow: 1;
}


.grid{
    width: 100%;
    overflow: hidden;
}

.grid .row{
    --bs-gutter-x: 1.875rem;
    --bs-gutter-y: 1.875rem;

    --col-border-bottom-width: 1px;
    --col-border-bottom-color: var(--bs-dark);
    --col-spacing-bottom: var(--bs-gutter-y);

    --col-border-right-width: 1px;
    --col-border-right-color: var(--bs-border-color);
}

.grid .row > div{
    padding-bottom: var(--col-spacing-bottom);
    position: relative;
}

/* border bottom */
.grid .row::after,
.grid .row > div::after{
    border-bottom: var(--col-border-bottom-width) solid var(--col-border-bottom-color);
}

.grid .row::after{
    content: "";
    width: 100%;
    margin-top: -1px;
}

.grid .row > div::after{
    content: "";
    width: 100%;
    position: absolute;
    left: calc(var(--bs-gutter-x) * 0.5);
    bottom: 0;
}

/* border right */
.grid .row > div::before{
    content: "";
    border-right: var(--col-border-right-width) solid var(--col-border-right-color);
    position: absolute;
    right: 0;
    top: 0;
    bottom: var(--col-spacing-bottom);
}

/* no border */
.grid.border-bottom-0 .row{
    --col-border-bottom-width: 0;
    --col-spacing-bottom: 0;
}
.grid.border-right-0 .row{
    --col-border-right-width: 0;
}

@media (min-width: 576px) {
    .grid .info-wrap{
        padding-bottom: 1.125rem;
    }
}
/* ----------- /row ----------- */


/* ----------- spacing ----------- */

/* p-5 */
.p-5,
.px-5,.ps-5,.pe-5,
.py-5,.pt-5,.pb-5{
    --p-5: 1.875rem;
}

.p-5,.px-5,.ps-5,
.p-sm-5,.px-sm-5,.ps-sm-5,
.p-md-5,.px-md-5,.ps-md-5,
.p-lg-5,.px-lg-5,.ps-lg-5,
.p-xl-5,.px-xl-5,.ps-xl-5,
.p-xxl-5,.px-xxl-5,.ps-xxl-5{
    padding-left: var(--p-5) !important;
}
.p-5,.px-5,.pe-5,
.p-sm-5,.px-sm-5,.pe-sm-5,
.p-md-5,.px-md-5,.pe-md-5,
.p-lg-5,.px-lg-5,.pe-lg-5,
.p-xl-5,.px-xl-5,.pe-xl-5,
.p-xxl-5,.px-xxl-5,.pe-xxl-5{
    padding-right: var(--p-5) !important;
}
.p-5,.py-5,.pt-5,
.p-sm-5,.py-sm-5,.pt-sm-5,
.p-md-5,.py-md-5,.pt-md-5,
.p-lg-5,.py-lg-5,.pt-lg-5,
.p-xl-5,.py-xl-5,.pt-xl-5,
.p-xxl-5,.py-xxl-5,.pt-xxl-5{
    padding-top: var(--p-5) !important;
}
.p-5,.py-5,.pb-5,
.p-sm-5,.py-sm-5,.pb-sm-5,
.p-md-5,.py-md-5,.pb-md-5,
.p-lg-5,.py-lg-5,.pb-lg-5,
.p-xl-5,.py-xl-5,.pb-xl-5,
.p-xxl-5,.py-xxl-5,.pb-xxl-5{
    padding-bottom: var(--p-5) !important;
}

/* p-6 */
.p-6,
.px-6,.ps-6,.pe-6,
.py-6,.pt-6,.pb-6{
    --p-6: 2.5rem;
}

.p-6,.px-6,.ps-6,
.p-sm-6,.px-sm-6,.ps-sm-6,
.p-md-6,.px-md-6,.ps-md-6,
.p-lg-6,.px-lg-6,.ps-lg-6,
.p-xl-6,.px-xl-6,.ps-xl-6,
.p-xxl-6,.px-xxl-6,.ps-xxl-6{
    padding-left: var(--p-6) !important;
}
.p-6,.px-6,.pe-6,
.p-sm-6,.px-sm-6,.pe-sm-6,
.p-md-6,.px-md-6,.pe-md-6,
.p-lg-6,.px-lg-6,.pe-lg-6,
.p-xl-6,.px-xl-6,.pe-xl-6,
.p-xxl-6,.px-xxl-6,.pe-xxl-6{
    padding-right: var(--p-6) !important;
}
.p-6,.py-6,.pt-6,
.p-sm-6,.py-sm-6,.pt-sm-6,
.p-md-6,.py-md-6,.pt-md-6,
.p-lg-6,.py-lg-6,.pt-lg-6,
.p-xl-6,.py-xl-6,.pt-xl-6,
.p-xxl-6,.py-xxl-6,.pt-xxl-6{
    padding-top: var(--p-6) !important;
}
.p-6,.py-6,.pb-6,
.p-sm-6,.py-sm-6,.pb-sm-6,
.p-md-6,.py-md-6,.pb-md-6,
.p-lg-6,.py-lg-6,.pb-lg-6,
.p-xl-6,.py-xl-6,.pb-xl-6,
.p-xxl-6,.py-xxl-6,.pb-xxl-6{
    padding-bottom: var(--p-6) !important;
}

/* m-5 */
.m-5,
.mx-5,.ms-5,.me-5,
.my-5,.mt-5,.mb-5{
    --m-5: 1.875rem;
}

.m-5,.mx-5,.ms-5,
.m-sm-5,.mx-sm-5,.ms-sm-5,
.m-md-5,.mx-md-5,.ms-md-5,
.m-lg-5,.mx-lg-5,.ms-lg-5,
.m-xl-5,.mx-xl-5,.ms-xl-5,
.m-xxl-5,.mx-xxl-5,.ms-xxl-5{
    margin-left: var(--m-5) !important;
}
.m-5,.mx-5,.me-5,
.m-sm-5,.mx-sm-5,.me-sm-5,
.m-md-5,.mx-md-5,.me-md-5,
.m-lg-5,.mx-lg-5,.me-lg-5,
.m-xl-5,.mx-xl-5,.me-xl-5,
.m-xxl-5,.mx-xxl-5,.me-xxl-5{
    margin-right: var(--m-5) !important;
}
.m-5,.my-5,.mt-5,
.m-sm-5,.my-sm-5,.mt-sm-5,
.m-md-5,.my-md-5,.mt-md-5,
.m-lg-5,.my-lg-5,.mt-lg-5,
.m-xl-5,.my-xl-5,.mt-xl-5,
.m-xxl-5,.my-xxl-5,.mt-xxl-5{
    margin-top: var(--m-5) !important;
}
.m-5,.my-5,.mb-5,
.m-sm-5,.my-sm-5,.mb-sm-5,
.m-md-5,.my-md-5,.mb-md-5,
.m-lg-5,.my-lg-5,.mb-lg-5,
.m-xl-5,.my-xl-5,.mb-xl-5,
.m-xxl-5,.my-xxl-5,.mb-xxl-5{
    margin-bottom: var(--m-5) !important;
}

/* m-6 */
.m-6,
.mx-6,.ms-6,.me-6,
.my-6,.mt-6,.mb-6{
    --m-6: 2.5rem;
}

.m-6,.mx-6,.ms-6,
.m-sm-6,.mx-sm-6,.ms-sm-6,
.m-md-6,.mx-md-6,.ms-md-6,
.m-lg-6,.mx-lg-6,.ms-lg-6,
.m-xl-6,.mx-xl-6,.ms-xl-6,
.m-xxl-6,.mx-xxl-6,.ms-xxl-6{
    margin-left: var(--m-6) !important;
}
.m-6,.mx-6,.me-6,
.m-sm-6,.mx-sm-6,.me-sm-6,
.m-md-6,.mx-md-6,.me-md-6,
.m-lg-6,.mx-lg-6,.me-lg-6,
.m-xl-6,.mx-xl-6,.me-xl-6,
.m-xxl-6,.mx-xxl-6,.me-xxl-6{
    margin-right: var(--m-6) !important;
}
.m-6,.my-6,.mt-6,
.m-sm-6,.my-sm-6,.mt-sm-6,
.m-md-6,.my-md-6,.mt-md-6,
.m-lg-6,.my-lg-6,.mt-lg-6,
.m-xl-6,.my-xl-6,.mt-xl-6,
.m-xxl-6,.my-xxl-6,.mt-xxl-6{
    margin-top: var(--m-6) !important;
}
.m-6,.my-6,.mb-6,
.m-sm-6,.my-sm-6,.mb-sm-6,
.m-md-6,.my-md-6,.mb-md-6,
.m-lg-6,.my-lg-6,.mb-lg-6,
.m-xl-6,.my-xl-6,.mb-xl-6,
.m-xxl-6,.my-xxl-6,.mb-xxl-6{
    margin-bottom: var(--m-6) !important;
}


/* --- row -- */

/* g-5 */
.g-5,.gx-5{
    --bs-gutter-x: 1.875rem;
}
.g-5,.gy-5{
    --bs-gutter-y: 1.875rem;
}

/* g-6 */
.g-6,.gx-6{
    --bs-gutter-x: 2.5rem;
}
.g-6,.gy-6{
    --bs-gutter-y: 2.5rem;
}

@media (min-width: 576px) {
    /* p-5 */
    .p-sm-5,
    .px-sm-5,.ps-sm-5,.pe-sm-5,
    .py-sm-5,.pt-sm-5,.pb-sm-5{
        --p-5: 1.875rem;
    }

    /* p-6 */
    .p-sm-6,
    .px-sm-6,.ps-sm-6,.pe-sm-6,
    .py-sm-6,.pt-sm-6,.pb-sm-6{
        --p-6: 2.5rem;
    }

    /* m-5 */
    .m-sm-5,
    .mx-sm-5,.ms-sm-5,.me-sm-5,
    .my-sm-5,.mt-sm-5,.mb-sm-5{
        --m-5: 1.875rem;
    }

    /* m-6 */
    .m-sm-6,
    .mx-sm-6,.ms-sm-6,.me-sm-6,
    .my-sm-6,.mt-sm-6,.mb-sm-6{
        --m-6: 2.5rem;
    }


    /* --- row -- */

    /* g-5 */
    .g-sm-5,.gx-sm-5{
        --bs-gutter-x: 1.875rem;
    }
    .g-sm-5,.gy-sm-5{
        --bs-gutter-y: 1.875rem;
    }

    /* g-6 */
    .g-sm-6,.gx-sm-6{
        --bs-gutter-x: 2.5rem;
    }
    .g-sm-6,.gy-sm-6{
        --bs-gutter-y: 2.5rem;
    }
}
@media (min-width: 768px) {
    /* p-5 */
    .p-md-5,
    .px-md-5,.ps-md-5,.pe-md-5,
    .py-md-5,.pt-md-5,.pb-md-5{
        --p-5: 1.875rem;
    }

    /* p-6 */
    .p-md-6,
    .px-md-6,.ps-md-6,.pe-md-6,
    .py-md-6,.pt-md-6,.pb-md-6{
        --p-6: 2.5rem;
    }

    /* m-5 */
    .m-md-5,
    .mx-md-5,.ms-md-5,.me-md-5,
    .my-md-5,.mt-md-5,.mb-md-5{
        --m-5: 1.875rem;
    }

    /* m-6 */
    .m-md-6,
    .mx-md-6,.ms-md-6,.me-md-6,
    .my-md-6,.mt-md-6,.mb-md-6{
        --m-6: 2.5rem;
    }


    /* --- row -- */

    /* g-5 */
    .g-md-5,.gx-md-5{
        --bs-gutter-x: 1.875rem;
    }
    .g-md-5,.gy-md-5{
        --bs-gutter-y: 1.875rem;
    }

    /* g-6 */
    .g-md-6,.gx-md-6{
        --bs-gutter-x: 2.5rem;
    }
    .g-md-6,.gy-md-6{
        --bs-gutter-y: 2.5rem;
    }
}
@media (min-width: 992px) {
    /* p-5 */
    .p-lg-5,
    .px-lg-5,.ps-lg-5,.pe-lg-5,
    .py-lg-5,.pt-lg-5,.pb-lg-5{
        --p-5: 1.875rem;
    }

    /* p-6 */
    .p-lg-6,
    .px-lg-6,.ps-lg-6,.pe-lg-6,
    .py-lg-6,.pt-lg-6,.pb-lg-6{
        --p-6: 2.5rem;
    }

    /* m-5 */
    .m-lg-5,
    .mx-lg-5,.ms-lg-5,.me-lg-5,
    .my-lg-5,.mt-lg-5,.mb-lg-5{
        --m-5: 1.875rem;
    }

    /* m-6 */
    .m-lg-6,
    .mx-lg-6,.ms-lg-6,.me-lg-6,
    .my-lg-6,.mt-lg-6,.mb-lg-6{
        --m-6: 2.5rem;
    }


    /* --- row -- */

    /* g-5 */
    .g-lg-5,.gx-lg-5{
        --bs-gutter-x: 1.875rem;
    }
    .g-lg-5,.gy-lg-5{
        --bs-gutter-y: 1.875rem;
    }

    /* g-6 */
    .g-lg-6,.gx-lg-6{
        --bs-gutter-x: 2.5rem;
    }
    .g-lg-6,.gy-lg-6{
        --bs-gutter-y: 2.5rem;
    }
}
@media (min-width: 1200px) {
    /* p-5 */
    .p-xl-5,
    .px-xl-5,.ps-xl-5,.pe-xl-5,
    .py-xl-5,.pt-xl-5,.pb-xl-5{
        --p-5: 1.875rem;
    }

    /* p-6 */
    .p-xl-6,
    .px-xl-6,.ps-xl-6,.pe-xl-6,
    .py-xl-6,.pt-xl-6,.pb-xl-6{
        --p-6: 2.5rem;
    }

    /* m-5 */
    .m-xl-5,
    .mx-xl-5,.ms-xl-5,.me-xl-5,
    .my-xl-5,.mt-xl-5,.mb-xl-5{
        --m-5: 1.875rem;
    }

    /* m-6 */
    .m-xl-6,
    .mx-xl-6,.ms-xl-6,.me-xl-6,
    .my-xl-6,.mt-xl-6,.mb-xl-6{
        --m-6: 2.5rem;
    }


    /* --- row -- */

    /* g-5 */
    .g-xl-5,.gx-xl-5{
        --bs-gutter-x: 1.875rem;
    }
    .g-xl-5,.gy-xl-5{
        --bs-gutter-y: 1.875rem;
    }

    /* g-6 */
    .g-xl-6,.gx-xl-6{
        --bs-gutter-x: 2.5rem;
    }
    .g-xl-6,.gy-xl-6{
        --bs-gutter-y: 2.5rem;
    }
}
@media (min-width: 1400px) {
    /* p-5 */
    .p-xxl-5,
    .px-xxl-5,.ps-xxl-5,.pe-xxl-5,
    .py-xxl-5,.pt-xxl-5,.pb-xxl-5{
        --p-5: 1.875rem;
    }

    /* p-6 */
    .p-xxl-6,
    .px-xxl-6,.ps-xxl-6,.pe-xxl-6,
    .py-xxl-6,.pt-xxl-6,.pb-xxl-6{
        --p-6: 2.5rem;
    }

    /* m-5 */
    .m-xxl-5,
    .mx-xxl-5,.ms-xxl-5,.me-xxl-5,
    .my-xxl-5,.mt-xxl-5,.mb-xxl-5{
        --m-5: 1.875rem;
    }

    /* m-6 */
    .m-xxl-6,
    .mx-xxl-6,.ms-xxl-6,.me-xxl-6,
    .my-xxl-6,.mt-xxl-6,.mb-xxl-6{
        --m-6: 2.5rem;
    }


    /* --- row -- */

    /* g-5 */
    .g-xxl-5,.gx-xxl-5{
        --bs-gutter-x: 1.875rem;
    }
    .g-xxl-5,.gy-xxl-5{
        --bs-gutter-y: 1.875rem;
    }

    /* g-6 */
    .g-xxl-6,.gx-xxl-6{
        --bs-gutter-x: 2.5rem;
    }
    .g-xxl-6,.gy-xxl-6{
        --bs-gutter-y: 2.5rem;
    }
}
/* ----------- /spacing ----------- */


/* ----------- icons ----------- */
.svg-icon path{
    fill: var(--icon-color) !important;
    transition: fill 0.15s ease-in-out;
}

.i-xs{
    width: var(--icon-size-xs);
}
.i-sm{
    width: var(--icon-size-sm);
}
.i-md{
    width: var(--icon-size-md);
}
.i-lg{
    width: var(--icon-size-lg);
}
.i-xl{
    width: var(--icon-size-xl);
}

/* i-play */
.i-play{
    --icon-color: var(--bs-primary);

    display: block;
    width: 60px;
    height: auto;
    transition: fill 0.15s ease-in-out;
}
.i-play:hover,
*:hover > .i-play {
    --icon-color: var(--bs-primary-bg-subtle);
}

.i-play.i-overlay{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* ----------- /icons ----------- */


/* ----------- img wrap ----------- */
.img-wrap{
    position: relative;
}
.img-wrap.size-xs{
    width: var(--img-wrap-xs) !important;
}
.img-wrap.size-sm{
    width: var(--img-wrap-sm) !important;
}
.img-wrap.size-md{
    width: var(--img-wrap-md) !important;
}
.img-wrap.size-lg{
    width: var(--img-wrap-lg) !important;
}
.img-wrap.size-xl{
    width: var(--img-wrap-xl) !important;
}
/* ----------- /img wrap ----------- */


/* ----------- rotate ----------- */
.r-0::before{
    transform: rotate(0deg);
}
.r-45::before{
    transform: rotate(45deg);
}
.r-90::before{
    transform: rotate(90deg);
}
.r-180::before{
    transform: rotate(180deg);
}
.r-270::before{
    transform: rotate(270deg);
}
.r-360::before{
    transform: rotate(360deg);
}
/* ----------- /rotate ----------- */


/* ----------- colors ----------- */
.text-danger {
    color: var(--bs-form-invalid-color) !important;
}
.text-light {
    color: var(--bs-light-text-emphasis) !important;
}

.text-muted {
    --bs-text-opacity: 0.5;
    color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
}

.text-bg-dark,
.text-bg-dark .title,
.text-bg-dark .text,
.text-bg-dark .text-wrap{
    color: var(--bs-light-text-emphasis);
}
.text-bg-dark a{
    --bs-link-color: #fff;
}
/* ----------- /colors ----------- */


/* ---------- scroll ---------- */
/*.os-scrollbar.os-scrollbar-vertical{
	width: 14px !important;
	padding: 8px 4px !important;
}
.os-scrollbar-handle{
	background-color: #D3D3D3 !important;
	border-radius: 4px !important;
}

.desktop .scrollable-container{
	overflow: hidden !important;
}
.mobile .scrollable-container,
.tablet .scrollable-container{
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

.horizontal-scrollable-container{
	width: 100%;
	overflow: auto;
}*/

.scrollable-container{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.app-page ::-webkit-scrollbar,
.modal ::-webkit-scrollbar,
.scrollable-container::-webkit-scrollbar{
    width: var(--app-scrollbar-width);
    height: var(--app-scrollbar-width);
}
.app-page ::-webkit-scrollbar-track,
.modal ::-webkit-scrollbar-track,
.scrollable-container::-webkit-scrollbar-track{
    background-color: transparent;
    border-radius: 99px;
    opacity: .1;
}
.app-page ::-webkit-scrollbar-thumb,
.modal ::-webkit-scrollbar-thumb,
.scrollable-container::-webkit-scrollbar-thumb{
    background: var(--bs-secondary-bg-subtle);
    border-radius: 10px;
}
/* ---------- /scroll ---------- */



/* ==================== 3. layout ==================== */


.app{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
}


/* ---------- header ---------- */
.app-header{
    height: 212px;
    padding-top: 1.25rem;
    position: relative;
    z-index: 300;
}
.app-header > div{
    display: flex;
    align-items: center;
    padding: 0 1.125rem;
    height: 50%;
}

.app-header .logo{
    flex-shrink: 0;
}
.app-header .logo img{
    max-width: 260px;
}

/* --- main wrap --- */
.app-header .main-wrap{
    border-bottom: 4px solid var(--bs-secondary);
}
.app-header .main-wrap .col-end {
    display: flex;
    align-items: center;
    gap: 2.375rem;
    margin-left: auto;
}

/* --- bottom wrap --- */
.app-header .bottom-wrap{
    gap: 1%;
    border-bottom: 1px solid var(--bs-dark);
}

/* nav */
.app-header nav{
    flex-grow: 1;
}
.app-header nav > ul{
    display: flex;
    align-items: center;
}
.app-header nav > ul > li + li{
    margin: auto;
}
.app-header nav a{
    --bs-link-color: var(--bs-dark);

    font-size: 1rem;
    font-weight: bold;

    transition: color .15s ease-in-out;
}

/* search */
.app-header .search-wrap,
.app-header .search-box{
    position: relative;
}

.app-header .search-box{
    width: 204px;
}
.app-header .search-box input{
    width: 100%;
    padding-left: 2.5rem;
    padding-right: 0.5rem;

    font-family: var(--font-family-secondary);
    font-size: 12px;
}
.app-header .search-box .i-wrap{
    --icon-color: var(--bs-secondary);

    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 0.5rem;
    position: absolute;
    top: 0;
    left: 0;
}
.app-header .search-box .i-wrap img,
.app-header .search-box .i-wrap svg{
    width: 1.5rem;
}
.app-header .search-box .i-wrap::after{
    content: "";
    width: 100%;
    height: 100%;
    background: url(../../images/icons/spinner_notch_primary.svg) left 8px center no-repeat;
    background-size: 1.5rem auto;

    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
}
.app-header .search-box input:focus + .i-wrap,
.app-header .search-box input:active + .i-wrap{
    --icon-color: var(--bs-primary);
}

.app-header .search-wrap.search-is-loading .search-box .i-wrap:after{
    opacity: 1;
}
.app-header .search-wrap.search-is-loading .search-box .i-wrap > *{
    opacity: 0;
}

.app-header .search-results-wrap{
    --spacing-x: 1.25rem;

    display: none;
    width: 900px;
    /*min-height: 196px;*/
    background-color: #fff;
    box-shadow: 0 6px 14px 0 rgba(0,0,0,.11);
    padding: 0 1.25rem;
    margin-top: 0.5rem;
    position: absolute;
    top: 100%;
    right: 0;
}
.app-header .search-results-wrap .scrollable-container{
    max-height: 282px;
    padding: 0.75rem 0;
    padding-right: calc(var(--spacing-x) - 4px - var(--app-scrollbar-width));
    margin-right: calc((var(--spacing-x) - 4px) * -1);
}
.app-header .search-results-item{
    --icon-color: var(--bs-secondary);

    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    padding: 0.875rem;
    transition: background-color 0.15s ease-in-out;
}
.app-header .search-results-item .svg-icon{
    flex-shrink: 0;
    width: var(--icon-size-md);
    height: auto;
}
.app-header .search-results-item:hover{
    --icon-color: var(--bs-link-color);
    background-color: var(--bs-light-bg-subtle);
}
.app-header .search-results-wrap .foo{
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--bs-dark);
    padding: 1.875rem;
}
/* ---------- /header ---------- */


/* ---------- page ---------- */
.app-page{
    flex-grow: 1;
    width: 100%;
    position: relative;
    padding-bottom: 6.5rem;
}

.page-title,
.section-title {
    font-size: var(--fs-h3);
    text-transform: uppercase;
    font-feature-settings: "case" on;
}

.page-title{
    margin: 1.5rem 0 3.25rem;

    text-align: center;
}
.page-title::after{
    content: "";
    display: block;
    width: 100%;
    max-width: 100px;
    border-bottom: 2px solid var(--bs-border-color);
    margin: 0.9375rem auto 0;
}

/* --- section --- */
.section{
    --section-spacing-bottom: 1.875rem;

    border-bottom: 1px solid var(--bs-dark);
    padding-bottom: var(--section-spacing-bottom);
    margin-bottom: var(--section-spacing-bottom);
}
.section-title{
    margin-bottom: 1.5rem;
}
.section > .grid > .row{
    --col-border-bottom-width: 0;
    --col-spacing-bottom: 0;
}

/* --- banners --- */
.top-banner-wrap{
    padding: 2.125rem 0 1.875rem;
}
/* ---------- /page ---------- */


/* ---------- footer ---------- */
.app-footer{
    flex-shrink: 0;
    background-color: var(--bs-dark);
    position: relative;
    z-index: 250;

    color: var(--bs-light-bg-subtle);
    font-family: var(--font-family-secondary);
    font-size: 14px;
}
.app-footer a{
    --bs-link-color: var(--bs-light-text-emphasis);
    transition: color .15s ease-in-out;
}

.app-footer > .container{
    padding-top: 22px;
    padding-bottom: 22px;
}
.app-footer .logo img{
    max-width: 204px;
}

.app-footer .links-row{
    --bs-gutter-x: 2.5rem;
    justify-content: center;
}

.app-footer .bottom-bar{
    background-color: #000;
    padding: 0.5rem 0;
}
.app-footer .bottom-bar .container{
    display: flex;
    align-items: center;
    min-height: 36px;
}

.app-footer .createdby{
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.app-footer .createdby img{
    display: block;
    height: 13px;
}

@media (min-width: 576px) {
    .app-footer .bottom-bar .container{
        justify-content: space-between;
    }
}
/* ---------- /footer ---------- */



/* ==================== 4. components ==================== */


/* ----------- hamburger ----------- */
.hamburger,
.hamburger span,
.hamburger span::before,
.hamburger span::after{
    width: 18px;
}

.hamburger{
    flex-shrink: 0;
    display: block;
    height: 14px;
    background-color: transparent;
    border: 0;
    padding: 0;
    overflow: visible;
    position: relative;
    z-index: 50;
}
.hamburger:before{
    content: "";
    position: absolute;
    top: -12px;
    bottom: -12px;
    left: -12px;
    right: -12px;
}

.hamburger span,
.hamburger span::before,
.hamburger span::after {
    display: block;
    height: 1px;
    background-color: #000;
    position: absolute;
    transition: transform 0.15s ease;
}
.hamburger span{
    top: 0;
}
.hamburger span::before,
.hamburger span::after {
    content: "";
    display: block;
}
.hamburger span::before {
    width: 100%;
    top: 6px;
    transition-property: transform, opacity;
}
.hamburger span::after {
    top: 12px;
}

.hamburger.is-active span,
.nav-is-open .hamburger span{
    transform: translate3d(-1px, 7px, 0) rotate(45deg);
}
.hamburger.is-active span::before,
.nav-is-open .hamburger span::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0;
}
.hamburger.is-active span::after,
.nav-is-open .hamburger span::after {
    transform: translate3d(0, -12px, 0) rotate(-90deg);
}
.hamburger.is-active span,
.hamburger.is-active span::before,
.hamburger.is-active span::after,
.nav-is-open .hamburger span,
.nav-is-open .hamburger span::before,
.nav-is-open .hamburger span::after{
    width: 21px;
}
/* ----------- /hamburger ----------- */


/* ---------- title,text ---------- */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.title,
.page-title,.section-title{
    display: block;
    color: var(--bs-heading-color);
    font-weight: 700;
}
.title,
.page-title,.section-title{
    font-feature-settings: "case" on;
    text-transform: uppercase;
}

.title *{
    font-weight: inherit;
    line-height: inherit;
}

.title:not(.slide-title):not(.full-featured) *:not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6):not([class*="display-"]) {
    font-size: inherit;
}

/*.title a{
    color: inherit;
}*/

h1{
    font-size: var(--fs-h1);
}
h2{
    font-size: var(--fs-h2);
}
h3{
    font-size: var(--fs-h3);
}
h4{
    font-size: var(--fs-h4);
}
h5{
    font-size: var(--fs-h5);
}
h6{
    font-size: var(--fs-h6);
}

.h1{font-size: var(--fs-h1) !important;}
.h2{font-size: var(--fs-h2) !important;}
.h3{font-size: var(--fs-h3) !important;}
.h4{font-size: var(--fs-h4) !important;}
.h5{font-size: var(--fs-h5) !important;}
.h6{font-size: var(--fs-h6) !important;}

.text,
.text-wrap{
    color: var(--bs-body-color);
    font-size: var(--body-font-size);
    font-weight: 400;
}

.fs-1{
    font-size: var(--fs-text1) !important;
}
.fs-2{
    font-size: var(--fs-text2) !important;
}
.fs-3{
    font-size: var(--fs-text3) !important;
}
.fs-4{
    font-size: var(--fs-text4) !important;
}
.fs-5{
    font-size: var(--fs-text5) !important;
}
.fs-6{
    font-size: var(--fs-text6) !important;
}

/*html{
    font-size: 14px;
}

@media (min-width: 768px){
    html{
        font-size: 16px;
    }
}*/

.text-wrap:before,
.text-wrap:after {
    display: table;
    content: " ";
}
.text-wrap:after{
    clear:both;
}

.text-wrap > *{margin-bottom:20px;}
.text-wrap > *:last-child{margin-bottom:0;}
.text-wrap ul,.text-wrap ol{padding-left:40px;}
.text-wrap li + li,.text-wrap li ul,.text-wrap li ol{margin-top:10px;}

.text-wrap img{
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    margin-bottom: 5px;
}
.text-wrap img[style*="float: left"]{
    margin-right: 15px;
}
.text-wrap img[style*="float: right"]{
    margin-left: 15px;
}

.text-wrap hr{
    margin: 35px 0;
}
.text-wrap hr + img,
.text-wrap hr + * img{
    margin-top: 8px;
}


.text-wrap a:not(.btn){
    --bs-link-color: var(--bs-primary);
    --bs-link-decoration: underline;
}
.text-wrap a:not(.btn):hover{
    --bs-link-decoration: none;
}

button.link{
    background: none;
    border: 0;
    padding: 0;
}

.text-wrap audio,
.text-wrap video{
    display: block;
    width: 100%;
    outline: none;
}
.text-wrap video{
    height: auto;
}

.text-wrap iframe{
    display: block;
    max-width: 100%;
}

.text-wrap table {
    width: 100%;
    border: 1px solid #dee2e6;
    color: inherit;
}
.text-wrap table th,
.text-wrap table td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    vertical-align: top;
}
.text-wrap table thead th {
    border-bottom: 2px solid #dee2e6;
    vertical-align: bottom;
}
.text-wrap table tbody + tbody {
    border-top: 2px solid #dee2e6;
}

.text-wrap .table-plain {
    border: 0;
}
.text-wrap .table-plain th,
.text-wrap .table-plain td {
    border: 0;
    border-top: 1px solid #dee2e6;
}


figcaption{
    color: var(--bs-secondary);
    font-size: var(--fs-text4);
    line-height: 1.4;
}
/* ---------- /title,text ---------- */


/* ---------- link ---------- */
a{
    --icon-color: var(--bs-link-color);

    color: var(--bs-link-color);
    text-decoration: var(--bs-link-decoration);
}
a:hover {
    /*--bs-link-color: var(--bs-link-hover-color) !important;*/
    --icon-color: var(--bs-link-hover-color);
    color: var(--bs-link-hover-color);
}
a:hover:active{
    /*--bs-link-color: var(--bs-link-active-color) !important;*/
    --icon-color: var(--bs-link-active-color);

    color: var(--bs-link-active-color);
}

.hover-underline:hover{
    --bs-link-decoration: underline;
}

.link{
    font-size: 1rem;
    font-weight: bold;
}

.link-primary,
.link-primary:focus{
    color: var(--bs-primary) !important;
}
.link-primary:hover{
    color: var(--bs-link-hover-color) !important;
}
.link-primary:hover:active{
    color: var(--bs-link-active-color) !important;
}
/* ---------- /link ---------- */


/* ---------- buttons ---------- */
.btn{
    --bs-btn-padding-x: 1.375rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 0;
    --bs-btn-disabled-opacity: 0.3;

    --btn-size: var(--element-size-4);
    --btn-gap: 0.75rem;
    --icon-size: var(--icon-size-md);
    --icon-color: var(--bs-btn-color);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    min-height: var(--btn-size);
}

.btn-xxs{
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: 12px;
    --btn-size: var(--element-size-1);
    --btn-gap: 0.5rem;
    --icon-size: var(--icon-size-xs);
}
.btn-xs{
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.125rem;
    --bs-btn-font-size: 12px;
    --btn-size: var(--element-size-2);
    --btn-gap: 0.5rem;
    --icon-size: var(--icon-size-sm);
}
.btn-sm{
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-font-size: 14px;
    --btn-size: var(--element-size-3);
    --btn-gap: 0.625rem;
}
.btn-lg{
    --bs-btn-padding-x: 1.75rem;
    --btn-size: var(--element-size-5);
    /*--icon-size: var(--icon-size-md);*/
}
.btn-xl{
    --bs-btn-padding-x: 2.5rem;
    --btn-size: var(--element-size-6);
    /*--icon-size: var(--icon-size-md);*/
}

.btn img,
.btn svg{
    flex-shrink: 0;
    width: var(--icon-size);
    height: auto;
}
.btn:hover{
    --icon-color: var(--icon-hover-color, var(--bs-btn-hover-color));
}
.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active{
    --icon-color: var(--icon-active-color, var(--bs-btn-active-color));
}


/* white */
.btn-white{
    background-color: rgba(255,255,255,0.5);
    border-color: rgba(255,255,255,0.5);
}
.btn-white:hover{
    background-color: rgba(255,255,255,0.7);
}
.btn.btn-outline-white{
    border-color: #fff;
    color: #fff !important;
}
.btn.btn-outline-white:hover{
    background-color: #fff;
    border-color: #fff;
}

/* primary */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--btn-primary);
    --bs-btn-border-color: var(--btn-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-primary-hover);
    --bs-btn-hover-border-color: var(--btn-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-primary-active);
    --bs-btn-active-border-color: var(--btn-primary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--btn-primary);
    --bs-btn-disabled-border-color: var(--btn-primary);
}
.btn-outline-primary{
    /*--bs-btn-color: var(--btn-default-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-primary-hover);
    --bs-btn-hover-border-color: var(--btn-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-primary-active);
    --bs-btn-active-border-color: var(--btn-primary-active);
    --bs-btn-disabled-color: var(--btn-default-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-dark);*/
    --bs-btn-color: var(--btn-default-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-color: var(--btn-default-color);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--btn-primary-hover);
    --bs-btn-active-color: var(--btn-default-color);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--btn-primary-active);
    --bs-btn-disabled-color: var(--btn-default-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-dark);

    --icon-hover-color: var(--bs-btn-hover-border-color);
    --icon-active-color: var(--bs-btn-active-border-color);
}

/* secondary */
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--btn-secondary);
    --bs-btn-border-color: var(--btn-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-secondary-hover);
    --bs-btn-hover-border-color: var(--btn-secondary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-secondary-active);
    --bs-btn-active-border-color: var(--btn-secondary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--btn-secondary);
    --bs-btn-disabled-border-color: var(--btn-secondary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary-text-emphasis);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-secondary-bg-subtle);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-dark);
    --bs-btn-active-border-color: var(--bs-dark);
    --bs-btn-disabled-color: var(--btn-secondary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--btn-secondary);
}

/* danger */
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--btn-danger);
    --bs-btn-border-color: var(--btn-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-danger-hover);
    --bs-btn-hover-border-color: var(--btn-danger-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-danger-active);
    --bs-btn-active-border-color: var(--btn-danger-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--btn-danger);
    --bs-btn-disabled-border-color: var(--btn-danger);
}
.btn-outline-danger{
    /*--bs-btn-color: var(--btn-default-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--btn-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-danger-hover);
    --bs-btn-hover-border-color: var(--btn-danger-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-danger-active);
    --bs-btn-active-border-color: var(--btn-danger-active);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--btn-default-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--btn-danger);*/
    --bs-btn-color: var(--btn-default-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--btn-danger);
    --bs-btn-hover-color: var(--btn-default-color);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--btn-danger-hover);
    --bs-btn-active-color: var(--btn-default-color);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--btn-danger-active);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--btn-default-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--btn-danger);

    --icon-hover-color: var(--bs-btn-hover-border-color);
    --icon-active-color: var(--bs-btn-active-border-color);
}


/* is loading */
.btn.is-loading{
    background-image: url("../../images/icons/spinner_white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px 28px;
    pointer-events: none;
}
.btn.is-loading > *{
    opacity: 0;
}

/* btn-row */
/*.app-page .btn-row{
	margin: 20px 0;
}
.app-page .btn-row:last-child{
	margin-bottom: 0;
}
.app-page .btn-row > div{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	padding-left: -6px;
	padding-right: -6px;
}
.app-page .btn-row > div .btn{
	margin: 6px;
}*/
/* ---------- /buttons ---------- */


/* ---------- pagination ---------- */
/*.pagination{
    --bs-pagination-padding-x: 0.25rem;
    --bs-pagination-padding-y: 0.25rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--btn-default-color);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-width: 0;
    --bs-pagination-border-color: transparent;
    --bs-pagination-border-radius: var(--border-radius-sm);
    --bs-pagination-hover-color: var(--btn-default-color);
    --bs-pagination-hover-bg: #ECECF5;
    --bs-pagination-hover-border-color: var(--btn-primary);
    --bs-pagination-focus-color: var(--btn-default-color);
    --bs-pagination-focus-bg: transparent;
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--btn-primary);
    --bs-pagination-active-border-color: var(--btn-primary);
    --bs-pagination-disabled-color: var(--btn-disabled-color);
    --bs-pagination-disabled-bg: var(--btn-disabled-bg);
    --bs-pagination-disabled-border-color: var(--btn-disabled-bg);

    --pagination-item-size: var(--form-element-size-2);

    justify-content: center;
    gap: 0.5rem;
    margin: 3rem 0;
}
.pagination .page-item{
    flex-shrink: 0;
}
.pagination .page-link{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-item-size);
    height: var(--pagination-item-size);
    border-radius: var(--bs-pagination-border-radius);
}*/
/* ---------- /pagination ---------- */


/* ---------- badge ---------- */
.badge{
    --bs-badge-padding-x: 0.75rem;
    --bs-badge-padding-y: 0.5rem;
    --bs-badge-font-size: 0.75rem;
    --bs-badge-font-weight: 400;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: 5px;
}
/* ---------- /badge ---------- */


/* ---------- form ---------- */
.form-group{
    margin-bottom: 1.875rem;
}
.row .form-group{
    margin-bottom: 0;
}

.form-label{
    margin-bottom: .5rem;

    color: var(--form-control-color);
    font-size: var(--form-control-fs);
}

.form-text{
    margin-top: 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 14px;
}
.form-text img{
    width: 16px;
    height: auto;
}
.form-text.d-flex{
    align-items: flex-start;
    gap: 0.25rem;
}
.form-text.d-flex img{
    position: relative;
    top: 2px;
}

.form-control,
.form-select{
    height: var(--form-control-height);
    background-color: var(--form-control-bg);
    border-color: var(--form-control-border-color);
    border-radius: var(--form-control-border-radius);
    padding: var(--form-control-py) var(--form-control-px);

    color: var(--form-control-color);
    font-size: var(--form-control-fs);
}

.form-select{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    padding-right: 38px;
}

textarea.form-control,
.form-floating>textarea.form-control{
    height: auto;
}

.form-control:focus,
.form-select:focus{
    background-color: var(--form-control-active-bg);
    border-color: var(--form-control-active-border-color);
    box-shadow: none;
    color: var(--form-control-active-color);
}

.form-control.disabled,
.form-select.disabled,
.form-control[disabled],
.form-select[disabled]{
    color: var(--form-control-disabled-color);
    background-color: var(--form-control-disabled-bg);
    border-color: var(--form-control-disabled-border-color);
}

.form-control::placeholder{
    color: var(--form-control-placeholder-color);
}

/* floating label */
.form-floating{
    ----form-control-height: var(--element-size-6);
}
.form-floating>.form-control,
.form-floating>.form-control-plaintext,
.form-floating>.form-select {
    height: var(----form-control-height);
    min-height: auto;
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}
.form-floating>label{
    display: flex;
    align-items: center;
    width: auto;
    height: calc(var(----form-control-height) - var(--bs-border-width)*2);
    padding: 0 var(--form-control-px);
    top: 0;
    left: var(--bs-border-width);
    right: calc(var(--bs-border-width) + var(--app-scrollbar-width));
    transition: all .15s ease-in-out;

    color: var(--form-control-placeholder-color);
    font-size: var(--form-control-fs);
    line-height: 1;
}
.form-floating>label::before{
    content: "";
    width: 100%;
    height: 22px;
    background-color: var(--bs-body-bg);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    height: 32px;
    transform: none;
    font-size: 12px;
}


/* --- */
.search-input{
    background-image: url(../../images/icons/magnifying_glass_secondary.svg);
    background-position: left 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5rem auto;
    padding-left: 2.5rem;
    padding-right: 0.5rem;
}


/* error */
.error-text,
.global-error-text,
.invalid-feedback{
    color: var(--bs-form-invalid-color);
    font-size: 14px;
    line-height: 1.25;
}

.error-text,
.invalid-feedback{
    padding: 0 1rem;
}

.error-text {
    display: none;
}
.global-error-text {
    display: block;
    margin-bottom: 1.25rem;
    text-align: center;
}

.has-error .form-control:not(:focus),
.has-error .form-select:not(:focus){
    border-color: var(--bs-form-invalid-border-color);
}
.has-error .error-text,
.has-error .invalid-feedback{
    display: block;
}

.form-control.is-invalid,
.form-select.is-invalid{
    box-shadow: none !important;
}
/* ---------- /form ---------- */


/* ---------- user wrap ---------- */
.user-wrap{
    --gap: 0.75rem;
    --avatar-size: 64px;
    --font-size: 1rem;

    display: flex;
    align-items: center;
    gap: var(--gap);
    color: var(--bs-body-color);
    font-size: var(--font-size);
    font-weight: 600;
}

.avatar{
    --size: var(--avatar-size, 64px);

    flex-shrink: 0;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    object-fit: cover;
}
.user-wrap .media-secondary-info-wrap{
    margin-top: 2px;
}

.user-wrap.size-lg,
.avatar.size-lg{
    --avatar-size: 7.5rem;
}

.user-wrap.size-lg{
    --gap: 1.375rem;
    --font-size: 1.5rem;
}
/* ---------- /user wrap ---------- */


/* ---------- bg-img ---------- */
.bg-img{
    display: block;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
.bg-img:not(.ratio)::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.bg-img--cover{
    background-size: cover;
}
.bg-img--contain{
    background-size: contain;
}
.bg-img.fit-container{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/* ---------- /bg-img ---------- */


/* ---------- ratio, fit ---------- */
.ratio{
    overflow: hidden;
}
.ratio img,
.ratio video,
.object-fit-cover{
    object-fit: cover;
}
.object-fit-contain{
    object-fit: contain;
}
/* ---------- /ratio, fit ---------- */


/* ---------- item with icon ---------- */
.item-with-icon{
    display: flex;
    align-items: center;
    gap: 0.85rem;

    font-size: var(--fs-text3);
    font-weight: 600;
}
.item-with-icon > img,
.item-with-icon > svg{
    flex-shrink: 0;
    width: 1.5rem;
    height: auto;
}
/* ---------- /item with icon ---------- */


/* ---------- dropdown ---------- */
/*.btn[data-bs-toggle="dropdown"]{
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn[data-bs-toggle="dropdown"]::after{
    flex-shrink: 0;
    content: "";
    width: 15px;
    height: 15px;
    background: url(../../images/icons/chevron.svg) center no-repeat;
    background-size: 100% auto;
    transition: transform 0.15s cubic-bezier(0,0,.2,1);
}
.btn[data-bs-toggle="dropdown"][aria-expanded="true"]::after{
    transform: rotate(180deg);
}

.dropdown-menu{
    --bs-dropdown-spacer: 0;
    --bs-dropdown-bg: #fff;
    --bs-dropdown-border-color: #DCDFE4;
    --bs-dropdown-border-radius: 6px;
    --bs-dropdown-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    --bs-dropdown-padding-x: 0.5rem;
    --bs-dropdown-padding-y: 0.5rem;

    --bs-dropdown-item-border-radius: var(--border-radius-sm);
    --bs-dropdown-link-color: var(--btn-default-color);
    --bs-dropdown-link-hover-color: var(--btn-default-color);
    --bs-dropdown-link-hover-bg: var(--btn-secondary);
    --bs-dropdown-link-active-color: var(--btn-default-color);
    --bs-dropdown-link-active-bg: var(--btn-secondary-active);
    --bs-dropdown-item-padding-x: 8px;
    --bs-dropdown-item-padding-y: 6px;
    --bs-dropdown-font-size: 14px;
}*/
/* ---------- /dropdown ---------- */


/* ---------- slider ---------- */
.carousel{
    --carousel-width: var(--container-width);
    --slides-per-page: 3;
    --slide-gap: 1.875rem;
    --item-width: calc( (var(--carousel-width) - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page) );
}

/* --- */
.carousel .splide__arrow{
    width: 4.5rem;
    height: 100%;
    background-color: #fff;
    border-radius: 0;
    padding: 10px;
    opacity: 1 !important;
    top: 0;
    transform: none;
    transition: opacity .1s ease;
}
.carousel .splide__arrow--prev{
    justify-content: flex-start;
    left: 0;
}
.carousel .splide__arrow--next{
    justify-content: flex-end;
    right: 0;
}
.carousel .splide__arrow.disabled,
.carousel .splide__arrow:disabled{
    opacity: 0 !important;
    pointer-events: none;
}

.carousel .splide__arrow svg{
    fill: var(--icon-color);
    width: 3rem;
    height: auto;
    transition: fill .15s ease-in-out;
}
.carousel .splide__arrow:hover svg{
    --icon-color: var(--bs-link-hover-color);
}
.carousel .splide__arrow:active svg{
    --icon-color: var(--bs-link-active-color);
}

/* --- */
.carousel .splide__slide{
    margin-right: var(--slide-gap);
    /*margin-bottom: calc(var(--container-width) / 5);*/
}
.carousel .splide__slide > *{
    width: var(--item-width);
}

.reels-carousel{
    --slides-per-page: 6;
}
/* ---------- /slider ---------- */


/* ---------- card ---------- */
.card{
    /*--bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: ;
    --bs-card-subtitle-color: ;
    --bs-card-border-width: var(--bs-border-width);
    --bs-card-border-color: var(--bs-border-color-translucent);
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;*/
}

.floating-card-title{
    display: flex;
    align-items: center;
    max-width: 100%;
    min-height: 48px;
    background: var(--bs-secondary-bg-subtle);
    padding: 0.75rem 1.5rem 0.625rem;

    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    color: var(--bs-secondary);
    font-size: 1rem;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    font-feature-settings: "case" on;
}
.floating-card-title + .card-body{
    padding-top: 5rem;
}
/* ---------- /card ---------- */


/* ---------- tabs ---------- */
.nav-tabs{
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--bs-heading-color);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;

    --bs-nav-link-color: var(--bs-heading-color);
    --bs-nav-link-padding-x: 1.5rem;
    --bs-nav-link-padding-y: 0.75rem;
    --bs-nav-link-font-size: 1rem;
    --bs-nav-link-font-weight: 400;
}
/* ---------- /tabs ---------- */


/* ---------- modal ---------- */
/*.modal-backdrop{
    --bs-backdrop-bg: #44546f;
	--bs-backdrop-opacity: 0.8;
}
.modal{
	--bs-modal-bg: #fff;
}
.modal-dialog{
	--bs-modal-width: 500px;
	--modal-padding-x: 16px;
	--modal-padding-y: 20px;
}
.modal-sm{
	--bs-modal-width: 300px;
}
.modal-lg{
	--bs-modal-width: 800px;
	--modal-padding-x: 20px;
	--modal-padding-y: 24px;
}
.modal-xl{
	--bs-modal-width: 1140px;
	--modal-padding-x: 20px;
	--modal-padding-y: 24px;
}*/

.modal .btn-close{
    background-color: transparent;
    border: 0;
    padding: 8px;

    color: #777;
}
.modal-content > .btn-close{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
/* ---------- /modal ---------- */


/* ---------- social ---------- */
.social-items-row{
    --bs-gutter-x: 1.25rem;
    --bs-link-color: var(--bs-dark);

    align-items: center;
}
.social-items-row img{
    flex-shrink: 0;
    height: 20px;
}
/* ---------- /social ---------- */


/* ---------- media ---------- */
.media-secondary-info-wrap{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;

    color: var(--bs-secondary);
    font-size: 12px;
    font-weight: normal;
}
.card .media-item:last-child{
    --border-bottom-width: 0;
    --spacing-bottom: 0;
}

/* --- */
.media-item{
    --border-bottom-width: 1px;
    --border-bottom-color: var(--bs-border-color);
    --spacing-bottom: 1.875rem;
    --title-font-size: var(--fs-h4);

    border-bottom: var(--border-bottom-width) solid var(--bs-border-color);
    padding-bottom: var(--spacing-bottom);
    margin-bottom: var(--spacing-bottom);
}
.media-item .user-wrap{
    margin-bottom: 1.875rem;
}
.media-item .img-wrap{
    --bs-aspect-ratio: 49%;
    position: relative;
}
.media-item .img-wrap .i-play{
    width: 80px;
}
.media-item .img-wrap figcaption{
    margin-top: 1rem;
}
.media-item .info-wrap{
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    padding-top: 1.25rem;
}
.media-item .info-wrap a:not(.btn){
    transition: color .15s ease-in-out;
}
.media-item .title{
    font-size: var(--title-font-size);
}

/* wide */
.media-item-wide{
    --border-bottom-color: var(--bs-dark);
    --title-font-size: var(--fs-h6);

    padding-bottom: 1.65rem;
    margin: 1.875rem 0;
}
.media-item-wide .img-wrap{
    --bs-aspect-ratio: 41.375%;
    position: relative;
}
.media-item-wide .info-wrap{
    padding-top: 1.75rem;
}

/* card */
.media-items-card{
    --bs-card-spacer-x: 0.875rem;
    --bs-card-spacer-y: 1.875rem;

    max-width: 930px;
    margin: 0 auto 1.875rem;
}
/* ---------- /media ---------- */


/* ---------- media grid ---------- */
.media-grid-item{
    --bs-aspect-ratio: 56%;

    display: flex;
    flex-direction: column;
}

.media-grid-item > .title{
    margin-bottom: 1.875rem;

    font-size: var(--fs-h3);
}
.media-grid-item > .title + *{
    margin-top: auto;
}

.media-grid-item .img-wrap{
    position: relative;
}

.media-grid-item .info-wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 10px;

    color: var(--bs-body-color);
}
.media-grid-item .info-wrap a:not(:hover){
    color: inherit;
}
.media-grid-item .info-wrap a:not(.btn){
    transition: color .15s ease-in-out;
}
.media-grid-item .info-wrap .title,
.media-grid-item .info-wrap .text{
    color: inherit;
    font-size: 16px;
}
.media-grid-item .info-wrap .title{
    line-height: 1.4;
}
.media-grid-item .info-wrap .text{
    line-height: 1.2;
}
/* ---------- /media grid ---------- */


/* ---------- media list ---------- */
.media-list-item{
    --border-bottom-width: 1px;
    --border-bottom-color: var(--bs-border-color);
    --spacing-bottom: 1.875rem;
    --bs-aspect-ratio: 62.4%;
    --img-width: 319px;
    --title-font-size: var(--fs-h4);
    --text-font-size: var(--fs-text4);

    display: flex;
    gap: 1.75rem;
    border-bottom: var(--border-bottom-width) solid var(--border-bottom-color);
    padding-bottom: var(--spacing-bottom);
    margin-bottom: var(--spacing-bottom);
}

.media-list-item .img-wrap{
    flex-shrink: 0;
    width: var(--img-width);
    position: relative;
}
.media-list-item .img-wrap a{
    display: block;
}
.media-list-item .img-wrap .i-play{
    width: 60px;
}

.media-list-item .info-wrap{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.media-list-item .title{
    font-size: var(--title-font-size);
    line-height: 1.4;
}
.media-list-item .text{
    font-size: var(--text-font-size);
    line-height: 1.5;
}

/* sm */
.media-list-item.item-sm{
    --spacing-bottom: 1rem;
    --bs-aspect-ratio: 69%;
    --img-width: 203px;
    --title-font-size: var(--fs-h6);
    --text-font-size: var(--fs-text6);
}
.media-list-item.item-sm .info-wrap .text{
    font-size: var(--fs-text6);
}

/* sm */
.media-list-item.item-xs{
    --spacing-bottom: 1rem;
    --bs-aspect-ratio: 100%;
    --img-width: 110px;
    --title-font-size: var(--fs-text6);
    --text-font-size: var(--fs-text6);

    gap: 1rem;
}
.media-list-item.item-xs .info-wrap{
    gap: 0.125rem;
}

/* no border */
.media-list-item.border-bottom-0{
    --border-bottom-width: 0;
    --spacing-bottom: 0;
}
/* ---------- /media list ---------- */


/* ---------- reels ---------- */
.reels-grid-item{
    --bs-aspect-ratio: 180.8%;
    position: relative;
}
.reels-grid-item .info-wrap{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.5rem;
    width: 100%;
    height: 100%;
    background: #FFF;
    background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(34, 29, 29, 0.24) 24%, rgba(0, 0, 0, 1) 100%);
    padding: 1.25rem;
    position: absolute;
    bottom: 0;
    left: 0;

    color: #fff;
}
.reels-grid-item .title{
    color: inherit;
    font-size: var(--fs-h6);
}
.reels-grid-item .text{
    color: inherit;
    font-size: var(--fs-text6);
}
.reels-grid-item .item-with-icon{
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-weight: bold;
}
/* ---------- /reels ---------- */


/* ---------- podcasts ---------- */
.podcasts-grid-item .img-wrap{
    --bs-aspect-ratio: 46.67%;
}
.podcasts-grid-item .info-wrap{
    gap: 1rem;
    padding-top: 1.625rem;
}
.podcasts-grid-item .info-wrap .text{
    font-size: 12px;
    line-height: 1.5;
}
.podcasts-grid-item .info-wrap .btn{
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-font-size: 12px;
    --btn-size: var(--element-size-3);

    margin-top: 0.375rem;
}
/* ---------- /podcasts ---------- */


/* ---------- item 2col with img ---------- */
.item-2col-with-img{
    --bs-gutter-x: 0;
}

.item-2col-with-img > div{
    display: flex;
    flex-direction: column;
}

.item-2col-with-img .img-wrap{
    --bs-aspect-ratio: 56.25%;

    position: relative;
}

.item-2col-with-img .info-wrap{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem;
    text-align: center;
}
.item-2col-with-img .info-wrap .link{
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.item-2col-with-img .info-wrap .link:hover{
    --bs-link-decoration: underline;
}
/* ---------- /item 2col with img ---------- */


/* ---------- indexed list ---------- */
.list-indexed{
    counter-reset: list-counter;

    color: #000;
    font-size: 1rem;
    font-weight: 500;
}
.list-indexed ul{
    list-style: none;
}
.list-indexed li{
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.list-indexed li::before{
    counter-increment: list-counter;
    content: counter(list-counter, decimal-leading-zero);

    color: var(--bs-danger);
    font-size: 4rem;
    font-weight: 300;
    line-height: 0.8;
}
/* ---------- /indexed list ---------- */



/* ==================== 5. content by pages ==================== */


/* ---------- home ---------- */

/* --- feed --- */
.news-feed{
    background: var(--bs-light);
    padding: 1.625rem 0;
}
.news-feed .row{
    --bs-gutter-x: 3rem;
}
.news-feed .row > div:not(:last-child){
    border-right: 1px solid var(--bs-dark);
}
.news-feed .item{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.news-feed .item > .text{
    color: inherit;
    line-height: 1.4;
    transition: color .15s ease-in-out;
}

/* --- featured --- */

.section-featured-media{
    margin-top: var(--section-spacing-bottom);
}

.section-featured-media .grid > .row .row{
    --bs-gutter-y: 1.75rem;
    --col-border-bottom-width: 1px;
    --col-border-bottom-color: var(--bs-border-color);
}

/* media item */
.section-featured-media .media-item{
    --border-bottom-width: 0;
    --spacing-bottom: 0;
    --title-font-size: var(--fs-h2);
}
.section-featured-media .media-item .img-wrap {
    --bs-aspect-ratio: 46.125%;
}
.section-featured-media .media-item .info-wrap{
    gap: 0.75rem;
    padding: 0.75rem 0 0;
}
.section-featured-media .media-item .title{
    margin-bottom: 1rem;
}
.section-featured-media .media-item .text-wrap{
    margin-bottom: 0.375rem;
}

/* grid item */
.section-featured-media .media-grid-item .info-wrap{
    gap: 0.625rem;
    padding: 0.875rem 0 0;
}

/* popular */
.popular-items-wrap{
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    background-color: var(--bs-light);
    padding: 1.25rem 0.75rem;
}
.popular-items-wrap > .title{
    margin-bottom: auto;

    font-family: var(--font-family);
    font-size: clamp(1rem, 2.25vw, 2rem);
    line-height: 1.1;
}
.popular-items-wrap .item{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.popular-items-wrap figure{
    --bs-aspect-ratio: 101%;
    flex-shrink: 0;
    width: 50%;
}
.popular-items-wrap .text{
    font-size: var(--fs-text6);
    font-weight: bold;
    line-height: 1.4;

    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
}

@media (min-width: 992px) {
    .section-featured-media .row .row:after{
        display: none;
    }
    .section-featured-media .row .row > div:last-child{
        --col-border-bottom-width: 0;
        --col-spacing-bottom: 0;
    }
}
/* ---------- /home ---------- */


/* ---------- news ---------- */
.section-featured-news{
    margin-bottom: 6.25rem;
}
.section-featured-news .media-item,
.section-featured-news .media-list-item{
    --border-bottom-width: 0;
    --spacing-bottom: 0;
}
.section-featured-news .grid > .row .row{
    --bs-gutter-y: 1rem;
    --col-border-bottom-width: 1px;
    --col-border-bottom-color: var(--bs-border-color);
    /*--col-spacing-bottom: 1rem;*/
}

/*.section-featured-news .media-item{
    display: flex;
    flex-direction: column;
}*/
.section-featured-news .media-item .img-wrap{
    --bs-aspect-ratio: 61.735%;
    /*margin-top: auto;*/
}
.section-featured-news .media-item .title{
    min-height: 56px;
    margin-bottom: 1.875rem;
    line-height: 1.4;
}
.section-featured-news .media-item .user-wrap{
    margin-bottom: 1.25rem;
}

@media (min-width: 992px) {
    .section-featured-news .row .row:after{
        display: none;
    }
    .section-featured-news .row .row > div:last-child{
        --col-border-bottom-width: 0;
        --col-spacing-bottom: 0;
    }
}
/* ---------- /news ---------- */


/* ---------- section ---------- */
/* ---------- /section ---------- */