/**************************************************** RESET ****************************************************/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/**************************************************** VARIABLE ****************************************************/

:root {
    --padding-small: 12px;
    --padding-big: calc(var(--padding-small) * 2);
    --animationspeed: 200ms;
    --radius-small: 8px;
    --radius-big: calc(var(--radius-small) * 2);
    --color-opaque: rgba(150,150,150,1);
    --color-transparent: rgba(200,200,200,0.7);
    --blur-small: 20px;
    --blur-big: calc(var(--blur-small) * 2);
    --type-small: 14px;
    --box-width: clamp(300px,15vw,15vw);
}

/**************************************************** BASIC ****************************************************/

* {
    font-size: var(--type-small);
    line-height: 120%;
    font-weight: normal;
    font-family: Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-style: normal;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    touch-action: manipulation;
    color:white;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body {
    background-color: black;
}

::-webkit-scrollbar {
    display: none;
}

::-webkit-input-placeholder { color: #fff; }
:-moz-placeholder { color: #fff; }

:focus::-webkit-input-placeholder { color: var(--color-transparent); }
:focus:-moz-placeholder { color: var(--color-transparent); }

/**************************************************** PADDING ****************************************************/

a {
    color:inherit;
    text-decoration:none;
}

/**************************************************** PADDING ****************************************************/

.padding-small {
    padding:var(--padding-small);
}

.padding-top-small {
    padding-top:var(--padding-small);
}

.padding-bottom-small {
    padding-bottom:var(--padding-small);
}

.padding-left-small {
    padding-left:var(--padding-small);
}

.padding-right-small {
    padding-right:var(--padding-small);
}

/**************************************************** GRID ****************************************************/

.grid {
    display: flex;
    flex-flow: row wrap;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    align-items: flex-start;
    align-content: flex-start;
}

.w-1-12 {
    width: calc(100% / 12 * 1);
}

.w-2-12 {
    width: calc(100% / 12 * 2);
}

.w-3-12 {
    width: calc(100% / 12 * 3);
}

.w-4-12 {
    width: calc(100% / 12 * 4);
}

.w-5-12 {
    width: calc(100% / 12 * 5);
}

.w-6-12 {
    width: calc(100% / 12 * 6);
}

.w-7-12 {
    width: calc(100% / 12 * 7);
}

.w-8-12 {
    width: calc(100% / 12 * 8);
}

.w-9-12 {
    width: calc(100% / 12 * 9);
}

.w-10-12 {
    width: calc(100% / 12 * 10);
}

.w-11-12 {
    width: calc(100% / 12 * 11);
}

.w-12-12 {
    width: calc(100% / 12 * 12);
}

img,
video {
    width: 100%;
    display: block;
}

/**************************************************** BOX ****************************************************/

.box {
    background-color: var(--color-transparent);
    border-radius: var(--radius-small);
}

.box > div:not(:last-of-type)::after {
    content: "";
    border-bottom: 1px solid white;
    display: block;
    margin-top:var(--padding-small);
}

.noborder::after {
    border-bottom:0px !important;
}

.blur {
    position: relative;
}

.blur::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(var(--blur-small));
    -webkit-backdrop-filter: blur(var(--blur-small));
    border-radius: var(--radius-small);
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    z-index: -1;
}

.subnav .navitem:nth-last-child(2)::after {
    border:0px;
}

/**************************************************** NAV ****************************************************/

nav {
    position: fixed;
    top:1px;
    left:1px;
    width:var(--box-width) !important;
    gap:1px;
    z-index: 100;
    transform:translateX(0%);
    transition: transform var(--animationspeed) ease-in-out;
}

nav.visible {
    transform:translateX(0%);
}

nav.hidden {
    transform:translateX(-101%);
}

nav input {
    background:none;
    border:none;
    outline: none;
    padding:0px;
    margin:0px;
    width:100%;
}

.subnav {
    display:none;
    left:var(--box-width);
    width:calc(var(--box-width) + 1px);
    top:0px;
    position: absolute;
    padding-left:1px;
}

.noextramargin::after {
    margin-top:0px !important;
}

.navitem:first-of-type .subnav {
    top:0px;
}

.navitem {
    position:relative;
    border-radius: var(--radius-small);
    cursor:pointer;
}

.navitem.padding-small:not(:last-child) {
    padding-bottom:0px;
}

.navitem a {
    display:block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navitem {
    transition: all var(--animationspeed) ease-in-out;
}

@media screen and (min-width: 800px){

    .navitem:not(.nohover):hover,
    .navitem:not(.nohover):has(:hover),
    .navitem:not(.nohover):has(.subnav):hover  {
        background-color:var(--color-transparent);
        transition: all 0ms ease-in-out;
    }

}

.subnav:has(:hover),
.subnav:hover {
    display:flex !important;
}

.hidden .subnav {
    display:none !important;
}

/**************************************************** NOTIFICATION ****************************************************/

.notification {
    position: fixed;
    top:1px;
    left:calc(100% - (var(--box-width) + 1px));
    width:var(--box-width) !important;
    gap:1px;
    z-index: 99;
    overflow:auto;
    pointer-events: none;
    max-height:100dvh;
    padding-bottom:2px;
}

.notification .project-stack {
    position:relative;
    gap: 1px;
    padding-top:calc((1 / 16 * 9 * clamp(300px,15vw,15vw)) - 35px);
    transition: padding-top var(--animationspeed) ease-in-out;
    pointer-events: all;
}

.notification .project-stack .project {
    aspect-ratio: 16/9;
    border-radius: var(--radius-small);
    overflow: hidden;
    margin-top:calc((-1 / 16 * 9 * clamp(300px,15vw,15vw)) + 36px);
    transition: margin-top var(--animationspeed) ease-in-out;
    background-color: black;
    position: relative;
}

.notification .project-stack .project .image {
    aspect-ratio: 16/9;
}

.notification .project-stack .project img,
.notification .project-stack .project video {
    opacity:0.8;
    transition: transform var(--animationspeed) ease-in-out;
    object-fit: cover;
}

.notification .project-stack .project:hover img,
.notification .project-stack .project:hover video {
    transform: scale(1.05);
}

.notification .project-stack .project a {
    width:100%;
}

.notification .project-stack:hover {
    padding-top:1px;
}

.notification .project-stack:hover .project {
    margin-top:0px;
}

.notification .project-stack .project .overlay {
    pointer-events: none;
}

.notification .related {
    transform:translateX(101%);
    transition: transform var(--animationspeed) ease-in-out;
}

.notification > div.visible {
    transform:translateX(0%);
}

.notification .sound {
    display:none;
}

.notification .overlay div {
    display:block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/**************************************************** REACTION ****************************************************/

.reaction {
    border-radius: var(--radius-small);
    overflow: hidden;
    position: fixed;
    bottom:1px;
    left:calc(100% - (var(--box-width) + 1px));
    width:var(--box-width) !important;
    gap:1px;
    z-index: 98;
    overflow:auto;
    padding-bottom:2px;
}

.reaction .image {
    aspect-ratio: 16/9;
}

/**************************************************** MARKER ****************************************************/

.marker {
    position: absolute;
    min-width: 15px;
    min-height: 15px;
    border-radius: 10px !important;
    z-index: 1;
    padding: 0px !important;
}

.marker::before {
    border-radius: 10px !important;
}

.marker.animated {
    animation-duration: 0.4s;
    animation-name: marker;
    animation-iteration-count: 3;
}

@keyframes marker {
    0% {
        width:15px;
        height:15px;
    }
    50% {
        width:20px;
        height:20px;
    }
    100% {
        width:15px;
        height:15px;
    }
}

.pin {
    background: var(--yellow);
    outline: none;
}

.popup {
    position: absolute !important;
    top: 0;
    left: 0;
    display: none;
    outline: none;
    z-index: 2;
}

.popup.open,
.popup:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-small) !important;
    width:auto !important;
    height:auto !important;
    max-width:300px !important;
}

.marker.rect + .popup {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sound {
    position: absolute;
    bottom:1px;
    right:1px;
    z-index: 90;
    cursor: pointer;
    width:40px;
    height:40px;
    display: flex;
    align-content: center;
    justify-content: center;
}

.play {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: 90;
    cursor: pointer;
    width:40px;
    height:40px;
    display: flex;
    align-content: center;
    justify-content: center;
    pointer-events: none;
}

.play .toPause {
    display:none;
}

.icon-slider {
    position: absolute;
    top:1px;
    right:1px;
    z-index: 90;
    width:40px;
    height:40px;
    display: flex;
    align-content: center;
    justify-content: center;
}

/**************************************************** MODULES ****************************************************/

.module-img-full {
    position:relative;
}

.module-img-full > div {
    position: relative;
}

.module-img-50 > div {
    position:relative;
}

.module-img-25 > div {
    position:relative;
}

.module-img-33 > div {
    position:relative;
}

.ratio-2-1 > div,
.ratio-2-1 .image,
.ratio-2-1 .slider,
.ratio-2-1 img {
    aspect-ratio: 2/1;
    overflow: hidden;
}

.ratio-16-9 > div,
.ratio-16-9 .image,
.ratio-16-9 .slider,
.ratio-16-9 img {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.ratio-5-4 > div,
.ratio-5-4 .image,
.ratio-5-4 .slider,
.ratio-5-4 img {
    aspect-ratio: 5/4;
    overflow: hidden;
}

.ratio-3-2 > div,
.ratio-3-2 .image,
.ratio-3-2 .slider,
.ratio-3-2 img {
    aspect-ratio: 3/2;
    overflow: hidden;
}

.ratio-9-16 > div,
.ratio-9-16 .image,
.ratio-9-16 .slider,
.ratio-9-16 img {
    aspect-ratio: 9/16;
    overflow: hidden;
}

.ratio-2-3 > div,
.ratio-2-3 .image,
.ratio-2-3 .slider, 
.ratio-2-3 img {
    aspect-ratio: 2/3;
    overflow: hidden;
}

.ratio-1-1 > div,
.ratio-1-1 .image,
.ratio-1-1 .slider,
.ratio-1-1 img {
    aspect-ratio: 1/1;
    overflow: hidden;
}

.ratio-4-5 > div,
.ratio-4-5 .image,
.ratio-4-5 .slider,
.ratio-4-5 img {
    aspect-ratio: 4/5;
    overflow: hidden;
}

.ratio-din > div,
.ratio-din .image,
.ratio-din .slider,
.ratio-din img {
    aspect-ratio: 1/1.414;
    overflow: hidden;
}

.overlay {
    padding-left:1px;
    padding-right:1px;
    padding-top:1px;
    position: absolute;
    top:0px;
    z-index: 90;
    max-width:calc(var(--box-width) + 2px);
    width:auto;
    aspect-ratio: unset !important;
}

.image,
.slider,
.slide {
    overflow:hidden;
    width:100%;
    position: relative;
}

.image img,
.image video {
    display: block;
    position: relative;
    width: 100%;
    height:100%;
    object-fit: cover;
    overflow:hidden;
}

.content .module:first-child .overlay {
    bottom:0px;
    top:unset;
}

.flickity-page-dots {
    bottom: var(--padding-small);
    z-index: 2;
}

.flickity-page-dots .dot {
    width:15px;
    height:15px;
    border-radius: var(--radius-big);
    backdrop-filter: blur(var(--blur-small));
    -webkit-backdrop-filter: blur(var(--blur-small));
    background-color: var(--color-transparent);
    border-radius: var(--radius-small);
    opacity:0.6 !important;
}

.flickity-page-dots .dot.is-selected {
    opacity:1 !important;
}

.flickity-button {
    background:none !important;
    top:0px;
    left:0px;
    bottom:0px;
    width:25%;
    transform: none;
    height:100%;
}

.flickity-prev-next-button.previous {
    left:0px;
    right:auto;
}

.flickity-prev-next-button.next {
    right:0px;
    left:auto;
}

.flickity-button svg {
    display:none;
}

.blurry {
    filter:blur(50px);
}

/**************************************************** FOOTER ****************************************************/

footer {
    position: fixed !important;
    left:0px;
    bottom:0px;
    width:var(--box-width) !important;
    transform:translateX(-101%);
    transition: transform var(--animationspeed) ease-in-out;
    z-index:98;
}

footer.visible {
    transform:translateX(0%);
}

/**************************************************** OVERVIEW ****************************************************/

.home .project {
    position: relative;
}

.home .project:nth-of-type(1) .overlay {
    bottom:0px;
    top:auto;
}

.home .project .overlay {
    pointer-events: none;
    max-width:none;
    gap:1px;
}

.home .project .overlay div {
    width:var(--box-width);
}

.home .project .sound {
    display:none;
}

.home a:hover img,
.home a:hover video {
    transform: scale(1.02);
}

.home a img,
.home a video {
    transition: transform var(--animationspeed) ease-in-out;
}

/**************************************************** SEARCH ****************************************************/

.search-results {
    position: fixed !important;
    left:1px;
    top:165px;
    width:var(--box-width) !important;
    transform:translateX(-101%);
    transition: transform var(--animationspeed) ease-in-out;
    z-index:101;
    overflow:auto;
    /* max-height:calc(100dvh - 166px); */
    max-height:calc((41px * 8) - 1px);
}

.search-results.visible {
    transform:translateX(0%);
}

.noresult {
    pointer-events: none;
    display:none;
}

/**************************************************** INFO ****************************************************/

[class~='module-txt-full']:last-of-type  {
    margin-bottom:246px !important;
}

[class~='module-txt-full']:first-of-type  {
    margin-top:164px !important;
}

.module-txt-full .grid {
    padding:1px;
    gap:1px;
}

.module-txt-full p {
    backdrop-filter: blur(var(--blur-small));
    -webkit-backdrop-filter: blur(var(--blur-small));
    background-color: var(--color-transparent);
    border-radius: var(--radius-small);
    padding: var(--padding-small);
    display:block;
    width:100%;
}

.module-txt-full * {
    font-size:1.8vw;
    line-height: 120%;
}

.module-txt-full a {
    text-decoration: underline;
}

/**************************************************** INFO ****************************************************/

.content.error {
    padding-top:164px !important;
    padding-bottom:246px !important;
}

/**************************************************** PROJECTINFO ****************************************************/


.projectinfo {
    position: fixed;
    top:1px;
    right:1px;
    width:var(--box-width) !important;
    gap:1px;
    z-index: 99;
    transform:translateX(0%);
    transition: transform var(--animationspeed) ease-in-out;
}

.projectinfo.visible {
    transform:translateX(0%);
}

.projectinfo.hidden {
    transform:translateX(101%);
}

/**************************************************** PROJECTINFO ****************************************************/

.cookie {
    position: fixed;
    bottom:1px;
    right:1px;
    width: var(--box-width);
    z-index:99;
}

.cookie .buttons {
    gap: 1px;
    flex-grow: 1;
    flex-wrap: nowrap;
}

.cookie .buttons .button {
    width:50%;
    text-align: center;
    cursor: pointer;
}

.cookie .buttons .button:hover {
    background: rgba(200,200,200,0.9);
}

.cookie > div:first-child > div {
    border-bottom: 1px solid white;
    padding-top: var(--padding-small);
    padding-bottom: var(--padding-small);
}

.cookie > div:first-child > div:first-child {
    padding-top: 0px
}

.cookie > div:last-child {
    padding-top: var(--padding-small);
}

/**************************************************** MOBILE ****************************************************/
/**************************************************** MOBILE ****************************************************/
/**************************************************** MOBILE ****************************************************/
/**************************************************** MOBILE ****************************************************/
/**************************************************** MOBILE ****************************************************/
/**************************************************** MOBILE ****************************************************/
/**************************************************** MOBILE ****************************************************/
/**************************************************** MOBILE ****************************************************/

@media screen and (min-width: 800px){
    .mobile {
        display:none;
    }
}

@media screen and (max-width: 799px){
    .desktop {
        display:none;
    }
}

@media screen and (max-width: 799px){

    :root {
        --box-width: clamp(calc(100vw - 2px),calc(100vw - 2px),calc(100vw - 2px));
    }

    nav, nav * {
        align-content: end !important;
    }

    nav {
        top:auto;
        bottom:1px;
        width:100%;
        transform:translateX(0%) translateY(0%);
        transition: calc(var(--animationspeed) * 2) ease-in-out transform;
    }

    .navitem {
        position: unset;
    }

    .subnav {
        top:auto !important;
        bottom:0px !important;
        max-height:100dvh;
        width: calc(var(--box-width) * 3);
        padding-right: calc(var(--box-width) * 2);
        overflow-y:auto;
        overflow-x:hidden;
    }

    nav.visible {
        transform:translateX(0%) translateY(0%);
    }
    
    nav.hidden {
        transform:translateX(0%) translateY(100%);
    }

    nav.level1 {
        transform:translateX(calc((100vw - 1px) * -1)) translateY(0%);
    }

    nav.level2 {
        transform:translateX(calc((100vw - 1px) * -2)) translateY(0%);
    }

    nav.level2 .box .navitem .subnav{
        pointer-events: none;
    }

    nav.level2 .box .navitem .subnav .subnav {
        pointer-events: all;
    }

    nav.level3 {
        transform:translateX(calc((100vw - 1px) * -3)) translateY(0%);
    }

    nav.level3 .box .navitem .subnav{
        pointer-events: none;
    }

    nav.level3 .box .navitem .subnav .subnav {
        pointer-events: all;
    }

    .subnav .navitem:nth-last-child(2)::after {
        border-bottom: 1px solid white;
    }

    .nav > .box > .navitem:nth-last-child(2)::after {
        border-bottom: 1px solid white;
    }

    .projectinfo {
        transform:translateX(0%) translateY(0%);
    }
    
    .projectinfo.visible {
        transform:translateX(0%) translateY(0%);
    }
    
    .projectinfo.hidden {
        transform:translateX(0%) translateY(-101%);
    }

    .module-img-full > div {
        position: relative;
    }

    .module-img-25 > div{
        width:50%;
    }

    .module-img-50 > div,
    .module-img-33 > div {
        width:100%;
    }

    .project-stack .project  {
        aspect-ratio: 16/9;
        border-radius: var(--radius-small);
        overflow: hidden;
        background-color: black;
        position: relative;
    }

    .project-stack .project a {
        width:100%;
    }

    .project-stack {
        gap: 1px;
    }

    .related {
        padding:1px;
    }

    .search-results {
        bottom:166px;
        top: auto;
        max-height:163px;
    }

    .module-txt-full * {
        font-size:var(--type-small);
        line-height: 120%;
    }

    .home .project {
        width:100%;
    }

    .home .project .overlay .box {
        width:50%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow:hidden;
        display:inline;
    }

    .home .project .overlay {
        width:100%;
        flex-wrap: nowrap;
        position: sticky;
        margin-bottom: 1px;
        height: 0px;
        overflow: visible;
    }

    .home .project:nth-of-type(1) .overlay {
        bottom:auto;
        top:0px;
    }

    body.project {
        padding-top:83px !important;
        padding-bottom:166px !important;
    }

    .home .content {
        padding-top: 0px !important;
    }

    footer {
        display:none !important;
    }

    .noscroll {
        overflow: hidden;
    }

    .cookie {
        top: 1px;
        bottom: auto;
    }

    .flickity-page-dots li {
        display: none !important;
    }

    .flickity-page-dots li.show-me {
        display: inline-block !important;
    }

[class~='module-txt-full']:first-of-type  {
    margin-top:0px !important;
}

}