/* Luca Bunino ©2023
Graphic design & web development
www.lucabunino.com */

@import url(./fonts.css);
@import url(./margins.css);
@import url(./paddings.css);

/* ROOT */
:root {
    --white: #F5F5F5;
    --black: #525252;

    --gutter: 5px;
    --margin: calc(var(--gutter)*1.5);
    --transition: cubic-bezier(.77,0,.175,1) .7s;
    --opacity: 0.5;
    --topPageMargin: 30vh;
}

@media screen and (max-width: 1024px) {
    :root {    
        --topPageMargin: 8rem;
    }
}
/* ELEMENTS */
html {font-family: FTAktual, Helvetica, sans-serif; color: var(--black); -webkit-font-smoothing: antialiased; -webkit-font-feature-settings: "ss02" 1; font-feature-settings: "ss02" 1; scroll-behavior: smooth;}
body {background-color: var(--white);}
section {margin-bottom: 20vh !important;}
img {width: 100%;height: auto;}
label + label {margin-left: var(--gutter);}

/* COMMON CLASSES */
/* Display */
.hidden {display: none !important;}
.desktop-hidden {display: none;}
.mobile-only {display: none;}
.block {display: block;}
.inline {display: inline;}
.inline-block {display: inline-block;}
.flex {display: -webkit-box;display: -ms-flexbox;display: flex;}
.flex-end {-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
.flex-item {margin-right: var(--gutter);}
.flex-item:last-child {margin-right: 0;}
.flex-column {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
.wrap {-ms-flex-wrap: wrap;flex-wrap: wrap;}
.nowrap {-ms-flex-wrap: nowrap;flex-wrap: nowrap;}
.space-around {-ms-flex-pack: distribute;justify-content: space-around;}
.space-between {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.center {-webkit-box-align: center;-ms-flex-align: center;align-items: center}
.grid {display: -ms-grid;display: grid;}
.grid-cols-2 {-ms-grid-columns: (1fr)[2];grid-template-columns: repeat(2, 1fr);}
.grid-cols-2-auto {-ms-grid-columns: (auto)[2];grid-template-columns: repeat(2, auto);}
.grid-cols-12 {-ms-grid-columns: (1fr)[12];grid-template-columns: repeat(12, 1fr);}
.grid-col-start-1 {-ms-grid-column: 1;grid-column-start: 1;}
.grid-col-start-8 {-ms-grid-column: 8;grid-column-start: 8;}
.grid-col-end-8 {-ms-grid-column-span: 8;grid-column-end: 8;}
.grid-col-end-12 {-ms-grid-column-span: 12;grid-column-end: 12;}
.grid-col-end-span-2 {-ms-grid-column-span: 2;grid-column-end: span 2;}
.order-1 {-webkit-box-ordinal-group: 2;-ms-flex-order: 1;order: 1;}
.order-2 {-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2;}
.order-3 {-webkit-box-ordinal-group: 4;-ms-flex-order: 3;order: 3;}
.order-4 {-webkit-box-ordinal-group: 5;-ms-flex-order: 4;order: 4;}
.order-5 {-webkit-box-ordinal-group: 6;-ms-flex-order: 5;order: 5;}
.order-6 {-webkit-box-ordinal-group: 7;-ms-flex-order: 6;order: 6;}
.order-7 {-webkit-box-ordinal-group: 8;-ms-flex-order: 7;order: 7;}
@media screen and (max-width: 1200px) {
    .tablet-grid-cols-1 {-ms-grid-columns: (1fr)[1];grid-template-columns: repeat(1, 1fr);}
    .tablet-grid-col-end-span-1 {-ms-grid-column-span: 1;grid-column-end: span 1;}
    .order-1 {-webkit-box-ordinal-group: 2;-ms-flex-order: 1;order: 1;}
    .order-2 {-webkit-box-ordinal-group: 5;-ms-flex-order: 4;order: 4;}
    .order-3 {-webkit-box-ordinal-group: 4;-ms-flex-order: 3;order: 3;}
    .order-4 {-webkit-box-ordinal-group: 6;-ms-flex-order: 5;order: 5;}
    .order-5 {-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2;}
    .order-6 {-webkit-box-ordinal-group: 7;-ms-flex-order: 6;order: 6;}
}
.gap-g {gap: var(--gutter);}
.col-gap-g {-webkit-column-gap: var(--gutter);-moz-column-gap: var(--gutter);column-gap: var(--gutter);}
.row-gap-g {row-gap: var(--gutter);}
.no-highlight, button, textarea, input, select, a, * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

/* Overflow */
.overflow-hidden {overflow: hidden;}
.overflow-y {overflow-y: overlay;}

/* Position */
.fixed {position: fixed;}
.absolute {position: absolute;}
.relative {position: relative;}
.top-0 {top: 0;}
.right-0 {right: 0;}
.bottom-0 {bottom: 0;}
.bottom-1em {bottom: 1em;}
.bottom-1_75em {bottom: 1.75em;}
.left-0 {left: 0;}

/* Z Index */
.z-index-1 {z-index: 1;}
.z-index-99 {z-index: 99;}
.z-index-100 {z-index: 100;}
.z-index-101 {z-index: 101;}

/* Width */
.w-auto {width: auto;}
.w-100vw {width: 100vw;}
.w-90vw {width: 90vw;}
.w-90vw {width: 90vw;}
.w-80vw {width: 80vw;}
.w-70vw {width: 70vw;}
.w-60vw {width: 60vw;}
.w-50vw {width: 50vw;}
.w-40vw {width: 40vw;}
.w-30vw {width: 30vw;}
.w-20vw {width: 20vw;}
.w-10vw {width: 10vw;}
.w-160vw {width: 160vw;}
.w-100 {width: 100%;}
.w-95 {width: 95%;}
.w-90 {width: 90%;}
.w-85 {width: 85%;}
.w-80 {width: 80%;}
.w-75 {width: 75%;}
.w-70 {width: 70%;}
.w-65 {width: 65%;}
.w-60 {width: 60%;}
.w-55 {width: 55%;}
.w-50 {width: 50%;}
.w-45 {width: 45%;}
.w-40 {width: 40%;}
.w-35 {width: 35%;}
.w-30 {width: 30%;}
.w-25 {width: 25%;}
.w-20 {width: 20%;}
.w-15 {width: 15%;}
.w-10 {width: 10%;}
.w-5 {width: 5%;}
.w-0 {width: 0;}
.w-fit-content {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;}
.w-min-content {width: -webkit-min-content;width: -moz-min-content;width: min-content;}
.w-1third {width: calc(100%/3*1);}
.w-2third {width: calc(100%/3*2);}
.w-1fourth {width: calc(100%/4*1);}
.w-2fourth {width: calc(100%/4*2);}
.w-3fourth {width: calc(100%/4*3);}
.w-1twelfth {width: calc(100%/12*1);}
.w-2twelfth {width: calc(100%/12*2);}
.w-3twelfth {width: calc(100%/12*3);}
.w-4twelfth{width: calc(100%/12*4);}
.w-5twelfth{width: calc(100%/12*5);}
.w-5twelfth-vw{width: calc(100vw/12*5);}
.w-6twelfth{width: calc(100%/12*6);}
.w-7twelfth{width: calc(100%/12*7);}
.w-7twelfth-vw{width: calc(100vw/12*7);}
.w-8twelfth{width: calc(100%/12*8);}
.w-9twelfth{width: calc(100%/12*9);}
.w-10twelfth{width: calc(100%/12*10);}
.w-11twelfth{width: calc(100%/12*11);}

/* Min Width */
.min-w-0 {min-width: 0;}
.min-w-25 {min-width: 25%;}
.min-w-50 {min-width: 50%;}
.min-w-75 {min-width: 75%;}
.min-w-100 {min-width: 100%;}
.min-w-8em {min-width: 8em;}

/* Max Width */
.max-w-0 {max-width: 0;}
.max-w-25 {max-width: 25%;}
.max-w-40 {max-width: 40%;}
.max-w-50 {max-width: 50%;}
.max-w-75 {max-width: 75%;}
.max-w-100 {max-width: 100%;}
.max-w-700px {max-width: 700px;}
@media screen and (max-width: 1024px) {
    .mobile-max-w-0 {max-width: 0;}
    .mobile-max-w-25 {max-width: 25%;}
    .mobile-max-w-40 {max-width: 40%;}
    .mobile-max-w-50 {max-width: 50%;}
    .mobile-max-w-75 {max-width: 75%;}
    .mobile-max-w-100 {max-width: 100%;}
}

/* Height */
.h-100 {height: 100%;}
.h-10dvh {height: 10dvh;}
.h-20dvh {height: 20dvh;}
.h-25dvh {height: 25dvh;}
.h-30dvh {height: 30dvh;}
.h-40dvh {height: 40dvh;}
.h-50dvh {height: 50dvh;}
.h-60dvh {height: 60dvh;}
.h-70dvh {height: 70dvh;}
.h-80dvh {height: 80dvh;}
.h-90dvh {height: 90dvh;}
.h-75dvh {height: 75dvh;}
.h-100dvh {height: 100dvh;}

/* Max height */
.max-h-100 {max-height: 100%;}
.max-h-10dvh {max-height: 10dvh;}
.max-h-20dvh {max-height: 20dvh;}
.max-h-25dvh {max-height: 25dvh;}
.max-h-30dvh {max-height: 30dvh;}
.max-h-40dvh {max-height: 40dvh;}
.max-h-50dvh {max-height: 50dvh;}
.max-h-60dvh {max-height: 60dvh;}
.max-h-70dvh {max-height: 70dvh;}
.max-h-80dvh {max-height: 80dvh;}
.max-h-90dvh {max-height: 90dvh;}
.max-h-75dvh {max-height: 75dvh;}
.max-h-100dvh {max-height: 100dvh;}

@media screen and (max-width: 1024px) {
    .mobile-h-auto {height: auto;}
    .mobile-max-h-100 {max-height: 100%;}
    .mobile-max-h-10dvh {max-height: 10dvh;}
    .mobile-max-h-20dvh {max-height: 20dvh;}
    .mobile-max-h-25dvh {max-height: 25dvh;}
    .mobile-max-h-30dvh {max-height: 30dvh;}
    .mobile-max-h-40dvh {max-height: 40dvh;}
    .mobile-max-h-50dvh {max-height: 50dvh;}
    .mobile-max-h-60dvh {max-height: 60dvh;}
    .mobile-max-h-70dvh {max-height: 70dvh;}
    .mobile-max-h-80dvh {max-height: 80dvh;}
    .mobile-max-h-90dvh {max-height: 90dvh;}
    .mobile-max-h-75dvh {max-height: 75dvh;}
    .mobile-max-h-100dvh {max-height: 100dvh;}
}

/* Border */
    /* All */
.b-1 {border: solid 1px;}
    /* Vertical */
.by-1 {border-top: solid 1px; border-bottom: solid 1px;}
    /* Lateral */
.bx-1 {border-left: solid 1px; border-right: solid 1px;}
    /* Top */
.bt-1 {border-top: solid 1px var(--black);}
    /* Right */
.br-1 {border-right: solid 1px var(--black);}
    /* Bottom */
.bb-1 {border-bottom: solid 1px var(--black);}
    /* Left */
.bl-1 {border-left: solid 1px var(--black);}


/* Typography */
.text-xs {font-size: 8px;}
.text-s {font-size: 16px;}
.text-m {font-size: 32px;}
.text-l {font-size: 64px;}
.text-xl {font-size: 128px;}
.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}
.text-nowrap {text-wrap: nowrap;}
.align-center {text-align: center;}
.align-right {text-align: right;}
.lh-0 {line-height: 0;}
.hyphens {-webkit-hyphens: auto;-ms-hyphens: auto;hyphens: auto;}
.break-word {word-break: break-word;}
.break-all {word-break: break-all;}

/* Appereance */
.transition {-webkit-transition: var(--transition);-o-transition: var(--transition);transition: var(--transition);}
.bg-white {background-color: var(--white);}
.bg-black {background-color: var(--black);}
.difference {mix-blend-mode: difference;}


/* Project */
.text-xs {font-size: 12px; line-height: 1.0833; letter-spacing: -0.01em;}
.text-s {font-size: 20px; line-height: 1; letter-spacing: -0.02em;}
.text-m {font-size: 32px; line-height: 0.9375; letter-spacing: -0.03em;}
.text-l {font-size: 64px; line-height: 0.8125; letter-spacing: -0.05em;}
.text-l {font-size: clamp(54px, calc(3.375rem + ((1vw - 10.24px) * 2.7344)), 96px);}
.text-xl {font-size: 96px; line-height: 0.8333; letter-spacing: -0.06em;}
.text-xl {font-size: clamp(76px, calc(20px + 6vw), 124px);}
@media screen and (max-width: 1024px) {
    .text-xs {font-size: 14px;}
    .text-s {font-size: 18px;}
    .text-m {font-size: 30px;}
    .text-l {font-size: 45px;}
    .text-xl {font-size: 59px;}
}
.button {
    font-family: FTAktual-Italic, Helvetica, sans-serif;
}
.button.locked {
    opacity: var(--opacity);
}
.button-icon {
    display: inline-block;
    width: 1.2em;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
}
a:hover > .button-icon {
    margin-right: .5em;
}
a.crossed-bottom-hover {
   display: inline-block;
}
a.crossed-bottom-hover::after {
    content: "";
    display: block;
    position: relative;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    width: calc(100% + 0.3em + 1px);
    height: 1px;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    background-color: var(--black);
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
}
a.crossed-bottom-hover:hover::after {
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
}
@media screen and (max-width: 1024px) {
    .mobile-block {display: block;}
    .mobile-inline {display: inline;}
    .mobile-align-right {text-align: right;}
    .mobile-align-left {text-align: left;}
    .mobile-relative {position: relative;}
    .mobile-static {position: static !important;}
    .mobile-absolute {position: absolute;}
    .mobile-right-m {right: var(--margin);}
    .mobile-flex {display: -webkit-box;display: -ms-flexbox;display: flex;}
    .mobile-flex-column {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
    .mobile-flex-end {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}
    .mobile-w-auto {width: auto;}
    .mobile-w-100 {width: 100%;}
    .mobile-w-75 {width: 75%;}
    .mobile-text-xxs {font-size: 12px;}
    .mobile-gap-1em {gap: 1em;}
    .mobile-b-0 {border: none;}
}


/* HEADER */
#nav-logo {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    -webkit-transition-delay: .0s;
         -o-transition-delay: .0s;
            transition-delay: .0s;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}
#nav-menu {
    right: 0; -webkit-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); border-left: solid 1px var(--white);
}
div[data-page="home"] + nav > #nav-logo, div[data-page="work"] + nav > #nav-logo {
    position: fixed;
}
#nav-menu.up {
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
}
#nav-menu.down {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}
nav {
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    -webkit-transition-delay: .0s;
         -o-transition-delay: .0s;
            transition-delay: .0s;
    width: 100%;
    background-color: var(--white);
    z-index: 999;
    top: 0;
}
nav::after {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    -webkit-transition-delay: 0.3s;
         -o-transition-delay: 0.3s;
            transition-delay: 0.3s;
    background-color: var(--black);
}
nav.up {
    position: fixed;
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
}
nav.down {
    position: fixed;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    /* box-shadow: 0 0 10px rgb(0 0 0 / 10%); */
}
nav.down::after {
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
}
nav.up > #nav-logo {
    
}
nav.down > #nav-logo {
    font-size: 32px; line-height: 0.9375; letter-spacing: -0.03em;
}
#nav-menu > .nav-item::before,
.work-filter::before {
    content: "";
    display: inline-block;
    position: relative;
    left: calc(100% + 0.3em);
    top: 0;
    margin-bottom: -0.3em;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    width: 1px;
    height: 1.1em;
    -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    background-color: var(--black);
}
#nav-menu > .nav-item::after,
.work-filter::after {
    content: "";
    display: block;
    position: relative;
    left: 0;
    top: 0.2em;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    width: calc(100% + 0.3em);
    height: 1px;
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    background-color: var(--black);
}
.lang.current::before {
    content: "⚫ ";
}
@media screen and (min-width: 1025px) {
    #nav-menu > .nav-item:hover::before,
    #nav-menu > .nav-item.current::before,
    .work-filter:hover::before,
    .work-filter.active::before {
        -webkit-transform: scaleY(1);
            -ms-transform: scaleY(1);
                transform: scaleY(1);
    }
    #nav-menu > .nav-item:hover::after,
    #nav-menu > .nav-item.current::after,
    .work-filter:hover::after,
    .work-filter.active::after {
        -webkit-transform: scaleX(1);
            -ms-transform: scaleX(1);
                transform: scaleX(1);
    }
    #nav-menu > .nav-item.current:hover::before {
        -webkit-transform: scaleY(0);
            -ms-transform: scaleY(0);
                transform: scaleY(0);
    }
    #nav-menu > .nav-item.current:hover::after {
        -webkit-transform: scaleX(0);
            -ms-transform: scaleX(0);
                transform: scaleX(0);
    }
}
#hamburger {
    width: -webkit-fill-available;
    height: calc(var(--navLogoHeight) + var(--margin));
    position: fixed;
    z-index: 9;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    cursor: pointer;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    background-color: var(--white);
    padding-right: var(--margin);
    padding-left: calc(100% - 40px - var(--margin));
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    top: 0;
}
.hamburger-line {
    width: 40px;
    height: 3px;
    background-color: var(--black);
    display: block;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
}
#hamburger-line-2 {
    -ms-grid-row-align: flex-end;
    -ms-grid-column-align: flex-end;
    place-self: flex-end;
}
#page-name {
    top: calc(var(--navLogoHeight) + var(--margin));
}
@media screen and (max-width: 1024px) {
    #nav-logo {
        position: fixed;
        z-index: 10;
        padding: var(--margin);
        /* padding-bottom: calc(var(--margin)*2); */
        background-color: var(--white);
        min-height: 0;
    }
    #nav-logo > span {
        width: -webkit-min-content;
        width: -moz-min-content;
        width: min-content;
        display: block;
    }
    #nav-menu {
        left: 0;
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        background-color: var(--black);
        border: none;
        color: var(--white);
        padding-top: 2.7em;
        padding-bottom: calc(var(--margin)*2);
        font-size: 45px;
        line-height: 0.8125;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (auto)[2];
        grid-template-columns: repeat(2, auto);
        -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);
        z-index: 2;
    }
    .nav-item {
        padding: 0;
        margin: 0;
        -ms-grid-column: 1;
        grid-column: 1;
    }
    #lang-selector {
        right: var(--margin);
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 3;
        grid-row: 3;
        margin-top: auto;
    }

    #nav-menu.down {
        -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);
    }

    nav.down {
        position: inherit;
        -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);
    }
    nav.down::after {
        -webkit-transform: scaleX(0);
            -ms-transform: scaleX(0);
                transform: scaleX(0);
    }
    nav.down > #nav-logo {
        font-size: inherit;
    }

    nav.open > #nav-logo {
        color: var(--white);
        background-color: var(--black);
    }
    nav.open > #hamburger {
        background-color: var(--black);
    }
    nav.open > #hamburger > .hamburger-line {
        background-color: var(--white);
    }
    nav.open > #hamburger > #hamburger-line-1 {width: 60%;}
    nav.open > #hamburger > #hamburger-line-2 {width: 60%;}
    nav.open > #hamburger > #hamburger-line-3 {width: 30%;}
    nav.open > #nav-menu {
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);
    }
    nav.mobile-up > #nav-logo, nav.mobile-up > #hamburger {
        -webkit-transform: translateY(-100px);
            -ms-transform: translateY(-100px);
                transform: translateY(-100px);
    }
    nav.mobile-down > #nav-logo, nav.mobile-down > #hamburger {
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);
    }
}


