/* ELEMENTS */

/* BACKDROP */

#backdrop {
    position: fixed;
    /* display: none; */
    top: 50%;
    left: 50%;
    z-index: 100;
    transform-origin: top;
    transform: translate(-50%, -50%) scaleY(0);
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, black 0%, #000d 50%, transparent);
    border-radius: 0;
    /* backdrop-filter: blur(5px); */
    opacity: 0.25;
    transition: 500ms cubic-bezier(0, 0, 0.2, 1);
}

#backdrop.show {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scaleY(3);
    /* transition: display 0ms 250ms, opacity 250ms; */
    /* transition: 500ms; */
}

/* DIALOG */

#dialog {
    position: fixed;
    bottom: -10rem;
    left: 50vw;
    z-index: 200;
    transform: translate(-50%, 0) scale(.95);
    color: var(--lightcolor);
    font-family: var(--paragraph);
    font-size: 2rem;
    background: var(--opaquecolor);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: var(--normal);
}

#dialog.show {
    bottom: 10rem;
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
}

/* TOOLTIP */

#tooltip {
    position: absolute;
    align-content: center;
    top: -100px;
    /* left: 50vw; */
    z-index: 210;
    transform: scale(0) translate(-50%, 1rem);
    width: auto;
    min-width: 3rem;
    max-width: 25rem;
    padding: 0.25rem 0.75rem;
    margin: 0;
    color: var(--lightcolor);
    font-size: 1.5rem;
    /* overflow-y: auto; */
    text-align: left;
    background: var(--opaquecolor);
    background: #000;
    border: solid var(--lightopaque) .1rem;
    border-radius: .5rem;
    opacity: .5;
    transition-property: transform, opacity, top, left;
    transition-duration: 100ms;
    pointer-events: none;
    transform-origin: 0 top;
    hyphens: none;
}

#tooltip::after {
    content: '';
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 0;
    width: 0;
    border-left: .75rem solid transparent;
    border-right: .75rem solid transparent;
    border-bottom: .75rem solid #000;
    /* backdrop-filter: blur(5px); */
}

#tooltip.show {
    transform: scale(1) translate(-50%, 1rem);
    opacity: 1;
}

#tooltip>span {
    display: inline-block;
    margin-top: .5rem;
    opacity: .25;
}


/* QUICKLINKS */

.quicklinks:hover  a{
    opacity: 0.25;
}

.quicklinks  a:hover{
    opacity: 1;
}

/* HOURS */

#hours {
    position: fixed;
    display: flex;
    flex-flow: column;
    justify-content: center;
    top: var(--navheight);
    left: 0;
    z-index: 3;
    /* transform: translateX(10px); */
    transform: translate(-120%, 0%);
    height: calc(100vh - var(--navheight));
    background: linear-gradient(180deg, black, #000d);
    box-shadow: var(--shadow);
    transition: var(--quick);
}

#hours * {
    color: var(--lightcolor);
}

#hours.show {
    transform: translate(0%, 0%);
}

#hours table {
    background: var(--translucent);
    /* padding: 1rem; */
}

#hours tbody {
    position: relative;
}

#hours tbody tr {
    transition: var(--quick);
}

#hours tbody tr.today>td {
    color: var(--accentcolor);
    /* font-weight: 500; */
}

#hours tbody:hover tr {
    opacity: .25;
}

#hours tbody tr:hover {
    opacity: 1;
}

#hours tbody tr td {
    min-width: 15rem;
    padding: .25rem 0;
    color: var(--lightcolor);
    /* font-size: 2.5rem; */
}

/* SLIDER */

.slider {
    --gap: 0rem;
    --border: 3px var(--lightcolor) solid;
    --dot-background: var(--lightcolor)
}

/* .slider.half,
.slider.third,
.slider.quarter,
.slider.fifth,
.slider.sixth {
    --gap: 4rem;
} */

.slider[slides="2"],
.slider[slides="3"],
.slider[slides="4"],
.slider[slides="5"] {
    --gap: 4rem
}

.slider {
    overflow: hidden;
    /* height: 70rem; */
    margin: 0;
    margin-right: calc(var(--gap) / -2);
    margin-bottom: var(--space);
    margin-left: calc(var(--gap) / -2);
    touch-action: pan-y !important;
    /* background: black; */
}

