@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Quicksand:wght@300..700&display=swap');
:root {
    --black-color: #000;
    --white-color: #fff;
    
    --action-color: #D73B3D;
    /* Purple */
    --primary-color: #916783;
    /* Blue */
    --secondary-color: #4790C9;
    /* Red */
    --tertiary-color: #D63436;


    --light-color: var(--color-0);
    --dark-color: var(--color-5);
    --dark-alt-color: rgb(63, 0, 82);

    --blur: blur(10px);
    --shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.026),
    0 0.9px 1.7px rgba(0, 0, 0, 0.079),
    0 1.8px 3.5px rgba(0, 0, 0, 0.024),
    0 3.7px 7.3px rgba(0, 0, 0, 0.077),
    0 10px 20px rgba(0, 0, 0, 0.04);
    --shadow-text-light: rgba(0, 0, 0, 0.25) 1px 0 5px;
    --shadow-text-mid: rgba(0, 0, 0, 0.45) 1px 0 3px;
    --gap: 20px;
    --margin: 40px;
    --padding: 20px;
    --box-radius: 10px;
    --element-radius: 5px;
    --input-font-size: 16px;

    --variable-font-body: clamp(16px, 1.5vw, 18px);
    --variable-font-h4: clamp(22px, 1.5vw, 24px);
    --variable-font-h3: clamp(26px, 2vw, 32px);
    --variable-font-h2: clamp(28px, 2.3vw, 36px);
    --variable-font-h1: clamp(30px, 3vw, 44px);
    --variable-font-title: clamp(30px, 4vw, 44px);
    --variable-font-iq: clamp(40px, 10vw, 60px);

    --white-transparent: rgba(255,255,255,0.15);
    --black-transparent: rgba(0,0,0,0.5);
    
    --color: var(--primary-color);
    --fore-color: var(--white-color);
    --accent-color: color-mix(in srgb, currentColor 25%, transparent);
    --hover-color:  lch(from var(--color) calc(l - 20) c h);
    --mix-color: transparent;
    --art-color: transparent;
    --art-mix: color;
    --mix: normal;

    --bg-0: color-mix(in srgb, var(--color) 20%, var(--white-transparent));
    --bg-1: color-mix(in srgb, var(--color) 30%, var(--white-transparent));
    --bg-2: color-mix(in srgb, var(--color) 40%, var(--white-transparent));
    --bg-3: color-mix(in srgb, var(--color) 50%, var(--white-transparent));
    --bg-4: color-mix(in srgb, var(--color) 60%, var(--white-transparent));
    --bg-5: color-mix(in srgb, var(--color) 70%, var(--black-transparent));
    --bg-6: color-mix(in srgb, var(--color) 60%, var(--black-transparent));
    --bg-7: color-mix(in srgb, var(--color) 50%, var(--black-transparent));
    --bg-8: color-mix(in srgb, var(--color) 40%, var(--black-transparent));
    --bg-9: color-mix(in srgb, var(--color) 30%, var(--black-transparent));
    --bg-10: color-mix(in srgb, var(--color) 20%, var(--black-transparent));

    --color-0: color-mix(in srgb, var(--color) 20%, var(--white-color));
    --color-1: color-mix(in srgb, var(--color) 30%, var(--white-color));
    --color-2: color-mix(in srgb, var(--color) 40%, var(--white-color));
    --color-3: color-mix(in srgb, var(--color) 50%, var(--white-color));
    --color-4: color-mix(in srgb, var(--color) 60%, var(--white-color));
    --color-5: color-mix(in srgb, var(--color) 70%, var(--black-color));
    --color-6: color-mix(in srgb, var(--color) 60%, var(--black-color));
    --color-7: color-mix(in srgb, var(--color) 50%, var(--black-color));
    --color-8: color-mix(in srgb, var(--color) 40%, var(--black-color));
    --color-9: color-mix(in srgb, var(--color) 30%, var(--black-color));
    --color-10: color-mix(in srgb, var(--color) 20%, var(--black-color));

    --shade-grad: linear-gradient(to bottom, 
        color-mix(in srgb, var(--black-color) 30%, transparent) 0px, 
        color-mix(in srgb, var(--black-color) 30%, transparent) 80px, 
        color-mix(in srgb, var(--black-color) 20%, transparent) 175px, 
        color-mix(in srgb, var(--black-color) 0%, transparent) 250px);
    
    --light-multi-grad:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.0) 0, rgba(255, 255, 255, 0.75) 100%), 
        linear-gradient(to right, 
            color-mix(in srgb, var(--secondary-color) 20%, rgba(255, 255, 255, 0.5)) 0, 
            color-mix(in srgb, var(--primary-color) 50%, rgba(255, 255, 255, 0.5)) 200px, 
            color-mix(in srgb, var(--primary-color) 50%, rgba(255, 255, 255, 0.5)) 50%, 
            color-mix(in srgb, var(--dark-alt-color) 20%, rgba(255, 255, 255, 0.5)) calc(100% - 200px), 
            color-mix(in srgb, var(--secondary-color) 20%, rgba(255, 255, 255, 0.5)) 100%);
    --light-multi-grad-alt:
        linear-gradient(to top, rgba(255, 255, 255, 0.0) 0, rgba(255, 255, 255, 0.75) 100%), 
        linear-gradient(to right, 
            color-mix(in srgb, var(--secondary-color) 20%, rgba(255, 255, 255, 0.5)) 0, 
            color-mix(in srgb, var(--primary-color) 50%, rgba(255, 255, 255, 0.5)) 200px, 
            color-mix(in srgb, var(--primary-color) 50%, rgba(255, 255, 255, 0.5)) 50%, 
            color-mix(in srgb, var(--dark-alt-color) 20%, rgba(255, 255, 255, 0.5)) calc(100% - 200px), 
            color-mix(in srgb, var(--secondary-color) 20%, rgba(255, 255, 255, 0.5)) 100%);
    
    --mid-multi-grad:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0, rgba(0, 0, 0, 0.75) 100%), 
        linear-gradient(to right, 
            color-mix(in srgb, var(--secondary-color) 20%, rgba(0, 0, 0, 0.5)) 0, 
            color-mix(in srgb, var(--primary-color) 50%, rgba(0, 0, 0, 0.5)) 200px, 
            color-mix(in srgb, var(--primary-color) 50%, rgba(0, 0, 0, 0.5)) 50%, 
            color-mix(in srgb, var(--dark-alt-color) 20%, rgba(0, 0, 0, 0.5)) calc(100% - 200px), 
            color-mix(in srgb, var(--secondary-color) 20%, rgba(0, 0, 0, 0.5)) 100%);
    --mid-multi-grad-alt:
        linear-gradient(to top, rgba(0, 0, 0, 0.0) 0, rgba(0, 0, 0, 0.75) 100%), 
        linear-gradient(to right, 
            color-mix(in srgb, var(--secondary-color) 20%, rgba(0, 0, 0, 0.5)) 0, 
            color-mix(in srgb, var(--primary-color) 50%, rgba(0, 0, 0, 0.5)) 200px, 
            color-mix(in srgb, var(--primary-color) 50%, rgba(0, 0, 0, 0.5)) 50%, 
            color-mix(in srgb, var(--dark-alt-color) 20%, rgba(0, 0, 0, 0.5)) calc(100% - 200px), 
            color-mix(in srgb, var(--secondary-color) 20%, rgba(0, 0, 0, 0.5)) 100%);
    
    --dark-multi-grad: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0, rgba(0, 0, 0, 1.0) 100%),
        linear-gradient(to right, 
            color-mix(in srgb, var(--primary-color) 50%, var(--black-color)) 0, 
            color-mix(in srgb, var(--primary-color) 50%, var(--black-color)) 200px, 
            color-mix(in srgb, var(--tertiary-color) 50%, var(--black-color)) 50%, 
            color-mix(in srgb, var(--secondary-color) 50%, var(--black-color)) calc(100% - 200px), 
            color-mix(in srgb, var(--primary-color) 50%, var(--black-color)) 100%);
    --dark-multi-grad-alt: 
        linear-gradient(to top, rgba(0, 0, 0, 0.0) 0, rgba(0, 0, 0, 1.0) 100%),
        linear-gradient(to right, 
            color-mix(in srgb, var(--primary-color) 50%, var(--black-color)) 0, 
            color-mix(in srgb, var(--primary-color) 50%, var(--black-color)) 200px, 
            color-mix(in srgb, var(--tertiary-color) 50%, var(--black-color)) 50%, 
            color-mix(in srgb, var(--secondary-color) 50%, var(--black-color)) calc(100% - 200px), 
            color-mix(in srgb, var(--primary-color) 50%, var(--black-color)) 100%);
    
}

