:root
{
    --tpl-menu-background: rgba(0, 0, 0, 0.85);
    --tpl-menu-column-width: calc(175 * var(--cms-factor));

    --tpl-button-color: var(--cms-color-alt);
    --tpl-button-color-alt: var(--cms-link-color-alt);
    --tpl-button-color-active: var(--cms-color);
    --tpl-button-color-active-alt: var(--cms-color);

    --tpl-button-background: rgba(0, 0, 0, 0.65);
    --tpl-button-background-alt: var(--tpl-button-background);
    --tpl-button-background-active: var(--cms-color-alt);
    --tpl-button-background-active-alt: var(--cms-link-color-alt);

    --tpl-button-border: var(--cms-button-border-width) var(--cms-button-border-style) var(--cms-color-alt);
    --tpl-button-border-alt: var(--cms-button-border-width) var(--cms-button-border-style-alt) var(--cms-link-color-alt);
    --tpl-button-border-active: var(--cms-button-border-width) var(--cms-button-border-style) var(--cms-color-alt);
    --tpl-button-border-active-alt: var(--cms-button-border-width) var(--cms-button-border-style-alt) var(--cms-link-color-alt);

    --tpl-button-font-size: 0.9em;
    --tpl-button-line-height: calc(20 * var(--cms-factor));
    --tpl-button-hpadding: calc(20 * var(--cms-factor));
    --tpl-button-vpadding: calc(7.5 * var(--cms-factor));
    --tpl-button-hspacing: calc(5 * var(--cms-factor));
    --tpl-button-vspacing: calc(5 * var(--cms-factor));
    --tpl-button-size-inner: calc(var(--tpl-button-line-height) + var(--tpl-button-vpadding) * 2);
    --tpl-button-size-outer: calc(var(--tpl-button-size-inner) + var(--cms-button-border-width) * 2 + var(--tpl-button-vspacing) * 2);

    --tpl-switch-color: var(--cms-color-alt);
    --tpl-switch-color-alt: var(--cms-color);
    --tpl-switch-color-active: var(--cms-color);
    --tpl-switch-color-active-alt: var(--cms-color);
    --tpl-switch-background: rgba(255, 255, 255, 0.15);
    --tpl-switch-background-alt: var(--cms-link-color-alt);
    --tpl-switch-background-active: var(--cms-color-alt);
    --tpl-switch-background-active-alt: var(--cms-link-color-alt);
}

HTML
{

}

BODY
{
    MARGIN: 0;
}

#top
{
    MIN-HEIGHT: 75vh;
}

/****************************************
  main menu
****************************************/

#menu-trigger
{
    DISPLAY: none;
}

@keyframes menu-label-blink
{
      0% { TRANSFORM: rotate( 0);    }
     20% { TRANSFORM: rotate(-8deg); }
     30% { TRANSFORM: rotate( 8deg); }
     40% { TRANSFORM: rotate(-6deg); }
     50% { TRANSFORM: rotate( 6deg); }
     60% { TRANSFORM: rotate(-4deg); }
     70% { TRANSFORM: rotate( 4deg); }
     80% { TRANSFORM: rotate(-2deg); }
     90% { TRANSFORM: rotate( 2deg); }
    100% { TRANSFORM: rotate( 0);    }
}

#menu-label
{
    ANIMATION: menu-label-blink 1s ease 0.5s;
    BACKDROP-FILTER: blur(calc(2.5 * var(--cms-factor)));
    BACKGROUND: var(--tpl-button-background);
    BORDER: var(--tpl-button-border);
    COLOR: var(--tpl-button-color);
    FONT-SIZE: var(--tpl-button-font-size);
    LEFT: 0;
    LINE-HEIGHT: var(--tpl-button-line-height);
    MARGIN: var(--tpl-button-vspacing) var(--tpl-button-hspacing);
    PADDING: var(--tpl-button-vpadding) var(--tpl-button-hpadding);
    POSITION: fixed;
    TEXT-DECORATION: none;
    TEXT-TRANSFORM: uppercase;
    TOP: 0;
    Z-INDEX: 550;
}