.slider,
.slider div {
    padding: 0;
    user-select: none !important;
}

.slider.full {
    margin-right: 0;
    margin-left: 0;
}

.slider.overflow {
    overflow: visible;
}

.slider[lightbox] {
    position: fixed;
    overflow: visible;
    top: -100vh;
    left: 50%;
    z-index: 120;
    transform: translate(-50%, -50%);
    height: 80vh;
    width: 90vw;
    margin: 0;
    transition: var(--slow);
}

.slider[lightbox].show {
    top: calc(50% - 6vh);
}

/* DOLLY */

.dolly,
.dolly>.parallax,
.dolly>.captions,
.dolly>div {
    position: absolute;
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
    width: 100%;
    transition: none;
}

.dolly {
    user-select: none !important;
}

.dolly::after {
    content: '';
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 1500%;
}

/* SLIDES */

.slider .slide {
    overflow: hidden;
    flex-grow: 0;
    flex-shrink: 0;
    height: 100%;
    width: calc(100% - var(--gap));
    min-width: 35rem;
    margin: 0 calc(var(--gap) / 2);
    transition: var(--normal);
    /* filter: grayscale(1) brightness(.25); */
    background: black;
}

/* .slider .slide.active {
    filter: grayscale(0) brightness(1);
} */

.slider .slide:first-child {
    margin-left: 0;
}

.slider .slide:last-child {
    margin-right: 0;
}

.slider.full .slide {
    width: 100%;
    margin: 0;
}

.slider[lightbox] .slide {
    padding: 0 1rem;
}

.slider * {
    cursor: grab;
}

.slider.grabbing * {
    cursor: grabbing;
}

/* SLIDE IMG */

.slider .slide>img {
    object-fit: contain;
    height: 100%;
    width: 100%;
    /* z-index: 12; */
    /* filter: grayscale(0.5); */
}

.slider[lightbox] .slide>img,
.slider.contain .slide>img {
    object-fit: contain;
}

/* PAGINATION */

.slider .pagination {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ? */
    bottom: calc(var(--space) / 2);
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    width: 100%;
}

.slider .dot {
    cursor: pointer;
    position: relative;
    display: inline-block;
    z-index: 1;
    height: 1.75rem;
    width: 1.75rem;
    margin: 0 .75rem;
    background: transparent;
    /* background: var(--dot-background); */
    border: var(--border);
    /* border: 0; */
    border-radius: 1rem;
    opacity: .3;
    transition: var(--quick);
}

.slider .dot.active {
    background: var(--dot-background);
    opacity: 1;
}

/* .slider .dot::after{
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: transparent;
    border-radius: 1rem;
    transform: scale(.25);
}

.slider .dot.active::after{
    background: var(--dot-background);
    transform: scale(1);
}

.slider .dot:first-child{
    border-radius: .5rem 0 0 .5rem;
}

.slider .dot:last-child{
    border-radius: 0 .5rem .5rem 0;
} */

.slider .dot:hover {
    opacity: 1;
}

/* .slider .dot.active {
    background: var(--dot-background);
    opacity: 1;
} */

.slider[lightbox] .pagination {
    bottom: -12vh;
}

.slider[lightbox] .dot {
    height: 10vh;
    width: 10vh;
    margin: 0 1rem;
    background-position: center;
    border: none;
    border-radius: 0;
    background-size: cover;
}

/* CONTROLS */

.slider .controls {
    position: static;
}

.next,
.prev {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: auto;
    left: 0;
    z-index: 1;
    height: 100%;
    width: 5rem;
}

.next {
    right: 0;
    left: auto;
}

.next::after,
.prev::after {
    content: '';
    top: 50%;
    right: auto;
    left: -2rem;
    transform: translateY(-50%) rotate(225deg);
    height: 2rem;
    width: 2rem;
    opacity: 0;
    transition: var(--normal);
    border-right: var(--border);
    border-top: var(--border);
}

.next::after {
    right: -2rem;
    left: auto;
    transform: translateY(-50%) rotate(45deg);
}

.slider:hover .next::after,
.slider[lightbox] .next::after {
    right: 2rem;
    opacity: 1;
}

