:root {
    --app-color-base: #4c4946;
    --app-color-base-hi: #c1b9b1;
    --app-color-white: rgb(255, 255, 255);
    --app-color-black: rgb(0, 0, 0);
    --app-color-alert: rgb(190 103 36);
    --app-color-accent: rgb(237, 227, 23);
    --app-color-success: rgb(22, 127, 48);
    --app-color-info: rgb(38, 100, 159);
    --app-color-danger: rgb(182, 29, 29);
    --app-font-title: "Quicksand";
    
    --app-text-color: var(--app-color-white);
    --app-text-color-hi:var(--app-color-black);
    --app-bg-color: var(--app-color-black);
    --app-bg-color-hi: var(--app-color-base-hi);

    --app-font-size: 1rem;
    --app-font-size-6xl: 10rem;
    --app-font-size-5xl: 6rem;
    --app-font-size-4xl: 4rem;
    --app-font-size-3xl: 3rem;
    --app-font-size-2xl: 2rem;
    --app-font-size-xl: 1.5rem;
    --app-font-size-l: 1.125rem;
    --app-font-size-m: 1rem;
    --app-font-size-s: 0.875rem;
    --app-font-size-xs: 0.75rem;
    --app-font-size-2xs: 0.625rem;
}
html, div {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
nav {
    list-style: none;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    color: var(--app-text-color);
    background-color: var(--app-bg-color);
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: inherit;
    font-weight: bold;
    text-align: left;
    display: inline-flex;
}
a.button {
    border-radius: 4.2rem;
    padding: 0.2rem 1.3rem;
    transition: all 0.4s;
    width: min-content;
    white-space: nowrap;
}
a[info].button {
    background: var(--app-color-info);
    color: var(--app-color-white);
}
a[accent].button {}
a[alert].button {
    border: none;
    background: var(--app-color-alert) !important;
    color: var(--app-color-white) !important;
}
label {
    display: block;
    padding: 1rem 0 0.5rem 0;
    font-family: var(--app-font-title);
}
h1, h2, h3 {
    font-weight: inherit;
    font-style: normal;
    padding: 0;
    margin: 0;
    font-family: var(--app-font-title);
    font-size: 1.2rem;
}
h1 { line-height: 120%; }
h2 { line-height: 125%; }
h3 {
    font-size: 1.1rem;
    border-bottom: 1px solid black;
    margin: 0.9rem 0 0.3rem 0;
    line-height: 120%;
    border-color: var(--app-color-black);
    padding: 0 0 0.4rem 0;
}
h1+h2 {
    margin-top: 0.5rem;
}
[light] h3 {
    border-color: var(--app-color-base);
}  
[hilite] h3 {
    border-color: var(--app-color-black);
}  
[dark] h3 {
    border-color: var(--app-color-white);
} 
span[accent], div[accent] {
    background-color: var(--app-color-accent);
    color: var(--app-color-base);
}
.cols {
    display: flex !important;
}
.cols {
    display: flex !important;
    flex-wrap: nowrap;
    flex-flow: unset !important;
    align-items: flex-start;
}
.grow-1 {
    flex-grow: 1;
    width: min-content;
    flex-wrap: wrap;
}
.grow-2 {
    flex-grow: 2;
    width: min-content;
    flex-wrap: wrap;
}
.grow-3 {
    flex-grow: 3;
    width: min-content;
    flex-wrap: wrap;
}
.grow-4 {
    flex-grow: 4;
    width: min-content;
    flex-wrap: wrap;
}

.cols-1 {
    display: grid;
    grid-template-columns: 1fr;
}
.cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
}
.text .cols-2 {
    grid-gap: 10px;
}
.right section.cols-2 > *:first-child {
    order:1;
}
.cols-3 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}
.cols-4 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.cols-5 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.cols-6 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.cols-8 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.cols-1.left { grid-template-columns:auto; justify-items: left; }
.cols-1.right { grid-template-columns:auto; justify-content: end; }
.cols-1.center { justify-items: center; }

.cols-2.left {
    grid-template-columns: min-content auto;
    align-items: start;
    grid-gap: 20px;
}
.cols-2.right {
    grid-template-columns: auto min-content;
    align-items: start;
    grid-gap: 20px;
}
.cols-2.middle,.cols-3.middle,.cols-4.middle,.cols-5.middle,.cols-6.middle,.cols-7.middle { align-items: center; }
.cols-2.top,.cols-3.top,.cols-4.top,.cols-5.top,.cols-6.top,.cols-8.top { align-items: baseline; }
.cols-2.bottom,.cols-3.bottom,.cols-4.bottom,.cols-5.bottom,.cols-6.bottom,.cols-8.bottom { align-items: flex-end; }
.cols-3.middle {
    grid-template-columns: min-content auto min-content;
}
.nowrap {
    flex-wrap: nowrap;
    white-space: nowrap;
}