#menu-label:focus,
#menu-label:hover
{
    BACKGROUND: var(--tpl-button-background-alt);
    BORDER: var(--tpl-button-border-alt);
    COLOR: var(--tpl-button-color-alt);
}

#menu-out
{
    BACKGROUND: var(--cms-overlay-background);
    HEIGHT: 100%;
    LEFT: 0;
    POSITION: fixed;
    TOP: 0;
    TRANSFORM: none !important;
    WIDTH: 100%;
    Z-INDEX: 450 !important;
}

#menu
{
    FONT-SIZE: var(--tpl-button-font-size);
    HEIGHT: 100%;
    LEFT: 0;
    LINE-HEIGHT: var(--tpl-button-line-height);
    OVERFLOW: auto;
    POINTER-EVENTS: none;
    POSITION: fixed;
    TOP: 0;
    WIDTH: 100%;
    Z-INDEX: 500 !important;
}

#menu *
{
    POINTER-EVENTS: all;
}

#menu UL
{
    BACKGROUND: var(--tpl-menu-background);
    BOX-SIZING: border-box;
    HEIGHT: 100vh;
    LIST-STYLE: none;
    MARGIN: 0;
    PADDING: calc(var(--tpl-button-size-outer) * 2 - var(--tpl-button-vspacing)) 0 0;
    POSITION: absolute;
    TOP: 0;
    WIDTH: var(--tpl-menu-column-width);
}

#menu LI
{
    DISPLAY: block;
    MARGIN: 0;
    POSITION: static;
}

#menu A
{
    BORDER: var(--tpl-button-border);
    COLOR: var(--tpl-button-color);
    DISPLAY: block;
    MARGIN: 0 var(--tpl-button-hspacing) var(--tpl-button-vspacing);
    PADDING: var(--tpl-button-vpadding) var(--tpl-button-hpadding);
    TEXT-DECORATION: none;
}

#menu A:focus,
#menu A:hover
{
    BACKGROUND: var(--tpl-button-background-alt);
    BORDER: var(--tpl-button-border-alt);
    COLOR: var(--tpl-button-color-alt);
}

#menu A.active
{
    BACKGROUND: var(--tpl-button-background-active);
    BORDER: var(--tpl-button-border-active);
    COLOR: var(--tpl-button-color-active);
}

#menu A.active:focus,
#menu A.active:hover
{
    BACKGROUND: var(--tpl-button-background-active-alt);
    BORDER: var(--tpl-button-border-active-alt);
    COLOR: var(--tpl-button-color-active-alt);
}

/* subsequent levels */
#menu LI UL
{
    MARGIN-LEFT: var(--tpl-menu-column-width);
}

#menu LI UL A
{
    MARGIN-LEFT: 0;
}

/* hide / show */
@keyframes menu-init
{
      0% { VISIBILITY: hidden;  }
    100% { VISIBILITY: visible; }
}

@keyframes menu-anim-in
{
      0% { LEFT: 0; OPACITY: 0; POINTER-EVENTS: none; TRANSFORM: translateX(calc(var(--tpl-menu-column-width) * -1)); Z-INDEX: -1; }
    100% { LEFT: 0; OPACITY: 1; POINTER-EVENTS: none; TRANSFORM: translateX(0);                                       Z-INDEX: -1; }
}

@keyframes menu-anim-out
{

      0% { LEFT: 0; OPACITY: 1; POINTER-EVENTS: none; TRANSFORM: translateX(0);                                       Z-INDEX: -1; }
    100% { LEFT: 0; OPACITY: 0; POINTER-EVENTS: none; TRANSFORM: translateX(calc(var(--tpl-menu-column-width) * -1)); Z-INDEX: -1; }
}

#menu-out,
#menu,
#menu A.menu-switch-off + UL,
#menu LI UL,
#menu LI:not(.menu-ignore-hover):hover LI UL,
#menu LI LI:not(.menu-ignore-hover):hover LI UL,
#menu LI LI LI:not(.menu-ignore-hover):hover LI UL,
#menu LI LI LI LI:not(.menu-ignore-hover):hover LI UL,
#menu LI LI LI LI LI:not(.menu-ignore-hover):hover LI UL
{
    ANIMATION: menu-anim-out 0.5s, menu-init 1ms paused;
    LEFT: -100vw;
    OPACITY: 0.1;
}