.slider:hover .prev::after,
.slider[lightbox] .prev::after {
    left: 2rem;
    opacity: 1;
}

@media (max-width: 1200px) {
    .slider .prev::after {
        left: 2rem;
        opacity: 1;
    }

    .slider .next::after {
        right: 2rem;
        opacity: 1;
    }
}

/* CAPTION */

.slider .captions>p,
.slider .captions>div {
    cursor: grab;
    position: relative;
    /* display: flex; */
    /* flex-flow: row; */
    /* align-items: center; */
    /* justify-content: center; */
    flex-grow: 0;
    flex-shrink: 0;
    /* justify-content: center; */
    z-index: 1;
    width: calc(100% - var(--gap));
    min-width: 1rem;
    padding: 8rem 0;
    margin: 0 calc(var(--gap) / 2);
    color: var(--lightcolor);
    font-size: 2.5rem;
    text-align: center;
}

/* .slider .captions > p{
    width: calc(100% - var(--gap));
    min-width: 30rem;
    margin: 0 calc(var(--gap) / 2);
} */
/* OPTIONS */

/* half */
.slider[slides="2"] .slide {
    width: calc(50% - (var(--gap) / 2));
}

.slider[slides="2"] .captions>p,
.slider[slides="2"] .captions>div {
    width: calc(50% - (var(--gap) / 2));
}


/* third */
.slider[slides="3"] .slide {
    width: calc((100% / 3) - ((var(--gap) / 3) * 2));
}

.slider[slides="3"] .captions>p,
.slider[slides="3"] .captions>div {
    width: calc((100% / 3) - ((var(--gap) / 3) * 2));
}


/* quarter */
.slider[slides="4"] .slide {
    width: calc(25% - ((var(--gap) / 4) * 3));
}

.slider[slides="4"] .captions>p,
.slider[slides="4"] .captions>div {
    width: calc(25% - ((var(--gap) / 4) * 3));
}


/* fifth */
.slider[slides="5"] .slide {
    width: calc(20% - ((var(--gap) / 5) * 4));
}

.slider[slides="5"] .captions>p,
.slider[slides="5"] .captions>div {
    width: calc(20% - ((var(--gap) / 5) * 4));
}


/* contained images */
.slider.contain .slide>img {
    object-fit: contain;
}

/* GALLERY */

.gallery {
    display: flex;
}

.gallery>img {
    width: 33.33%;
}

/* ACCORDION */

.accordion {
    --caption-fontsize: 3rem;
}

.accordion {
    padding: 0;
}

.collapse {
    margin: calc(var(--space) / 2) 0;
    background: var(--primarycolor);
    background: transparent;
    /* border: solid var(--p-color) .5rem; */
    border-radius: var(--radius);
    /* background: var(--extracolor); */
    /* color: var(--maincolor); */
}

.collapse.active {
    background: white;
}

.collapse>.caption {
    cursor: pointer;
    position: relative;
    padding: 3rem calc(var(--space) / 2);
    margin: 0;
    transition: var(
    --quick);
    color: var(
    --maincolor);
    background: var(
    --extracolor);
    /* font-weight: 400; */
    display: flex;
    align-items: center;
}

.collapse>.caption:hover{
    background: var(--accentcolor);
}

.collapse.active>.caption {
    color: var(--maincolor);
    background: var(--accentcolor);
}

.collapse>.caption::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    padding: 0;
    font-family: 'iconset';
    transition: transform 250ms;
}

.collapse.active>.caption::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.collapse>.content {
    overflow: hidden;
    padding: 0 calc(var(--space) / 2);
    margin: 0;
    transition: var(--normal);
    /* padding-bottom: 4rem; */
    opacity: 0;
}

.collapse.active > .content{
    padding: 2rem calc(var(--space) / 2);
    /* padding: calc(var(--space) / 2) calc(var(--space) / 2); */
    opacity: 1;
}

.collapse>.content>*:first-child {
    margin-top: 0;
}

/* REMOTE EXPANDABLE  */

[remote] {
    cursor: pointer;
    transition: var(--quick);
}

/* [remote].active {
    background: var(--translucent);
} */

/* BUTTONS */

/* toggle */

button.toggle {
    --trackLength: 5rem;
    --toogleSize: 2rem;
    --toggleColor: #aaa;
    --toggleColorActive: #fff;
}