.forecolor0,.forecolor0:link{color:var(--color-0);}
.forecolor1,.forecolor1:link{color:var(--color-1);}
.forecolor2,.forecolor2:link,.forecolor0 A,A.forecolor0:hover{color:var(--color-2);}
.forecolor3,.forecolor3:link,.forecolor1 A,A.forecolor1:hover{color:var(--color-3);}
.forecolor4,.forecolor4:link,.forecolor2 A,A.forecolor2:hover,.forecolor0 A:hover{color:var(--color-4);}
.forecolor5,.forecolor5:link,.forecolor3 A,A.forecolor3:hover,.forecolor1 A:hover,.forecolor9 A:hover{color:var(--color-5);}
.forecolor6,.forecolor6:link,.forecolor4 A,A.forecolor4:hover,.forecolor2 A:hover,.forecolor10 A:hover{color:var(--color-6);}
.forecolor7,.forecolor7:link,.forecolor5 A,A.forecolor5:hover,.forecolor3 A:hover,.forecolor7 A:hover,A.forecolor9:hover,.forecolor9 A{color:var(--color-7);}
.forecolor8,.forecolor8:link,.forecolor6 A,A.forecolor6:hover,.forecolor4 A:hover,.forecolor8 A:hover,A.forecolor10:hover,.forecolor10 A{color:var(--color-8);}
.forecolor9,.forecolor9:link,.forecolor7 A,A.forecolor7:hover,.forecolor5 A:hover{color:var(--color-9);}
.forecolor10,.forecolor10:link,.forecolor8 A,A.forecolor8:hover,.forecolor6 A:hover{color:var(--color-10);}

.backcolor0{background-color: var(--bg-0); backdrop-filter: var(--blur);}
.backcolor1{background-color: var(--bg-1); backdrop-filter: var(--blur);}
.backcolor2{background-color: var(--bg-2); backdrop-filter: var(--blur);}
.backcolor3{background-color: var(--bg-3); backdrop-filter: var(--blur);}
.backcolor4{background-color: var(--bg-4); backdrop-filter: var(--blur);}
.backcolor5{background-color: var(--bg-5); backdrop-filter: var(--blur);}
.backcolor6{background-color: var(--bg-6); backdrop-filter: var(--blur);}
.backcolor7{background-color: var(--bg-7); backdrop-filter: var(--blur);}
.backcolor8{background-color: var(--bg-8); backdrop-filter: var(--blur);}
.backcolor9{background-color: var(--bg-9); backdrop-filter: var(--blur);}
.backcolor10{background-color:var(--bg-10); backdrop-filter: var(--blur);}

.bordercolor0{border-color:var(--color-0);}
.bordercolor1{border-color:var(--color-1);}
.bordercolor2{border-color:var(--color-2);}
.bordercolor3{border-color:var(--color-3);}
.bordercolor4{border-color:var(--color-4);}
.bordercolor5{border-color:var(--color-5);}
.bordercolor6{border-color:var(--color-6);}
.bordercolor7{border-color:var(--color-7);}
.bordercolor8{border-color:var(--color-8);}
.bordercolor9{border-color:var(--color-9);}
.bordercolor10{border-color:var(--color-10);}

.fontstyle0{font-size: 1rem;}
.fontstyle1{font-size: 1rem;}
.fontstyle2{font-size: 1rem; font-weight: bold;}
.fontstyle3{font-size: 1rem;}
.fontstyle4{font-size: 1.25rem; font-weight: bold;}
.fontstyle5{font-size: 1.3rem; font-weight: bold;}
.fontstyle6{font-size: 2.0em; font-weight: bold; text-decoration:none;}
.fontstyle7{font-size: 1.3rem; font-weight: bold; text-decoration:none;}
.fontstyle8{font-size: 1.4rem; font-weight: bold; text-decoration:none;}
.fontstyle9{font-size: 1.5rem; font-weight: bold; text-decoration:none;}
.fontstyle10{font-size: 1.7rem; font-weight: bold; text-decoration:none;}


.n-v1-container{
    --container-margin: calc((100vw - 100%) / 2);
}
@media only all and (max-width: 768px) {
    .n-v1-container{
        width: 100%;
    }
}

.curve{
    --border-width: 0px !important;
    box-shadow: var(--shadow);
}
.iq {
    font-family: "Quicksand", sans-serif !important;
    font-weight: 200;
    font-optical-sizing: auto;
}

img.rounded{
    border-radius: var(--element-radius);
}

/* Sections */

.section .module-title{
    padding: 0 40px;
}
.section.default{
    background-color: var(--white-transparent);
    padding-top: 40px;
    --accent-color: color-mix(in srgb, var(--color) 25%, transparent)
}
.section .modulecontent{
    padding: 0 min(1vw, 40px);
}
.black {
    --color: var(--black-color);
    --fore-color: var(--white-color);
    --accent-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
    --highlight-color:var(---color);
    --mix-color: color-mix(in srgb, var(--white-color) 20%, transparent);
    --hover-color: color-mix(in srgb, var(--white-color) 20%, transparent);
    --mix: screen;
}
.white{
    --color: var(--white-color);
    --fore-color: var(--black-color);
    --mix-color: color-mix(in srgb, var(--black-color) 20%, transparent);
    --mix: multiply;
}
.light {
    --color: var(--light-color);
    color: var(--black-color);
    --fore-color: var(--black-color);
}
.dark {
    --color: var(--dark-color);
    color: var(--white-color);
    --fore-color: var(--white-color);
}
.dark-alt {
    --color: var(--dark-alt-color);
    --fore-color: var(--white-color);
}
.action {
    --color: var(--action-color);
    --fore-color: var(--white-color);
}
.primary {
    --color: var(--primary-color);
    --fore-color: var(--white-color);
}
.secondary {
    --color: var(--secondary-color);
    --fore-color: var(--white-color);
}
.tertiary {
    --color: var(--tertiary-color);
    --fore-color: var(--white-color);
}
.accent{
    --mix: screen ;
    --fore-color: var(--black-color);
}
.highlight{
    --mix: multiply;
    --fore-color: var(--white-color);
}
.lightgradient, .lightgradientalt{
    --fore-color: var(--black-color);
}
.midgradient, .midgradientalt{
    --fore-color: var(--white-color);
}
.darkgradient, .darkgradientalt{
    --fore-color: var(--white-color);
}