/* FOOTER */
footer {}
[data-page="home"] + footer > div:first-child {
    position: fixed;
    left: var(--margin);
    bottom: var(--gutter);
}
[data-page="single-work"] + footer {
    padding-top: 20dvh;
}

@media screen and (max-width: 1024px) {
    [data-page="single-work"] + footer {
        display: none;
    }
}


/* HOMEPAGE */
#home-text {}
#home-text > h2 {}
#home-text > h3 {}
.home-img-container {
    max-height: 85vh;
    overflow: hidden;
    position: relative;
    line-height: 0;
}
.home-img-container:hover {
    max-height: 85vh;
    overflow: hidden;
}
#home-selected-works > a:hover > .home-img-container > .work-item-hover {
    opacity: 1;
}
#home-selected-works > a:hover > .home-img-container > .work-item-img-hover {
    opacity: 1;
}
.home-img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.home-work-info {
    
}


/* ABOUT */
.about-team-info-container > p > a {
    display: inline-block;
}
.about-team-info-container > p > a::after {
    content: "";
    display: block;
    position: relative;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    background-color: var(--black);
}
.about-team-info-container > p > a:hover::after {
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
}
.about-team-info-container > p + p {
    text-indent: 2em;
}
.person-button + .person-button {
    margin-left: 1em;
}
@media screen and (max-width: 1024px) {
    .about-section {}
    .about-section-title {
        width: 100%;
        border-bottom: none;
    }
    .about-section-nav {
        position: absolute;
        right: var(--margin);
        width: calc(100% - var(--margin)*2);
        -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);
    }
    .about-section-info {}

    .about-section-content {
        width: 100%;
    }
    .about-team-info-container > p, .about-team-info-container > p > a {
        display: inline;
        -webkit-hyphens: auto;
            -ms-hyphens: auto;
                hyphens: auto;
        hyphenate-limit-chars: 10;
    }
    .about-team-info-container > p > a::after {
        display: none;
    }
}

