:root
{
    --margin: max(10px, 5vw);
    --margin-total: calc(var(--margin) * 2);
    --minwidth: calc(100% - var(--margin-total));
    --maxwidth: max(1504px, 1504 * var(--cms-factor));
    --width: min(var(--minwidth), var(--maxwidth));
    --logo-maxwidth: max(269px, 269 * var(--cms-factor));
    --hspacing-half: calc(var(--cms-hspacing) / 2);
    --hspacing-quarter: calc(var(--cms-hspacing) / 4);
    --vspacing-half: calc(var(--cms-vspacing) / 2);
    --vspacing-quarter: calc(var(--cms-vspacing) / 4);
    --menu-button-size: max(64px, 64 * var(--cms-factor));
}

HTML
{
    OVERFLOW-Y: scroll;
}

HTML,
#menu
{
    OVERSCROLL-BEHAVIOR: none;
    SCROLL-BEHAVIOR: smooth;
    SCROLLBAR-COLOR: var(--cms-scrollbar-color) var(--cms-scrollbar-bgcolor);
    SCROLLBAR-WIDTH: thin;
    -WEBKIT-OVERFLOW-SCROLLING: touch;
}

#menu
{
    SCROLLBAR-COLOR: var(--cms-scrollbar-color-alt) var(--cms-scrollbar-bgcolor);
}

HTML::-webkit-scrollbar,
#menu::-webkit-scrollbar
{
    WIDTH: var(--cms-scrollbar-width);
}

HTML::-webkit-scrollbar-track,
#menu::-webkit-scrollbar-track
{
    BACKGROUND: transparent;
}

HTML::-webkit-scrollbar-thumb,
#menu::-webkit-scrollbar-thumb
{
    BACKGROUND: var(--cms-scrollbar-color);
    BACKGROUND-CLIP: padding-box;
    BORDER-BOTTOM: none;
    BORDER-TOP: none;
    WIDTH: var(--cms-scrollbar-width);
}

#menu::-webkit-scrollbar-thumb
{
    BACKGROUND: var(--cms-scrollbar-color-alt);
}

BODY
{
    MARGIN: 0;
    OVERFLOW-X: hidden;
    TEXT-ALIGN: center;
}

BODY > *
{
    TEXT-ALIGN: left;
}

#menu-trigger
{
    DISPLAY: none;
}

#head,
#head-edit
{
    ALIGN-ITEMS: flex-end;
    DISPLAY: inline-flex;
    FLEX-WRAP: wrap;
    JUSTIFY-CONTENT: space-between;
    MARGIN: 0 calc(var(--hspacing-half) * -1);
    PADDING: min(5vw, var(--vspacing-half)) 0 min(2.5vw, var(--vspacing-quarter));
    WIDTH: calc(var(--width) + var(--cms-hspacing));
    Z-INDEX: 2;
}

#head:before
{
    BACKGROUND: #ffffff;
    BOTTOM: 0;
    CONTENT: "";
    LEFT: calc(50% - 50vw);
    POSITION: absolute;
    TOP: 0;
    TRANSITION: box-shadow 0.5s;
    WIDTH: 100vw;
    Z-INDEX: -1;
}

#home,
#home2
{
    DISPLAY: block;
    MARGIN: 0 var(--hspacing-half) min(2.5vw, var(--vspacing-quarter));
    WIDTH: min(var(--logo-maxwidth), 100%);
}

#logo,
#logo3
{
    DISPLAY: block;
    WIDTH: 100%;
}

#banner
{
    BOX-SHADOW: var(--cms-box-shadow);
    CONTAIN: content;
    POSITION: relative;
    Z-INDEX: 1;
}

#banner,
DIV.teaser3,
DIV.teaser4
{
    MIN-HEIGHT: min(100vh - max(147px, 147 * var(--cms-factor)), max(851.5px, 851.5 * var(--cms-factor)));
}

#banner DIV.slider,
#banner DIV.slider-container,
#banner DIV.slider-slide
{
    CONTAIN: content;
}