button.toggle {
    cursor: pointer;
    position: relative;
    display: block;
    width: 100%;
    padding: 1rem 1rem 1rem calc(var(--trackLength) + 2rem);
    margin: 1rem 0;
    background: none;
    border: none;
}

button.toggle::after,
button.toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 2rem;
    transition: var(--quick);
}

button.toggle::after {
    height: 3rem;
    width: var(--trackLength);
    background: #000;
}

button.toggle[value="1"]::after {
    background: green;
}

button.toggle::before {
    left: 0.5rem;
    z-index: 1;
    height: var(--toogleSize);
    width: var(--toogleSize);
    background: var(--maincolor);
}

button.toggle[value="1"]::before {
    left: calc((var(--trackLength) - var(--toogleSize)) - 0.5rem);
    z-index: 1;
}

/* button outlined */

button.outline,
input.outline,
a.outline {
    padding: 1rem 4rem;
    color: var(--lightcolor);
    background: var(--primarycolor);
    border: solid var(--primarycolor) .5rem;
}

button.outline:hover,
input.outline:hover,
a.outline:hover {
    color: var(--primarycolor);
    background: transparent;
}

/* SPONGE */

.sponge {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0;
    transition: var(--quick);
}

.sponge.squeeze {
    height: 0 !important;
    opacity: 0;
}

.sponge>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0
}

.spongy {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/* INPUTS */

/* combo */
.comboInput {
    display: flex;
    flex-flow: row wrap;
    padding: 0;
    margin: 2rem 0;
    border: solid var(--lightopaque) .1rem;
}

/* borders */
.comboInput .borderTop {
    border-top: solid .1rem #ffffff11;
}

.comboInput .borderLeft {
    border-left: solid .1rem #ffffff11;
}

.comboInput>input,
.comboInput>select,
.comboInput>a {
    cursor: text;
    display: block;
    box-sizing: border-box;
    height: 6rem;
    width: 100%;
    padding: 1rem 2rem;
    margin: 0 !important;
    background: transparent;
    border: none;
    border-radius: 0;
}

.comboInput>input[type="range"] {
    cursor: pointer;
    transition: var(--normal);
    -webkit-appearance: none;
    appearance: none;
}

.comboInput>input[type="range"]::-webkit-slider-thumb {
    height: 3rem;
    width: 1rem;
    background: var(--p-color);
    border-radius: .25rem;
    -webkit-appearance: none;
    appearance: none;
}

.comboInput>input[type="range"]::after {
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: .1rem;
    width: calc(100% - 6rem);
    background: var(--lightopaque);
}

.comboInput>select {
    cursor: pointer;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.comboInput>a {
    cursor: pointer;
}

.comboInput>a:hover {
    color: var(--darkcolor);
    background: var(--lightopaque);
}

.comboInput>.half {
    width: 50%;
}

.comboInput::after {
    content: attr(heading);
    top: -1rem;
    left: 1rem;
    padding: 0 .5rem;
    color: var(--lightopaque);
    font-family: var(--paragraph);
    font-size: 1.5rem;
    background: var(--maincolor);
    border-radius: 1rem;
}

.comboInput:hover::after {
    color: var(--p-color);
}

.comboInput>i {
    cursor: pointer;
    position: absolute;
    top: 3rem;
    right: 3rem;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--p-color);
    font-size: calc(var(--p-size) * 1rem);
    user-select: none !important;
}

.comboInput input[type="number"]::-webkit-inner-spin-button,
.comboInput input[type="number"]::-webkit-outer-spin-button {
    display: none;
}

/* misc */



button>i.hint {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    transition: var(
    --quick);
}

button:hover>i.hint.expand {
    transform: translate(-20%, -50%);
}

button:hover>i.hint.add {
    transform: translate(-50%, -50%) scale(1.25);
}

i.close {
    cursor: pointer !important;
    position: absolute;
    top: 0rem;
    right: 0rem;
    /* z-index: 2000; */
    /* opacity: 1; */
    padding: 1rem;
    /* color: var(--lightcolor); */
    font-size: calc(var(--p-size) * 1rem);
}

i.close.left {
    right: auto;
    left: 0;
}

/* Diagrams and Datastuff */


[diagram="line"] path {
    transition: 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* MISC */

.combine {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

/* SCROLLSPY */

#scrollspy {
    position: fixed;
    display: flex;
    flex-flow: column;
    top: 50%;
    left: calc(var(--space)/2);
    left: 0;
    z-index: 2;
    transform: translateY(-50%);
    padding: 1rem 0.5rem 1rem 0rem;
    border-radius: 0 2rem 2rem 0;
}

#scrollspy>a.scrollpoint {
    position: relative;
    height: 4rem;
    padding: 0;
    margin: 0;
    color: transparent;
    white-space: nowrap;
    opacity: 0.35;
}

#scrollspy>a.scrollpoint::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(1.5rem, -50%);
    height: 1.5rem;
    width: 1.5rem;
    background: var(--accentcolor);
    border-radius: var(--radius-big);
}