/* Swiper */
.swiper-slide {
    width: auto !important;
    margin-right: var(--gutter);
}
.swiper-slide > img {
    display: block;
    height: 100%;
    width: auto;
}
.swiper-button-next, .swiper-button-prev {
    position: absolute !important;
    top: 0 !important;
    margin-top: 0 !important;
    height: 100% !important;
    width: 20vw !important;
}
.swiper-button-next::after, .swiper-button-prev::after {
    content: "" !important;
}
.swiper-button-prev {
    left: 0 !important;
}
.swiper-button-next {
    right: 0 !important;
}
.swiper-slide {
    -webkit-transition: all ease-in-out 300ms !important;
    -o-transition: all ease-in-out 300ms !important;
    transition: all ease-in-out 300ms !important;
}
@media screen and (min-width: 1025px) {
    .swiper.swiper-button-prev-hover > .swiper-wrapper > .swiper-slide:first-child {
        margin-left: 2vw !important;
    }
    .swiper.swiper-button-next-hover > .swiper-wrapper > .swiper-slide:first-child {
        margin-left: -2vw !important;
    }
}
.swiper-pagination {
    bottom: unset !important;
}
.swiper-pagination-bullet{
    width: .7em;
    height: .7em;
    margin: .7em .2em !important;
    cursor: pointer;
}
.swiper-pagination-bullet:hover{
    background: #555555;
}
.swiper-pagination-bullet-active{
    background: var(--black);
    cursor: unset;
}