.black.ghost.on-dark,
.dark.semi-transparent,
.light-text {
    color: var(--white-color) !important;
}

.dark-text {
    color: var(--black-color) !important;
}

a {
    color: var(--action-color);
}

HTML,
.body{
    margin: 0;
    background-color: var(--black-color);
}

.body {
    min-height: 100vh;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    background-color: var(--white-color);
}

.body * {
    box-sizing: border-box;
}

.button {
    border-radius: var(--element-radius);
    padding: 0.75em 1em;
    display: inline-block;
    text-decoration: none;
    color: var(--fore-color);
    background-color: var(--color);
    overflow: hidden;
    text-align: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.button:not(.fa)::before{
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background-color: var(--mix-color) !important;
    mix-blend-mode: var(--mix);
    z-index: -1;
}
.button:hover{
    --hover-color:  lch(from var(--color) calc(l - 20) c h);
    background-color: var(--hover-color) !important;
}
.black .button:hover{
    --hover-color:  lch(from var(--color) calc(l + 20) c h);
}
.button:hover::before{
    background-color: var(--hover-color);
}

.button.black {
    color: var(--white-color);
    background-color: var(--color);
}

.button.white {
    color: var(--black-color);
    background-color: var(--color);
}

.button.light {
    background-color: var(--color);
}

.button.dark {
    color: var(--light-color);
    background-color: var(--color);
}

.button.action {
    background-color: var(--color);
}

.button.primary {
    color: var(--white-color);
    background-color: var(--color);
}

.button.secondary {
    color: var(--white-color);
    background-color: var(--color);
}

.button.tertiary {
    color: var(--white-color);
    background-color: var(--color);
}

.button.ghost {
    border-width: 1px;
    border-style: solid;
    border-color: var(--color);
    color: var(--color) !important;
    background-color: transparent !important;
    --mix: normal;
    --mix-color: transparent
}

.fa.button,
.fa.button:before{
  display: flex;
  justify-content: center;
  align-items: center;
}

.fa.button:before{
  position: relative;
  z-index: unset;
}
.fa.button:hover:before{
  background-color: unset !important;
}
.fa.button::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background-color: var(--mix-color) !important;
    mix-blend-mode: var(--mix);
    z-index: -1;
}

.button.ghost:hover,
.section.solid .button:not(.action, .primary, .secondary, .tertiary, .black, .white, .dark, .light):hover {
    --mix-color: var(--hover-color);
    color: var(--white-color) !important;
}

.button.disabled{
    pointer-events: none;
    filter: brightness(0.8);
}

.section.solid .button.ghost.button:not(.action, .primary, .secondary, .tertiary, .black, .white, .dark, .light) {
    border-width: 1px;
    border-style: solid;
    border-color: var(--fore-color);
    color: var(--fore-color) !important;
}

.button.transparent {
    background-color: transparent;
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color) 50%, transparent), color-mix(in srgb, var(--color) 50%, transparent));
}

[style*="background-image"]>.button {
    color: #fff !important;
}
.section .content article:has(+ .button) {
    /* padding-top: 0; */
    padding-bottom: var(--gap);
}

.section .content:has( > .button){
    /* padding-top: var(--gap); */
    padding-bottom: var(--gap);
}

article + .button{
    margin: 0 var(--margin);
}

.body input {
    --color: var(--white-color);
    --fore-color: var(--black-color);
    --border-color: var(--fore-color);
    border: 1px solid var(--border-color);
    padding: 0.75em 1em;
    display: inline-block;
    text-decoration: none;
    color: var(--fore-color);
    background-color: var(--color);
    border-radius: var(--element-radius);
    font-size: var(--input-font-size);
    --placeholder-color: var(--fore-color);
}

input::placeholder {
    color: var(--placeholder-color);
    opacity: 0.5;
}

textarea:focus,
input:focus {
    outline: none;

}

input.white,
input.black,
input.light,
input.dark,
input.action,
input.primary,
input.secondary,
input.tertiary {
    --border-color: var(--color);
}

input.black,
input.dark,
input.action,
input.primary,
input.secondary,
input.tertiary {
    --fore-color: var(--white-color);
}

input.ghost {
    --fore-color: var(--color);
    border-width: 1px;
    border-style: solid;
    border-color: var(--color);
    color: var(--color);
    background-color: transparent;
}