#banner A.slider-prev,
#banner A.slider-next
{
    --size: max(50px, 50 * var(--cms-factor));
    BACKGROUND: transparent;
    HEIGHT: var(--size);
    TOP: calc(50% - var(--size) / 2);
    WIDTH: var(--size);
}

#banner A.slider-prev:after,
#banner A.slider-next:after
{
    BORDER-COLOR: var(--cms-color-alt);
    BORDER-WIDTH: max(5px, 5 * var(--cms-factor));
    HEIGHT: max(10px, 10 * var(--cms-factor));
    WIDTH: max(10px, 10 * var(--cms-factor));
}

#banner A.slider-prev:after
{
    LEFT: min(2.5vw, var(--cms-hspacing) / 3 * 2);
}

#banner A.slider-next:after
{
    RIGHT: min(2.5vw, var(--cms-hspacing) / 3 * 2);
}

#banner A.slider-prev:focus:after,
#banner A.slider-prev:hover:after,
#banner A.slider-next:focus:after,
#banner A.slider-next:hover:after
{
    BORDER-COLOR: var(--cms-background-alt);
}

#banner DIV.slider-control
{
    PADDING: min(1.5vw, var(--cms-vspacing) / 3 * 2) min(1.5vw, var(--cms-hspacing) / 3 * 2);
}

#banner DIV.slider-control A
{
    BACKGROUND: var(--cms-color-alt);
    BORDER: none;
    BORDER-RADIUS: 0;
    HEIGHT: max(14px, 14 * var(--cms-factor));
    MARGIN: calc(var(--cms-vpadding) / 2) var(--cms-hpadding);
    WIDTH: max(14px, 14 * var(--cms-factor));
}

#banner DIV.slider-control A:focus,
#banner DIV.slider-control A:hover,
#banner DIV.slider-control A.slider-active
{
    BACKGROUND: var(--cms-background-alt);
}

#body
{
    CONTAIN: content;
    CONTENT-VISIBILITY: auto;
    DISPLAY: inline-block;
    PADDING: calc(var(--cms-vspacing) * 1.5) 0 var(--cms-vspacing);
    WIDTH: var(--width);
}

#contact
{
    BORDER-TOP: var(--cms-separator-border);
    CONTAIN: content;
    FONT-SIZE: max(24px, 24 * var(--cms-factor));
    FONT-WEIGHT: bold;
    LINE-HEIGHT: var(--cms-line-height);
    MARGIN-TOP: var(--cms-vspacing);
    PADDING-TOP: calc(var(--vspacing-quarter) * 3);
    TEXT-ALIGN: center;
}

#contact A.button
{
    FONT-SIZE: max(20px, 20 * var(--cms-factor));
    MARGIN-TOP: var(--vspacing-half);
}

#contact2
{
    CONTAIN: layout;
    DISPLAY: inline-flex;
    FLEX-WRAP: wrap;
    GAP: var(--cms-vspacing) var(--cms-hspacing);
    JUSTIFY-CONTENT: space-between;
    PADDING: calc(var(--cms-vspacing) * 2) 0;
    WIDTH: var(--width);
}

#contact2:before
{
    BACKGROUND: #dfe5e9;
    BOTTOM: 0;
    CONTAIN: content;
    CONTENT: "";
    LEFT: calc(50% - 50vw);
    POSITION: absolute;
    TOP: 0;
    WIDTH: 100vw;
    Z-INDEX: -1;
}

#contact2 A
{
    COLOR: var(--cms-button-background);
    FLEX: 3 1 calc(25% - var(--hspacing-quarter) * 3);
    FONT-WEIGHT: bold;
    PADDING: max(110px, 110 * var(--cms-factor)) 0 0;
    TEXT-ALIGN: center;
    WHITE-SPACE: nowrap;
}

@media (max-width: 1000px)
{
    #contact2 A
    {
        FLEX: 2 1 calc(50% - var(--hspacing-half));
    }
}

