@media all {

    /* Global site variables */    

    :root {

        /* Colors */

        --color-white-rgb: 255, 255, 255;
        --color-white: rgb(var(--color-white-rgb));
        --color-gray-light-rgb: 200, 200, 200;
        --color-gray-light: rgb(var(--color-gray-light-rgb));
        --color-gray-rgb: 128, 128, 128;
        --color-gray: rgb(var(--color-gray-rgb));
        --color-gray-middark-rgb: 38, 38, 38;
        --color-gray-middark: rgb(var(--color-gray-middark-rgb));
        --color-gray-dark-rgb: 22, 22, 22;
        --color-gray-dark: rgb(var(--color-gray-dark-rgb));

        --color-1-rgb: 255, 135, 0;
        --color-1: rgb(var(--color-1-rgb));
        --color-1-hover-rgb: 191, 101, 0;
        --color-1-hover: rgb(var(--color-1-hover-rgb));

        --color-2-rgb: 144, 0, 144;
        --color-2: rgb(var(--color-2-rgb));
        --color-2-hover-rgb: 108, 0, 108;
        --color-2-hover: rgb(var(--color-2-hover-rgb));

        --color-focus-rgb: 0, 255, 255;
        --color-focus: rgb(var(--color-focus-rgb));

        /* Page */

        --page-width: 100vw;
        --page-gap: var(--size-8);
        --page-padding: var(--size-10);

        /* Header */

        --header-background: var(--color-white);
        --header-background-scrolled: rgba(var(--color-white-rgb), .9);

        /* Naigation variable */

        --navigation-item-padding-x: 1rem;
        --navigation-item-padding-y: .625rem;

        /* Content */

        --content-width: 72.5rem;
        --content-width-outer: calc(var(--content-width) + 2 * var(--page-padding));

        --logo-height: min(var(--size-8), 3.2rem);
        --logo-height-scrolled: var(--logo-height); /* not ready to use */
        --logo-padding: var(--size-4);

        /* Container */

        --container-gap: var(--size-5);

        /* Gallery */

        --gallery-gap: var(--size-2);

        /* Relational gaps */

        --gap-gallery-text: var(--size-4);
        --gap-header-bodytext: var(--size-4);

        /* Fonts */

        --font-family-body: 'Source Sans 3', sanf-serif;
        --font-family-header: 'Source Sans 3', sanf-serif;

        /* Filter */

        --backdrop-blur: blur(.125rem);

        /* Transitions */

        --transition-default: all .2s ease-in-out;
        --transition-slow: all .6s ease-in-out;
    }

    /* Dynamic font scaling */

    :root,
    body,
    .ce-header * {
        --dynamic-clamp-start: 48; /*rem*/
        --dynamic-clamp-end: 95; /*rem*/

        --dynamic-size-diff: calc(var(--dynamic-size-max) - var(--dynamic-size-min));
        --dynamic-clamp-diff: calc(var(--dynamic-clamp-end) - var(--dynamic-clamp-start));
        --dynamic-size-clamp: calc((var(--dynamic-size-min) * 1rem) + var(--dynamic-size-diff) * ((100vw - (var(--dynamic-clamp-start) * 1rem)) / var(--dynamic-clamp-diff)));
        --dynamic-size-scaler: clamp((var(--dynamic-size-min) * 1rem), var(--dynamic-size-clamp), (var(--dynamic-size-max) * 1rem));
    }

    /* Dynamic size scaling */

    :root {
        --dynamic-size-min: .25; /*rem*/
        --dynamic-size-max: .5; /*rem*/

        --size-1: var(--dynamic-size-scaler); /* default-values 4 -> 8 */
        --size-2: calc(var(--size-1) * 2); /* default-values 8 -> 16 */
        --size-3: calc(var(--size-1) * 3); /* default-values 12 -> 24 */
        --size-4: calc(var(--size-1) * 4); /* default-values 16 -> 32 */
        --size-5: calc(var(--size-1) * 5); /* default-values 20 -> 40 */
        --size-6: calc(var(--size-1) * 6); /* default-values 24 -> 48 */
        --size-7: calc(var(--size-1) * 7); /* default-values 28 -> 56 */
        --size-8: calc(var(--size-1) * 8); /* default-values 32 -> 64 */
        --size-9: calc(var(--size-1) * 9); /* default-values 36 -> 72 */
        --size-10: calc(var(--size-1) * 10); /* default-values 40 -> 80 */
        --size-12: calc(var(--size-1) * 12); /* default-values 48 -> 96 */
        --size-14: calc(var(--size-1) * 14); /* default-values 56 -> 112 */
        --size-16: calc(var(--size-1) * 16); /* default-values 64 -> 128 */
        --size-18: calc(var(--size-1) * 18); /* default-values 72 -> 144 */
        --size-20: calc(var(--size-1) * 20); /* default-values 80 -> 160 */
    }

    body {
        --dynamic-size-min: 1; /*rem*/
        --dynamic-size-max: 1.125; /*rem*/
    }

    body,
    .ce-header * {
        font-size: var(--dynamic-size-scaler);
    }

    .ce-header :is(h1, .h1) {
        --dynamic-size-min: 1.75; /*rem*/
        --dynamic-size-max: 4.25; /*rem*/
    }

    .ce-header :is(h2, .h2) {
        --dynamic-size-min: 1.5; /*rem*/
        --dynamic-size-max: 2.25; /*rem*/
    }

    .ce-header :is(h3, .h3) {
        --dynamic-size-min: 1.25; /*rem*/
        --dynamic-size-max: 1.375; /*rem*/
    }

    .ce-header :is(h4, .h4) {
        --dynamic-size-min: 1.125; /*rem*/
        --dynamic-size-max: 1.25; /*rem*/
    }

    .ce-header :is(h5, .h5) {
        --dynamic-size-min: 1; /*rem*/
        --dynamic-size-max: 1.125; /*rem*/
    }
}