#menu-trigger:checked ~ #menu-out,
#menu-trigger:checked ~ #menu,
#menu A.menu-switch-on + UL,
#menu LI:not(.menu-ignore-hover):hover UL,
#menu LI LI:not(.menu-ignore-hover):hover UL,
#menu LI LI LI:not(.menu-ignore-hover):hover UL,
#menu LI LI LI LI:not(.menu-ignore-hover):hover UL,
#menu LI LI LI LI LI:not(.menu-ignore-hover):hover UL,
#menu LI LI LI LI LI LI:not(.menu-ignore-hover):hover UL
{
    ANIMATION: menu-anim-in 0.5s, menu-init 1ms forwards;
    LEFT: 0;
    OPACITY: 1;
}

/* open / close */
#menu A.container
{
    PADDING-RIGHT: calc(var(--tpl-button-size-inner) + var(--tpl-button-hpadding));
}

#menu A.menu-switch-off,
#menu A.menu-switch-on
{
    BACKGROUND: var(--tpl-switch-background);
    BORDER: none;
    HEIGHT: var(--tpl-button-size-inner);
    MARGIN: calc((var(--tpl-button-size-inner) + var(--cms-button-border-width) + var(--tpl-button-vspacing)) * -1)
            calc(var(--cms-button-border-width) + var(--tpl-button-hspacing))
            0 0;
    PADDING: 0;
    POSITION: absolute;
    RIGHT: 0;
    WIDTH: var(--tpl-button-size-inner);
}

#menu A.menu-switch-off:focus,
#menu A.menu-switch-off:hover,
#menu A:focus + A.menu-switch-off,
#menu A:hover + A.menu-switch-off
{
    BACKGROUND: var(--tpl-switch-background-alt);
}

#menu A.menu-switch-on
{
    BACKGROUND: var(--tpl-switch-background-active);
}

#menu A.menu-switch-on:focus,
#menu A.menu-switch-on:hover,
#menu A:focus + A.menu-switch-on,
#menu A:hover + A.menu-switch-on
{
    BACKGROUND: var(--tpl-switch-background-active-alt);
}

#menu A.menu-switch-off:after,
#menu A.menu-switch-on:after
{
    --tpl-temp: calc(var(--tpl-button-size-inner) / 3);
    BACKGROUND: var(--tpl-switch-color);
    CLIP-PATH: polygon(90% 50%, 40% 0, 30% 10%, 70% 50%, 30% 90%, 40% 100%);
    CONTENT: "";
    HEIGHT: var(--tpl-temp);
    POSITION: absolute;
    LEFT: var(--tpl-temp);
    TOP: var(--tpl-temp);
    WIDTH: var(--tpl-temp);
}

#menu A.menu-switch-off:focus:after,
#menu A.menu-switch-off:hover:after,
#menu A:focus + A.menu-switch-off:after,
#menu A:hover + A.menu-switch-off:after
{
    BACKGROUND: var(--tpl-switch-color-alt);
}

#menu A.menu-switch-on:after
{
    BACKGROUND: var(--tpl-switch-color-active);
}

#menu A.menu-switch-on:focus:after,
#menu A.menu-switch-on:hover:after,
#menu A:focus + A.menu-switch-on:after,
#menu A:hover + A.menu-switch-on:after
{
    BACKGROUND: var(--tpl-switch-color-active-alt);
}

/****************************************
  search input
****************************************/

#search2
{
    LEFT: var(--tpl-button-hspacing);
    POSITION: absolute;
    TOP: var(--tpl-button-size-outer);
    WIDTH: calc(var(--tpl-menu-column-width) - var(--tpl-button-hspacing) * 2);
    Z-INDEX: 550;
}

#search2-text
{
    BACKGROUND: var(--tpl-button-background);
    BORDER: var(--tpl-button-border);
    BOX-SHADOW: none;
    COLOR: var(--tpl-button-color);
    FONT-SIZE: var(--tpl-button-font-size);
    LINE-HEIGHT: var(--tpl-button-line-height);
    MIN-HEIGHT: 0;
    PADDING: var(--tpl-button-vpadding)
             calc(var(--tpl-button-size-inner) + var(--tpl-button-hpadding))
             var(--tpl-button-vpadding) var(--tpl-button-hpadding);
    WIDTH: 100%;
}