#scrollspy>a.scrollpoint::before {
    content: attr(linkname);
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    transform: translateX(-100%);
    height: 4rem;
    width: auto;
    padding: 0 2rem 0 4rem;
    background: var(--maincolor);
    border-radius: 0 var(--radius-big) var(--radius-big) 0;
    opacity: 0;
}

#scrollspy>a.scrollpoint:hover {
    color: var(--p-color);
    opacity: 1;
}

#scrollspy>a.scrollpoint:hover::before {
    transform: translateX(0);
    opacity: 1;
}

#scrollspy>a.scrollpoint.active {
    opacity: 1;
}




/* MOVEABLE OBJECTS */
[move="element"]{
    cursor: grab;
    position: relative;
    transition-property: filter;
    transition-duration: var(--quick);
}

[move="element"]::before{
    content: '';
    display: flex;
    align-items: center;
    justify-content: flex-end;
    right: 0;
    bottom: 0;
    z-index: 50;
    height: 100%;
    width: auto;
    padding: 0 1rem;
    color: var(--lightcolor);
    font-family: 'iconset';
    font-size: 2rem;
    opacity: .25;
}

[move="parent"].moving,
[move="parent"].moving > [move="element"],
[move="parent"].moving > [move="container"] > [move="element"]{
    cursor: grabbing!important;
}

[move="parent"].moving > [move="element"],
[move="parent"].moving > [move="container"] > [move="element"] {
    filter: opacity(.5);
}

[move="parent"].moving > [move="element"]::before,
[move="parent"].moving > [move="container"] > [move="element"]::before{
    width: 100%;
}

[move="parent"].moving > [move="element"].selected,
[move="parent"].moving > [move="container"] > [move="element"].selected {
    z-index: 150;
    filter: opacity(1);
    pointer-events: none;
    user-select: none;
}

.entry{
    height: 6rem;
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--accentcolor);
}

#weekplanner{
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    height: 100vh;
    width: 100%;
}

#weekplanner > div{
    height: 100%;
}

/* EXPANDABLE CONTAINER */

.expandable{
    position: relative;
    z-index: 150;
    /* overflow: hidden; */
    padding: 0;
}

.expandable::after {
    content: '';
    font-family: 'iconset';
    font-size: 1.5rem;
    top: 50%;
    right: 2rem;
    transform: translate(0,-50%);
    opacity: 0.25;
}

.expandable:hover{
    background: #000;
}

.expandable:hover::after {
    transform: translate(1rem,-50%) /* scaleY(1.05) */;
}

.expandable > .content{
    position: absolute;
    top: 50%;
    /* top: 0; */
    left: 100%;
    z-index: 200;
    transform: scale(0) translate(0rem,-50%);
    width: 100%;
    padding: 1rem;
    background: #000;
    border-radius: 2rem;
    border: solid var(--lightopaque) .1rem;
    opacity: 0;
    transition: var(--quick);
    transition-property: transform, opacity;
    transform-origin: 0% 0%;
}

.expandable > .content::after {
    content: '';
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    height: 0;
    width: 0;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    border-right: 1rem solid #000;
    /* backdrop-filter: blur(5px); */
}

.expandable > .content::before {
    content: '';
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    height: 100%;
    width: 3rem;
}

.expandable:hover > .content{
    transform: scale(1) translate(2rem,-50%);
    opacity: 1;
}