body [xxsmall] { font-size: var(--app-font-size-2xs); }
body [xsmall] { font-size: var(--app-font-size-xs); }
body [small] { font-size: var(--app-font-size-s); }
body [medium] { font-size: var(--app-font-size-m); }
body [large] { font-size: var(--app-font-size-l); }
body [xlarge] { font-size: var(--app-font-size-xl); }
body [xxlarge] { font-size: var(--app-font-size-2xl); }
body [xxxlarge] { font-size: var(--app-font-size-3xl); }
body [xxxxlarge] { font-size: var(--app-font-size-4xl); }
body [xxxxxlarge] { font-size: var(--app-font-size-5xl); }
body [xxxxxxlarge] { font-size: var(--app-font-size-6xl); }
body > header {
    position: fixed;
    background: transparent;
    margin: 0;
    width: 100%;
    top: 0;
    padding: 2em 2em 2em 3em;
    display: grid;
    grid-template-columns: min-content auto min-content;
    box-sizing: border-box;
    transition: all 0.6s;
    z-index: 100;
    align-items: center;
    grid-gap: 1rem;
}
body.scrolled > header {
    background: var(--app-color-base);
    padding: 0.5em 1rem;
    box-shadow: 0px 3px 20px #00000075;
}
body > header a {
    color: var(--app-color-white);
    text-decoration: none;
}
body > header .logo {
    display: flex;
    flex-grow: 1;
    background-image: url(images/loncin-logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 10rem;
    height: 5.5rem;
    position: relative;
    grid-row: 1;
    grid-column: 1;
}
body > header .logo a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
body.scrolled > header .logo {
    width: 6rem;
    height: 2.5rem;

}
body > header [nuiburger] {
	grid-row: 1;
    grid-column: 2;
}
body > header [nuiburger] li {
    padding: 0 1.2rem;
    font-size: 1.3rem;
}
body > header [nuiburger] > nav {
    display: flex;
    flex-flow: wrap;
}
body.scrolled [nuiburger] > nav li {
    font-size: 1rem;
}
body > header [nuiburger] a {
    font-size: inherit !important;
    display: block;
}
body > header [nuiburger] > nav > li > a {
    padding-bottom: 0.6rem;
    display: block;
}
body > header [nuiburger] > nav > li > a::after {
    content:'';
    display:block;
    width:20px;
    border-bottom: 2px solid transparent;
    margin: 0 auto;
}
body > header [nuiburger] > nav > li a.selected::after,
body > header [nuiburger] > nav > li > a:hover::after {
    content:'';
    display:block;
    width:20px;
    border-bottom: 2px solid var(--app-color-white);
    margin: 0 auto;
}
body > header > select[name="locale"] {
    flex-grow: 1;
}
body > main {
    margin: 0;
    padding: 0;
} 
body > footer {
    background-color: var(--app-color-base);
    padding: 0.3rem 1rem;
    display: flex;
    flex-flow: wrap;
}
body > footer a {
    color: var(--app-text-color);
}
body > footer article {
    margin: 0.5rem;
    flex-grow: 1;
}
body > footer header h1 {
    font-size: large;
    font-weight: normal;
    padding: 1.1rem 0rem;
}
body > footer .contact span {
    display: block;
    position: relative;
    padding: 0 0 0 1.7rem;
    margin: 0.7rem 0;
    line-height: 150%;
}
body > footer .secondary nav {
    list-style: none;
    display: flex;
    flex-flow: column;
}
body > footer .secondary li {
    padding: 0.2rem 0;
}
body > footer .social nav {
    list-style: none;
    display: flex;
    flex-flow: wrap;
    font-size: xx-large;
}
body > footer .social li {
    padding: 0 0.4rem;
}
body > footer .contact span::before {
    font-family: 'glyphs';
    width: 1.2rem;
    position: absolute;
    left: 0;
    text-align: center;
}
body > footer .contact span.location::before {
  content: "\e947";
}
body > footer .contact span.phone::before {
  content: "\e942";
}
body > footer .contact span.email::before {
  content: "\e901";
}
[alert] {
    background: var(--app-color-alert) !important;
    color: var(--app-color-white) !important;
}
a[alert]:hover,
button[alert]:hover {
    border: 1px solid var(--app-color-alert);
    background: var(--app-color-white);
    color: var(--app-color-alert);
}
[success] {
    background: var(--app-color-success) !important;
    color: var(--app-color-white) !important;
}
a[success]:hover,
button[success]:hover {
    border: 1px solid var(--app-color-success);
    background: var(--app-color-white);
    color: var(--app-color-success);
}
[primary] {
    border: 1px solid var(--app-color-base);
    background: var(--app-color-base);
    color: var(--app-color-white);
}
a[primary]:hover {
    border: 1px solid var(--app-color-base);
    background: var(--app-color-white);
    color: var(--app-color-base);
}

i[success] {
    background-color: inherit !important;
    color: var(--app-color-success) !important;
}
header .nui-select-container .nui-select-selection {
    background: var(--app-bg-color-hi);
    min-height: 2rem;
    min-width: 2rem;
    font-size: medium;
    border-radius: 20px;
    text-align: center;
    display: grid;
    align-items: center;
    justify-content: center;
}
.partners { 
    background-color: var(--app-color-white);
    padding: 1.1rem 5.4rem; 
}
.partners h1 {
    color: var(--app-color-base);
    text-align: center;
    font-size: x-large;
    font-weight: normal;
    margin: 2rem 0 1.8rem 0;
    font-family: var(--app-font-title);
}
.light {
    background: var(--app-color-white);
    color: var(--app-color-black);
}
.text {
    font-size: large;
    line-height: 180%;
    text-align: justify;
}
.text.narrow .text section {
    padding: 2rem 4rem;
}
.text.narrow section {
    margin: 0;
    padding: 0;
    display: grid;
    justify-content: center;
}
.center {
    align-self: center;
}

[hilite].text.narrow section > *:not(script) {
    background-color: var(--app-color-white);
    width: 44rem;
    padding: 0.6rem 2rem;
}
[hilite].text.narrow section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--app-color-base-hi);
    z-index: -1;
}
.media {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.media-right { background-position: right !important; }
.media-left { background-position: left !important; }

quote {
    display: block;
    padding: 1rem 2rem 1rem 3rem;
    font-size: x-large;
    font-family: var(--app-font-title);
    font-style: italic;
    font-weight: bold;
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin: 0.7rem 0;
    line-height: 1.7rem;
}
quote::before {
    content: "";
}

.product {
    margin: 2rem 0 0.5rem 0rem;
    box-shadow: 0 0 20px 0 #4c494680;
    border: none;
    background-color: var(--app-color-white);
}
.product > header {
    margin: -2.1rem 0 0 -6rem;
    background: transparent !important;
}
.product > header h1 {
    padding: 0 !important;
    font-size: 1.7rem;
    font-weight: bold;
    margin: 2.5rem 0 0 11rem;
}
.product > header h1 i {
    display: grid;
    width: 6rem;
    align-content: center;
    justify-content: center;
    color: var(--app-color-white);
    font-size: 3rem;
    background: var(--app-color-info);
    position: absolute;
    top: 0;
    left: 0rem;
    bottom: 0;
    align-content: baseline;
    padding: 1.4rem 0 0 0;
}
.product > header h1 span {
    margin: 3.4rem 1.5rem 0.9rem 0;
    background: var(--app-color-white);
    display: block;
}
.product > section {
    color: var(--app-color-black);
    margin: 1rem 3rem 0 8rem !important;
    font-size: smaller;
    line-height: 140%;
    padding: 0 !important;
}
.product > section span {
    display: block;
    padding: 0;
    position: relative;
    margin: 0.7em 0;
}
.product > section span::before {
    font-family: 'glyphs';
    width: 1.2em;
    position: absolute;
    left: 0;
    text-align: center;
}
.product > section span.calendar::before { content: "\e953"; }
.product > section span.time::before { content: "\e94e"; }
.product > section span.intl::before { content: "\e910"; }
.product > footer {
    text-align: right;
    padding: 0.8em;
}

article {
    box-sizing: border-box;
    position: relative;
    padding: 0;
}
article > section {
    flex-grow: 1;
    z-index: 2;
    position: relative;
    padding: 0;
    margin: 0;
}
article > header {
    font-size: 0.8rem;
    padding: 0.3rem 1.2rem 0.5rem 2.5rem;
    margin: 0;
    font-weight: bold;
}
article.media::before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: radial-gradient(circle,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 95%);
}
article.plain-page {
    position: relative;
    padding: 2rem 3rem 6rem 3rem;
    min-height: 100vh;
    align-content: end;
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
}
article.plain-page.right {
    flex-flow: row-reverse;
}
article.half-page {
    display: flex;
    position: relative;
    padding: 0;
    min-height: 50vh;
    align-content: end;
    flex-wrap: wrap;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
article.plain-page > header {
    flex-grow: 1;
    z-index: 2;
    align-self: end;
    position: relative;
}
article.half-page > header {
    background: var(--app-color-base);
    width: 100%;
    padding: 0rem 3rem 1.5rem 3rem;
    z-index: 2;
}
article.plain-page > header h1 {
    font-size: 3rem;
    font-weight: 400;
}
article.half-page > header h1 {
    font-size: 3rem;
    padding: 1.1rem 0 0 0;
    font-weight: 400;
}
article.plain-page > header h2 {
    font-size: 2rem;
    font-weight: 400;
}
article.half-page > header h2 {
    font-size: 2rem;
    font-weight: 400;
}
article.plain-page > section {
    flex-grow: 1;
    align-self: end;
    line-height: 170%;
    font-size: 1.1rem;
    margin: 0 0 -3rem 0rem;
    background: #00000066;
    padding: 0.5rem 1.4rem 4rem 1.4rem;
    text-align: justify;
    /* flex-grow: 1; */
}
article.half-page > section {
    display: grid;
    position: relative;
}
article.plain-page.right > section {
    max-width: 640px;
    margin: 0 auto;
    background: #000000a1;
    padding: 0.9rem 1.2rem;
}
article.half-page > section {
    background: var(--app-bg-color-hi);
    width: 100%;
}
article.text {
    position: relative;
}
article.text > header{
    z-index: 2;
    position: relative;
    padding: 1rem 3.8rem;

}
article.right > header {
    text-align: right;
}
article.plain-page.right > header {
    padding: 0;
    text-align: left;
}
article.text > section {
    z-index: 2;
    position: relative;
    display: block;
    padding: 2rem 4rem;
}
article.text > section h1,
article.text > section h2 {
    padding: 2rem 0 0 0;
}

article[light] header {
    background-color: inherit;
}
article[light] {
    padding: 0;
    background: var(--app-color-base-hi);
}
div[light],
article[light] > section {
    color: var(--app-color-black);
    display: flex;
    flex-flow: column;
}

article[hilite] {
    background: var(--app-color-white);
}
article[hilite] header {
    background-color: var(--app-color-white);
    color:var(--app-color-black) ;
}
div[hilite],
article[hilite] > section {
    color: var(--app-color-black);
    display: flex;
    flex-flow: column;
}

article[dark] {
    padding: 0;
    background: var(--app-color-base);

}
article[dark] > header {
    background-color: var(--app-color-alert);
}
div[dark],
article[dark] > section {
    padding: 3rem;
    color: var(--app-color-white);
}

header {
    background-color: inherit;
    color: inherit;
}
header[hilite] {
    background-color: var(--app-color-white) !important;
    color: var(--app-color-black) !important;
}
header[alert],
header[hot] {
    background-color: var(--app-color-alert) !important;
    color: var(--app-color-white) !important;
}
header[info],
header[primary] {
    background-color: var(--app-color-info) !important;
    color: var(--app-color-white) !important;
}
header[accent] {
    background-color: var(--app-color-accent) !important;
    color: var(--app-color-base) !important;
}
header[dark] {
    background-color: var(--app-color-base) !important;
    color: var(--app-color-white) !important;
}


.border-none { padding: 0 !important; }
.border-xsmall { padding: 0.5rem !important; }
.border-small { padding: 1rem !important; }
.border-medium { padding: 2rem !important; }
.border-large { padding: 3rem !important; }
.border-xlarge { padding: 4rem !important; }

article.form {
    max-width: 800px;
}
article.form footer {
    padding: 0.5rem 1rem;
    text-align: center;
}
form {}
form label {
    font-size: 1.2rem !important;
    padding: 1.1rem 0 0.3rem 0rem;
    color: var(--app-color-base);
}
form .nui-input-hint {
    font-size: var(--app-font-size-xs);
    color: var(--app-color-alert);
    padding: 0.3rem 0 0rem 0;
    line-height: normal;
}
.nui-input-container.validation-failed > textarea[nuitextarea] {
    border: 2px solid var(--app-color-danger) !important;
}
.nui-input-container.validation-failed > input[nuiinput] {
    border: 2px solid var(--app-color-danger) !important;
}
.nui-select-selection.validation-failed { border: 1px solid var(--app-color-danger) !important; }
.nui-input-container.nui-checkbox { position:relative; }
.nui-input-container.nui-checkbox.validation-failed  { color: var(--app-color-danger); }
.nui-input-container.nui-input-hidden { display: none; }

input[nuiinput] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 400 1rem/1.25rem arial,sans-serif;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--app-color-white);
    border: 1px solid var(--app-color-grey-50);
    border-radius: var(--app-border-radius);
    color: var(--app-color-grey-100);
    display: block;
    padding: calc(var(--app-spacing-s) - 1px);
    width: 100%;
    box-sizing: border-box;
    z-index: 3;
}