/* CONTACTS */
.contact-indent, .contact-indent-container > p + p {
    text-indent: 2em;
}
.contact-button {
    position: absolute;
    left: var(--margin);
}
.contact-button-mt-custom {
    margin-top: -2em;
}
.at {
    position: relative;
    top: -.1em;
}
[data-page="contact"] + #footer {
    position: absolute;
    bottom: 0;
}
[data-page="contact"] > a >p {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
[data-page="contact"] > a >p::before {
    content: "";
    display: inline-block;
    position: relative;
    left: calc(100% + 0.3em);
    top: -0.14em;
    margin-bottom: -0.2em;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    width: 1px;
    height: 0.83em;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    background-color: var(--black);
    -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
            transform: scaleY(0);
}
[data-page="contact"] > .contact-indent > p::before,
[data-page="contact"] > .contact-indent-container > p + p::before {
    left: calc(100% + 0.3em - 2em);
}
[data-page="contact"] > a >*::after {
    content: "";
    display: block;
    position: relative;
    left: 0;
    top: 0.05em;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    width: calc(100% + 0.3em + 1px);
    height: 1px;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    background-color: var(--black);
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
}
@media screen and (min-width: 1025px) {
    [data-page="contact"] > a:hover >p::before {
        -webkit-transform: scaleY(1);
            -ms-transform: scaleY(1);
                transform: scaleY(1);
    }
    [data-page="contact"] > a:hover >p::after {
        -webkit-transform: scaleX(1);
            -ms-transform: scaleX(1);
                transform: scaleX(1);
    }
}
@media screen and (max-width: 1024px) {
    .contact-indent, .contact-indent-container > p + p {
        text-indent: 0;
        display: block;
    }
    .contact-button {
        position: relative;
        display: block;
    }
    .contact-button-mt-custom {
        margin-top: 0.2em;
    }
    [data-page="contact"] {
        height: auto;
        min-height: calc(var(--vh)*85);
    }
    [data-page="contact"] > a {
        display: block;
        margin-bottom: 1em;
    }
    [data-page="contact"] > .at-container {
        margin-bottom: 0;
    }
    [data-page="contact"] > .at-container > p {
        -ms-hyphens: auto;
            hyphens: auto;
        -webkit-hyphens: auto;
        word-break: break-all;
    }
    [data-page="contact"] + #footer {
        position: relative;
        padding-top: 20dvh;
    }
    [data-page="contact"] > a.contact-indent {
        margin-bottom: 0;
    }
}