.section {
    padding: 7vh 0;
    min-height: 30vh;
    container: section / inline-size;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.section_a .section{
    min-height: 50vh;
}

.section .title,
.section .title > h2 {
    font-family: "Inter", sans-serif;
    font-weight: 100;
    font-optical-sizing: auto;
    font-size: var(--variable-font-h1);
    text-align: center;
}
.section:not(.art, .image) .title > h2{
    padding-bottom: var(--gap);
    border-bottom: 1px solid var(--accent-color);
}

.section .container,
.section .compare {
    container: container / inline-size;
}

.section .compare {
    display: flex;
    row-gap: var(--gap);
    column-gap: calc(var(--gap) * 2);
}

.section .compare .content {
    width: 100%;
}

.section .content {
    container: content / inline-size;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.section .content.center{
    text-align: center;
}

.section .content.middle{
    display: flex;
    justify-content: center;
    align-items: center;
}

.section .content.middle article{
    justify-content: center;
}

.section .content.right {
    flex-direction: row-reverse;
}

.section .content.ball{
    --height: calc(100cqmin + 80px);
    --size: min(var(--height), 400px);
    --half-ball: calc(var(--size) / 2);
}

  .section .content.ball:before {
    content: '';
    aspect-ratio: 1 / 1;
    height: var(--size);
    width: auto;
    margin-left: calc(var(--half-ball) * -1);
    margin-right: calc(var(--half-ball) * -1);
    align-self: center;
    z-index: -1;
    border-radius: 100%;
    background: no-repeat center / 120% url(https://003.neoreef.com/Documents%20and%20Settings/150/Site%20Documents/Site%20Pictures/globe.webp);
  }

.section .content.ball.max-225{
    --size: min(var(--height), 225px);
}

.section .content.ball.out{
    overflow: visible;
}

.section .content.ball.right.out {
    margin-right: var(--half-ball);
}
.section .content.ball.right:before {
    transform: translate(5%, 0%);
}
.section .content.ball.right article:last-child{
    padding-right: var(--half-ball);
}
.section .content.ball.left article{
    padding-left: var(--half-ball);
}

.section .content.ball.top:before {
    width: calc(100% - 50px);
    left: 50%;
    top: -50%;
}

.section .content.ball h3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    flex-basis: var(--half-ball);
    font-size: var(--variable-font-h3);
    line-height: 1.5em;
}

.section .content.ball h3 sup {
    font-size: max(20px, var(--variable-font-h2));
    font-weight: 900;
    line-height: 0.8em;
}

.section .content.ball.left h3 {
    left: 0;
    padding: var(--padding);
}

.section .content.ball.right h3 {
    right: 0;
    text-align: right;
    padding: 0 1em 0 40px;
}

.section .content.ball.top h3 {
    right: 0;
    left: 0;
    text-align: center;
    padding: 0.5rem 2em 40px 2em;
    font-size: 1.5em;

}

.section .content.ball.primary:before {
    background-color: var(--primary-color);
}

.section .content.ball.secondary:before {
    background-color: var(--secondary-color);
}

.section .content.ball.tertiary:before {
    background-color: var(--tertiary-color);
}

.section .content.ball.primary h3,
.section .content.ball.secondary h3,
.section .content.ball.tertiary h3 {
    color: var(--white-color);
}

.section .content p,
.section .content h1,
.section .content h2,
.section .content h3,
.section .content h4 {
    margin: 0;
    font-family: "Inter", sans-serif;
}
.section .content p,
.section .content ul {
    font-size: var(--variable-font-body);
    line-height: 1.5em;
    /* text-align: justify; */
    /* hyphens: auto; */
    word-spacing: -0.08em;
    font-weight: 300;
    margin: 0;
}

.section .content ul{
    padding: 1em 1em 1em 2em;
    font-size: 1em;
    border: 1px solid var(--color);
    border-radius: var(--box-radius);
    background-color: color-mix(in srgb, var(--color) 15%, var(--white-transparent));
}

.section .content li {
    text-align: left;
    hyphens: auto;
}

.section h1 {
    font-size: var(--variable-font-h1);
}

.section h2 {
    font-size: var(--variable-font-h2);
}

.section h3 {
    font-size: var(--variable-font-h3);
    font-weight: 100;
}
.section h4 {
    font-size: var(--variable-font-h4);
    font-weight: 300;
}

.section .content article {
    gap: var(--gap);
    flex-basis: min-content;
    margin: 0;
}

.section .content aside {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    padding: var(--padding);
    flex-basis: 50%;
    align-content: flex-end;
    justify-content: center;
    position: relative;
    background: no-repeat center bottom/cover;
}

.section .content aside:after {
    content: '';
    background: linear-gradient(to bottom, color-mix(in srgb, var(--black-color) 0%, transparent), var(--black-color));
    position: absolute;
    inset: 50% 0 0 0;
    z-index: 0;
}

.section .content aside * {
    z-index: 1;
    flex-grow: 1;
}

.section .content.image aside {
    background-color: var(--black-color);
}

.compare.divided{
    gap: var(--gap);
}

.compare.divided > * {
    flex-grow: 1;
}

.section .compare.reverse{
    flex-direction: row-reverse;
}


.section:not(.art, .image)  .compare.divided > *  + *:before{
    content: '';
    border: calc(var(--gap)* 0.1) solid var(--accent-color);;
    margin: var(--margin) 0 var(--margin) calc(((var(--gap) + (var(--gap)* 0.2)) / 2)* -1);
}

.section:not(.art, .image)  .compare.reverse.divided > *  + *:before{
    content: none;
    border: none;
}

.section:not(.art, .image)  .compare.reverse.divided > *  + *:after{
    content: '';
    border: calc(var(--gap)* 0.1) solid var(--accent-color);;
    margin: var(--margin) calc(((var(--gap) + (var(--gap)* 0.2)) / 2)* -1) var(--margin) 0;
}

/* first one when a second follows  */
.compare.divided:has(+ div.compare.divided) > *  + *:before,
.compare.divided:has(+ div.compare.divided) > *  + *:after
{
    margin-bottom: 0 !important;
}
/* first second one when a prior follows  */
.compare.divided + .compare.divided  > *  + *:before,
.compare.divided + .compare.divided  > *  + *:after
{
    margin-top: 0 !important;
}


@media only all and (max-width: 920px) {
    .section .compare, 
    .section .compare.reverse{
        flex-direction: column;
    }

    .section .compare.divided > * {
        flex-direction: column !important;
    }

    .section:not(.art, .image)  .compare.divided > *  + *:before{
        content: '' !important;
        border: calc(var(--gap)* 0.1) solid var(--accent-color) !important;
        margin: calc(var(--gap)* -0.6) var(--margin) 0 var(--margin) !important;
    }

    .section:not(.art, .image)  .compare.reverse.divided > *  + *:after{
        content: none;
        border: none;
    }
}

.section .compare .container {
    width: 100%;
    flex-direction: row;
    display: flex;
}

.section .content {
    margin: var(--margin) auto;
}

.section .content article {
    display: flex;
    justify-content: center;
    padding: var(--margin);
    flex-direction: column;
    flex-grow: 1;
}

.section.white {
    color: var(--fore-color);
    background-color: var(--color)
}
.section.black {
    color: var(--fore-color);
    background-color: var(--color)
}
.section.light {
    color: var(--fore-color);
    background-color: var(--color)
}
.section.dark {
    color: var(--fore-color);
    background-color: var(--color)
}
.section.action {
    color: var(--fore-color);
    background-color: var(--color)
}
.section.primary {
    color: var(--fore-color);
    background-color: var(--color)
}
.section.secondary {
    color: var(--fore-color);
    background-color: var(--color)
}
.section.tertiary {
    color: var(--fore-color);
    background-color: var(--color)
}
.section.image{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: var(--light-color);
}
.section.gradient,
.section.gradientalt{
    color: var(--fore-color);
    background-color: var(--color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.section.lightgradient{
    background-image: var(--light-multi-grad);
}
.section.lightgradientalt{
    background-image: var(--light-multi-grad-alt);
}
.section.midgradient{
    background-image: var(--mid-multi-grad);
}
.section.midgradientalt{
    background-image: var(--mid-multi-grad-alt);
}
.section.darkgradient{
    background-image: var(--dark-multi-grad);
}
.section.darkgradientalt{
    background-image: var(--dark-multi-grad-alt);
}
.section.solid:not(.gradient, .gradientalt) .button:not(.action, .primary, .secondary, .tertiary, .black, .white, .dark, .light){
    color: var(--color);
    background-color: var(--fore-color);
    mix-blend-mode: normal;
}

.module-class:has(> div > div.stack):has(+ div.module-class > div > div.stackalt) > div > div.stack,
.module-class:has(> div > div.stackalt):has(+ div.module-class > div > div.stack) > div > div.stackalt
{
    padding-bottom: 0;
  }
  
.module-class:has(> div > div.stack) + .module-class:has(> div > div.stackalt) div.stackalt,
.module-class:has(> div > div.stackalt) + .module-class:has(> div > div.stack) div.stack
{
    padding-top: 0;
}

.section.solid .button:is(.action, .primary, .secondary, .tertiary, .black, .white, .dark, .light){
    --mix-color: transparent;
    --mix: normal;
}

.section.art {
    min-height: 680px;
    background-image: 
        linear-gradient(to bottom, var(--art-color), var(--art-color)),
        url("https://003.neoreef.com/Documents%20and%20Settings/150/Site%20Documents/Site%20Pictures/art.webp"),
        linear-gradient(to bottom, color-mix(in srgb, var(--white-color) 0%, transparent), var(--light-color));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center 80px;
    background-size: auto, clamp(500px, 100%, 1176px) auto, auto;
    background-blend-mode: var(--art-mix), normal, normal;
    background-color: var(--white-color);    
    padding-top: 100px;
}

.section.art .title,
.section.art .title > h2,
.section.image .title,
.section.image .title > h2 {
    color: var(--white-color);
    text-shadow: var(--shadow-text-mid);
}

.section.art .compare {
    column-gap: calc(var(--margin) * 2);
}

.content.ball,
.content.shaded,
.section.art .content,
.section.image .content {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--white-color) 50%, transparent), color-mix(in srgb, var(--white-color) 50%, transparent));
    border-radius: var(--box-radius);
    backdrop-filter: var(--blur);
    box-shadow: var(--shadow);
    --accent-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
}

.content.not-shaded{
    background: none !important;
    box-shadow: none !important;
    border: none;
    backdrop-filter: none !important;
}

:where(.dark, .midgradient, .midgradientalt, .darkgradient, .darkgradientalt) :is(.content.ball, .content.shaded)
{
    background: linear-gradient(to bottom, color-mix(in srgb, var(--black-color) 50%, transparent), color-mix(in srgb, var(--black-color) 50%, transparent));
}

/* :where(.lightgradient, .lightgradientalt) :is(.content.ball, .content.shaded, .content.bg-icon):before
{
    background-color: var(--bg-5) !important;
} */

@container container (width < 920px) {
    .content {
        flex-direction: column !important;
        justify-content: space-between;
    }

    .section .content.ball {
        --size: 100cqw;
    }

    .section .content.ball:before {
        --margin: calc(var(--size) / -2);
        aspect-ratio: 1 / 1;
        width: auto;
        height: var(--size);
        margin-top: var(--margin);
        margin-bottom: calc(var(--margin));
        margin-left: auto;
        margin-right: auto;
        transform: translate(0%, calc((52cqw * -1) + 135px));
        align-self: center;
    }
    .section .content.ball.max-225{
        --size: min(100cqw, 225px);
    }

    .section .content article {
        flex-basis: auto;
        justify-content: flex-start;
    }

    .section .content.ball.out{
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100%;
    }

    .section .content.ball.right article {
        padding-top: calc(var(--half-ball) + var(--margin));
        padding-right: var(--margin);
    }

    .section .content.ball.out {
        margin-top: var(--half-ball);
    }
    .section .content.ball.out.max-225:before {
        transform: unset;
    }

    .section .content.ball article {
        gap: var(--gap);
        justify-content: center;
    }

    .section .content.ball h3 {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        flex-basis: 115px;
        margin-top: 0;
        padding-bottom: 1em;
    }

    .section .content.ball p {
        flex-basis: 70%;
    }

    .section .content aside {
        flex-basis: auto;
        aspect-ratio: 16/9;
    }


}

@property --a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 90deg;
}