/* ###################
##### Bootstrap ######
################### */
@layer bootstrap {

    :root {
        --bs-border-width: .125rem;
        --bs-link-color-rgb: var(--color-1-rgb);        
        --bs-link-hover-color-rgb: var(--color-1-hover-rgb);
        --bs-body-font-family: var(--font-family-body);
    }

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: var(--content-width-outer);
    }


    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        padding-right: var(--page-padding);
        padding-left: var(--page-padding);
    }

    .btn-primary,
    .btn-secondary,
    .btn-link {
        /*! --bs-btn-focus-shadow-rgb: var(--color-focus-rgb) */
    }

    .btn-primary {
        --bs-btn-color: var(--color-white);
        --bs-btn-bg: var(--color-1);
        --bs-btn-border-color: var(--color-1);
        --bs-btn-focus-color: var(--color-white);
        --bs-btn-focus-bg: var(--color-1-hover);
        --bs-btn-focus-border-color: var(--color-1-hover);
        --bs-btn-hover-color: var(--color-white);
        --bs-btn-hover-bg: var(--color-1-hover);
        --bs-btn-hover-border-color: var(--color-1-hover);
        --bs-btn-active-color: var(--color-white);
        --bs-btn-active-bg: var(--color-1-hover);
        --bs-btn-active-border-color: var(--color-1-hover);
    }

    .btn-secondary {
        --bs-btn-color: var(--color-1);
        --bs-btn-bg: transparent;
        --bs-btn-border-color: var(--color-1);
        --bs-btn-focus-color: var(--color-white);
        --bs-btn-focus-bg: var(--color-1-hover);
        --bs-btn-focus-border-color: var(--color-1-hover);
        --bs-btn-hover-color: var(--color-white);
        --bs-btn-hover-bg: var(--color-1-hover);
        --bs-btn-hover-border-color: var(--color-1-hover);
        --bs-btn-active-color: var(--color-white);
        --bs-btn-active-bg: var(--color-1-hover);
        --bs-btn-active-border-color: var(--color-1-hover);
    }

    .btn-link {
        --bs-btn-color: var(--color-1);
        --bs-btn-focus-color: var(--color-1-hover);
        --bs-btn-hover-color: var(--color-1-hover);
        --bs-btn-active-color: var(--color-1-hover);
    }
    
    .page-footer {
        --bs-link-color-rgb: var(--color-white-rgb);
    }
    
    .page-footer .nav-link {        
        --bs-nav-link-color: var(--ce-color-fg);
        --bs-nav-link-hover-color: var(--color-1-hover);
    }

}