/* WORK */ 
@-webkit-keyframes work-switch-after-in {
0% { -webkit-transform: scaleX(0); transform: scaleX(0); }
100% { -webkit-transform: scaleX(1); transform: scaleX(1); }
} 
@keyframes work-switch-after-in {
0% { -webkit-transform: scaleX(0); transform: scaleX(0); }
100% { -webkit-transform: scaleX(1); transform: scaleX(1); }
}

@-webkit-keyframes work-switch-before-in {
0% { -webkit-transform: scaleY(0); transform: scaleY(0); }
100% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}

@keyframes work-switch-before-in {
0% { -webkit-transform: scaleY(0); transform: scaleY(0); }
100% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}

#work-switch {
    cursor: pointer;
    top: 100%;
    width: var(--navWorkWidth);
}

#work-switch.nav-item::after {
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    -webkit-animation-name: work-switch-after-in;
            animation-name: work-switch-after-in;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
    -webkit-animation-fill-mode: backwards;
            animation-fill-mode: backwards;
}

#work-switch.nav-item::before {
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    -webkit-animation-name: work-switch-before-in;
            animation-name: work-switch-before-in;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
    -webkit-animation-fill-mode: backwards;
            animation-fill-mode: backwards;
}

@media screen and (max-width: 1024px) {
    #work-switch.mobile-only {
        cursor: unset;
        display: block;
        width: auto;
        top: calc(var(--navLogoHeight) + var(--margin));
        right: 0;
    }
}