#search2-text:focus,
#search2-text:hover
{
    BACKGROUND: var(--tpl-button-background-alt);
    BORDER: var(--tpl-button-border-alt);
    COLOR: var(--tpl-button-color-alt);
}

#search2-text::placeholder
{
    COLOR: var(--tpl-button-color);
    OPACITY: 0.5;
}

#search2-text:focus::placeholder,
#search2-text:hover::placeholder
{
    COLOR: var(--tpl-button-color-alt);
}

#search2-button
{
    BACKGROUND: var(--tpl-switch-background);
    BORDER: none;
    FONT-SIZE: 0;
    HEIGHT: var(--tpl-button-size-inner);
    MARGIN: var(--cms-button-border-width) var(--cms-button-border-width) 0 0;
    MIN-HEIGHT: 0;
    MIN-WIDTH: 0;
    OVERFLOW: hidden;
    POSITION: absolute;
    RIGHT: 0;
    TOP: 0;
    WIDTH: var(--tpl-button-size-inner);
}

#search2-button:focus,
#search2-button:hover,
#search2-text:focus + #search2-button,
#search2-text:hover + #search2-button
{
    BACKGROUND: var(--tpl-switch-background-alt);
}

#search2-button:after
{
    COLOR: var(--tpl-switch-color);
    CONTENT: "\e8e9";
    FONT-FAMILY: "Entypo";
    FONT-SIZE: calc(var(--tpl-button-size-inner) * .4);
    HEIGHT: 100%;
    LINE-HEIGHT: var(--tpl-button-size-inner);
    POSITION: absolute;
    RIGHT: 0;
    TEXT-ALIGN: center;
    TOP: 0;
    WIDTH: 100%;
}

#search2-button:focus:after,
#search2-button:hover:after,
#search2-text:focus + #search2-button:after,
#search2-text:hover + #search2-button:after
{
    COLOR: var(--tpl-switch-color-alt);
}

/****************************************
  page header
****************************************/

#head
{
    SCROLL-SNAP-ALIGN: start;
}

#head DIV.section
{
    MIN-HEIGHT: 100vh;
    OVERFLOW: hidden;
}

#head DIV.section-edit,
#head DIV.section-noimage
{
    PADDING: calc(5 * var(--cms-factor)) 0;
}

#head DIV.section-edit
{
    PADDING-TOP: calc(50 * var(--cms-factor));
}

/* logo */
#logo
{
    DISPLAY: block;
    MARGIN-BOTTOM: calc(30 * var(--cms-factor));
    MAX-WIDTH: 90vw;
    TEXT-ALIGN: center;
    Z-INDEX: 1;
    WIDTH: 100%;
}

#logo-image
{
    MAX-HEIGHT: calc(200 * var(--cms-factor));
    MAX-WIDTH: min(300 * var(--cms-factor), 100%);
    OBJECT-FIT: contain;
}

DIV.section-edit #logo,
DIV.section-noimage #logo
{
    MARGIN: calc(5 * var(--cms-factor)) 0 calc(15 * var(--cms-factor));
}

DIV.section-edit #logo-image,
DIV.section-noimage #logo-image
{
    MAX-HEIGHT: calc(100 * var(--cms-factor));
    MAX-WIDTH: min(150 * var(--cms-factor), 100%);
}

#slogan H1
{
    FONT-WEIGHT: 600;
    FONT-SIZE: calc(24 * var(--cms-factor));
    LINE-HEIGHT: 117.5%;
    MARGIN-BOTTOM: 0;
    MAX-WIDTH: calc(500 * var(--cms-factor));
    TEXT-ALIGN: center;
}

DIV.section #slogan
{
    MARGIN-BOTTOM: calc(30 * var(--cms-factor));
}

DIV.section-edit #slogan,
DIV.section-noimage #slogan
{
    MARGIN-BOTTOM: calc(5 * var(--cms-factor));
    PADDING-BOTTOM: calc(5 * var(--cms-factor));
}