@media (max-width: 500px)
{
    #contact2 A
    {
        FLEX: 1 1 100%;
    }
}

#contact2 A:focus,
#contact2 A:hover
{
    COLOR: var(--cms-button-background-alt);
}

#contact2 A:before
{
    BACKGROUND: var(--cms-button-background) url(../../../design/statec/phone.svg) center no-repeat;
    BACKGROUND-SIZE: max(45px, 45 * var(--cms-factor)) auto;
    BORDER: max(2.5px, 2.5 * var(--cms-factor)) solid var(--cms-button-color);
    BORDER-RADIUS: 50%;
    CONTAIN: content;
    CONTENT: "";
    HEIGHT: max(94px, 94 * var(--cms-factor));
    LEFT: calc(50% - max(49.5px, 49.5 * var(--cms-factor)));
    POSITION: absolute;
    TOP: 0;
    WIDTH: max(94px, 94 * var(--cms-factor));
}

#contact2 A:focus:before,
#contact2 A:hover:before
{
    BACKGROUND-COLOR: var(--cms-button-background-alt);
}

#contact2 A#email:before
{
    BACKGROUND-IMAGE: url(../../../design/statec/email.svg);
    BACKGROUND-SIZE: max(54px, 54 * var(--cms-factor)) auto;
}

#contact2 A#form:before
{
    BACKGROUND-IMAGE: url(../../../design/statec/form.svg);
    BACKGROUND-SIZE: max(51px, 51 * var(--cms-factor)) auto;
}

#contact2 A#location:before
{
    BACKGROUND-IMAGE: url(../../../design/statec/location.svg);
    BACKGROUND-SIZE: max(30px, 30 * var(--cms-factor)) auto;
}

#foot
{
    CONTAIN: layout;
    DISPLAY: inline-flex;
    FLEX-WRAP: wrap;
    FONT-WEIGHT: bold;
    GAP: var(--cms-vspacing) var(--cms-hspacing);
    JUSTIFY-CONTENT: space-between;
    PADDING: calc(var(--cms-vspacing) * 1.5) 0;
    WIDTH: var(--width);
}

#foot,
#foot *
{
    COLOR: var(--cms-color-alt);
}

#foot:before
{
    BACKGROUND: var(--cms-background-alt);
    BOTTOM: 0;
    CONTAIN: content;
    CONTENT: "";
    LEFT: calc(50% - 50vw);
    POSITION: absolute;
    TOP: 0;
    WIDTH: 100vw;
    Z-INDEX: -1;
}

#foot > DIV
{
    FLEX: 3 1 auto;
}

@media (max-width: 1500px)
{
    #foot > DIV
    {
        FLEX: 2 1 calc(50% - var(--hspacing-half));
    }
}

@media (max-width: 1000px)
{
    #foot > DIV
    {
        FLEX: 1 1 100%;
    }
}

#foot > DIV:first-child
{
    ALIGN-SELF: stretch;
    DISPLAY: flex;
    JUSTIFY-CONTENT: space-between;
    FLEX-DIRECTION: column;
    ROW-GAP: var(--cms-vspacing);
}

#logo2
{
    BORDER: max(2px, 2 * var(--cms-factor)) solid var(--cms-color-alt);
    BOX-SIZING: border-box;
    WIDTH: min(var(--logo-maxwidth), 100%);
}

#copyright
{
    FONT-WEIGHT: normal;
}

#foot > DIV:last-child A
{
    PADDING-LEFT: max(25px, 25 * var(--cms-factor));
}

#foot > DIV:last-child A:before
{
    BACKGROUND: var(--cms-color-alt);
    CONTENT: "";
    HEIGHT: max(14px, 14 * var(--cms-factor));
    LEFT: 0;
    POSITION: absolute;
    TOP: max(6px, 6 * var(--cms-factor));
    WIDTH: max(14px, 14 * var(--cms-factor));
}

@keyframes fade-in
{
      0% { OPACITY: 0; POINTER-EVENTS: none; }
    100% { OPACITY: 1; POINTER-EVENTS: none; }
}