/* Work grid */
#work-filters.work-grid {
    top: var(--topPageMargin);
    left: 0;
}
.work-filter {
    cursor: pointer;
    display: block;
    -webkit-transition: padding var(--transition);
    -o-transition: padding var(--transition);
    transition: padding var(--transition);
}
.work-filter.active {
    padding-left: 1em;
}
.work-filter.active::after {
    padding-left: 1em;
    left: -1em;
    width: calc(100% + 0.3em + 1em);
}
.work-filter.active.hover::before {
    -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
            transform: scaleY(1);
}
.work-filter.active.hover::after {
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
}
#work.work-grid {
    gap: var(--gutter);
    min-height: calc(100vh - var(--topPageMargin));
}
#work > #work-empty {
    display: hidden !important;
}
#work.work-grid.empty > #work-empty {
    display: block;
    background-color: var(--black);
    color: var(--white);
    position: absolute;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    text-align: center;
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.work-item.work-grid {
    width: 100%;
    aspect-ratio: 4/5;
    position: relative;
    overflow: hidden;
}
.work-item-hover {
    background-color: var(--white);
    padding: var(--gutter);
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    -webkit-transition-duration: 0.3s;
         -o-transition-duration: 0.3s;
            transition-duration: 0.3s;
}
.work-item.work-grid:hover > .work-item-hover {
    opacity: 1;
}
.work-item-hover:hover {
    color: var(--white);
    background-color: var(--black);
}
.work-item-img-hover {
    opacity: 0;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    -webkit-transition-duration: 0.3s;
         -o-transition-duration: 0.3s;
            transition-duration: 0.3s;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.work-item.work-grid:hover > .work-item-img-hover {
    opacity: 1;
}
.work-img {
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    -webkit-transition-duration: 0.3s;
         -o-transition-duration: 0.3s;
            transition-duration: 0.3s;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
@media screen and (max-width: 1024px) {
    #work-filters.work-grid {
        top: unset;
    }
    .work-filter {
        display: none;
    }
    .work-item.work-grid {
        aspect-ratio: unset;
    }
    .work-img {
        aspect-ratio: 4/5;
    }
    .work-item-img-hover {
        display: none;
    }
    .work-item-hover {
        background-color: transparent;
        padding: var(--gutter);
        position: relative;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
        top: unset;
        left: unset;
        opacity: 1;
        text-align: left;
        padding-bottom: 2em;
    }
    .work-item-hover:hover {
        color: inherit;
        background-color: inherit;
    }
}

/* Work list */
#content.work-list {
    min-height: calc(var(--vh)*100 - var(--footerHeight));
}
#work-filters.work-list {
    display: none;
}
#work.work-list {
    margin-top: 0;
    padding: 0 var(--margin);
    width: 100%;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
}
#work.work-list:hover > a > div > div > *::after {
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
}
#work.work-list > a:hover > div > div > *::after {
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
}
.work-sorter {
    cursor: pointer;
}
.work-item.work-list > h3 {
    display: none;
}
.work-info {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr var(--gutter) 7fr var(--gutter) 5fr var(--gutter) 7fr var(--gutter) 7fr;
    grid-template-columns: 1fr 7fr 5fr 7fr 7fr;
    gap: var(--gutter);
}
.work-info > * {
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
}
.work-info > *::after {
    content: "";
    display: block;
    position: relative;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    background-color: var(--black);
}
.work-sorter::after {
    display: none;
}