/* ##############
##### Page ######
############## */
@media all {
    :root {
    }
}

/* ##################
##### Container #####
################## */
@media all {
    :root {
    }
    .ce-grid-fullwidth-bg {
        --ce-color-bg: transparent;
    }
}

/* ##################
##### Elements ######
################## */
@media all {
    :root {
        --ce-color-fg: var(--color-gray-dark);
        --ce-color-bg: transparent;
        --ce-color-link: var(--color-1);
    }

    .ce-element {
        --ce-inverted-color: var(--bs-body-bg);
        --ce-inverted-bg: var(--bs-body-color);
        --ce-margin-extra-small: 1rem;
        --ce-margin-small: calc(0.5 * var(--page-gap));
        --ce-margin-medium: var(--page-gap);
        --ce-margin-large: calc(1.5 * var(--page-gap));
        --ce-margin-extra-large: calc(2 * var(--page-gap));
        --ce-layout-box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.125);
        --ce-layout-box-padding: var(--size-4);
        --ce-slider-padding: var(--ce-layout-box-padding);
    }
}

@media(min-width: 48rem) {
}

@media(min-width: 62rem) {
}

/* ###################
##### Textmedia ######
################### */
@media all {
    .ce-textmedia {
        --ce-textmedia-nowrap-wrap: wrap;
        --ce-gallery-margin-horizontal: 1rem
    }
}

@media(min-width: 48rem) {
    .ce-textmedia {
        --ce-textmedia-nowrap-wrap: nowrap
    }

    .ce-textmedia {
        --ce-gallery-margin-horizontal: 1.5rem
    }
}    

/* ######################
##### Content menu ######
###################### */
@media all {
    .ce-content-menu {
        --ce-content-menu-menu-offset: 5rem;
        --ce-content-menu-trigger-offset: -7.5rem
    }

    .ce-content-menu {
        --ce-content-menu-menu-offset: calc(var(--scroll-margin));
        --ce-content-menu-trigger-offset: calc(-1 * (var(--scroll-margin) + var(--page-gap)))
    }
}

/* ####################
##### Expandable ######
#################### */
@media all {
    .ce-expandable {
        --ce-expandable-button-color: var(--bs-body-color);
        --ce-expandable-button-bg: var(--bs-body-bg);
        --ce-expandable-button-border-color: var(--bs-gray);
        --ce-expandable-icon-color: var(--bs-body-bg);
        --ce-expandable-icon-bg: var(--bs-body-color);
        --ce-expandable-gradient-bg: var(--ce-color-bg)
    }
}

/* #################
##### Gallery ######
################# */
@media all {
    .ce-gallery {
        --ce-gallery-margin-vertical: 1rem;
        --ce-gallery-gutter: 0.75rem;
        --ce-gallery-width: 100%;
        --ce-gallery-icon-size: 1rem;
        --ce-gallery-column-width: 100%
    }

    .ce-intext .ce-gallery {
        --ce-gallery-width: calc(50% - (var(--container-gap) / 2))
    }

    .ce-nowrap .ce-gallery {
        --ce-gallery-width: 100%
    }

    .ce-gallery[data-ce-columns="2"] {
        --ce-gallery-column-width: calc(50% - (var(--ce-gallery-gutter) / 2));
    }

    .ce-gallery[data-ce-columns="3"] {
        --ce-gallery-column-width: calc(50% - (var(--ce-gallery-gutter) / 2))
    }

    .ce-gallery[data-ce-columns="4"] {
        --ce-gallery-column-width: calc(50% - (var(--ce-gallery-gutter) / 2))
    }
}

