/* page container */
BODY
{
    --padding: clamp(15px, 5vw, 40 * var(--cms-factor));
    BACKGROUND: radial-gradient(ellipse, var(--cms-background) 0%, #242424 75%, #1c1c1c 100%);
    BACKGROUND-ATTACHMENT: fixed;
    BOX-SIZING: border-box;
    DISPLAY: grid;
    GRID-TEMPLATE-ROWS: auto auto 1fr auto;
    MARGIN: 0;
    MIN-HEIGHT: 100vh;
    OVERFLOW-X: clip;
    PADDING: 0 var(--padding);
    WIDTH: auto;
}

/* make page header stick to viewport top */
#sticky
{
    LEFT: 0;
    POSITION: sticky;
    RIGHT: 0;
    TOP: 0;
    Z-INDEX: 2000;
}

/* high resolution / mouse main navigation */
@media (min-width: 801px) and (pointer: fine),
       (min-width: 801px) and (hover: hover)
{
    /* prepare page header for transformation */
    #sticky
    {
        TRANSITION: transform 0.5s;
        WILL-CHANGE: transform;
    }

    /* class set via javascript */
    #sticky.minimize:not(:focus-within):not(:hover)
    {
        TRANSFORM: translateY(calc(15 * var(--cms-factor) - 100%));
    }

    /* keep inquiry link in viewport and highlight it */
    #sticky.minimize #menu1-LR1eCiJM
    {
        TRANSFORM: translateY(calc(60 * var(--cms-factor)));
    }

    #sticky.minimize:focus-within #menu1-LR1eCiJM,
    #sticky.minimize:hover #menu1-LR1eCiJM
    {
        TRANSFORM: translateY(0);
    }

    #sticky.minimize:not(:focus-within):not(:hover) #menu1-LR1eCiJM A
    {
        BACKGROUND-COLOR: var(--cms-color-highlight);
        BORDER-COLOR: var(--cms-color-highlight);
        BOX-SHADOW: calc(2.5 * var(--cms-factor)) calc(2.5 * var(--cms-factor)) 0 var(--cms-background-alt);
        COLOR: var(--cms-color-alt);
    }

    #sticky.minimize:not(:focus-within):not(:hover) #menu1-LR1eCiJM:has(> A.active):after
    {
        OPACITY: 0;
    }
}

/* page header */
#head
{
    ALIGN-ITEMS: center;
    DISPLAY: flex;
    GAP: calc(20 * var(--cms-factor));
    JUSTIFY-CONTENT: space-between;
    MARGIN: 0 auto;
    PADDING: calc(20 * var(--cms-factor)) 0;
    WIDTH: min(100%, 1280 * var(--cms-factor));
}

/* header background */
#head:before,
#head:after
{
    CONTENT: "";
    INSET: 0 auto 0 50%;
    POINTER-EVENTS: none;
    POSITION: absolute;
    WIDTH: 100vw;
    TRANSFORM: translateX(-50%);
    Z-INDEX: -1;
}

/* translucent header background */
#head:before
{
    BACKGROUND: var(--cms-background);
    OPACITY: 0.75;
    POINTER-EVENTS: none;
}

/* header background blur effect */
#head:after
{
    BACKDROP-FILTER: brightness(217%) contrast(200%) blur(calc(25 * var(--cms-factor)));
}

/* disable link underline in header */
#head A
{
    TEXT-DECORATION: none;
}

/* slim header */
@media (max-width: 800px)
{
    #head
    {
        PADDING: calc(15 * var(--cms-factor)) 0;
    }
}

/* home link */
#logo
{
    MARGIN-RIGHT: auto;
    MAX-WIDTH: calc(155 * var(--cms-factor));
    WIDTH: 100%;
}

/* smaller logo */
@media (max-width: 800px)
{
    #logo
    {
        MAX-WIDTH: calc(130 * var(--cms-factor));
    }
}

/* logo image fills home link width */
#logo > IMG
{
    WIDTH: 100%;
}

/* high resolution / mouse main navigation */
@media (min-width: 801px) and (pointer: fine),
       (min-width: 801px) and (hover: hover)
{
    /* hide unused elements */
    #menu-inquiry,
    #menu-open,
    #menu-backdrop,
    #menu-close
    {
        DISPLAY: none;
    }

    /* menu container */
    #menu
    {
        MARGIN: min(-5px, -5 * var(--cms-factor)) min(-15px, -15 * var(--cms-factor));
    }

    /* general menu list container */
    #menu UL
    {
        LIST-STYLE: none;
        MARGIN: 0;
    }

    /* general menu list item */
    #menu LI
    {
        MARGIN: 0;
    }

    /* general menu link */
    #menu A
    {
        DISPLAY: block;
        FONT-SIZE: 1.15em;
        LINE-HEIGHT: 1.35;
        PADDING: calc(5 * var(--cms-factor)) calc(15 * var(--cms-factor));
    }

    /* selected menu link */
    #menu A STRONG
    {
        COLOR: inherit;
    }

    /* base level menu list item */
    #menu > UL > LI
    {
        DISPLAY: inline-block;
        VERTICAL-ALIGN: middle;
    }

    /* base level menu link */
    #menu > UL > LI > A
    {
        COLOR: var(--cms-color);
        TEXT-TRANSFORM: uppercase;
        TRANSITION: background 0.5s, box-shadow 0.5s, color 0.5s;
        WILL-CHANGE: background, box-shadow, color;
    }

    /* highlight base level active menu link */
    #menu > UL > LI:has(> A.active):after
    {
        BACKGROUND: var(--cms-color);
        BOTTOM: 0;
        CONTENT: "";
        HEIGHT: calc(2.5 * var(--cms-factor));
        LEFT: calc(15 * var(--cms-factor));
        OPACITY: 1;
        POSITION: absolute;
        RIGHT: calc(15 * var(--cms-factor));
        TRANSITION: opacity 0.5s;
        WILL-CHANGE: opacity;
    }

    /* highlight base level activity of container */
    #menu > UL > LI:has(> A.container):hover > A,
    #menu > UL > LI:has(> A.container):focus-within > A
    {
        BACKGROUND-COLOR: var(--cms-color-highlight);
        BOX-SHADOW: calc(2.5 * var(--cms-factor)) calc(2.5 * var(--cms-factor)) 0 var(--cms-background-alt);
        COLOR: var(--cms-color-alt);
    }

    /* highlight base level activity of non-container */
    #menu > UL > LI > A:not(.container):not(BUTTON):hover
    {
        COLOR: var(--cms-color-highlight);
    }

    /* underline base level activity of non-container */
    @keyframes menu-underline
    {
          0% { WIDTH: 0; }
        100% { WIDTH: calc(100% - 30 * var(--cms-factor)); }
    }

    #menu > UL > LI:not(:has(A.container)):hover:after
    {
        ANIMATION: menu-underline 0.5s forwards;
        BACKGROUND: var(--cms-color-highlight);
        BOTTOM: 0;
        CONTENT: "";
        HEIGHT: calc(2.5 * var(--cms-factor));
        LEFT: calc(15 * var(--cms-factor));
        POINTER-EVENTS: none;
        POSITION: absolute;
    }

    /* 2nd+ level menu list container */
    #menu UL UL
    {
        BACKGROUND: var(--cms-color-highlight);
        BOX-SHADOW: calc(2.5 * var(--cms-factor)) calc(2.5 * var(--cms-factor)) 0 var(--cms-background-alt);
        COLOR: var(--cms-color-alt);
        MIN-WIDTH: 100%;
        POSITION: absolute;
        RIGHT: 0;
        WHITE-SPACE: nowrap;
        Z-INDEX: 1000;
    }

    /* 2nd+ level menu link */
    #menu UL UL A
    {
        COLOR: var(--cms-color-alt);
        DISPLAY: block;
        FONT-WEIGHT: normal;
        TEXT-ALIGN: right;
    }

    /* first 2nd+ level menu link in container */
    #menu LI LI:first-child A
    {
        PADDING-TOP: calc(var(--cms-vspacing) / 5);
    }

    /* last 2nd+ level menu link in container */
    #menu LI LI:last-child A
    {
        PADDING-BOTTOM: calc(var(--cms-vspacing) / 5);
    }

    /* highlight 2nd+ level active menu link */
    #menu UL UL A.active
    {
        FONT-WEIGHT: bold;
    }

    /* put 3rd+ level menu list container on left side */
    #menu UL UL UL
    {
        RIGHT: 100%;
        TOP: 0;
    }

    /* hide 2nd+ menu level */
    #menu LI UL,

    /* hide sub-subsequent item when hovered */
    #menu LI:hover LI UL,
    #menu LI LI:hover LI UL,
    #menu LI LI LI:hover LI UL,
    #menu LI LI LI LI:hover LI UL,
    #menu LI LI LI LI LI:hover LI UL
    {
        OPACITY: 0;
        POINTER-EVENTS: none;
        TRANSITION: opacity 0.5s;
        WILL-CHANGE: opacity;
    }

    /* show focused 2nd+ menu level */
    #menu A:focus ~ UL,
    #menu BUTTON:focus ~ UL,

    /* show 2nd+ menu level that contains focus */
    #menu UL:focus-within,

    /* show subsequent menu item on hover */
    #menu LI:hover UL,
    #menu LI LI:hover UL,
    #menu LI LI LI:hover UL,
    #menu LI LI LI LI:hover UL,
    #menu LI LI LI LI LI:hover UL,
    #menu LI LI LI LI LI LI:hover UL
    {
        OPACITY: 1;
        POINTER-EVENTS: auto;
        TRANSITION: opacity 0.5s;
        Z-INDEX: 1000;
    }

    /* make space for open / close button on right side */
    #menu A:has(+ BUTTON)
    {
        PADDING-RIGHT: calc(35 * var(--cms-factor));
    }

    /* put open / close button on right side */
    #menu BUTTON
    {
        ALL: initial;
        BOTTOM: 0;
        CURSOR: pointer;
        PADDING: 0;
        POSITION: absolute;
        RIGHT: 0;
        TOP: 0;
        WIDTH: calc(35 * var(--cms-factor));
    }

    /* display down-pointing arrow on open / close button */
    #menu BUTTON:after
    {
        BACKGROUND: var(--cms-color);
        CONTENT: "";
        INSET: 0;
        MASK-IMAGE: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 1024'><path fill='black' d='M512 320L320 512 128 320 0 448l320 320 320-320L512 320z'/></svg>");
        MASK-POSITION: center;
        MASK-REPEAT: no-repeat;
        MASK-SIZE: calc(10 * var(--cms-factor));
        POSITION: absolute;
    }

    /* highlight arrow on active open / close button */
    #menu BUTTON:focus:after,
    #menu BUTTON:has(+ UL:focus-within):after,
    #menu LI:hover > BUTTON:after
    {
        BACKGROUND-COLOR: var(--cms-color-alt);
    }

    /* make space for 2nd+ level open / close button on left side */
    #menu UL UL A:has(+ BUTTON)
    {
        PADDING-LEFT: calc(35 * var(--cms-factor));
        PADDING-RIGHT: calc(15 * var(--cms-factor));
    }

    /* put 2nd+ level open / close button on left side */
    #menu UL UL BUTTON
    {
        LEFT: 0;
        RIGHT: auto;
    }

    /* display left-pointing arrow on 2nd+ level open / close button */
    #menu UL UL BUTTON:after
    {
        BACKGROUND: var(--cms-color-alt);
        MASK-IMAGE: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 1024'><g transform='rotate(90 320 512)'><path fill='black' d='M512 320L320 512 128 320 0 448l320 320 320-320L512 320z'/></g></svg>");
    }

    /* inquiry link */
    #menu1-LR1eCiJM
    {
        TRANSITION: transform 0.5s;
        Z-INDEX: 1000;
        WILL-CHANGE: transform;
    }

    #menu1-LR1eCiJM A
    {
        BORDER: var(--cms-button-border);
        BORDER-COLOR: var(--cms-color);
        MARGIN-RIGHT: var(--cms-hpadding);
        TRANSITION: background 0.5s, border-color 0.5s, box-shadow 0.5s, color 0.5s !important;
    }

    #menu1-LR1eCiJM:after
    {
        DISPLAY: none;
    }

    #menu1-LR1eCiJM A:focus,
    #menu1-LR1eCiJM A:hover
    {
        BORDER-COLOR: var(--cms-color-highlight);
    }

    #menu1-LR1eCiJM A.active
    {
        BORDER-WIDTH: calc(2.5 * var(--cms-factor));
    }
}

/* low resolution / touch screen main navigation */
@media (max-width: 800px), (pointer: coarse), (hover: none)
{
    #menu-inquiry
    {
        VERTICAL-ALIGN: middle;
        FONT-SIZE: 1.25em;
        TEXT-TRANSFORM: uppercase;
    }

    /* menu open / close button */
    #menu-open,
    #menu-close
    {
        ALL: initial;
        COLOR: var(--cms-color);
        CURSOR: pointer;
        FONT-FAMILY: "Entypo";
        FONT-SIZE: calc(40 * var(--cms-factor));
        FONT-WEIGHT: normal;
        HEIGHT: calc(40 * var(--cms-factor));
        LINE-HEIGHT: calc(40 * var(--cms-factor));
        TEXT-ALIGN: center;
        WIDTH: calc(40 * var(--cms-factor));
    }

    /* menu container */
    #menu
    {
        BACKGROUND: var(--cms-background);
        BOTTOM: 0;
        BOX-SIZING: border-box;
        CONTAIN: content;
        MAX-WIDTH: calc(350 * var(--cms-factor));
        OVERFLOW-Y: auto;
        PADDING: calc(100 * var(--cms-factor))
                 calc(20 * var(--cms-factor))
                 calc(50 * var(--cms-factor));
        POINTER-EVENTS: none;
        POSITION: fixed;
        RIGHT: 0;
        TOP: 0;
        TRANSFORM: translateX(100%);
        TRANSITION: transform 0.5s;
        WIDTH: 100%;
        WILL-CHANGE: transform;
        Z-INDEX: 975;
    }

    /* menu backdrop */
    #menu-backdrop
    {
        BACKDROP-FILTER: blur(calc(25 * var(--cms-factor)));
        BACKGROUND: var(--cms-overlay-background);
        CONTENT: "";
        INSET: 0;
        OPACITY: 0;
        POINTER-EVENTS: none;
        POSITION: fixed;
        TRANSITION: opacity 0.5s;
        WILL-CHANGE: opacity;
        Z-INDEX: 950;
    }

    /* menu close button */
    #menu-close
    {
        BACKGROUND: var(--cms-button-background);
        COLOR: var(--cms-button-color);
        RIGHT: calc(20 * var(--cms-factor));
        OPACITY: 0;
        POINTER-EVENTS: none;
        POSITION: fixed;
        TOP: calc(20 * var(--cms-factor));
        TRANSITION: opacity 0.5s;
        WILL-CHANGE: opacity;
        Z-INDEX: 1000;
    }

    /* general menu list container */
    #menu UL
    {
        DISPLAY: flex;
        FLEX-DIRECTION: column;
        JUSTIFY-CONTENT: flex-end;
        LIST-STYLE: none;
        MARGIN: 0;
    }

    /* general menu list item */
    #menu LI
    {
        MARGIN: 0;
    }

    /* general menu link */
    #menu A
    {
        DISPLAY: block;
        FONT-SIZE: 1.15em;
        LINE-HEIGHT: calc(30 * var(--cms-factor));
        PADDING: calc(5 * var(--cms-factor)) 0;
        TEXT-TRANSFORM: uppercase;
    }

    /* highlight active menu link */
    #menu A.active
    {
        COLOR: var(--cms-color-highlight);
    }

    /* selected menu link */
    #menu A STRONG
    {
        COLOR: inherit;
    }

    /* show menu */
    #menu-open:focus ~ #menu,
    #menu:focus-within
    {
        POINTER-EVENTS: auto;
        TRANSFORM: translateX(0);
    }

    /* show menu backdrop */
    #menu-open:focus ~ #menu-backdrop,
    #menu:focus-within ~ #menu-backdrop,

    /* show menu close button */
    #menu-open:focus ~ #menu-close,
    #menu:focus-within ~ #menu-close
    {
        OPACITY: 1;
        POINTER-EVENTS: auto;
    }

    /* hide 2nd+ menu level */
    #menu UL UL
    {
        ALIGN-CONTENT: flex-end;
        HEIGHT: 0;
        OVERFLOW: clip;
        POINTER-EVENTS: none;
        TRANSITION: height 0.5s;
        WILL-CHANGE: height;
    }

    /* show active 2nd+ menu level */
    #menu LI:has(A.active) > UL,

    /* show focused 2nd+ menu level */
    #menu UL A:focus ~ UL,
    #menu UL BUTTON:focus ~ UL,

    /* show 2nd+ menu level that contains focus */
    #menu UL UL:focus-within
    {
        HEIGHT: auto;
        POINTER-EVENTS: auto;
    }

    /* 2nd+ level menu link */
    #menu UL UL A
    {
        PADDING-LEFT: calc(12.5 * var(--cms-factor));
        TEXT-TRANSFORM: none;
    }

    /* 2nd+ level last menu link */
    #menu UL UL LI:last-child A
    {
        PADDING-BOTTOM: calc(10 * var(--cms-factor));
    }

    /* 3rd+ level menu link */
    #menu UL UL UL A
    {
        PADDING-LEFT: calc(25 * var(--cms-factor));
    }

    /* make space for open / close button on right side */
    #menu A:has(+ BUTTON)
    {
        PADDING-RIGHT: calc(35 * var(--cms-factor));
    }

    /* put open / close button on right side */
    #menu BUTTON
    {
        ALL: initial;
        BACKGROUND: var(--cms-button-background);
        CURSOR: pointer;
        HEIGHT: calc(30 * var(--cms-factor));
        PADDING: 0;
        POSITION: absolute;
        RIGHT: 0;
        TOP: 5px;
        WIDTH: calc(30 * var(--cms-factor));
    }

    /* highlight active open / close button */
    #menu BUTTON:focus,
    #menu BUTTON:has(+ UL:focus-within)
    {
        BACKGROUND: var(--cms-button-background-alt);
    }

    /* display down-pointing arrow on open / close button */
    #menu BUTTON:after
    {
        BACKGROUND: var(--cms-button-color);
        CONTENT: "";
        INSET: 0;
        MASK-IMAGE: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 1024'><path fill='black' d='M512 320L320 512 128 320 0 448l320 320 320-320L512 320z'/></svg>");
        MASK-POSITION: center;
        MASK-REPEAT: no-repeat;
        MASK-SIZE: calc(10 * var(--cms-factor));
        POSITION: absolute;
    }

    /* highlight down-pointing arrow on active open / close button */
    #menu BUTTON:focus:after,
    #menu BUTTON:has(+ UL:focus-within):after
    {
        BACKGROUND: var(--cms-button-color-alt);
    }
}

@media (max-width: 400px)
{
    #head
    {
        GAP: calc(var(--cms-hpadding) / 2);
    }

    #menu-inquiry
    {
        FONT-SIZE: 0px;
        HEIGHT: calc(40 * var(--cms-factor));
    }

    #menu-inquiry:before
    {
        CONTENT: "\e8eb";
        DISPLAY: inline-block;
        FONT-FAMILY: "Entypo";
        FONT-SIZE: calc(32.5 * var(--cms-factor));
        LINE-HEIGHT: calc(40 * var(--cms-factor));
        TEXT-ALIGN: center;
        WIDTH: calc(40 * var(--cms-factor));
    }
}

/* hero area */
#banner
{
    DISPLAY: grid;
    MARGIN: 0 auto;
    WIDTH: min(100%, calc(1280 * var(--cms-factor)));
}

#banner:after
{
    --sizeh: calc(250 * var(--cms-factor));
    --sizew: max(50vw - 640 * var(--cms-factor), var(--padding));
    BACKDROP-FILTER: blur(calc(50 * var(--cms-factor)));
    CONTENT: "";
    INSET: calc(var(--sizeh) * -1) calc(var(--sizew) * -1);
    MASK-IMAGE: linear-gradient(to top,    black var(--sizeh), transparent var(--sizeh)),
                linear-gradient(to right,  black var(--sizew), transparent var(--sizew)),
                linear-gradient(to bottom, black var(--sizeh), transparent var(--sizeh)),
                linear-gradient(to left,   black var(--sizew), transparent var(--sizew));
    OPACITY: 0.65;
    POINTER-EVENTS: none;
    POSITION: absolute;
}

/* hero image container */
#banner-image,
#banner-image-mobile
{
    CONTAIN: strict;
    GRID-COLUMN: 1;
    GRID-ROW: 1;
    MIN-HEIGHT: calc(min(1280 * var(--cms-factor), 100vw - var(--padding) * 2) / 3);
    OVERFLOW: clip;
}

/* hide in high resolution display */
#banner-image-mobile
{
    DISPLAY: none;
}

/* adapt to low resolution display */
@media (max-width: 800px)
{
    #banner:after
    {
        --sizew: 0;
        INSET: calc(var(--sizeh) * -1) calc(var(--padding) * -1);
    }

    #banner-image,
    #banner-image-mobile
    {
        MARGIN: 0 calc(var(--padding) * -1);
    }

    #banner-image:has(+ #banner-image-mobile)
    {
        DISPLAY: none;
    }

    #banner-image-mobile
    {
        DISPLAY: block;
    }
}

#banner-image > IMG,
#banner-image-mobile > IMG
{
    HEIGHT: calc(100% + 1 * var(--cms-factor));
    LEFT: calc(-0.5 * var(--cms-factor));
    OBJECT-FIT: cover;
    POSITION: absolute;
    TOP: calc(-0.5 * var(--cms-factor));
    WIDTH: calc(100% + 1 * var(--cms-factor));
}

/* hero content */
#banner-content
{
    GRID-COLUMN: 1;
    GRID-ROW: 1;
    PADDING: calc(20 * var(--cms-factor));
    PLACE-SELF: center;
}

/* main content container */
#body
{
    COLOR: #d3cac1;
    CONTAIN: layout;
    MARGIN: 0 auto;
    PADDING: var(--padding) 0 calc(1.35 * var(--padding));
    WIDTH: min(100%, calc(1280 * var(--cms-factor)));
}

/* page footer */
#foot
{
    COLOR: var(--cms-color-alt);
    MARGIN: 0 auto;;
    PADDING: calc(30 * var(--cms-factor)) 0 calc(75 * var(--cms-factor));
    WIDTH: min(100%, calc(1280 * var(--cms-factor)));
    Z-INDEX: 1;
}

/* page footer background */
#foot:before
{
    BACKGROUND: var(--cms-background-alt);
    BOTTOM: 0;
    CONTENT: "";
    LEFT: 50%;
    POINTER-EVENTS: none;
    POSITION: absolute;
    TOP: 0;
    WIDTH: 100vw;
    TRANSFORM: translateX(-50%);
    Z-INDEX: 0;
}

#foot > DIV
{
    ALIGN-ITEMS: center;
    DISPLAY: flex;
    GAP: calc(20 * var(--cms-factor));
    JUSTIFY-CONTENT: space-around;
    TEXT-ALIGN: left;
}

#foot .button
{
    BACKGROUND: transparent;
    BORDER-COLOR: var(--cms-link-color);
    WHITE-SPACE: nowrap;
}

#foot .button:focus,
#foot .button:hover
{
    BORDER-COLOR: var(--cms-link-color-alt);
    COLOR: var(--cms-link-color-alt);
}

/* vertically organize footer elements */
@media (max-width: 1000px)
{
    #foot > DIV
    {
        ALIGN-ITEMS: center;
        FLEX-DIRECTION: column;
        TEXT-ALIGN: center;
    }
}

/* page footer link */
#foot A
{
    FONT-WEIGHT: normal;
    TEXT-DECORATION: none;
}

/* company address */
#address
{
    FONT-SIZE: smaller;
    LINE-HEIGHT: var(--cms-line-height);
    TEXT-ALIGN: center;
}

/* company logo */
#address IMG
{
    MARGIN-BOTTOM: calc(3.5 * var(--cms-factor));
    WIDTH: calc(150 * var(--cms-factor));
}

/* language selector */
#language
{
    MARGIN: 0 min(-5px, -5 * var(--cms-factor));
    TEXT-ALIGN: center;
    TEXT-TRANSFORM: uppercase;
}

/* language selector link */
#language A
{
    DISPLAY: inline-block;
    PADDING: 0 calc(5 * var(--cms-factor));
}

/* separate adjacent language selector links */
#language A + A
{
    BORDER-LEFT: calc(1.5 * var(--cms-factor)) solid var(--cms-color-alt);
}

/* meta link container */
#link UL
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    FONT-SIZE: 1.1em;
    GAP: 0 calc(15 * var(--cms-factor));
    JUSTIFY-CONTENT: space-between;
    LINE-HEIGHT: var(--cms-line-height);
    LIST-STYLE: none;
    MARGIN: 0;
    MAX-WIDTH: calc(450 * var(--cms-factor));
}