DIV.section-edit #slogan H1,
DIV.section-noimage #slogan H1
{
    FONT-SIZE: calc(18 * var(--cms-factor));
}

DIV.section-edit #slogan + DIV,
DIV.section-noimage #slogan + DIV
{
    MARGIN: calc(65 * var(--cms-factor)) 0 calc(100 * var(--cms-factor));
}

#head DIV.section-content
{
    JUSTIFY-CONTENT: flex-end;
    MIN-HEIGHT: 100vh;
    PADDING: 15vh 5vw 5vh;
}

#head DIV.section-edit DIV.section-content,
#head DIV.section-noimage DIV.section-content
{
    MIN-HEIGHT: 0;
    PADDING: 5vw;
}

/****************************************
  page menu
****************************************/

#menu-page
{
    FONT-SIZE: var(--tpl-button-font-size);
    LINE-HEIGHT: var(--tpl-button-line-height);
    TEXT-ALIGN: center;
}

#menu-page:not(:has(A))
{
    DISPLAY: none;
}

DIV.section #menu-page
{
    PADDING: var(--cms-vspacing) 5vw;
}

DIV.section-edit #menu-page,
DIV.section-noimage #menu-page
{
    MARGIN: 0;
}

#menu-page UL
{
    LIST-STYLE: none;
    MARGIN: 0 0 calc(var(--cms-vpadding) * -1) calc(var(--cms-hpadding) * -1);
    PADDING: 0;
}

#menu-page LI
{
    DISPLAY: inline-block;
    MARGIN: 0 0 var(--cms-vpadding) var(--cms-hpadding);
}

#menu-page A
{
    BACKGROUND: var(--cms-button-background);
    BORDER: var(--cms-button-border);
    COLOR: var(--cms-button-color);
    DISPLAY: inline-block;
    PADDING: var(--tpl-button-vpadding) var(--tpl-button-hpadding);
    TEXT-DECORATION: none;
}

#menu-page A:focus,
#menu-page A:hover
{
    BACKGROUND: var(--cms-button-background-alt);
    BORDER: var(--cms-button-border-alt);
    COLOR: var(--cms-button-color-alt);
}

DIV.section-image ~ #menu-page A
{
    COLOR: var(--tpl-button-color);
    BACKGROUND: var(--tpl-button-background);
    BORDER: var(--tpl-button-border);
}

DIV.section-image ~ #menu-page A:focus,
DIV.section-image ~ #menu-page A:hover
{
    COLOR: var(--tpl-button-color-alt);
    BACKGROUND: var(--tpl-button-background-alt);
    BORDER: var(--tpl-button-border-alt);
}

/****************************************
  content area
****************************************/

DIV.section
{
    BACKGROUND: #000000;
    SCROLL-SNAP-ALIGN: start;
}

DIV.section-edit,
DIV.section-noimage
{
    SCROLL-SNAP-ALIGN: start;
}

DIV.section-image
{
    BOTTOM: 0;
    LEFT: 0;
    OPACITY: 0.65;
    POSITION: absolute;
    RIGHT: 0;
    TOP: 0;
}

DIV.section-image > IMG
{
    HEIGHT: 100%;
    LEFT: 0;
    OBJECT-FIT: cover;
    POSITION: absolute;
    TOP: 0;
    WIDTH: 100%;
}

DIV.section-image:after
{
    BOTTOM: 0;
    BOX-SHADOW: inset 0 0 calc(250 * var(--cms-factor)) rgba(0, 0, 0, 0.4);
    CONTENT: "";
    LEFT: 0;
    POSITION: absolute;
    RIGHT: 0;
    TOP: 0;
}

DIV.section-nocontent DIV.section-image
{
    BOX-SHADOW: none;
    OPACITY: 1;
}

DIV.section-content
{
    ALIGN-ITEMS: center;
    BOX-SIZING: border-box;
    DISPLAY: flex;
    FLEX-DIRECTION: column;
    JUSTIFY-CONTENT: center;
    PADDING: 5vw;
}

DIV.content
{
    MAX-WIDTH: 100%;
    WIDTH: calc(1200 * var(--cms-factor));
}