@media screen and (max-width: 1200px) {
    .work-info {
        -ms-grid-columns: 2fr 4fr 4fr 4fr;
        grid-template-columns: 2fr 4fr 4fr 4fr;
    }
}

@media screen and (max-width: 1024px) {
    .work-info {
        -ms-grid-columns: 2fr 5fr 5fr;
        grid-template-columns: 2fr 5fr 5fr;
    }
    #content.work-list {
        min-height: calc(var(--vh)*100 - var(--footerHeight) - var(--topPageMargin));
    }
}

@media screen and (max-width: 667px) {
    .work-info {
        -ms-grid-columns: 2fr 12fr;
        grid-template-columns: 2fr 12fr;
    }
}

@media screen and (max-width: 400px) {
    .work-info {
        -ms-grid-columns: 2fr 6fr;
        grid-template-columns: 2fr 6fr;
    }
}


/* SINGLE WORK */
#single-work-expand-reduce-icons {
    right: calc(100%/12*5);
    top: var(--gutter);
    cursor: pointer;
}
#single-work-expand-reduce-icons > svg {
    width: 3rem;
    height: 3rem;
}
#single-work-expand-reduce-icons:hover > svg, #single-work-expand-reduce-icons:hover > svg + svg {
    opacity: var(--opacity);
}
#single-work-images>.grid {
    -webkit-column-gap: var(--gutter);
       -moz-column-gap: var(--gutter);
            column-gap: var(--gutter);
    row-gap: 4em;
    margin-bottom: 4em;
}
.single-work-image {
    max-height: 100dvh;
    -o-object-fit: cover;
       object-fit: cover;
}
.single-work-image-container.full-width, .single-work-image-container.centered-image-big, .single-work-image-container.centered-image-small {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
}
.centered-image-big, .centered-image-small, .double-image {
    max-height: 90dvh;
    -o-object-fit: contain;
       object-fit: contain;
}
.centered-image-big {
    padding: 0 20%;
}
.centered-image-small {
    padding: 0 35%;
}
#single-work-data > p {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
}
.single-work-data-label {
    display: inline-block;
    min-width: 8em;
    margin-right: 1em;
}
.accordion {cursor: pointer;}
.accordion-item {
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    overflow: hidden;
}
#credits.active {
    margin-top: .5em;
}
.credit > span:first-child {
    margin-right: 1em;
}
.single-work-wip-lightbox-image {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    max-height: 100%;
}
.swiper-pagination-wip {
    top: unset !important;
    bottom: 0 !important;
}
#single-work-wip-lightbox-reduce-icon {
    right: var(--margin);
    top: var(--gutter);
    cursor: pointer;
}
#single-work-wip-lightbox-reduce-icon > svg {
    width: 3rem;
    height: 3rem;
}
#single-work-wip-lightbox-reduce-icon:hover > svg{
    opacity: var(--opacity);
}
.credit:last-child {
    padding-bottom: 0.25em;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#single-work-images::-webkit-scrollbar, #single-work-info::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#single-work-images, #single-work-info {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

@media screen and (max-width: 1024px) {
    #single-work-images {
        height: auto;
        position: relative;
    }
    #single-work-images.up {
        height: calc(100*var(--vh) - var(--navLogoHeight));
        overflow-y: hidden;
    }
    #single-work-info {
        background-color: var(--white);
        position: fixed;
        top: 80vh;
        /* border-top: solid 1px var(--black); */
        -webkit-filter: drop-shadow(0 -10px 5px rgba(0, 0, 0, 0.2));
                filter: drop-shadow(0 -10px 5px rgba(0, 0, 0, 0.2));
        z-index: 99;
        height: calc(100*var(--vh) - var(--navLogoHeight));
    }
    #single-work-info.up {
        position: absolute;
        top: var(--navLogoHeight);
        /* top: 0; */
    }
    #single-work-info-panel {
        height: var(--navLogoHeight);
        top: -100%;
        z-index: 12;
    }
    #single-work-info-panel.up {
        top: 0;
    }
    .single-work-image-container:last-child {
        margin-bottom: 20dvh;
    }
    .swiper-slide-wip {
        width: calc(100% - var(--margin)*2) !important;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .single-work-wip-lightbox-image {
        width: 100% !important;
        height: auto !important;
    }
    .single-work-data-label {
        width: calc(40% - 1em);
        -o-text-overflow: ellipsis;
           text-overflow: ellipsis;
        display: inline-table;
    }
    .single-work-data-label + span {
        width: 60%;
        -o-text-overflow: ellipsis;
           text-overflow: ellipsis;
        display: inline-table;
    }
}