@property --l {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 10%;
}

@property --c {
    syntax: '<color>';
    inherits: false;
    initial-value: var(--primary-color);
}

.header {
    position: sticky;
    top: -30px;
    z-index: 2000;

}

.header:before {
    content: '';
    display: block;
    position: absolute;
    inset: 0 0 0 0;
    z-index: -1;
    backdrop-filter: var(--blur);
    box-shadow: var(--shadow);
}

.header:after {
    pointer-events: none;
    content: '';
    display: block;
    top: 0;
    width: 100%;
    position: absolute;
    z-index: 1;
    height: 400px;
    background-image: var(--shade);
}

.top-bar {
    background-image: var(--light-multi-grad);
    background-repeat: no-repeat, repeat;
    background-position: calc(50% - 200px) -120px, 0px 0px;
    background-size: 1176px auto, auto;
    background-blend-mode: multiply, multiply;
    z-index: 1000;
    white-space: nowrap;
}

.top-bar .n-v1-container {
    font-size: 12px;
    height: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 40px;
}

.sales,
.sales a {
    color: var(--white-color);
    text-decoration: none;
    text-transform: uppercase;
}

.top-menu {
    display: flex;
    gap: 20px;
}

.top-menu,
.top-menu a {
    color: var(--light-color);
    text-decoration: none;
    text-transform: uppercase;
}

.bottom-bar {
    z-index: 1000;
    position: relative;
    background-image:
        linear-gradient(160deg, color-mix(in srgb, var(--tertiary-color) 5%, transparent), color-mix(in srgb, var(--primary-color) 20%, transparent)),
        linear-gradient(to right, color-mix(in srgb, var(--secondary-color) 10%, transparent), color-mix(in srgb, var(--black-color) 5%, transparent));
}

.bottom-bar .n-v1-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    height: 95px;
    white-space: nowrap;
}

.bottom-bar:after {
    content: '';
    --a: 20deg;
    --l: 10%;
    --c: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    width: 100%;
    height: 4px;
    display: block;
    transition: --a 1.5s 1.1s, --l 1.5s, --c 1.2s;
    background: linear-gradient(var(--a), var(--c) var(--l), rgba(255, 255, 255, 0.3) var(--l), var(--c) calc(100% - var(--l)));
    /* animation: reflection 5s linear infinite alternate; */
}

@keyframes reflection {
    from {
        --a: 20deg;
        --l: 10%;
    }

    50% {
        --a: -80deg;
    }

    to {
        --a: -20deg;
        --l: 100%;
    }
}

.nav {
    position: relative;
}

.responsive-menu-toggle {
    display: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    width: 2.2em;
    height: 2.2em;
    padding: 0.5em;

}

.responsive-menu-toggle:before {
    content: "\f0c9";
    font-family: "FontAwesome";
    font-size: 1.5em;
    text-transform: none !important;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    color: var(--white-color);
}


@media only all and (min-width: 979px) {
    .mega-first{
        padding: 1em !important;
        box-sizing: border-box;
    }
    .mega-first:before{
        position: absolute;
        visibility: visible;
        background: var(--white-transparent);
    }
    .mega-first > li{
        float: left;
        box-sizing: border-box;
        min-width: auto !important;
    }
    .mega-first > li img{
        display: block;
        margin-bottom: 0.2em;
        width: 100%;
        aspect-ratio: 30 / 10;
    }
    .mega-first > li:nth-child(-n+6) a{
        padding: 1em !important;
    }
    .mega-first > li:nth-child(-n+6){
        width: 33.3% !important;
        min-height: 5em;
        padding: 0 !important;
        border-bottom: 1px solid #00000036;
        border-right: 1px solid transparent;
        margin-bottom: 0.5em;
        text-align: center;
    }

    .mega-first > li:nth-child(n+7){
        padding: 1em;
        width: auto !important;
        border-left: 1px solid #00000036;
    }
    .mega-first > li:nth-child(n+7) > ul{
        top: auto !important;
    }
    .mega-first > li.submenu:nth-child(n+7):before {
        content: "\f0dd" !important;
    }
    
    .mega-first > li:nth-child(7){
        border-left: none;
    }
    .mega-first > li:nth-child(n+9){
        display: none;
    }
}


#Main_Panel {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.0) 100px, rgba(255, 255, 255, 1.0) 445px),
        url("https://003.neoreef.com//Documents%20and%20Settings/150/Site%20Documents/Site%20Pictures/art-noshad.webp"),
        linear-gradient(to right, 
            color-mix(in srgb, var(--tertiary-color) 50%, var(--primary-color)) 0, 
            color-mix(in srgb, var(--primary-color) 100%, var(--secondary-color)) 200px, 
            color-mix(in srgb, var(--primary-color) 50%, var(--white-color)) 50%, 
            color-mix(in srgb, var(--secondary-color) 100%, var(--primary-color)) calc(100% - 200px), 
            color-mix(in srgb, var(--primary-color) 50%, var(--secondary-color)) 100%);
    background-repeat: repeat, no-repeat, repeat;
    background-position: 0px 0px, calc(50% - 200px) -120px, 0px 0px;
    background-size: auto, 1176px auto, auto;
    background-blend-mode: normal, darken, normal, normal;
    background-color: var(--white-color);
}