input[nuiinput]::placeholder, textarea[nuitextarea]::placeholder {
    color: var(--app-color-grey-35);
}

input[nuiinput]:focus:not([readonly]), input[nuiinput]:focus-visible:not([readonly]) {
    border-color: var(--app-color-accent);
    box-shadow: inset 0 0 0 1px var(--app-color-accent),inset 0 0 0 2px var(--app-color-accent);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
input[nuiinput][readonly] {
    background-color: transparent;
    border-color: transparent!important;
    box-shadow: none;
    height: inherit;
    padding: var(--app-spacing-2xs) 0;
    pointer-events: none;
}
textarea[nuitextarea][disabled],
.eicui-select-selection[disabled],
input[nuiinput][disabled] {
    background-color: var(--app-color-grey-5);
    border: 1px solid var(--app-color-grey-25) !important;
    color: var(--app-color-grey-75);
    /* pointer-events: none; */
}
input[nuiinput][danger] { border: 1px solid var(--app-color-danger); }
input[nuiinput][primary] { border: 1px solid var(--app-color-primary); }
input[nuiinput][secondary] { border: 1px solid var(--app-color-grey);}
input[nuiinput][success] { border: 1px solid var(--app-color-success); }
input[nuiinput][warning] { border: 1px solid var(--app-color-warning); }
input[nuiinput][accent] { border: 1px solid var(--app-color-accent); }
input[nuiinput][info] { border: 1px solid var(--app-color-info); }
input[nuiinput].required:not([disabled]) { border: 1px solid #004494; } 


.nui-input-search { display: grid; }
.nui-input-search .input-wrapper {
    display: grid;
}
.nui-input-search .input-wrapper i {
    position: absolute;
    z-index: 2;
    color: var(--app-color-grey);
    display: grid;
    align-self: center;
    padding: 0 var(--app-spacing-xs);
    z-index: 4;
}
.nui-input-search input[nuiinput][type="search"] { padding-left: var(--app-spacing-xl); }

input[nuiinput][number] {
    text-align: right;
}
.input-currency input[nuiinput] {
    text-align: right;
    padding-left: var(--app-spacing-l);
}
.input-currency .currency-marker {
    content: "€";
    position: absolute;
    top: 19px;
    left: 9px;
    font-size: larger;
}

.intl {
    list-style: none;
    display: flex;
    flex-flow: row;
    gap: 0.4rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    padding: 0 0 0.4rem 0;
}
.intl li {
    background: black;
    border-radius: 50%;
    padding: 0.6rem;
}
.intl a {
    font-weight: normal;
    color: var(--app-color-base);
}
.intl a.selected {
    cursor: default;
    color: var(--app-color-white);
}

.pedia section { gap: 2rem !important; }
.pedia label { padding: 0; }
.pedia span { font-weight: bold; }
.thin {
    font-weight: 400;
}
span.badge {
    display: inline-grid;
    border-radius: 2rem;
    /* padding: 0.3rem; */
    width: 2rem;
    height: 2rem;
    justify-content: center;
    align-content: center;
}
[dark] span.badge {
    background: var(--app-color-white);
    color: var(--app-color-base);
}
[light] span.badge {}

.news .event {
    display: block;
    margin: 2rem 0rem 0 0;
    border: 2rem solid var(--app-color-white);
    display: grid;
    grid-template-columns: 320px auto;
    position: relative;
    width: 100%;
}
.news .event:hover {
    border: 2rem solid var(--app-color-base);
}
.news .event header {
    grid-row: 1;
    grid-column: 2;
    background: var(--app-color-white);
    z-index: 3;
}
.news .event header h1 {
    color: var(--app-color-black);
}
.news .event header h2 {
    position: absolute;
    top: 7px;
    left: -321px;
    display: flex;
    gap: 0.4rem;
    background: var(--app-color-alert);
    color: var(--app-color-white);
    padding: 0.3rem 0.9rem;
    box-shadow: 2px 2px 10px black;
    font-weight: bold;
    font-size: 2rem;
}
.news .event section {
    margin: 0;
    padding: 0;
}
.news .event section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: calc(100% - 320px);
    background: #ffffff;
    background: linear-gradient(270deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}