@keyframes fade-out
{
      0% { OPACITY: 1; POINTER-EVENTS: none; }
    100% { OPACITY: 0; POINTER-EVENTS: none; }
}

@media (hover: hover) and (min-width: 801px)
{
    #head.sticky
    {
        LEFT: 50%;
        MARGIN: 0;
        POSITION: fixed;
        TRANSFORM: translateX(-50%);
    }

    #head.sticky:before
    {
        BOX-SHADOW: var(--cms-box-shadow);
    }

    #logo3,
    #menu-button
    {
        DISPLAY: none;
    }

    #menu
    {
        MARGIN-BOTTOM: max(26px, 26 * var(--cms-factor));
    }

    #menu UL
    {
        CONTAIN: layout;
        DISPLAY: flex;
        FLEX-WRAP: wrap;
        LIST-STYLE: none;
        MARGIN: 0;
    }

    #menu LI
    {
        MARGIN: 0 var(--hspacing-half);
    }

    #menu A
    {
        COLOR: var(--cms-color);
        DISPLAY: block;
        TEXT-DECORATION: none;
    }

    #menu A.active
    {
        FONT-WEIGHT: 500;
    }

    #menu A.container:after
    {
        CONTENT: "\e862";
        FONT-FAMILY: "Fontello";
        LEFT: calc(var(--hspacing-quarter) * -1);
        POSITION: absolute;
        TRANSFORM: translateX(-50%);
    }

    /* subsequent levels */
    #menu LI UL
    {
        BACKGROUND: #ffffff;
        CONTAIN: layout;
        FLEX-DIRECTION: column;
        PADDING-TOP: calc(min(2.5vw, var(--vspacing-quarter)) + max(26px, 26 * var(--cms-factor)));
        POSITION: absolute;
        MARGIN-LEFT: calc(var(--hspacing-half) * -1);
        MIN-WIDTH: max(250px, 250 * var(--cms-factor));
    }

    #head.sticky #menu LI UL:before
    {
        BOTTOM: 0;
        BOX-SHADOW: var(--cms-box-shadow);
        CLIP-PATH: inset(calc(min(2.5vw, var(--vspacing-quarter)) + max(26px, 26 * var(--cms-factor))) -100vmax -100vmax -100vmax);
        CONTENT: "";
        LEFT: 0;
        OVERFLOW: hidden;
        POSITION: absolute;
        RIGHT: 0;
        TOP: 0;
        Z-INDEX: -1;
    }

    #menu LI LI
    {
        MARGIN: 0;
    }

    #menu LI LI A,
    #menu LI:hover A
    {
        COLOR: var(--cms-link-color);
    }

    #menu LI LI A
    {
        FONT-SIZE: max(16px, 16 * var(--cms-factor));
        LINE-HEIGHT: max(30px, 30 * var(--cms-factor));
        PADDING: var(--cms-vpadding) var(--hspacing-half);
    }

    #menu LI LI A:hover
    {
        BACKGROUND: var(--cms-background-alt);
        COLOR: var(--cms-color-alt);
    }

    #menu LI LI A.container:after
    {
        CONTENT: "\e878";
        LEFT: calc(var(--cms-hspacing) / 4);
    }

    /* 2nd+ levels */
    #menu LI LI UL
    {
        MARGIN-LEFT: -100%;
        PADDING-TOP: 0;
        TOP: 0;
    }

    #head.sticky #menu LI LI UL:before
    {
        CLIP-PATH: inset(-100vmax 0 -100vmax -100vmax);
    }

    /* hide / show */
    @keyframes menu-fade-in
    {
          0% { LEFT: 0; OPACITY: 0; }
        100% { LEFT: 0; OPACITY: 1; }
    }

    @keyframes menu-fade-out
    {
          0% { LEFT: 0; OPACITY: 1; }
        100% { LEFT: 0; OPACITY: 0; }
    }

    #menu LI UL,
    #menu LI:hover LI UL,
    #menu LI LI:hover LI UL,
    #menu LI LI LI:hover LI UL
    {
        ANIMATION: menu-fade-out 0.5s;
        LEFT: -100vw;
        OPACITY: 1;
        POINTER-EVENTS: none;
    }

    #menu LI:hover UL,
    #menu LI LI:hover UL,
    #menu LI LI LI:hover UL,
    #menu LI LI LI LI:hover UL
    {
        ANIMATION: menu-fade-in 0.5s;
        LEFT: 0;
        OPACITY: 1;
        POINTER-EVENTS: auto;
        Z-INDEX: 1;
    }

    #menu LI LI A.menu-switch-off,
    #menu LI LI A.menu-switch-on
    {
        DISPLAY: none;
    }
}