#Mobile_Menu_Panel {
    display: none;
    background-image:
        linear-gradient(to top, color-mix(in srgb, var(--primary-color) 20%, transparent) 0%, var(--dark-color)),
        linear-gradient(to left, color-mix(in srgb, var(--primary-color) 50%, transparent) 0%, var(--dark-color));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: calc(50% - 200px) 0, 0px 0px;
    background-size: 1176px auto, auto, auto;
    background-blend-mode: multiply, multiply, hue;
}

#menu {
    display: flex;
    justify-content: flex-end;
    gap: 3vw;
    width: 100%;
    height: 100%;
}

#menu * {
    color: var(--white-color);
    text-decoration: none;
    font-size: 18px;
}

#menu a,
#menu a:hover {
    white-space: nowrap;
    text-decoration: none;
    display: block;
}

#menu ul {
    list-style: none outside;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    display: flex;
    justify-content: flex-end;
}

#menu>ul>li ul {
    box-shadow: var(--shadow);
}

/* main menu 1st level */
#menu>ul {
    position: relative;
    width: 100%;
}

#menu>ul>li {
    margin: 0;
    position: relative;
    z-index: 203;
    float: left;
    display: flex;
    align-items: center;
}

#menu>ul>li ul {
    backdrop-filter: var(--blur);
}

#menu>ul>li.hover {
    z-index: 204;
}

#menu>ul>li>a,
#menu>ul>li.submenu>a {
    padding: 0.7em 1.5em 0.7em 1em;
}

#menu>ul>li.submenu:before {
    content: "\f0dd";
    font-family: "FontAwesome";
    font-size: 1em;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    right: 0.5em;
    transform: translateY(-0.25em);
}

#menu>ul>li>a {
    padding-right: 1em;
    font-weight: 400;
}

#menu>ul>li.current>a {
    padding-top: 0.6em;
    border-top: 0.1em solid var(--color);
}

#menu > ul > li > a{
    transition: all 0.3s;
}

#menu > ul > li > a:hover,
#menu > ul > li.hover > a {
    background-color: var(--white-transparent);
}

#menu > ul > li.hover:has(> ul) > a {
    padding-bottom: 37px;
    margin-top: 25px;
}

#menu ul li.last>ul {
    right: 0px;
    left: auto;
}

#menu ul li.last ul li ul {
    right: 100%;
    left: auto;
}

/* main menu 2nd level */
#menu ul ul {
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: 205;
    margin: 0;
    padding: 0;
    display: none;
}

#menu ul li ul {
    position: absolute;
    height: auto;
    left: 0px;
    top: 100%;
    z-index: 205;
    margin: 0;
    padding: 0;
    display: none;
    text-shadow: var(--shadow-text-light);
    --a: 20deg;
    --l: 10%;
    --c: rgba(255, 255, 255, 0.1);
    transition: --a 1.5s 1.1s, --l 1.5s, --c 1.2s;
    background-image: 
        linear-gradient(var(--a), var(--c) var(--l), rgba(255, 255, 255, 0.3) var(--l), var(--c) calc(100% - var(--l))),
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 20px, color-mix(in srgb, var(--primary-color) 30%, var(--white-transparent)) 50px);

    animation: reflection 5s linear infinite alternate;
}

#menu ul li ul:not(.mega-first){
    width: max-content;

}

#menu ul li ul li {
    padding: 0;
    width: 100%;
    min-width: 150px;
    position: relative;
    font-weight: normal;
}

#menu ul li ul li a {
    padding: 0.5em 1em 0.5em 1em;
    font-weight: 300;
    font-size: 1em;
}
#menu ul li ul li.submenu > a {
    padding: 0.5em 1.5em 0.5em 1em;
}

#menu>ul>li ul li.submenu .menu-toggle:before {
    font-size: 50px;
    line-height: 50px;
}

#menu ul li ul li.submenu:before {
    content: "\f0da";
    font-family: "FontAwesome";
    font-size: 15px;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    right: 12px;
    top: 11px;
}

#menu > ul > li ul li a:hover,
#menu > ul > li ul li.hover > a {
    background: var(--black-transparent);
}

/* main menu 3rd level */
#menu ul li ul li ul {
    position: absolute;
    left: 100%;
    top: 0px;
    z-index: 204;
    padding: 0;
}

#menu ul li ul li ul li a {
    font-size: 0.85em;
}

/* main menu .last-item */
#menu ul li ul li.last-item>a,
#menu ul li ul li ul li.last-item>a {
    border-bottom-width: 0px;
}

#menu ul ul ul {
    position: absolute;
    left: 225px;
    top: 100%;
    z-index: 205;
    margin: 0;
    padding: 0;
    display: none;
}

/* All Mobile Sizes (devices and browser) */

/* main menu 1st level */
#menu>ul>li>a {
    ---color: rgb(var(--scroll-color) var(--scroll-color) var(--scroll-color));
}

#menu>ul>li.current>a {
    ---color: var(--black-color);
}

#menu>ul>li>a:hover,
#menu>ul>li.hover>a {
    ---color: var(--black-color);
}

#menu ul li.submenu .menu-toggle {
    ---color: var(--black-color);
}

#menu>ul>li.submenu:before {
    ---color: rgb(var(--scroll-color) var(--scroll-color) var(--scroll-color));
}

/* main menu 2nd level */
#menu>ul>li ul {}

#menu>ul>li ul li a:hover,
#menu>ul>li ul li.hover>a {
    ---color: #000;
}

#menu>ul>li ul li:hover.submenu .menu-toggle,
#menu>ul>li ul li.hover.submenu .menu-toggle {
    ---color: #404040;
}

#menu>ul>li ul li.submenu:before {
    ---color: #000;
}

#menu>ul>li ul li.submenu.hover:before {
    ---color: #aaaaaa;
}

/* main menu 3rd level */
#menu ul ul ul {
    background-image: 
        linear-gradient(var(--a), var(--c) var(--l), rgba(255, 255, 255, 0.3) var(--l), var(--c) calc(100% - var(--l))),
        linear-gradient(to bottom, color-mix(in srgb, var(--primary-color) 50%, var(--black-transparent)), color-mix(in srgb, var(--primary-color) 50%, var(--black-transparent)));
}

#menu li a {
    ---color: #000;
}

#menu ul ul ul li a:hover,
#menu ul ul li ul li.hover>a {
    ---color: #000;
}

#menu ul ul li ul li.submenu .menu-toggle {
    ---color: #000;
}

/* Mobile menu */

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only all and (min-width: 768px) and (max-width: 979px) {

    /* Responsive menu */
    #menu {
        position: relative;
        width: 300px;
        right: 0;
    }

    #menu ul {
        position: absolute;
        right: 0;
        z-index: 999;
    }

    #menu ul li {
        width: 300px;
    }

    #menu ul ul {
        border: none;
    }
}