/* meta link item */
#link LI
{
    MARGIN: 0;
    MIN-WIDTH: calc(140 * var(--cms-factor));
}

/* horizontally organize links */
@media (max-width: 1000px)
{
    #link UL
    {
        JUSTIFY-CONTENT: center;
    }

    #link LI
    {
        MIN-WIDTH: auto;
    }
}

/* meta link */
#link A
{
    FONT-SIZE: 0.95em;
    FONT-WEIGHT: 500;
    LINE-HEIGHT: var(--cms-line-height);
}

/* active meta link effect */
#link A:focus,
#link A:hover
{
    TEXT-DECORATION: underline;
    TEXT-DECORATION-THICKNESS: calc(1.25 * var(--cms-factor));
    TEXT-UNDERLINE-OFFSET: calc(2 * var(--cms-factor));
}

/* landing page menu */
#menu-lp
{
    DISPLAY: flex;
    FLEX: 1 1 100%;
    FLEX-WRAP: wrap;
    FONT-SIZE: smaller;
    GAP: calc(10 * var(--cms-factor));
    JUSTIFY-CONTENT: center;
    LINE-HEIGHT: var(--cms-line-height);
    MARGIN-TOP: calc(100 * var(--cms-factor));
}

#menu-lp DIV
{
    FLEX-BASIS: 100%;
    TEXT-ALIGN: center;
}

