/* page container */
BODY
{
    --padding: calc(40 * var(--cms-factor));
    BOX-SIZING: border-box;
    DISPLAY: grid;
    GRID-TEMPLATE-ROWS: auto auto 1fr auto;
    MARGIN: 0;
    OVERFLOW-X: clip;
    PADDING: 0 var(--padding);
}

/* reduce side padding */
@media (max-width: 800px)
{
    BODY
    {
        --padding: calc(20 * var(--cms-factor));
    }
}

/* 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)
{
    /* 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(48.5 * 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);
        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;
    MAX-WIDTH: calc(1280 * var(--cms-factor));
    PADDING: calc(20 * var(--cms-factor)) 0;
    WIDTH: 100%;
}

/* header background */
#head:before,
#head:after
{
    BOTTOM: 0;
    CONTENT: "";
    LEFT: 50%;
    POINTER-EVENTS: none;
    POSITION: absolute;
    TOP: 0;
    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
{
    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)
{
    /* hide functional checkbox */
    #menu-trigger,

    /* hide unused elements */
    #menu-out,
    #menu-label,
    #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;
        LINE-HEIGHT: 1.35;
        PADDING: calc(5 * var(--cms-factor)) calc(15 * var(--cms-factor));
    }

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

    /* 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(.menu-switch):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,

    /* 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(+ A.menu-switch)
    {
        PADDING-RIGHT: calc(35 * var(--cms-factor));
    }

    /* put open / close button on right side */
    #menu A.menu-switch
    {
        BACKGROUND: transparent !important;
        BOTTOM: 0;
        PADDING: 0;
        POSITION: absolute;
        RIGHT: 0;
        TOP: 0;
        WIDTH: calc(35 * var(--cms-factor));
    }

    /* display down-pointing arrow on open / close button */
    #menu A.menu-switch: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 A.menu-switch:focus:after,
    #menu A.menu-switch:has(+ UL:focus-within):after,
    #menu LI:hover > A.menu-switch:after
    {
        BACKGROUND-COLOR: var(--cms-color-alt);
    }

    /* make space for 2nd+ level open / close button on left side */
    #menu UL UL A:has(+ A.menu-switch)
    {
        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 A.menu-switch
    {
        LEFT: 0;
        RIGHT: auto;
    }

    /* display left-pointing arrow on 2nd+ level open / close button */
    #menu UL UL A.menu-switch: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
    {
        TRANSITION: background 0.5s, box-shadow 0.5s, color 0.5s !important;
    }
}

/* low resolution / touch screen main navigation */
@media (max-width: 800px) or (pointer: coarse)
{
    /* hide functional checkbox */
    #menu-trigger
    {
        DISPLAY: none;
    }

    /* overlay that closes the menu */
    #menu-out
    {
        BACKDROP-FILTER: blur(calc(25 * var(--cms-factor)));
        BACKGROUND: var(--cms-overlay-background);
        INSET: 0;
        OPACITY: 0;
        POSITION: fixed;
        TRANSFORM: translateX(100vw);
        TRANSITION: opacity 0.5s, transform 0s 0.5s;
        WILL-CHANGE: opacity, transform;
        Z-INDEX: 950;
    }

    /* menu open / close button */
    #menu-label,
    #menu-close
    {
        COLOR: var(--cms-color);
        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 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
    {
        LIST-STYLE: none;
        MARGIN: 0;
    }

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

    /* general menu link */
    #menu A
    {
        COLOR: var(--cms-color);
        DISPLAY: block;
        LINE-HEIGHT: calc(30 * var(--cms-factor));
        PADDING: calc(5 * var(--cms-factor)) 0;
    }

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

    /* 2nd+ level menu list container */
    #menu UL UL
    {
        BORDER-LEFT: calc(2.5 * var(--cms-factor)) solid var(--cms-color);
        PADDING-LEFT: calc(7.5 * var(--cms-factor));
    }

    /* 2nd+ level menu link */
    #menu UL UL A
    {
        FONT-WEIGHT: normal;
    }

    /* show overlay that closes the menu */
    #menu-trigger:checked ~ #menu-out
    {
        OPACITY: 1;
        TRANSFORM: translateX(0);
        TRANSITION: opacity 0.5s;
    }

    /* show menu */
    #menu-trigger:checked ~ #menu
    {
        POINTER-EVENTS: auto;
        TRANSFORM: translateX(0);
    }

    /* show menu close button */
    #menu-trigger:checked ~ #menu-close
    {
        OPACITY: 1;
        POINTER-EVENTS: auto;
    }

    /* hide 2nd+ menu level */
    #menu UL UL
    {
        CLIP-PATH: inset(100% 0 0 0);
        HEIGHT: 0;
        POINTER-EVENTS: none;
        TRANSFORM: translateY(-100%);
        TRANSITION: clip-path 0.5s, height 0.5s 0s, transform 0.5s;
        WILL-CHANGE: clip-path, height, transform;
    }

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

    /* show 2nd+ menu level that contains focus */
    #menu UL UL:focus-within
    {
        CLIP-PATH: inset(0 0 0 0);
        HEIGHT: 100%;
        POINTER-EVENTS: auto;
        TRANSFORM: translateY(0);
    }

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

    /* put open / close button on right side */
    #menu A.menu-switch
    {
        BACKGROUND: var(--cms-button-background);
        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 A.menu-switch:focus,
    #menu A.menu-switch:has(+ UL:focus-within)
    {
        BACKGROUND: var(--cms-button-background-alt);
    }

    /* display down-pointing arrow on open / close button */
    #menu A.menu-switch: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 A.menu-switch:focus:after,
    #menu A.menu-switch:has(+ UL:focus-within):after
    {
        BACKGROUND: var(--cms-button-color-alt);
    }
}

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

#banner:after
{
    --sizeh: calc(250 * var(--cms-factor));
    --sizew: max(50vw - min(50%, 640 * var(--cms-factor)), var(--padding));
    BACKDROP-FILTER: brightness(217%) contrast(200%) 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.25;
    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-image:has(+ #banner-image-mobile)
    {
        DISPLAY: none;
    }

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

/* iris animation */
@keyframes iris
{
      0% { CLIP-PATH: circle(  0% at 50% 50%); }
    100% { CLIP-PATH: circle(100% at 50% 50%); }
}

/* hero image */
@keyframes wiggle
{
      0% { TRANSFORM: translate(calc( 0.0 * var(--cms-factor)), calc( 0.0 * var(--cms-factor))); }
      5% { TRANSFORM: translate(calc( 0.3 * var(--cms-factor)), calc(-0.1 * var(--cms-factor))); }
     10% { TRANSFORM: translate(calc(-0.4 * var(--cms-factor)), calc( 0.2 * var(--cms-factor))); }
     15% { TRANSFORM: translate(calc( 0.1 * var(--cms-factor)), calc( 0.4 * var(--cms-factor))); }
     20% { TRANSFORM: translate(calc(-0.3 * var(--cms-factor)), calc(-0.4 * var(--cms-factor))); }
     25% { TRANSFORM: translate(calc( 0.5 * var(--cms-factor)), calc( 0.1 * var(--cms-factor))); }
     30% { TRANSFORM: translate(calc(-0.2 * var(--cms-factor)), calc( 0.3 * var(--cms-factor))); }
     35% { TRANSFORM: translate(calc( 0.4 * var(--cms-factor)), calc(-0.3 * var(--cms-factor))); }
     40% { TRANSFORM: translate(calc(-0.3 * var(--cms-factor)), calc( 0.2 * var(--cms-factor))); }
     45% { TRANSFORM: translate(calc( 0.2 * var(--cms-factor)), calc(-0.5 * var(--cms-factor))); }
     50% { TRANSFORM: translate(calc(-0.5 * var(--cms-factor)), calc( 0.3 * var(--cms-factor))); }
     55% { TRANSFORM: translate(calc( 0.3 * var(--cms-factor)), calc( 0.5 * var(--cms-factor))); }
     60% { TRANSFORM: translate(calc(-0.1 * var(--cms-factor)), calc(-0.4 * var(--cms-factor))); }
     65% { TRANSFORM: translate(calc( 0.5 * var(--cms-factor)), calc(-0.2 * var(--cms-factor))); }
     70% { TRANSFORM: translate(calc(-0.4 * var(--cms-factor)), calc( 0.1 * var(--cms-factor))); }
     75% { TRANSFORM: translate(calc( 0.2 * var(--cms-factor)), calc(-0.4 * var(--cms-factor))); }
     80% { TRANSFORM: translate(calc( 0.4 * var(--cms-factor)), calc( 0.2 * var(--cms-factor))); }
     85% { TRANSFORM: translate(calc(-0.5 * var(--cms-factor)), calc(-0.1 * var(--cms-factor))); }
     90% { TRANSFORM: translate(calc( 0.3 * var(--cms-factor)), calc( 0.1 * var(--cms-factor))); }
     95% { TRANSFORM: translate(calc(-0.1 * var(--cms-factor)), calc(-0.3 * var(--cms-factor))); }
    100% { TRANSFORM: translate(calc( 0.0 * var(--cms-factor)), calc( 0.0 * var(--cms-factor))); }
}

@keyframes noise
{
      0% { BACKGROUND-POSITION:   12px  -78px; }
      5% { BACKGROUND-POSITION:  148px -193px; }
     10% { BACKGROUND-POSITION:  -96px  234px; }
     15% { BACKGROUND-POSITION:  204px   71px; }
     20% { BACKGROUND-POSITION:  -29px  -47px; }
     25% { BACKGROUND-POSITION:  184px -105px; }
     30% { BACKGROUND-POSITION: -242px  103px; }
     35% { BACKGROUND-POSITION:  126px -215px; }
     40% { BACKGROUND-POSITION:  -41px  204px; }
     45% { BACKGROUND-POSITION: -186px  -22px; }
     50% { BACKGROUND-POSITION:  121px -186px; }
     55% { BACKGROUND-POSITION:   30px  170px; }
     60% { BACKGROUND-POSITION: -134px -202px; }
     65% { BACKGROUND-POSITION:   89px -142px; }
     70% { BACKGROUND-POSITION: -235px  111px; }
     75% { BACKGROUND-POSITION:  -37px   33px; }
     80% { BACKGROUND-POSITION:  193px -127px; }
     85% { BACKGROUND-POSITION:  -72px   95px; }
     90% { BACKGROUND-POSITION:  212px  -39px; }
     95% { BACKGROUND-POSITION: -163px  -56px; }
    100% { BACKGROUND-POSITION:   14px  242px; }
}

#banner-image:after,
#banner-image-mobile:after
{
    BACKGROUND-IMAGE: url("/design/heyer/grain.png");
    ANIMATION: iris 1.5s ease-in forwards,
               noise 0.833s steps(20) infinite;
    CONTENT: "";
    INSET: 0;
    MIX-BLEND-MODE: hard-light;
    OPACITY: 0.175;
    POINTER-EVENTS: none;
    POSITION: absolute;
}

#banner-image > IMG,
#banner-image-mobile > IMG
{
    ANIMATION: iris 1.5s ease-in forwards,
               wiggle 50s infinite ease-in-out;
    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));
    WILL-CHANGE: clip-path, transform;
}

/* 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;
    MAX-WIDTH: calc(1280 * var(--cms-factor));
    PADDING: var(--padding) 0;
    WIDTH: calc(100vw - var(--padding) * 2);
}

/* page footer */
#foot
{
    COLOR: var(--cms-color-alt);
    MARGIN: 0 auto;
    MAX-WIDTH: calc(1280 * var(--cms-factor));
    PADDING: calc(50 * var(--cms-factor)) 0 calc(100 * var(--cms-factor));
    WIDTH: 100%;
}

/* 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: -1;
}

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

#foot BUTTON,
#foot .button
{
    BOX-SHADOW: calc(2.5 * var(--cms-factor)) calc(2.5 * var(--cms-factor)) 0 #000000;
}

/* 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: calc(12 * var(--cms-factor));
    LINE-HEIGHT: var(--cms-line-height);
}

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

/* contact information */
#contact
{
    TEXT-ALIGN: center;
}

/* inquiry button */
#contact A.button
{
    FONT-WEIGHT: 700;
    MARGIN: 0;
}

/* 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;
    GAP: 0 calc(10 * var(--cms-factor));
    JUSTIFY-CONTENT: center;
    LIST-STYLE: none;
    MARGIN: 0;
}

/* meta link item */
#link LI
{
    MARGIN: 0;
}

/* meta link */
#link A
{
    FONT-WEIGHT: 500;
}

/* 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(75 * 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);
}