/* FONT */

/* INTER */
/* Variable Font */
@font-face {
 font-family: InterVariable;
 font-style: normal;
 font-weight: 100 900;
 font-display: swap;
 src: url('/font/inter/variable/InterVariable.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: InterVariable;
 font-style: italic;
 font-weight: 100 900;
 font-display: swap;
 src: url('/font/inter/variable/InterVariable-Italic.woff2?v=4.0') format('woff2');
}

/* static fonts */
@font-face {
 font-family: Inter;
 font-style: normal;
 font-weight: 100;
 font-display: swap;
 src: url('/font/inter/static/Inter-Thin.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: italic;
 font-weight: 100;
 font-display: swap;
 src: url('/font/inter/static/Inter-ThinItalic.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: normal;
 font-weight: 200;
 font-display: swap;
 src: url('/font/inter/static/Inter-ExtraLight.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: italic;
 font-weight: 200;
 font-display: swap;
 src: url('/font/inter/static/Inter-ExtraLightItalic.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: normal;
 font-weight: 300;
 font-display: swap;
 src: url('/font/inter/static/Inter-Light.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: italic;
 font-weight: 300;
 font-display: swap;
 src: url('/font/inter/static/Inter-LightItalic.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url('/font/inter/static/Inter-Regular.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: italic;
 font-weight: 400;
 font-display: swap;
 src: url('/font/inter/static/Inter-Italic.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: normal;
 font-weight: 500;
 font-display: swap;
 src: url('/font/inter/static/Inter-Medium.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: italic;
 font-weight: 500;
 font-display: swap;
 src: url('/font/inter/static/Inter-MediumItalic.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: normal;
 font-weight: 600;
 font-display: swap;
 src: url('/font/inter/static/Inter-SemiBold.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: italic;
 font-weight: 600;
 font-display: swap;
 src: url('/font/inter/static/Inter-SemiBoldItalic.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: normal;
 font-weight: 700;
 font-display: swap;
 src: url('/font/inter/static/Inter-Bold.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: italic;
 font-weight: 700;
 font-display: swap;
 src: url('/font/inter/static/Inter-BoldItalic.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: normal;
 font-weight: 800;
 font-display: swap;
 src: url('/font/inter/static/Inter-ExtraBold.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 font-display: swap;
 src: url('/font/inter/static/Inter-ExtraBoldItalic.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: normal;
 font-weight: 900;
 font-display: swap;
 src: url('/font/inter/static/Inter-Black.woff2?v=4.0') format('woff2');
}
@font-face {
 font-family: Inter;
 font-style: italic;
 font-weight: 900;
 font-display: swap;
 src: url('/font/inter/static/Inter-BlackItalic.woff2?v=4.0') format('woff2');
}

/* IBM PLEX SERIF */
/* Mono */
@font-face {
 font-family: 'IBM Plex Mono';
 src: url('/font/ibm-plex-mono/IBMPlexMono-Regular.woff2') format('woff2'),
  url('/font/ibm-plex-mono/IBMPlexMono-Regular.woff') format('woff');
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}

/* Italic */
@font-face {
 font-family: 'IBM Plex Serif';
 src: url('/font/ibm-plex-serif/IBMPlexSerif-ThinItalic.woff2') format('woff2'),
  url('/font/ibm-plex-serif/IBMPlexSerif-ThinItalic.woff') format('woff');
 font-weight: 100;
 font-style: italic;
 font-display: swap;
}

@font-face {
 font-family: 'IBM Plex Serif';
 src: url('/font/ibm-plex-serif/IBMPlexSerif-ExtraLightItalic.woff2') format('woff2'),
  url('/font/ibm-plex-serif/IBMPlexSerif-ExtraLightItalic.woff') format('woff');
 font-weight: 200;
 font-style: italic;
 font-display: swap;
}

@font-face {
 font-family: 'IBM Plex Serif';
 src: url('/font/ibm-plex-serif/IBMPlexSerif-LightItalic.woff2') format('woff2'),
  url('/font/ibm-plex-serif/IBMPlexSerif-LightItalic.woff') format('woff');
 font-weight: 300;
 font-style: italic;
 font-display: swap;
}

@font-face {
 font-family: 'IBM Plex Serif';
 src: url('/font/ibm-plex-serif/IBMPlexSerif-Italic.woff2') format('woff2'),
  url('/font/ibm-plex-serif/IBMPlexSerif-Italic.woff') format('woff');
 font-weight: 400;
 font-style: italic;
 font-display: swap;
}

@font-face {
 font-family: 'IBM Plex Serif';
 src: url('/font/ibm-plex-serif/IBMPlexSerif-MediumItalic.woff2') format('woff2'),
  url('/font/ibm-plex-serif/IBMPlexSerif-MediumItalic.woff') format('woff');
 font-weight: 500;
 font-style: italic;
 font-display: swap;
}

@font-face {
 font-family: 'IBM Plex Serif';
 src: url('/font/ibm-plex-serif/IBMPlexSerif-SemiBoldItalic.woff2') format('woff2'),
  url('/font/ibm-plex-serif/IBMPlexSerif-SemiBoldItalic.woff') format('woff');
 font-weight: 600;
 font-style: italic;
 font-display: swap;
}

@font-face {
 font-family: 'IBM Plex Serif';
 src: url('/font/ibm-plex-serif/IBMPlexSerif-BoldItalic.woff2') format('woff2'),
  url('/font/ibm-plex-serif/IBMPlexSerif-BoldItalic.woff') format('woff');
 font-weight: 700;
 font-style: italic;
 font-display: swap;
}

/* COLOR CONSTANTS */

:root {
 --black: #191919;
 --white: #ffffff;
 --yellow: #ffd41f;

 --text-main: #191919;
 --text-medium-dark: #404040;
 --text-light: #ffffff;
 --text-dark: #b8b8b8;

 --page-back: #ffd41f;
 --page-main: #f5f5f5;
 --page-light: #ffffff;
 --page-dark: #d0d0d0;
 --color-soft-light: #ffffff6b;

 --color-gold: #d1b372;
 --color-gold-light: #eed59c;
 --color-gold-dark: #4f4428;

 --color-silver: #a5a8aa;
 --color-silver-light: #f2f2f2;

 --color-award-generic: #4624ac;
 --color-award-generic-light: #653be2;
}

/* GENERAL RESET */

* {
 padding: 0;
 margin: 0;
 border: 0;
 background: 0 0;
 outline: 0;
 font: inherit;
 color: inherit;
 text-decoration: none;
}

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

img,
svg {
 max-width: 100%;
}

/* caratteri alternativi del font */

.contextual-alternate {
 font-feature-settings: 'calt' 1;
}

.monospaced {
 font-feature-settings: 'tnum' 1;
}

.slashed-zero {
 font-feature-settings: 'zero' 1;
}

.fraction {
 font-feature-settings: 'frac' 1;
}

.alternate-digits {
 font-feature-settings: 'ss01' 1;
}

.disambiguation {
 font-feature-settings: 'ss02' 1;
}

.r-curves {
 font-feature-settings: 'ss03' 1;
}

.case-alternate {
 font-feature-settings: 'case' 1;
}

.ligatures {
 font-feature-settings: 'rlig' 1;
}

.discretionary-ligatures {
 font-feature-settings: 'dlig' 1;
}

.numerators {
 font-feature-settings: 'numr' 1;
}

.denomiators {
 font-feature-settings: 'dnom' 1;
}

.superscript {
 font-feature-settings: 'sups' 1;
}

.subscript {
 font-feature-settings: 'subs' 1;
}

/* ------------------------------------------------------- */

html {
 font-size: 100%;
 font-family: InterVariable, sans-serif;
}

@supports (font-variation-settings: normal) {
 html {
  font-family: InterVariable, sans-serif;
 }
}

::selection {
 color: #fff;
 background-color: var(--black, #191919);
 text-shadow: none;
}

html,
body {
 height: 100%;
 margin: 0;
 padding: 0;
}

body {
 font-family: InterVariable, sans-serif;
 color: var(--text-main, #191919);
 font-size: 1rem;
 font-weight: 400;
 line-height: 1.7rem;
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
}

.back-color {
 background: var(--page-back, #ffd41f);
}

p {
 orphans: 3;
 widows: 3;
 padding-bottom: 24px;
}

.arrow-list {
 list-style: none;
 text-indent: -20px;
 margin-left: 24px;
}

.arrow-list li {
 /* display: flex; */
 margin-bottom: 0.75rem;
}

.arrow-list li::before {
 content: '\2192';
 padding-right: 4px;
}

.green-dot-container {
 width: 16px;
 height: 16px;
 border-radius: 50%;
 display: inline-block;
 border: rgba(255, 255, 255, 0.3) solid 1px;
 box-shadow: 2px 2px 4px var(--page-dark, #b8b8b8), -2px -2px 4px var(--page-light, #ffffff);
}

.green-dot {
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background-color: #91ee00;
 opacity: 0.2;
 animation: fade 1.5s infinite;
}

@keyframes fade {
 0%,
 100% {
  opacity: 0.2;
 }
 50% {
  opacity: 1;
 }
}

.seminar-header {
 display: inline-block;
 margin: 42px 0;
}

.seminar-availability {
 display: grid;
 grid-template-columns: 16px 1fr;
 align-items: start;
 gap: 12px;
 margin-bottom: 2px;
}

.seminar-header h4 {
 margin: 0;
 padding: 1px 0 0 0;
 word-wrap: break-word;
}

.seminar-detail {
 margin-top: 4px !important;
 font-size: 0.9125rem;
 line-height: 1.125rem;
 margin-left: 28px !important;
 color: var(--text-medium-dark, #404040);
}

/* General style */

.project-title {
 padding-bottom: 2rem;
 text-align: left;
}

.project-client {
 mix-blend-mode: luminosity;
 color: var(--text-medium-dark, #404040);
 max-width: 590px;
}

.proj-subtitle {
 font-size: 1.625rem;
 font-weight: 800;
 letter-spacing: 0.3px;
}

.tags > span {
 background-color: rgba(255, 255, 255, 0.3);
 border: rgba(255, 255, 255, 0.3) solid 1px;
}

h1 {
 font-weight: 800;
 font-size: 3rem;
 padding-top: 0.5rem;
 padding-bottom: 0.25rem;
 line-height: 3.5rem;
}

h2 {
 font-weight: 720;
 font-size: 1.5rem;
 line-height: 2.125rem;
 /* letter-spacing: 0.02rem; */
 padding-bottom: 1rem;
 /* padding-top: 0.25rem;*/
}

.lh-small {
 line-height: 2rem;
}

h3 {
 font-weight: 400;
 font-size: 0.75rem;
 line-height: 0.75rem;
 color: var(--text-main, #191919);
 text-transform: uppercase;
 letter-spacing: 0.06rem;
 padding-top: 2rem;
 padding-bottom: 0.75rem;
}

h4 {
 font-weight: 430;
 font-size: 1rem;
 line-height: 1.15rem;
 color: var(--text-main, #191919);
 /* text-transform: uppercase; */
 /* letter-spacing: 0.06rem; */
 padding-top: 1rem;
 padding-bottom: 1rem;
}

strong,
.strong {
 font-weight: 700;
}

.regular {
 font-weight: 400 !important;
}

i,
.i {
 font-family: 'IBM Plex Serif', serif;
 font-style: italic;
}

.underline {
 text-decoration: none;
 color: var(--text-main, #191919);
 border-bottom: solid thin var(--text-main, #191919) !important;
}

.underline:hover {
 text-decoration: none;
 color: var(--text-main, #191919);
 border-bottom: solid 2px var(--text-main, #191919) !important;
}

.nodec {
 text-decoration: none;
 color: var(--text-main, #191919);
}

figure {
 margin: 0;
}

img {
 vertical-align: middle;
}

footer {
 display: inline-block;
 font-size: 0.75rem;
 font-feature-settings: 'ss01' 1;
 letter-spacing: 0.02rem;
 line-height: 1.125rem;
 color: var(--text-footer, #191919);
 opacity: 70%;
 width: 100%;
 margin: 0 auto 18px auto;
 text-align: center;
}

footer p {
 padding: 0;
 margin: 0 !important;
}

footer div {
 display: flex;
 /* margin-bottom: 20px; */
 gap: 20px;
 align-items: center;
}

.footer {
 justify-content: start;
 font-size: 0.925rem;
 color: var(--text-footer, #191919);
}

.footer p {
 padding-bottom: 0;
 padding-top: 0.25rem;
}

.footer-list li a:hover {
 border-bottom: 1px solid var(--text-footer, #191919);
}

.footer-index {
 padding-left: 18px;
 padding-right: 18px;
 display: flex;
 flex-direction: column;
 color: var(--text-footer, #191919);
}

.footer-index ul {
 list-style: none;
}

.footer-list-container {
 flex-wrap: unset;
}

.footer-list {
 width: 20%;
}

.footer-list li,
.footer-list p {
 font-size: 0.75rem;
 line-height: normal;
 padding-bottom: 0.625rem;
}

.footer-index .line {
 margin-top: 1rem;
 margin-bottom: 1rem;
 opacity: 0.2;
 background-color: var(--text-footer, #191919);
}

.false-break {
 display: inherit;
}

.linkbb:hover {
 border-bottom: 2px solid var(--text-main, #191919) !important;
}

/* cursor */

html:hover .cursor {
 opacity: 1;
}

.cursor {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 999;
 pointer-events: none;
}

.cursor--hover .cursor-outer {
 width: 144px;
 height: 144px;
 margin: -72px 0 0 -72px;
 opacity: 1;
}

.cursor--click .cursor-outer {
 width: 24px;
 height: 24px;
 margin: -12px 0 0 -12px;
}

.cursor-move-outer {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.cursor-outer {
 display: block;
 width: 48px;
 height: 48px;
 margin: -24px 0 0 -24px;
 border: 1px solid var(--text-main, #191919);
 border-radius: 50%;
 box-sizing: border-box;
 opacity: 0.08;
 -webkit-transition: width 0.2s, height 0.2s, margin 0.2s, opacity 0.2s;
 transition: width 0.2s, height 0.2s, margin 0.2s, opacity 0.2s;
}

/* header e nav */

.header,
header {
 margin: 0 0 24px 0;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.logo {
 width: 200px;
 float: left;
}

.logo-container {
 height: 33px;
}

.nav {
 letter-spacing: 0.15rem;
 margin-right: 0px;
 height: 36px;
 align-items: center;
 display: flex;
 justify-content: flex-end;
 font-size: 0.75rem;
}

nav div:hover {
 padding: 4px 30px;
}

nav a:not(:first-child) div {
 margin-left: 12px;
}

.nav-active {
 font-weight: 840 !important;
 padding: 4px 28px !important;
 box-shadow: 5px 5px 10px var(--page-dark, #cdcdcd), -5px -5px 10px var(--page-light, #ffffff) !important;
}

.nav-last-letter {
 letter-spacing: 0rem;
}

/* Colonne e sfondo */

.back {
 width: 100%;
 height: 100%;
 background-color: var(--page-main, #f5f5f5);
 border-bottom: 1px solid var(--page-dark, #cdcdcd);
 display: flex;
 flex-flow: column;
 align-items: center;
 justify-content: space-between;
 height: auto !important;
 height: 100%;
 min-height: 100%;
}

.wrapper {
 max-width: 1100px;
 width: 100%;
 /* min-height: 100vh; */
 margin: 0 auto;
 padding: 25px 25px 10px;
}

.wrap {
 flex-wrap: wrap;
}

.max-column {
 max-width: 100%;
 /* margin-left: auto;
  margin-right: auto; */
}

.large-column {
 max-width: 900px;
 /* margin-left: auto;
  margin-right: auto; */
}

.main-column {
 max-width: 680px;
 /* margin-left: auto;
  margin-right: auto; */
}

.small-column {
 max-width: 520px;
 /* margin-left: auto;
  margin-right: auto; */
}

.line {
 height: 1px;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 background-color: transparent;
 /* display: inline-block; */
 margin-bottom: 2rem;
 margin-top: 3rem;
}

.line-card {
 height: 1px;
 width: 100%;
 /* margin-left: auto;
 margin-right: auto; */
 background-color: rgba(255, 255, 255, 0.16);
 margin-bottom: 0.625rem;
 margin-top: 0.625rem;
}

.stacked-description {
 flex-direction: row;
 justify-content: start;
 gap: 8px;
}
/* 
.stacked-description div {
  margin-right: 8px;
}

.stacked-description >div {
  margin-right: 0px;
} */

.job-row {
 display: flex;
 flex-direction: row;
 gap: 8px;
}

.job-icon {
 display: inline;
 /* text-transform: none; */
 letter-spacing: 0.1px;
}

.intro {
 margin-bottom: 3rem;
 flex-direction: row;
 justify-content: flex-start;
}

.intro p {
 padding-bottom: 0;
}

.intro .line {
 /* width: 50%; */
 margin-left: 0;
 margin-right: 0;
 margin-bottom: 1.25rem;
 margin-top: 0.5rem;
}

.quote {
 margin-bottom: 0.75rem;
 flex-direction: row;
 margin-top: 2rem;
 justify-content: flex-start;
}

.quote-line {
 padding-right: 1px;
 margin-right: 1.5rem;
 background: transparent;
}

.quote p {
 padding-bottom: 0;
}

.cover,
.content,
.worklist-wall {
 padding-left: 18px;
 padding-right: 18px;
 margin-right: -25px;
 width: calc(100% - 43px);
}

.cover > h1 {
 padding: 0;
 line-height: 3.25rem;
}

.cover > h1:first-of-type {
 margin-top: 42px;
}

.content {
 display: flex;
 flex-direction: row;
}

.main-left {
 max-width: 1010px;
 /* border: 1px dotted green; */
 /* margin-top: 1.5rem; */
 /* margin-bottom: 2rem; */
}

.main-right {
 width: 20%;
 /* border: 1px dotted red; */
 margin-top: 1.5rem;
}

.content--nogap {
 margin-top: 0;
}

.workList,
.workList-small {
 /* margin-top: 0.75rem; */
 flex-wrap: wrap;
 gap: 22px;
 margin-bottom: 1.25rem;
}

.workList-item {
 overflow: hidden;
 max-width: calc(50% - 11px);
}

.workList-item-third {
 overflow: hidden;
 max-width: calc(33% - 12px);
}

.workList-border,
.workList-thumbTitle {
 padding: 12px 16px;
 position: static;
 opacity: 0;
 height: auto;
 top: 0;
 width: 100%;
 /* height: 100%; */
 /* position: absolute; */
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}

.workList-border {
 border: 1px solid var(--page-light);
 box-shadow: 0 0 1px 0px var(--page-light) inset, 0 0 1px 0px var(--page-light);
}

.workList-thumbTitle {
 color: var(--text-light, #ffffff);
 /* padding: 16px 18px; */
 opacity: 0;
}

.workList-title {
 font-size: 1.375rem;
 line-height: 1.75rem;
 font-weight: 740;
 margin-bottom: 0.375rem;
 display: block;
}

.external-link {
 padding: 0px 5px 3px 5px;
 background-color: rgba(255, 255, 255, 0.16);
 border-radius: 5px;
 font-weight: 450;
 transition: 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.workList-description {
 font-size: 0.9375rem;
 line-height: 1.25rem;
 font-weight: 450;
 letter-spacing: -0.2px;
 margin-bottom: 0.25rem;
 display: block;
 mix-blend-mode: luminosity;
 color: #e2e2e2;
}

.workList-subtitle {
 font-size: 1rem;
 line-height: 1.125rem;
 font-weight: 600;
 margin-bottom: 0.5rem;
 margin-top: 0.5rem;
 display: block;
 color: #e2e2e2;
 mix-blend-mode: luminosity;
}

.workList-tag {
 font-size: 0.65rem;
 font-weight: 600;
 line-height: 1.25rem;
 letter-spacing: 0.8px;
 display: inline-block;
 padding: 0px 8px;
 background-color: rgba(255, 255, 255, 0.16);
 border-radius: 99px;
 text-transform: uppercase;
}

.workList-lead {
 position: absolute;
 top: 10px;
 right: 10px;
 font-size: 0.6875rem;
 font-weight: 600;
 line-height: 1.25rem;
 letter-spacing: 0.8px;
 display: inline-block;
 padding: 0px 8px;
 border-radius: 99px;
 background-color: rgba(255, 255, 255, 0.8);
 text-transform: uppercase;
 backdrop-filter: blur(5px);
 border: solid 1px rgba(255, 255, 255, 0.7);
}

.workList-item-third .workList-title {
 font-size: 1.25rem;
 line-height: 1.5rem;
 margin-bottom: 0.5rem;
}

.workList-item-third .workList-subtitle {
 font-weight: 430;
 letter-spacing: 0.4px;
 width: 100%;
}

.workList-item:hover,
.workList-item-third:hover {
 box-shadow: 5px 5px 10px var(--page-dark, #b8b8b8), -5px -5px 10px var(--page-light, #ffffff);
}

/* .external-link:hover {
 padding: 0px 8px 3px 8px;
 background-color: rgba(255, 255, 255, 0.3);
 font-weight: 740;
 transition: 0.1s;
} */

.workList-item:hover .external-link {
 padding: 0px 8px 3px 8px;
 background-color: rgba(255, 255, 255, 0.3);
 font-weight: 740;
}

/* .workList-item:hover .workList-shade,
.workList-item-third:hover .workList-shade {
  opacity: 0.84;
} */

.team {
 list-style-type: none;
}

.index-nav-link {
 color: var(--text-main, #191919);
 /* text-decoration: none; */
 padding-bottom: 2px;
 background: none !important;
}

.index-nav-link:hover {
 /* text-decoration: none; */
 background: none;
 color: var(--text-main, #191919) !important;
 border-bottom: 2px solid var(--text-main, #191919);
}

/* project page */

.project-type {
 background-color: var(--color-soft-light, #ffffff6b);
 border-radius: 20px;
 color: var(--text-medium-dark, #404040);
 font-size: 0.625rem;
 letter-spacing: 0.06rem;
 font-weight: 500;
 text-transform: uppercase;
 display: inline-block;
 padding: 2px 15px;
 margin-bottom: 6px;
 box-shadow: inset 1px 1px 2px var(--page-dark, #cdcdcd), inset -1px -1px 2px var(--page-light, #ffffff);
}

.jump {
 list-style-type: none;
 margin-top: 4px;
 margin-bottom: 20px;
 margin-left: auto;
 margin-right: auto;
 padding: 0;
 display: inline-block;
 text-align: center;
}

.jump li {
 float: left;
 margin-right: 2px;
 margin-bottom: 2px;
 display: inline;
 position: relative;
}

.jump li:nth-child(7) {
 margin-right: 0;
}

.jump a {
 display: block;
 color: var(--text-main, #191919);
 padding: 14px 15px;
 /* text-decoration: none; */
 display: inline-block;
}

.jump a:hover {
 background-color: var(--black, #191919);
}

.jump li:hover ul {
 left: 0;
}

.jump ul {
 position: absolute;
 left: -9999px;
 margin: 0;
 padding: 0;
 text-align: left;
}

.jump ul li {
 display: block;
 margin: 2px 0 0 0;
}

.jump ul a {
 white-space: nowrap;
 display: block;
}

.award-nomination {
 color: var(--text-main, #191919);
 display: inline-flex;
 padding-bottom: 30px;
}

.award-nomination h2 {
 font-size: 0.85rem;
 font-weight: 600;
 letter-spacing: 0.085rem;
 padding-top: 4px;
 text-transform: uppercase;
}

.award-badge {
 width: 16px;
 padding: 0 9px;
}

/* FONT STYLE */

.f1 {
 font-size: 1rem;
}

.f2 {
 font-size: 0.875rem;
}

.f2-small {
 font-size: 0.8125rem;
}

.f3 {
 font-size: 0.75rem;
}

.f4 {
 font-size: 0.625rem;
}

.fw1 {
 font-weight: 100;
}

.fw2 {
 font-weight: 200;
}

.fw3 {
 font-weight: 300;
}

.fw4 {
 font-weight: 400;
}

.fw5 {
 font-weight: 500;
}

.fw6 {
 font-weight: 600;
}

.fw7 {
 font-weight: 700;
}

.fw8 {
 font-weight: 800;
}

.fw9 {
 font-weight: 900;
}

.fw-bolder {
 font-weight: inherit;
}

.fw-bolder:hover {
 font-weight: 800;
}

.fw-semibolder:hover {
 font-weight: 700;
}

.tc {
 text-align: center;
}

.ls-normal {
 letter-spacing: initial;
}

.ls-small {
 letter-spacing: 0.03rem;
}

.ls-medium {
 letter-spacing: 0.07rem;
}

.ls-large {
 letter-spacing: 0.11rem;
}

.ls-larger:hover {
 letter-spacing: 0.06rem;
}

.ttu {
 text-transform: uppercase;
}

/* WIDTH */

.w-fit {
 width: fit-content;
 width: -moz-fit-content;
}

.w100 {
 width: 100%;
}

.w80 {
 width: 80%;
}

.w40 {
 width: 40%;
}

.w25 {
 width: 25%;
}

.w20 {
 width: 20%;
}

/* HEIGHT */

.h-fit {
 height: fit-content;
 height: -moz-fit-content;
}

/* POSITION */

.absolute {
 position: absolute;
}

.relative {
 position: relative;
}

.static {
 position: static;
}

/* DISPLAY */

.inline-block {
 display: inline-block;
}

.flex {
 display: flex;
}

.justify-between {
 justify-content: space-between;
}

.overflow-visible {
 overflow: visible;
}

.noselect {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.opacity-30 {
 opacity: 0.3;
}

.opacity-50 {
 opacity: 0.5;
}

.opacity-70 {
 opacity: 0.7;
}

/* MARGIN STYLE */

.ma1 {
 margin: 2px;
}

.ma2 {
 margin: 4px;
}

.ma3 {
 margin: 8px;
}

.ma4 {
 margin: 1rem;
}

.mha {
 margin-left: auto;
 margin-right: auto;
}

.mh-expand {
 margin-left: initial;
 margin-right: initial;
}

.mh-expand:hover {
 margin-left: 20px;
 margin-right: 20px;
}

.ml1 {
 margin-left: 2px;
}

.ml2 {
 margin-left: 4px;
}

.ml3 {
 margin-left: 8px;
}

.ml4 {
 margin-left: 12px;
}

.ml5 {
 margin-left: 24px;
}

.mr3 {
 margin-right: 8px;
}

.mr4 {
 margin-right: 12px;
}

.mr5 {
 margin-right: 24px;
}

.mv1 {
 margin-top: 2px;
 margin-bottom: 2px;
}

.mv2 {
 margin-top: 4px;
 margin-bottom: 4px;
}

.mv3 {
 margin-top: 8px;
 margin-bottom: 8px;
}

.mv4 {
 margin-top: 12px;
 margin-bottom: 12px;
}

.mv5 {
 margin-top: 24px;
 margin-bottom: 24px;
}

.mv6 {
 margin-top: 48px;
 margin-bottom: 48px;
}

.mt1 {
 margin-top: 2px;
}

.mt2 {
 margin-top: 4px;
}

.mt3 {
 margin-top: 8px;
}

.mt4 {
 margin-top: 1rem;
}

.mt5 {
 margin-top: 24px;
}

.mt6 {
 margin-top: 48px;
}

.mb1 {
 margin-bottom: 2px;
}

.mb2 {
 margin-bottom: 4px;
}

.mb3 {
 margin-bottom: 8px;
}

.mb4 {
 margin-bottom: 1rem;
}

.mb5 {
 margin-bottom: 24px;
}

.mb6 {
 margin-bottom: 48px;
}

/* PADDING */

.ph-button:hover {
 padding: 4px 30px;
}

.pr3 {
 padding-right: 8px;
}

/* COMPONENTS */

.pill {
 border-radius: 9999px;
}

.button {
 z-index: 10;
 padding: 4px 17px;
 text-transform: uppercase;
 border: 1px solid transparent;
 box-shadow: 2px 2px 4px var(--page-dark, #cdcdcd), -2px -2px 4px var(--page-light, #ffffff);
}

.button-silent {
 z-index: 10;
 padding: 2px 16px;
 margin-top: 4px;
 text-transform: uppercase;
 box-shadow: 0px 0px 0px var(--page-dark, #cdcdcd), 0px 0px 0px var(--page-light, #ffffff);
}

.button:hover,
.back-to-top-visible div:hover {
 border: 1px solid transparent;
 box-shadow: 5px 5px 10px var(--page-dark, #cdcdcd), -5px -5px 10px var(--page-light, #ffffff);
}

.button-silent:hover {
 color: var(--text-dark);
}

.button-active {
 background-color: var(--page-main);
 color: var(--text-main) !important;
 box-shadow: 2px 2px 4px var(--page-dark, #cdcdcd), -2px -2px 4px var(--page-light, #ffffff);
}

.button-yellow {
 width: fit-content;
 width: -moz-fit-content;
}

.announcement {
 /* height: 90vh; */
 /* display: flex;
  flex-direction: column;
  justify-content: space-evenly; */
 /* max-width: 880px; */
}

.announcement p {
 font-weight: 500;
 letter-spacing: normal;
 line-height: 0.625rem;
 font-size: 1rem;
 padding-bottom: 16px;
 /* max-width: 860px; */
}

.announcement .button {
 padding: 8px 20px !important;
}

.temporary {
 text-align: left;
}

.back-to-top {
 height: 100%;
 display: flex;
 align-items: flex-end;
 margin-bottom: 3rem;
 pointer-events: none;
 white-space: nowrap;
}

.back-to-top-visible {
 pointer-events: initial !important;
}

.back-to-top div {
 color: var(--page-main);
 z-index: 10;
 padding: 4px 17px;
 text-transform: uppercase;
 border: 1px solid transparent;
 box-shadow: 0px 0px 0px var(--page-dark, #cdcdcd), 0px 0px 0px var(--page-light, #ffffff);
}

.back-to-top-visible div {
 color: var(--text-main) !important;
 cursor: pointer;
 box-shadow: 2px 2px 4px var(--page-dark, #cdcdcd), -2px -2px 4px var(--page-light, #ffffff);
}

.yellow {
 height: 90vh;
 display: flex;
 flex-direction: column;
 justify-content: space-evenly;
 max-width: 960px;
}

.yellow h2 {
 font-weight: 400;
 letter-spacing: normal;
 line-height: 2.5rem;
 max-width: 860px;
}

.yellow .button {
 padding: 8px 30px !important;
}

.link,
.link a,
a {
 color: inherit;
 /* text-decoration: none; */
}

.pagination {
 /* position: -webkit-sticky;
  position: sticky; */
 z-index: 999;
 flex-direction: column;
 width: fit-content;
 width: -moz-fit-content;
 margin-left: auto;
 margin-right: auto;
}

.pagination-left {
 /* padding-left: 20px;
  padding-right: 0px;
  margin-right: 20px; */
}

/* .pagination-left:hover {
  padding-left: 0px;
  padding-right: 20px;
} */

.pagination-right {
 /* padding-right: 20px;
  padding-left: 0px;
  margin-left: 20px; */
 margin-top: 20px;
}

/* .pagination-right:hover {
  padding-right: 0px;
  padding-left: 20px;
  margin-left: 20px;
} */

/* NEUMORPH STYLE */

.neumorph {
 border-radius: 12px;
}

.neumorph-bottom {
 border-radius: 0 0 12px 12px !important;
}

.transition-bezier {
 transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/* HOME PAGE WORKLIST */

.proj-activator {
 /* assign to li tag to trigger scroll animation */
 background-image: linear-gradient(to bottom right, var(--page-light), var(--page-main));
}

.proj-active {
 /* is assigned to proj-activator by scroll.js when container li is in viewport */
 box-shadow: 5px 5px 10px var(--page-dark, #cdcdcd), -5px -5px 10px var(--page-light, #ffffff);
 transition: 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 background-color: var(--workList-color, #ffd41f);
}

.proj-active:hover {
 box-shadow: 2px 2px 4px var(--page-dark, #cdcdcd), -2px -2px 4px var(--page-light, #ffffff);
 transition: 0.1s;
}

/* default state */

.proj-image {
 opacity: 0;
 border-radius: 8px;
}

.workList-thumbTitle {
 opacity: 0;
}

/* in-view con proj-active state */
/* il delay sulla transition serve per quando compaiono la prima volta */

.proj-active .proj-image {
 width: calc(100% - 10px);
 margin-left: 5px;
 margin-top: 5px;
 opacity: 1;
 box-shadow: inset 2px 2px 4px var(--page-dark, #cdcdcd), inset -2px -2px 4px var(--page-light, #ffffff);
 transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.proj-active .workList-thumbTitle {
 opacity: 1;
 transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/* hover state */

.workList-item:hover .proj-image,
.workList-item-third:hover .proj-image {
 opacity: 0.84;
}

/* .workList-item:hover .workList-thumbTitle {
 opacity: 0;
 transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
} */

/* END END END */

/* PROJECT IMAGES */

.img-activator {
 /* assign to figure tag to trigger scroll animation */
}

.img-active {
 /* is assigned to img-activator by scroll.js when image is in viewport */
}

.img-active .img-border-active {
 opacity: 0;
}

.img-active .img-fill-active {
 background-color: transparent;
}

.img-grid figure {
 background-color: var(--color-soft-light);
 padding: 0.5rem;
 max-width: 290px;
 border-radius: 24px;
 height: fit-content;
 border: 1px solid var(--page-light);
}

.img-grid .neumorph {
 border-radius: 18px;
}

.img-grid cite {
 line-height: 1rem;
 padding: 12px 10px 4px 10px;
}

.img-grid .img-active {
 box-shadow: 9px 9px 18px var(--page-dark, #cdcdcd), -9px -9px 18px var(--page-light, #ffffff);
 border: 1px solid transparent;
}

.img-grid .img-active img {
 box-shadow: 2px 2px 4px var(--page-dark, #b8b8b8), -2px -2px 4px var(--page-light, #ffffff);
}

.img-border-active {
 border: 1px solid var(--page-light);
 height: 100%;
 width: -webkit-fill-available;
 width: -moz-available;
 top: -1px;
 opacity: 1;
}

.img-fill-active {
 background-color: var(--page-main);
 mix-blend-mode: color;
 height: 100%;
 width: -webkit-fill-available;
 width: -moz-available;
 opacity: 1;
}

.img-shadow-active {
 box-shadow: 0px 0px 0px var(--page-dark, #cdcdcd), 0px 0px 0px var(--page-light, #ffffff);
}

.shadow,
.img-active .img-shadow-active {
 box-shadow: 9px 9px 18px var(--page-dark, #cdcdcd), -9px -9px 18px var(--page-light, #ffffff);
}

.shadow-small-t {
 text-shadow: 1px 1px 2px var(--text-dark, #b8b8b8), -1px -1px 2px var(--text-light, #ffffff);
}

.shadow-small {
 box-shadow: 1px 1px 2px var(--text-dark, #b8b8b8), -1px -1px 2px var(--text-light, #ffffff);
}

.shadow-medium {
 box-shadow: 2px 2px 4px var(--text-dark, #b8b8b8), -2px -2px 4px var(--text-light, #ffffff);
}

.blend-color-burn {
 color: #2d2d2d;
 mix-blend-mode: color-burn;
}

/* IMAGE POSITION */

.scroll-container {
 position: relative;
 width: 500px;
 height: 550px;
}

.scroll-content {
 position: absolute;
 top: 0;
}

.img-grid {
 display: flex;
 gap: 3rem;
 margin-top: 1rem;
 margin-bottom: 2.5rem;
 flex-wrap: wrap;
}

.img-0 {
 width: 80%;
 margin-top: 24px;
 margin-bottom: 24px;
}

.img-1 {
 width: 50%;
 margin-left: 24px;
 margin-top: 24px;
 margin-bottom: 24px;
}

.img-2 {
 width: 33%;
 float: right;
 margin-left: 24px;
 margin-top: 24px;
 margin-bottom: 24px;
 margin-right: 24px;
}

.img-3 {
 width: 45%;
 margin-left: 14%;
 margin-top: 10px;
 margin-bottom: 44px;
}

.img-4 {
 width: 66%;
 float: right;
 margin-left: 24px;
 margin-top: 24px;
 margin-bottom: 24px;
 margin-right: 6%;
}

.img-5 {
 width: 33%;
 margin-left: 24px;
 margin-top: 24px;
 margin-bottom: 24px;
 margin-right: 24px;
}

.img-6 {
 width: 50%;
 float: right;
 margin-left: 24px;
 margin-top: 24px;
 margin-bottom: 24px;
 margin-right: 24px;
}

.img-top-negative {
 margin-top: -140px;
}

.img-top-negative-big {
 margin-top: -340px;
}

/* LEGENDA */

.inline-legend::before {
 content: '';
 height: 1rem;
 width: 5px;
 display: inline-block;
 background-color: var(--legend-color, white);
 margin-right: 5px;
 margin-left: 2px;
 border: solid black 2px;
 margin-bottom: -4px;
 /* border-radius: 10px; */
}

.inline-code {
 font-family: 'IBM Plex Mono', monospace;
 font-weight: 400;
 font-style: normal;
 background-color: var(--page-dark, #d0d0d0);
 padding: 2px 4px;
 border-radius: 3px;
 border: solid 1px var(--page-light, #ffffff);
}

/* DISPLAY PROJECTS */

.project-display {
 width: 100%;
}

.project-window {
 position: relative;
 display: inline-block;
 width: 44%;
 padding: 8px 8px 2px 8px;
 margin: 1rem;
 background-color: var(--page-main);
 box-shadow: 0px 0px 0px var(--page-dark, #b8b8b8), 0px 0px 0px var(--page-light, #ffffff);
}

.project-window .colorato {
 position: absolute;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 /* border: 1px solid var(--page-dark); */
 border-radius: 8px;
 background-color: transparent;
 mix-blend-mode: color;
 width: -webkit-fill-available;
 height: -webkit-fill-available;
}

.project-window img {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 border: 1px solid var(--page-dark);
 border-radius: 8px;
}

.project-window h2 {
 line-height: 1.75rem;
 font-size: 1.25rem;
 letter-spacing: 0;
}

.project-window h3 {
 padding-top: 0.5rem;
 padding-bottom: 0.75rem;
}

.project-window .project-type {
 /* margin-bottom: 0; */
 margin-left: -4px;
 margin-right: 4px;
}

.project-window:hover {
 box-shadow: 2px 2px 4px var(--text-dark, #b8b8b8), -2px -2px 4px var(--text-light, #ffffff);
}

/* .project-active {
  box-shadow: 2px 2px 4px var(--page-dark, #b8b8b8), -2px -2px 4px var(--page-light, #ffffff);
} */

.project-active .colorato {
 background-color: var(--page-main);
}

.project-image {
 box-shadow: 4px 4px 8px var(--page-dark, #b8b8b8), -4px -4px 8px var(--page-light, #ffffff);
}

.project-image:hover {
 box-shadow: 2px 2px 4px var(--page-dark, #b8b8b8), -2px -2px 4px var(--page-light, #ffffff);
}

/* TRANSITIONS */

.transition {
 transition: all 0.2s;
}

/* awardList */

.award-container {
 display: flex;
 flex-direction: row;
 width: 100%;
 justify-content: start;
 flex-wrap: wrap;
 margin-bottom: 3rem;
}

.award-box {
 min-width: 200px;
 margin-top: 1.5rem;
}

.award-half > .award-box {
 width: calc(50% - 16px);
}

.award-third > .award-box {
 width: calc(33% - 16px);
}

.award-fourth > .award-box {
 /* max-width: calc(25% - 16px); */
}

.award-box ul {
 list-style-type: none;
}

.award-line {
 height: 1px;
 width: 50%;
 margin-bottom: 12px;
}

.award-gold {
 color: var(--color-gold-light);
}

.award-silver {
 color: var(--color-silver-light);
}

.award-generic {
 color: var(--color-award-generic-light);
}

.award-gold .award-line {
 background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold));
}

.award-silver .award-line {
 background: linear-gradient(90deg, var(--color-silver-light), var(--color-silver));
}

.award-generic .award-line {
 background: linear-gradient(90deg, var(--color-award-generic-light), var(--color-award-generic));
}

.single-block {
 display: block;
}

.gold {
 border: 2px solid #d1b372;
 background-color: #d1b37211;
}

.gold:hover {
 background-color: #d1b372ff;
 color: #4f4428;
}

.silver {
 border: 2px solid #a5a8aa;
 background-color: #a5a8aa11;
}

.silver:hover {
 background-color: #a5a8aa;
 color: #f2f2f2;
}

.iib {
 border: 2px solid #912eba;
 background-color: #912eba11;
}

.iib:hover {
 background-color: #912eba;
 color: #fff;
}

.iib-info {
 color: #912eba !important;
}

.iib-badge {
 z-index: 1;
 width: 100px;
 height: 130px;
 position: absolute;
 top: 50%;
 margin-top: -60px;
 left: 0px;
}

.iib-badge-project {
 z-index: 1;
 width: 100px;
 height: 130px;
 position: fixed;
 top: 50%;
 margin-top: -60px;
 left: 0px;
}

.iib-badge-project-img {
 width: 100px;
 height: 130px;
}

.iib-badge-project a {
 background: none;
}

.iib-badge-project a:hover {
 background: none;
}

.nasa {
 border: 2px solid #4e33fd;
 background-color: #4e33fd11;
 color: #4e33fd;
}

.nasa:hover {
 background-color: #fe3031;
 color: #fff;
 border-color: #fe3031;
}

/* press */

/* .press-content {
  padding-top: 10px;
  margin: auto;
  text-align: center;
  display: block;
} */

.press-list {
 display: flex;
 flex-wrap: wrap;
 list-style: none;
}

.press-list ul {
 list-style: none;
}

.press-item {
 float: left;
 backface-visibility: hidden;
 margin: 0 12px 12px 0;
 /* width: 50%; */
 height: fit-content;
 height: -moz-fit-content;
 width: calc(50% - 8px);
 border: 1px solid var(--page-light, #ffffff);
}

.press-item:nth-of-type(2n) {
 margin-right: 0;
}

.press {
 padding: 12px 16px;
 background-color: var(--page-main);
 box-shadow: inset 0px 0px 2px var(--page-dark, #cdcdcd), inset 0px 0px 2px var(--page-light, #ffffff);
}

.press-item:hover {
 border: 1px solid transparent;
}

.press-item:hover .press {
 background-color: var(--color-soft-light);
 box-shadow: inset 2px 2px 4px var(--page-dark, #cdcdcd), inset -2px -2px 4px var(--page-light, #ffffff);
}

.press-who {
 font-weight: 400;
 font-size: 0.625rem;
 letter-spacing: 0.07rem;
 text-transform: uppercase;
 display: inline-block;
 padding-bottom: 4px;
}

.press-title {
 font-size: 0.8125rem;
 font-weight: 700;
 letter-spacing: 0.02rem;
 line-height: 1.25rem;
 display: inline-block;
 padding-bottom: 4px;
}

.press-author {
 font-size: 0.75rem;
 display: inline-block;
}

/* citazione */

.cit-head {
 padding-bottom: 0;
 font-weight: 400;
 font-size: 0.8125rem;
 letter-spacing: 0.02rem;
 line-height: 1.25rem;
 color: var(--text-medium-dark);
}

.cit-box {
 float: left;
 max-width: 650px;
 margin: auto;
 text-align: left;
}

.cit p {
 font-size: 1rem;
 font-weight: 500;
 line-height: 1.5rem;
 letter-spacing: 0.02rem;
 padding-bottom: 12px;
}

.cit a {
 /* text-decoration: none; */
 font-style: italic;
 color: var(--text-main, #191919);
}

.cit a:hover {
 /* text-decoration: none; */
}

cite {
 display: block;
 padding-bottom: 14px;
 color: var(--text-medium-dark, #999);
 font-style: normal;
 font-weight: 400;
 font-size: 0.75rem;
 line-height: 1.1rem;
 padding: 4px 10px 0px 10px;
}

figcaption {
 margin-top: 12px;
 font-weight: 320;
 font-size: 0.825rem;
 color: #808080;
 mix-blend-mode: multiply;
}

/* Hide elements */

.noshow {
 position: absolute;
 overflow: hidden;
 height: 1px;
 width: 1px;
 padding: 0;
 border: 0;
}

.mobile-hide,
.mobile-hide-770 {
 display: inherit;
}

.mobile-only,
.mobile-only-770 {
 display: none;
}

.zeroOpacity {
 opacity: 0;
}

/* info section */

.intro-panel {
 height: calc(100vh - 91px);
 flex-direction: column;
 justify-content: space-between;
}

.hello {
 /* padding-top: 1.875rem; */
 line-height: 1.5rem;
 font-size: 0.875rem;
 letter-spacing: 0.01rem;
 max-width: 680px;
}

.sitemap {
 margin-top: 3rem;
 margin-bottom: 3rem;
 line-height: 1.75rem;
 font-size: 0.875rem;
 letter-spacing: 0.01rem;
 max-width: 700px;
}

.email {
 /* text-decoration: none; */
 color: var(--text-main, #191919);
 border-bottom: 1px solid #fff;
 font-weight: 700;
}

.email:hover {
 border-bottom-color: var(--text-main, #191919);
 /* text-decoration: none; */
}

.info-section p,
.home-section p {
 line-height: 1.6rem;
 font-size: 0.875rem;
 letter-spacing: 0.01rem;
}

.info-section a,
.home-section a {
 /* text-decoration: none; */
 color: var(--text-main, #191919);
 border-bottom: 1px solid var(--page-main, #f0f2f6);
 font-weight: 700;
}

.info-section a:hover,
.home-section a:hover {
 border-bottom-color: var(--text-main, #191919);
 /* text-decoration: none; */
}

.inactive {
 color: #666;
 font-weight: 700;
}

.info-section,
.home-section {
 padding-top: 1.875rem;
}

.home-indent {
 margin: 0;
}

.info-title {
 padding-bottom: 0;
}

.info-body {
 padding-bottom: 1.125rem;
 line-height: 1.4rem !important;
}

.info-chap {
 padding-bottom: 1.125rem;
}

.ac-projects {
 width: 100%;
 display: flex;
 flex-direction: row;
}

.ac-col {
 width: 100%;
 max-width: 320px;
}

.u-textUpper {
 text-transform: uppercase;
}

.u-pullLeft {
 float: left;
}

.u-pullRight {
 float: right;
}

.project-list {
 overflow: auto;
 margin-bottom: 3.75rem;
}

.videoWrapper {
 position: relative;
 padding-bottom: 56.25%;
 /* 16:9 */
 height: 0;
}

.videoWrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.videoWrapperSquared {
 position: relative;
 padding-bottom: 100%;
 /* 16:9 */
 height: 0;
}

.videoWrapperSquared iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

/* SCROLL MENU IN PAGE */

.menu-interno {
 position: -webkit-sticky;
 position: sticky;
 top: 2rem;
 /* border: 1px dotted yellow; */
 height: 100vh;
 width: 100%;
 /* margin-top: 3.5rem; */
 margin-left: auto;
 margin-right: auto;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

.sezioni {
 padding-top: 2px;
 padding-bottom: 6px;
 margin-top: 2rem;
 margin-left: auto;
 margin-right: auto;
 width: max-content;
 color: transparent;
 z-index: 99;
 box-shadow: inset 0px 0px 0px var(--page-dark, #cdcdcd), inset 0px 0px 0px var(--page-light, #ffffff);
 /* transition: top 0ms, opacity 0.2s; */
 background-color: transparent;
 border-radius: 21px;
 pointer-events: none;
 /* transition: all 0.2s ease-out 0.5s; */
}

.sezioni a {
 display: block;
 margin-right: 6px;
 margin-left: 6px;
 font-weight: 430;
 cursor: pointer;
 transition-timing-function: ease-out;
}

.sezioni-visible {
 color: var(--text-main);
 background-color: var(--color-soft-light);
 box-shadow: inset 2px 2px 4px var(--page-dark, #cdcdcd), inset -2px -2px 4px var(--page-light, #ffffff);
 pointer-events: initial;
}

.spacer {
 height: 40px;
 width: 100%;
 display: inline-block;
}

/* PRIVACY POLICY PAGE */

.privacy-policy h2 {
 margin-top: 2rem;
}

.privacy-policy h3 {
 padding-top: 0;
}

.privacy-policy h4 {
 color: var(--text-medium-dark, #404040);
}

.privacy-policy p {
 padding-bottom: 0;
}

.privacy-policy ul {
 margin-left: 2rem;
 margin-bottom: 0.75rem;
}

/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
@media screen and (prefers-reduced-motion: no-preference) {
 html {
  scroll-behavior: smooth;
 }
}

/* TABLET */
@media screen and (max-width: 1023px) {
 .workList-thumbTitle {
  padding: 10px 12px;
 }

 .workList-title {
  font-size: 1.375rem;
  line-height: 1.5rem;
  /* margin-bottom: 0.375rem;*/
 }

 .workList-subtitle {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
  margin-top: 0.375rem;
 }

 .workList-description {
  font-size: 0.9375rem;
  line-height: 1.25rem;
 }

 .line-card {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
 }

 .workList-tag {
  letter-spacing: 0.6px;
 }

 .img-grid {
  gap: 2rem;
 }

 .img-grid figure {
  max-width: 250px;
 }

 footer {
  width: auto;
  padding: 0 43px;
 }
}

/* MOBILE */

@media screen and (max-width: 767px) {
 /* WIP */

 .mobile-hide {
  display: none;
 }

 .mobile-only {
  display: block;
 }

 .header,
 header {
  margin: 0 16px 12px 16px;
 }

 header figure {
  /* height: 40px; */
  display: flex;
  align-items: center;
 }

 /* .logo {
  width: 36px;
 }

 .logo-container {
  height: 36px;
 } */

 .f3 {
  font-size: 0.6875rem;
 }

 .nav .button {
  padding: 2px 14px;
 }

 .nav-active {
  padding: 2px 24px !important;
 }

 .footer .logo {
  width: 200px;
 }

 .wrapper {
  padding: 16px 0;
 }

 .cover,
 .content,
 .worklist-wall {
  padding-left: 16px;
  padding-right: 16px;
  margin-right: unset;
  width: auto;
 }

 .content {
  flex-direction: column;
 }

 .main-left {
  max-width: 100%;
  /* margin-left: 16px; */
  margin-bottom: 0;
 }

 .main-right {
  display: none;
 }

 .yellow {
  max-width: 400px;
  margin: auto;
  padding: 0 12px;
  overflow: visible;
  width: -webkit-fill-available;
  text-align: center;
 }

 .yellow h1 {
  font-size: 1.5rem;
  line-height: 2rem;
 }

 .yellow h2 {
  font-size: 1.15rem;
  line-height: 1.65rem;
 }

 .yellow .button {
  padding: 6px 18px !important;
  overflow: visible;
 }

 .button-yellow {
  margin: auto;
 }

 .stacked-description {
  flex-direction: column;
  gap: 0;
 }

 .stacked-description:nth-of-type(2) {
  margin-top: 1.5rem;
 }

 .job-icon {
  width: 16px;
 }

 .announcement p {
  line-height: 1.25rem;
 }

 .temporary {
  text-align: center;
 }

 .lh-small {
  line-height: 1.75rem;
 }

 h1 {
  font-weight: 780;
  font-size: 2rem;
  line-height: 2.125rem !important;
 }

 h2 {
  font-size: 1.25rem;
  letter-spacing: 0;
  /* font-weight: 560; */
  line-height: 1.5rem;
 }

 h3 {
  /* font-size: 0.875rem; */
 }

 .h3-s {
  font-size: 0.75rem !important;
  padding-bottom: 0.125rem !important;
  /* padding-top: 0; */
  margin-bottom: 6px;
 }

 h4 {
  /* font-weight: 400;
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: var(--text-main, #191919);
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  padding-top: 1rem;
  padding-bottom: 0.75rem; */
 }

 .project-title {
  padding-bottom: 0.5rem;
 }

 .proj-subtitle {
  font-size: 1.25rem;
 }

 .tc-s {
  text-align: center;
 }

 .hello {
  line-height: 1.6rem;
  font-size: 1rem;
 }

 .intro-panel {
  height: unset;
  justify-content: start;
 }

 .intro-panel h2 {
  margin-right: auto;
  margin-left: auto;
  font-size: 1rem;
 }

 .info-section p,
 .home-section p {
  font-size: 0.925rem;
 }

 .info-section a,
 .home-section a {
  color: var(--text-main, #191919);
  border-bottom: 1px solid var(--page-main, #f0f2f6);
  font-weight: 700;
 }

 .info-section a:hover,
 .home-section a:hover {
  border-bottom-color: var(--text-main, #191919);
 }

 footer {
  width: auto;
  padding: 0 16px;
 }

 .footer div:first-of-type {
  margin-left: 0 !important;
 }

 .footer div:nth-of-type(n + 2) {
  margin-left: 16px !important;
 }

 footer p {
  padding-bottom: 0;
 }

 .footer-list li,
 .footer-list p {
  font-size: 0.75rem;
  line-height: normal;
  padding-bottom: 0.625rem;
 }

 .footer-list li {
  margin-left: 12px;
 }

 .w100-s {
  width: 100%;
 }

 .footer-list-container {
  flex-wrap: wrap;
  margin-left: 16px;
 }

 .footer-list {
  width: 100%;
 }

 .workList-item,
 .workList-item-third {
  max-width: 100%;
 }

 .proj-activator {
  background-color: var(--page-main, #f5f5f5);
  background-image: unset !important;
 }

 /* default state */

 .workList-thumbTitle {
  padding: 11px 13px;
  position: static;
  opacity: 0;
  height: auto;
 }

 .workList-title {
  font-size: 1.25rem;
  line-height: 1.375rem;
 }

 .workList-subtitle {
  font-size: 0.875rem;
  line-height: 1.125rem;
  width: auto;
 }

 .workList-description {
  font-size: 0.875rem;
  line-height: 1.125rem;
  letter-spacing: 0;
  width: auto;
 }

 /* proj-active state */

 .proj-active .proj-image {
  opacity: 1;
  filter: grayscale(0);
  /* mix-blend-mode: multiply; */
  transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }

 .proj-active .workList-thumbTitle {
  opacity: 1;
  transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }

 /* END END END */

 .img-grid figure {
  max-width: 100%;
 }

 .img-0,
 .img-1,
 .img-2,
 .img-3,
 .img-4,
 .img-5,
 .img-6 {
  width: 100%;
  margin: 18px 0;
  padding: 0;
  float: none;
 }

 .img-top-negative {
  margin-top: initial;
 }

 .award-box {
  min-width: 100%;
 }

 .award-line {
  width: 84%;
 }
}

/* MOBILE EXTRA SMALL */

@media screen and (max-width: 469px) {
 .mobile-small-hide {
  display: none;
 }
}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1280px) {
}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) {
 html:hover .cursor,
 .cursor {
  display: none;
 }
}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
 html:hover .cursor,
 .cursor {
  display: none;
 }
}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

@media (min-width: 481px) and (max-width: 767px) {
 html:hover .cursor,
 .cursor {
  display: none;
 }
}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

@media (min-width: 320px) and (max-width: 480px) {
 html:hover .cursor,
 .cursor {
  display: none;
 }
}