@media (hover: none), (max-width: 800px)
{
    #dummy
    {
        DISPLAY: none;
    }

    HTML.menu-active
    {
        OVERFLOW: hidden;
    }

    #home,
    #home2
    {
        WIDTH: min(var(--logo-maxwidth), 100% - var(--cms-hspacing) - var(--menu-button-size) - var(--margin));
    }

    #home2
    {
        --left: calc(50% - var(--width) / 2);
        MARGIN: 0 0 0 var(--left);
        WIDTH: min(var(--logo-maxwidth), 100% - var(--menu-button-size) - var(--margin-total) - var(--left));
    }

    #menu
    {
        ANIMATION: fade-out 0.5s;
        CONTENT-VISIBILITY: hidden;
        HEIGHT: 100vh;
        LEFT: 0;
        MARGIN: 0 ;
        OPACITY: 0;
        OVERFLOW-Y: scroll;
        PADDING: min(5vw, var(--vspacing-half)) 0 min(2.5vw, var(--vspacing-quarter));
        POINTER-EVENTS: none;
        POSITION: fixed;
        TOP: 0;
        WIDTH: 100%;
        Z-INDEX: 3;
    }

    #menu:before
    {
        BACKGROUND: rgba(0, 68, 148, 0.9);
        CONTENT: "";
        HEIGHT: 100vh;
        LEFT: calc(50% - 50vw);
        POSITION: fixed;
        TOP: 0;
        WIDTH: 100vw;
        Z-INDEX: -1;
    }

    #menu-trigger:checked ~ #head #menu
    {
        ANIMATION: fade-in 0.5s;
        CONTENT-VISIBILITY: visible;
        OPACITY: 1;
        POINTER-EVENTS: auto;
    }

    #menu UL
    {
        CONTAIN: content;
        LIST-STYLE: none;
        MARGIN: 0;
    }

    #menu > UL
    {
        DISPLAY: block;
        MARGIN: 0 auto;
        WIDTH: var(--width);
    }

    #menu UL UL UL
    {
        MARGIN-RIGHT: max(49px, 49 * var(--cms-factor));
    }

    #menu LI
    {
        DISPLAY: block;
        MARGIN: 0;
        TEXT-ALIGN: right;
    }

    #menu LI A
    {
        COLOR: var(--cms-color-alt);
        DISPLAY: inline-block;
        LINE-HEIGHT: 125%;
        PADDING: max(12.5px, 12.5 * var(--cms-factor)) max(12px, 12 * var(--cms-factor));
    }

    #menu LI A.active
    {
        FONT-WEIGHT: bold;
    }

    #menu LI A.active STRONG
    {
        BACKGROUND: var(--cms-color-alt);
        COLOR: var(--cms-background-alt);
        DISPLAY: inline-block;
        MARGIN: min(-12.5px, -12.5 * var(--cms-factor)) min(-12px, -12 * var(--cms-factor));
        PADDING: max(12.5px, 12.5 * var(--cms-factor)) max(12px, 12 * var(--cms-factor));
    }

    #menu > UL > LI > A
    {
        FONT-SIZE: max(24px, 24 * var(--cms-factor));
        LINE-HEIGHT: 125%;
        PADDING: max(19px, 19 * var(--cms-factor)) max(12px, 12 * var(--cms-factor));
    }

    /* hide / show */
    @keyframes menu-fly-in
    {
          0% { BORDER-BOTTOM: max(1.5px, 1.5 * var(--cms-factor)) solid var(--cms-color-alt); CLIP-PATH: inset(100% 0 0 0); MARGIN-BOTTOM: min(-1.5px, -1.5 * var(--cms-factor)); OVERFLOW: hidden; TRANSFORM: translateY(-100%); }
        100% { BORDER-BOTTOM: max(1.5px, 1.5 * var(--cms-factor)) solid var(--cms-color-alt); CLIP-PATH: inset(  0  0 0 0); MARGIN-BOTTOM: min(-1.5px, -1.5 * var(--cms-factor)); OVERFLOW: hidden; TRANSFORM: translateY(   0 ); }
    }

    @keyframes menu-fly-out
    {
          0% { BORDER-BOTTOM: max(1.5px, 1.5 * var(--cms-factor)) solid var(--cms-color-alt); CLIP-PATH: inset(  0  0 0 0); HEIGHT: auto; MARGIN-BOTTOM: min(-1.5px, -1.5 * var(--cms-factor)); TRANSFORM: translateY(   0 ); }
        100% { BORDER-BOTTOM: max(1.5px, 1.5 * var(--cms-factor)) solid var(--cms-color-alt); CLIP-PATH: inset(100% 0 0 0); HEIGHT: auto; MARGIN-BOTTOM: min(-1.5px, -1.5 * var(--cms-factor)); TRANSFORM: translateY(-100%); }
    }

    #menu A.menu-switch-off + UL,
    #menu LI UL
    {
        ANIMATION: menu-fly-out 0.5s;
        HEIGHT: 0;
        OVERFLOW: hidden;
    }

    #menu A.menu-switch-on + UL
    {
        ANIMATION: menu-fly-in 0.5s;
        HEIGHT: auto;
        OVERFLOW: visible;
    }

    /* open / close */
    #menu A.container
    {
        MARGIN-RIGHT: max(49px, 49 * var(--cms-factor));
    }

    #menu A.menu-switch-off,
    #menu A.menu-switch-on
    {
        BACKGROUND: var(--cms-background-alt) url(../../../design/statec/plus.svg) center no-repeat;
        BACKGROUND-SIZE: 65%;
        BORDER: max(1.5px, 1.5 * var(--cms-factor)) solid var(--cms-color-alt);
        HEIGHT: max(25px, 25 * var(--cms-factor));
        MARGIN: max(19px, 19 * var(--cms-factor)) max(12px, 12 * var(--cms-factor)) 0 0;
        OUTLINE: none;
        PADDING: 0;
        POSITION: absolute;
        RIGHT: 0;
        WIDTH: max(25px, 25 * var(--cms-factor));
    }

    #menu A.menu-switch-on
    {
        BACKGROUND-IMAGE: url(../../../design/statec/minus.svg);
    }

    #menu LI LI A.menu-switch-off,
    #menu LI LI A.menu-switch-on
    {
        MARGIN-TOP: max(10px, 10 * var(--cms-factor));
    }

    #menu-button
    {
        BACKGROUND: var(--cms-background-alt) url(../../../design/statec/menu.svg) center no-repeat;
        BACKGROUND-SIZE: max(38px, 38 * var(--cms-factor)) auto;
        COLOR: transparent;
        HEIGHT: var(--menu-button-size);
        OVERFLOW: hidden;
        POSITION: fixed;
        RIGHT: calc(50% - var(--width) / 2);
        TOP: min(5vw, max(48.5px, 48.5 * var(--cms-factor)));
        USER-SELECT: none;
        WIDTH: var(--menu-button-size);
        Z-INDEX: 4;
    }

    #menu-trigger:checked ~ #menu-button
    {
        BACKGROUND-COLOR: var(--cms-color-alt);
        BACKGROUND-IMAGE: url(../../../design/statec/menu-active.svg);
    }
}