@media only all and (max-width: 979px) {

    #Mobile_Menu_Panel,
    .responsive-menu-toggle {
        display: block;
    }

    .responsive-menu-toggle.active,
    .responsive-menu-toggle:hover {
        background-color: var(--white-transparent);
    }

    #Main_Panel nav {
        margin-top: clamp(4.6em, calc(6.7em - var(--scroll)), 6.7em);
    }

    #menu {
        display: none;
    }

    /* main menu 1st level */
    #menu ul {
        background-color: var(--white-transparent);
        backdrop-filter: var(--back-drop);
    }

    #menu ul li {
        width: 100%;
    }

    #menu ul li a,
    #menu>ul>li.current>a {
        color: #000;
        padding: 10px 20px;
    }

    #menu ul li.submenu .menu-toggle {
        text-align: center;
        content: "\f067";
        font-family: "FontAwesome";
        width: 50px;
        height: 42px;
        line-height: 42px;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }

    #menu ul li.submenu .menu-toggle:before {
        text-align: center;
        content: "\f067";
        font-family: "FontAwesome";
        width: 50px;
        height: 42px;
        line-height: 42px;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }

    #menu ul li ul li.submenu .menu-toggle:before {
        content: "\f067";
        font-family: "FontAwesome";
        font-size: 18px;
        text-transform: none !important;
        line-height: 51px;
        -webkit-font-smoothing: antialiased;
    }

    #menu ul li.submenu.hover>.menu-toggle:before {
        content: "\f068";
    }

    #menu>ul>li.mseparator {
        display: none;
    }

    #menu>ul>li.submenu>a {
        background: none;
    }

    #menu>ul>li.sumbenu>a:hover,
    #menu>ul>li.hover.submenu>a {
        background: #000 none;
        color: #000000;
    }

    #menu>ul>li.submenu>a,
    #menu>ul>li.current.submenu>a {
        padding: 10px 20px;
    }

    #menu>ul>li.last>a {
        margin-left: 0;
    }

    /* main menu 2nd level */
    #menu ul li ul {
        position: relative !important;
        left: 0 !important;
    }

    #menu ul li ul li {
        width: 100% !important;
    }

    #menu ul li ul li a {
        padding: 15px 20px 15px 40px;
    }

    /* main menu 2nd level */
    #menu>ul>li>ul {
        background: #555555;
    }

    #menu>ul>li ul li a {
        color: #000;
    }

    #menu>ul>li ul li a:hover,
    #menu>ul>li ul li.hover>a {
        background: #eeeeee;
        color: #333333;
    }

    #menu ul ul ul li a {
        color: #333333;
    }

    #menu ul ul ul li a:hover,
    #menu ul ul li ul li.hover>a {
        color: #333333;
        text-decoration: underline;
    }

    #menu>ul>li.submenu:before,
    #menu>ul>li ul li.submenu:before {
        display: none;
    }

    /* main menu 3rd level */
    #menu ul li ul li ul li a {
        padding: 15px 20px 15px 60px;
    }

    #menu>ul>li IMG {
        height: 30px !important;
        width: auto;
        margin: 0px 5px -15px -10px !important;
    }
}

@media only all and (max-width: 767px) {
    .top-bar .n-v1-container {
        width: 100%;
        justify-content: space-between;
        gap: 20px;
    }

    .top-menu {
        gap: 10px;
    }

    .bottom-bar .logo img{
        height: clamp(50px, 13vw, 77px);
    }

    .bottom-bar .n-v1-container {
        justify-content: space-between;
        gap: 10px;
        width: 90%;
    }

    .section.art {
        min-height: 100vh;
        background-position: center 80px;
    }

    .section.art .title {
        padding-top: 0;
    }
    
    
    .top-bar .n-v1-container:before,
    .top-bar .n-v1-container:after
    .bottom-bar .n-v1-container:before,
    .bottom-bar .n-v1-container:after
     {
        display: none;
    }

    :root{
        --light-multi-grade:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0, rgba(0, 0, 0, 0.0) 100%), 
            linear-gradient(to right, 
                color-mix(in srgb, var(--primary-color) 50%, rgba(0, 0, 0, 0.5)) 0, 
                color-mix(in srgb, var(--primary-color) 50%, rgba(0, 0, 0, 0.5)) 14%, 
                color-mix(in srgb, var(--primary-color) 50%, rgba(0, 0, 0, 0.5)) 50%, 
                color-mix(in srgb, var(--dark-alt-color) 50%, rgba(0, 0, 0, 0.5)) calc(100% - 14%), 
                color-mix(in srgb, var(--secondary-color) 50%, rgba(0, 0, 0, 0.5)) 100%);
        --dark-multi-grad: 
            linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0, rgba(0, 0, 0, 1.0) 100%), 
            linear-gradient(to right, 
                color-mix(in srgb, var(--primary-color) 50%, var(--black-color)) 0, 
                color-mix(in srgb, var(--primary-color) 50%, var(--black-color)) 14%, 
                color-mix(in srgb, var(--tertiary-color) 50%, var(--black-color)) 50%, 
                color-mix(in srgb, var(--secondary-color) 23%, var(--black-color)) calc(100% - 14%), 
                color-mix(in srgb, var(--primary-color) 40%, var(--black-color)) 100%);
    }

    #menu {
        position: absolute;
        margin: 0;
        float: left;
        left: 0;
        z-index: 999;
    }

    #menu,
    #menu>ul {
        width: 100%;
    }

    #menu ul {
        margin-left: 0;
    }

    .responsive-menu-toggle {
        right: 0;
        z-index: 9999;
    }
}

@media only all and (max-width: 979px) {
    #Main_Panel nav {
        display: none !important;
    }

    .slideout-menu {
        position: fixed;
        top: 0;
        left: auto;
        bottom: 0;
        right: 0;
        z-index: 0;
        width: 300px;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        display: none;
        background: var(--interior-dark-color);
    }

    .slideout-panel {
        position: relative;
        z-index: 1;
    }

    .slideout-open,
    .slideout-open body,
    .slideout-open .slideout-panel {
        overflow: hidden;
        box-shadow: var(--shadow);
    }

    .slideout-open .slideout-menu {
        display: block;
    }

    #Mobile_Menu ul {
        list-style-type: none;
    }

    #Mobile_Menu>ul {
        padding: 0;
        margin: 0;
    }

    #Mobile_Menu>ul>li.submenu:before {
        display: none;
    }

    /* Mobile Menu Level 1 */
    #Mobile_Menu ul li {
        width: 100%;
    }

    #Mobile_Menu ul li a {
        display: block;
        font-family: 'Open Sans', sans-serif;
        font-weight: 500;
        color: var(--white-color);
        padding: 10px 25px;
        text-decoration: none;
    }

    #Mobile_Menu ul li a:hover,
    #Mobile_Menu>ul>li.current>a {
        border-left: 2px solid;
        border-color: var(--action-color);
        color: var(--white-color);
    }

    /* Mobile Menu Level 2 */
    #Mobile_Menu ul li ul li a,
    #Mobile_Menu ul li ul li ul li a {
        display: block;
        width: 300;
        margin-left: -34px;
        background: var(--dark-color);
        font-family: 'Open Sans', sans-serif;
        color: var(--light-color);
        padding: 10px 0 10px 30px;
        text-decoration: none;
    }

    #Mobile_Menu ul li ul li a:hover {
        background: var(--black-color);
        color: var(--white-color);
    }

    #Mobile_Menu ul li.submenu:before {
        content: '\f067';
        font-family: 'FontAwesome';
        color: #ccc;
        float: right;
        position: relative;
        display: inline-block;
        text-align: right;
        margin: -5px 0px -15px -70px;
        padding: 15px 15px 15px 70px;
    }

    #Mobile_Menu ul li.submenu.hover:before {
        content: '\f068' !important;
    }

    /* Mobile Menu Level 3 */
    #Mobile_Menu ul li ul li ul li a {
        margin-left: -80px;
        color: var(--black-color);
        padding: 10px 0 10px 50px;
    }

    .mobiletop,
    .mobilebot {
        display: block;
        color: #ccc;
    }

    .mobiletop .module-class,
    .mobilebot .module-class {
        position: relative;
        width: 225px !important;
        right: 0 !important;
        float: right;
    }

    #Mobile_Menu_Panel .accountlogin {
        width: 300px;
        text-align: center;
        padding: 10px 0 15px 47px;
        position: relative;
    }

    #Mobile_Menu_Panel .accountlogin a {
        color: #ccc;
        text-decoration: none;
    }

    .mobilebot {
        position: relative;
        bottom: 0;
    }
}