@media(min-width: 30rem) {
    .ce-gallery[data-ce-columns="3"] {
        --ce-gallery-column-width: calc(33.3333% - (var(--ce-gallery-gutter) * 2 / 3))
    }
}

@media(min-width: 48rem) {
    .ce-nowrap .ce-gallery {
        --ce-gallery-width: calc(50% - (var(--container-gap) / 2))
    }

    .ce-gallery[data-ce-columns="4"] {
        --ce-gallery-column-width: calc(25% - (var(--ce-gallery-gutter) * 3 / 4))
    }
}

@media(min-width: 62rem) {
    .ce-intext .ce-gallery {
        --ce-gallery-width: calc(33.3333% - (var(--container-gap) * 2 / 3))
    }

    .ce-nowrap .ce-gallery {
        --ce-gallery-width: calc(33.3333% - (var(--container-gap) * 2 / 3))
    }
}

/* ###############
##### Media ######
############### */
@media all {
    .ce-media {
        --ce-media-icon-size: 1rem;
        --ce-media-copyright-size: 0.5rem;
        --ce-media-overlay-offset: 0.5rem;
    }
}

/* ###############
##### Frame ######
############### */
@media all {
    .ce-element {
        --ce-inverted-color: var(--color-white);
        --ce-inverted-bg: var(--color-gray-dark);
    }

    .ce-inverted {
        --ce-color-fg: var(--ce-inverted-color);
        /*! --ce-color-bg: var(--ce-inverted-bg); */
        --ce-color-link: var(--ce-inverted-color);
    }    
}

/* ################
##### Layout ######
################ */
@media all {
    .ce-layout-box {
        --ce-color-fg: var(--color-gray-dark);
        --ce-color-bg: var(--color-white);
        --ce-color-link: var(--color-1);
    }

    .ce-layout-box.ce-inverted {
        --ce-color-fg: var(--ce-inverted-color);
        --ce-color-bg: var(--ce-inverted-bg);
        --ce-color-link: var(--ce-inverted-color);
    }
}

/* ################
##### Header ######
################ */
@media all {
    .page-header-sticky {
        /*! --min-window-height-px: 460; */
        /*! --page-header-height: 3.75rem */
    }

    .page-header-searchbox {
        --page-header-searchbox-width: 20rem;
        /*! --page-header-searchbox-height: 2.5rem; */
    }
}

@media(min-width: 30rem) {}

@media(min-width: 48rem) {
    .page-header-sticky {
        /*! --page-header-height: 6.875rem; */
        /*! --min-window-height-px: 600 */
    }
}

@media(min-width: 62rem) {
    .page-header-sticky {
        /*! --page-header-height: 9.375rem; */
        /*! --min-window-height-px: 760 */
    }
}

/* ##############
##### Page ######
############## */
@media all {
    :root {
        --body-max-width: 120rem
    }

    [class*="container"] {
        --bs-gutter-x: var(--page-padding);
    }

    :is(.page-stage) [class*="container"],
    [class*="container"] [class*="container"] {
        padding-inline: 0;
        max-width: 100%;
    }

    .row {
        --bs-gutter-x: var(--container-gap);
    }
}

@media(min-width: 30rem) {}

@media(min-width: 48rem) {}

@media(min-width: 62rem) {}

/* ################
##### Footer ######
################ */
@media all {
    .page-footer {
        --ce-color-fg: var(--color-white);
        --ce-color-link: var(--ce-color-fg);
    }
}