#menu-lp A
{
    BORDER: var(--cms-button-border-width) var(--cms-button-border-style) var(--cms-link-color);
    PADDING: calc(var(--cms-vpadding) / 2) calc(var(--cms-hpadding) / 2);
    TEXT-ALIGN: center;
}

#menu-lp A:focus,
#menu-lp A:hover
{
    BORDER: var(--cms-button-border-width-alt) var(--cms-button-border-style-alt) var(--cms-link-color-alt);
}

/* top button */
#goto-top
{
    BOTTOM: calc(10 * var(--cms-factor));
    FONT-FAMILY: "Entypo";
    FONT-SIZE: calc(40 * var(--cms-factor));
    FONT-WEIGHT: normal;
    HEIGHT: calc(40 * var(--cms-factor));
    LEFT: calc(50% - 20 * var(--cms-factor));
    LINE-HEIGHT: calc(40 * var(--cms-factor));
    POSITION: fixed;
    TEXT-ALIGN: center;
    TEXT-DECORATION: none;
    TRANSFORM: translateY(calc(50 * var(--cms-factor)));
    TRANSITION: transform 0.5s;
    WIDTH: calc(40 * var(--cms-factor));
    WILL-CHANGE: transform;
}

/* slide in top button */
#goto-top.goto-top-show
{
    TRANSFORM: translateY(0);
}

/* subtemplate corrections */
BUTTON.dialog-close:focus:after,
BUTTON.dialog-close:hover:after,
BUTTON.dialog-close:focus:before,
BUTTON.dialog-close:hover:before
{
    BACKGROUND-COLOR: var(--cms-color-highlight);
}

BUTTON.dialog-close:focus:before,
BUTTON.dialog-close:hover:before
{
    CLIP-PATH: none;
    TRANSFORM: rotate(45deg);
}

DIV.layout-center > DIV
{
    OVERFLOW-X: visible !important;
}

/* special */
DIV.avv
{
    BACKGROUND: var(--cms-background-alt);
    BORDER: var(--cms-button-border-width) dotted var(--cms-color);
    MARGIN-BOTTOM: calc(var(--cms-vspacing) / 2) !important;
    MAX-HEIGHT: 65vh;
    OVERFLOW-Y: scroll;
    PADDING: var(--cms-vpadding) var(--cms-hpadding);
}

/* trrrippy scroll effect */
/*
#scrollfx
{
    DISPLAY: none;
}

IMG
{
    FILTER: url(#scrollfx-filter);
}
*/