/* POLICY */
[data-page = "policy"] > h1 {
    font-size: clamp(54px, calc(3.375rem + ((1vw - 10.24px) * 2.7344)), 96px);
    letter-spacing: -0.05em;
}

[data-page = "policy"] > h2 {
    font-size: 32px; line-height: 0.9375;
    letter-spacing: -0.03em;
    margin-top: 2em;
}

[data-page = "policy"] > h3 {
    font-size: 20px; line-height: 1;
    letter-spacing: -0.02em;
    margin-top: 1em;
}

[data-page = "policy"] > p {
    margin-top: .5em;
}

[data-page = "policy"] > p > a,
[data-page = "policy"] > ul > li > a {
    text-decoration: underline;
}

[data-page = "policy"] > ul {
    list-style-type: disc;
    list-style-position: inside;
    margin-top: .5em;
    margin-bottom: .5em;
}

list-style-type: disc;
    list-style-position: inside;

@media screen and (max-width: 1024px) {
    [data-page = "policy"] > h1 {
        font-size: 45px;
    }
    
    [data-page = "policy"] > h2 {
        font-size: 30px;
    }
    
    [data-page = "policy"] > h3 {
        font-size: 18px;
    }
}

/* COOKIE CONSENT */
@-webkit-keyframes cookieIn {
  0% {
    -webkit-transform: translateX(110%) scale(0);
            transform: translateX(110%) scale(0);
  }
  100% {
    -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
  }
}

@keyframes cookieIn {
  0% {
    -webkit-transform: translateX(110%) scale(0);
            transform: translateX(110%) scale(0);
  }
  100% {
    -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
  }
}

@-webkit-keyframes cookieOut {
  0% {
    -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
  }
  100% {
    -webkit-transform: translateX(110%) scale(0);
            transform: translateX(110%) scale(0);
  }
}

@keyframes cookieOut {
  0% {
    -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
  }
  100% {
    -webkit-transform: translateX(110%) scale(0);
            transform: translateX(110%) scale(0);
  }
}


#cookie-consent {
  position: fixed;
  background-color: var(--black);
  color: var(--white);
  padding: var(--gutter) var(--margin) calc(var(--gutter)*2) var(--margin);
  z-index: 99999;
  bottom: 0;
  left: 0;
  width: 100%;
  text-transform: none;
}

#cookie-consent > a {
  background-color: transparent;
  padding: 0;
  color: var(--white);
  border: none;
  cursor: pointer;
  margin-top: calc(var(--gutter)*3);
}

#cookie-consent > a::after {
    background-color: var(--white);
  }

#cookie-consent > p > a {
  text-decoration: underline;
}


/* MOBILE */
@media screen and (max-width: 1200px) {
    .tablet-hidden {display: none;}
}
@media screen and (max-width: 1024px) {
    .mobile-grid-cols-1 {-ms-grid-columns: (1fr)[1];grid-template-columns: repeat(1, 1fr);}
    .mobile-only {display: -webkit-box;display: -ms-flexbox;display: flex;}
    .mobile-hidden {display: none;}
}
@media screen and (max-width: 667px) {
    .dumb-hidden {display: none;}
    .dumb-grid-cols-1 {-ms-grid-columns: (1fr)[1];grid-template-columns: repeat(1, 1fr);}
}
@media screen and (max-width: 400px) {
    .mini-hidden {display: none;}
}