.hero:not(:empty),
.feature:not(:empty) {
    margin-top: -129px;
    position: relative;
    width: 100%;
    z-index: 1;
    background-color: var(--black-color);
    --overflow: hidden;
}
.hero:not(:empty):before,
.feature:not(:empty):before {
    content: '';
    position: absolute;
    inset: 0;
    height: auto;
    visibility: visible;
    background-image: var(--background);
    background-size: cover;
    background-position: top left;
    filter: brightness(0.35)
}
.hero:not(:empty):after,
.feature:not(:empty):after {
    content: '';
    position: absolute;
    inset: 0;
    height: auto;
    visibility: visible;
    backdrop-filter: var(--blur);
}

.hero:not(:empty) > .module-class,
.feature:not(:empty) > .module-class  {
    float: unset;
    width: auto;
    min-height: 600px;
    height: 100vh;
    max-width: 100vw;
    max-height: 1175px;
    aspect-ratio: 18/9;
    position: relative;
    z-index: 1;
    background-image: var(--background);
    background-color: var(--black-color);
    background-size: cover;
    background-position: top left;
    margin: auto;
}
.feature:not(:empty) > .module-class {
    height: 50vh;
    aspect-ratio: auto;
    background-color: transparent;
    min-height: auto;
}
.hero > .module-class,
.hero > .module-class > .ModuleContainer,
.hero > .module-class > .ModuleContainer > .modulecontent,
.hero > .module-class > .ModuleContainer > .modulecontent > div,
.feature > .module-class,
.feature > .module-class > .ModuleContainer,
.feature > .module-class > .ModuleContainer > .feature-module ,
.feature > .module-class > .ModuleContainer > .feature-module > .modulecontent,
.feature > .module-class > .ModuleContainer > .feature-module > .modulecontent > div  {
    height: 100%;
    width: 100%;
}

.hero .content,
.feature .content {
    position: absolute !important;
    inset: 125px 0 0 0 !important;
    padding-bottom: 175px;
}

:is(.hero, .feature) .content h1,
:is(.hero, .feature) .content h2,
:is(.hero, .feature) .content h3,
:is(.hero, .feature) .content p {
    color: var(--white-color);
    text-shadow: var(--black-color) 1px 0 5px;
    max-width: 40em;
}

:is(.hero, .feature) .content h1,
:is(.hero, .feature) .content h2,
:is(.hero, .feature) .content h3 {
    font-weight: 200;
    text-align: center;
}

:is(.hero, .feature) .content h1 {
    font-size: var(--variable-font-title);
    margin-bottom: var(--padding);
}

:is(.hero, .feature) .content h2 {
    font-size: var(--variable-font-h2);
}

:is(.hero, .feature) .content h3 {
    font-size: var(--variable-font-h3);
}

:is(.hero, .feature) .content h1 b {
    font-weight: 400;
}

/* Home page */
:is(.hero, .feature) section.search {
    background-color: color-mix(in srgb, var(--white-color) 50%, transparent);
    border-radius: var(--box-radius);
    padding: var(--padding);
    display: flex;
    gap: var(--padding);
    justify-content: center;
    width: 80%;
    max-width: 40em;
    font-size: var(--variable-font);
}

:is(.hero, .feature) section.search input {
    width: 65%;
}

.hero video {
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    min-height: 600px;
    background-color: var(--black-color);
    background-position: center center;
    background-size: contain;
    object-fit: cover;
}

@media only all and (max-width: 768px) {
    .cta section {
        flex-direction: column;
    }

    .cta section input {
        width: auto !important;
    }
    .copyright, .poweredby{
        font-size: 10px;
    }
}

.footer{
    min-height: min(40vh, 400px);
    color: var(--primary-color);
    background-color: var(--black-color);
    background-image: var(--dark-multi-grad)
}

.footer .module{
    color: var(--light-color);
    line-height: 1.5em;
}

.poweredby, .poweredby *{
    display: flex;
    gap: 5px;
    align-items: center;

}
.poweredby a{
    color: var(--light-color);
}


.section .content .quoted{
    --size: calc(var(--padding) * 1.5);
    position: relative;
    padding: calc(var(--size) * 1.25) !important;
    justify-content: center !important;
    align-items: center;
    min-height: 5em;
    z-index: 1;
    margin: calc(var(--size)* -1.25);
    overflow: visible;
}
.quoted:before,
.quoted::after{
    position: absolute;
    content: '';
    width: var(--size);
    aspect-ratio: 1.416/1;
    background-color: var(--accent-color);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    --inset: 0;
    z-index: -1;
}
.quoted:before {
    top: calc(var(--size) / 1.2);
    left: calc(var(--size) * 0.1);;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 24'%3E%3Cpath fill='%23000' d='M31.2 0H24l-4.8 9.6V24h14.4V9.6h-7.2zM12 0H4.8L0 9.6V24h14.4V9.6H7.2z'/%3E%3C/svg%3E");
  }

.quoted::after {
    bottom: calc(var(--size) / 1.2);
    right: calc(var(--size) * 0.1);;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 24'%3E%3Cpath fill='%23000' d='M2.4 24h7.2l4.8-9.6V0H0v14.4h7.2zm19.2 0h7.2l4.8-9.6V0H19.2v14.4h7.2z'/%3E%3C/svg%3E");
}
.section .content article.quoted{
    margin: 0;
}

.cta.content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    inset: 0 0 0 0;
}

.cta section {
    background-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
    border-radius: var(--box-radius);
    padding: var(--padding);
    display: flex;
    gap: var(--padding);
    justify-content: center;
    width: 80%;
    max-width: 40em;
    font-size: var(--variable-font);
}

.cta section > * {
    flex-grow: 1;
}

.cta.content h1 {
    font-size: var(--variable-font-h2);
    font-weight: 200;
    margin-bottom: var(--padding);
    text-align: center;
}

.cta.content h2 {
    font-size: var(--variable-font-h4);
    font-weight: 200;
    margin-bottom: var(--padding);
    text-align: center;
}

.cta.content p {
    margin: revert;
    font-size: var(--variable-font-body);
    line-height: 1.5em;
    text-align: justify;
    hyphens: auto;
    word-spacing: -0.08em;
    font-weight: 300;
    max-width: 40em;
}

.cta.content h1 + p,
.cta.content h2 + p{
    margin-top: 0;
}

.cta section input {
    width: 65%;
}

.features svg{
    width: 100%;
    height: auto;
    max-width: 75px;
    color: var(--primary-color);
}
.features h4{
    font-size: 0.8rem;
    font-weight: 300;
    text-align: center;
    margin-top: var(--padding);
    order: 2;
    text-transform: uppercase;
}
.features .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--padding);
}
.content.bg-icon{
    position: relative;
    z-index: 0;
}

.content.bg-icon:before {
    content: '';
    display: block;
    background-color: var(--fore-color);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    width: 60cqw;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    position: absolute;
    opacity: 0.15;
    z-index: -1;
    right: 2cqw;
    
}



.field LABEL {
    font-size: 14px;
}