/* alternative color section */
:root
{
    --temp-color: var(--cms-color);
    --temp-color-alt: var(--cms-color-alt);
    --temp-background: var(--cms-background);
    --temp-background-alt: var(--cms-background-alt);
}

DIV.section-image + DIV.section-content,
DIV.section-image + DIV.section-content *
{
    /* general */
    --cms-color: var(--temp-color-alt);
    --cms-color-alt: var(--temp-color);
    --cms-background: var(--temp-background-alt);
    --cms-background-alt: var(--temp-background);

    /* link */
    --cms-link-color: var(--cms-color);

    /* input */
    --cms-input-color: var(--cms-color);
    --cms-input-color-alt: var(--cms-color);
    --cms-input-background: transparent;
    --cms-input-background-alt: var(--cms-background);
    --cms-input-border: var(--cms-input-border-width) var(--cms-input-border-style) var(--cms-color);
    --cms-input-border-alt: var(--cms-input-border-width-alt) var(--cms-input-border-style-alt) var(--cms-link-color-alt);

    /* checkbox */
    --cms-checkbox-color: var(--cms-color);
    --cms-checkbox-color-alt: var(--cms-color);
    --cms-checkbox-background: transparent;
    --cms-checkbox-background-alt: transparent;
    --cms-checkbox-border: var(--cms-checkbox-border-width) var(--cms-checkbox-border-style) var(--cms-color);
    --cms-checkbox-border-alt: var(--cms-checkbox-border-width-alt) var(--cms-checkbox-border-style-alt) var(--cms-color);

    /* button */
    --cms-button-color: var(--cms-color-alt);
    --cms-button-color-alt: var(--cms-link-color);
    --cms-button-background: var(--cms-background-alt);
    --cms-button-background-alt: var(--cms-link-color-alt);
    --cms-button-border: var(--cms-button-border-width) var(--cms-button-border-style) var(--cms-color);
    --cms-button-border-alt: var(--cms-button-border-width-alt) var(--cms-button-border-style-alt) var(--cms-link-color-alt);

    /* separator */
    --cms-separator-color: var(--cms-color);
}

DIV.section-image + DIV.section-content
{
    COLOR: var(--cms-color);
}

/* underline links */
DIV.section-content A:not(.button):not(:has(IMG))
{
    BORDER-BOTTOM: var(--cms-factor) dotted var(--cms-link-color);
    TEXT-DECORATION: none;
}

DIV.section-content A:not(.button):not(:has(IMG)):focus,
DIV.section-content A:not(.button):not(:has(IMG)):hover
{
    BORDER-COLOR: var(--cms-link-color-alt);
}

/****************************************
  page footer
****************************************/

#foot
{
    BACKGROUND: var(--cms-background-alt);
    BOX-SIZING: border-box;
    COLOR: var(--cms-color-alt);
    FONT-SIZE: 0.9em;
    LINE-HEIGHT: var(--cms-line-height);
    MIN-HEIGHT: 25vh;
    SCROLL-SNAP-ALIGN: end;
}

#foot A
{
    COLOR: var(--cms-color-alt);
    TEXT-DECORATION: none;
}

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

#foot > DIV:first-child
{
    MARGIN: 0 auto;
    PADDING: calc(45 * var(--cms-factor)) 5% calc(150 * var(--cms-factor));
}

#copyright,
#language,
#links
{
    FLOAT: left;
    MARGIN-BOTTOM: calc(7.5 * var(--cms-factor));
}

#copyright
{
    TEXT-ALIGN: left;
    WIDTH: 40%;
}

#language
{
    TEXT-ALIGN: center;
    TEXT-TRANSFORM: uppercase;
    WIDTH: 20%;
}

#language A
{
    BORDER-RIGHT: var(--cms-factor) solid var(--cms-color-alt);
    PADDING: 0 calc(5 * var(--cms-factor));
    WHITE-SPACE: nowrap;
}

#language A:last-child
{
    BORDER-RIGHT: none;
}

#links
{
    TEXT-ALIGN: right;
    WIDTH: 40%;
}

#links DIV
{
    MARGIN: 0 calc(-5 * var(--cms-factor));
}

#links UL,
#links LI
{
    DISPLAY: inline;
    MARGIN: 0;
}

#links A
{
    MARGIN: 0 calc(5 * var(--cms-factor));
    WHITE-SPACE: nowrap;
}

#links > DIV > A
{
    FONT-SIZE: calc(11 * var(--cms-factor));
    LINE-HEIGHT: calc(16 * var(--cms-factor));
    OPACITY: 0.35;
}

#links > DIV > A:focus,
#links > DIV > A:hover
{
    OPACITY: 1;
}

/****************************************
  landing page menu
****************************************/

#menu-lp
{
    FONT-SIZE: calc(11 * var(--cms-factor));
    LINE-HEIGHT: calc(15 * var(--cms-factor));
    PADDING: max(10px, 45 * var(--cms-factor)) calc(5vw - 5 * var(--cms-factor));
    TEXT-ALIGN: center;
}

#menu-lp A
{
    MARGIN: 0 calc(5 * var(--cms-factor));
    OPACITY: 0.35;
    TEXT-DECORATION: none;
}

#menu-lp A:focus,
#menu-lp A:hover
{
    OPACITY: 1;
}

/****************************************
  goto top link
****************************************/

#goto-top
{
    BACKDROP-FILTER: blur(calc(2.5 * var(--cms-factor)));
    BACKGROUND: var(--tpl-button-background);
    BORDER: var(--tpl-button-border);
    COLOR: var(--tpl-button-color);
    FONT-SIZE: var(--tpl-button-font-size);
    LINE-HEIGHT: var(--tpl-button-line-height);
    MARGIN: var(--tpl-button-vspacing) var(--tpl-button-hspacing);
    PADDING: var(--tpl-button-vpadding) var(--tpl-button-hpadding);
    POSITION: fixed;
    RIGHT: 0;
    TEXT-DECORATION: none;
    TEXT-TRANSFORM: uppercase;
    TOP: 0;
}

#goto-top:focus,
#goto-top:hover
{
    BACKGROUND: var(--tpl-button-background-alt);
    BORDER: var(--tpl-button-border-alt);
    COLOR: var(--tpl-button-color-alt);
}

/* hide / show */
@keyframes goto-top-fade-out
{
      0% { RIGHT: 0; OPACITY: 1; }
    100% { RIGHT: 0; OPACITY: 0; }
}

@keyframes goto-top-fade-in
{
      0% { RIGHT: 0; OPACITY: 0; }
    100% { RIGHT: 0; OPACITY: 1; }
}

#goto-top:not(.goto-top-show)
{
    ANIMATION: goto-top-fade-out 0.5s;
    RIGHT: -100vw;
    OPACITY: 0.1;
}

#goto-top.goto-top-show
{
    ANIMATION: goto-top-fade-in 0.5s;
    RIGHT: 0;
    OPACITY: 1;
}

/****************************************
  small screen device
****************************************/

@media (max-width: 640px)
{

/*.......................................
  main menu
.......................................*/

    #menu
    {
        BACKGROUND: var(--tpl-menu-background);
        HEIGHT: 100%;
        POINTER-EVENTS: all;
    }

    #menu UL
    {
        BACKGROUND: transparent;
        HEIGHT: auto;
        MARGIN: 0 !important;
        OVERFLOW: hidden;
        POSITION: relative;
        WIDTH: 100%;
    }

    #menu LI UL
    {
        LEFT: 0 !important;
        OPACITY: 1 !important;
        PADDING: 0;
    }

    #menu LI UL A
    {
        MARGIN-LEFT: var(--tpl-button-hspacing);
    }

    #menu A.menu-switch-off:after,
    #menu A.menu-switch-on:after
    {
        TRANSFORM: rotate(90deg);
    }

    #menu A.menu-switch-off + UL
    {
        HEIGHT: 0;
    }

    #menu A.menu-switch-on + UL
    {
        HEIGHT: auto;
    }

/*.......................................
  page footer
.......................................*/

    #copyright,
    #language,
    #links
    {
        FLOAT: none;
        TEXT-ALIGN: center;
        WIDTH: 100%;
    }

/*.......................................
  landing page menu
.......................................*/

    #menu-lp
    {
        DISPLAY: none;
    }
}