@font-face {
  font-family: VCR OSD Mono;
  src: url('../fonts/vcrosdmono-regular.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: KMR Apparat;
  src: url('../fonts/KMR-Apparat-Book.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: KMR Apparat;
  src: url('../fonts/KMR-Apparat-Bold.woff2') format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: KMR Apparat;
  src: url('../fonts/KMR-Apparat-Heavy.woff2') format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: KMR Apparat;
  src: url('../fonts/KMR-Apparat-Black.woff2') format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: KMR Apparat;
  src: url('../fonts/KMR-Apparat-Regular.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: KMR Apparat;
  src: url('../fonts/KMR-Apparat-Medium.woff2') format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: KMR Apparat;
  src: url('../fonts/KMR-Apparat-Light.woff2') format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Dot Long;
  src: url('../fonts/Dot-Long.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: New Heterodox Mono;
  src: url('../fonts/new-heterodox-mono-400.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Geist Pixel Square;
  src: url('../fonts/GeistPixel_Square.p.38oedokznorgu.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Chivo Mono;
  src: url('../fonts/Chivo-Mono.woff2') format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Univers LT Pro;
  src: url('../fonts/Univers-LTPro-Italic.woff2') format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ft Calhern;
  src: url('../fonts/ft-calhern-300.woff2') format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Ft Calhern;
  src: url('../fonts/ft-calhern-500.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Univers LT Pro;
  src: url('../fonts/Univers-LTPro.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Geist Pixel Circle;
  src: url('../fonts/GeistPixel_Circle.p.3zurfnrwei_77.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: T-Star TW;
  src: url('../fonts/T-StarTW-Bold.woff2') format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sometype Mono;
  src: url('../fonts/SometypeMono-Medium.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: DM Mono;
  src: url('../fonts/DMMono.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Serial B Neue;
  src: url('../fonts/SerialBNeueTRIAL-Black.ttf') format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Serial B Neue;
  src: url('../fonts/SerialBNeueTRIAL-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Serial B Neue;
  src: url('../fonts/SerialBNeueTRIAL-Bold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Serial B Neue;
  src: url('../fonts/SerialBNeueTRIAL-Light.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Serial B Neue;
  src: url('../fonts/SerialBNeueTRIAL-Thin.ttf') format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Serial B Neue;
  src: url('../fonts/SerialBNeueTRIAL-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Serial B Neue;
  src: url('../fonts/SerialBNeueTRIAL-Heavy.ttf') format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Slussen VF;
  src: url('../fonts/Slussen-Variable.ttf') format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Slussen Mono VF;
  src: url('../fonts/Slussen-Mono-Variable.ttf') format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Uncut Plan 8";
  src: url('../fonts/UncutPlan8-Variable.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mono MMM 5";
  src: url('../fonts/monoMMM_5.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: JetBrains Mono;
  src: url('../fonts/JetBrainsMono-SemiBold.ttf') format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: PP Supply Sans;
  src: url('../fonts/PPSupplySans-Regular.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --text-color: #151515;
  --menu-font: "Slussen VF", Arial, sans-serif;
  --text: "Slussen VF", Arial, sans-serif;
  --footer: #151515;
  --padding-global: 1rem;
  --button-font: "KMR Apparat", Arial, sans-serif;
  --thumb-radius: .6em;
  --background-color: whitesmoke;
  --mono: "DM Mono", Arial, sans-serif;
  --header: 5rem;
  --header-mobile: 18vw;
  --navbar-space: 32px;
  --navbar-mobile-space: var(--navbar-space);
  --padding-blackbox: 1.2rem;
  --alt-text-color: white;
  --preloader-bg: #121212;
  --titles-font: "KMR Apparat", Arial, sans-serif;
  --menu-button-radius: .25em;
  --vcr: "VCR OSD Mono", Arial, sans-serif;
  --header-prod-services: 15vw;
  --header-our-house: 15vw;
  --thumb-radius-photo: .05em;
  --transparency: white;
  --corners-opacity: 50%;
  --corners-size: 10px;
  --corners-width: .1em;
  --corners-color: whitesmoke;
  --player-window-radius: 6px;
  --pading-logo-front: 30px;
  --corner-radius: .1rem;
  --front-logo-shadow-color: #121212b3;
  --header-info-page: 17vw;
  --header-feat-works: 17vw;
  --header-photo: 17vw;
  --header-news: 19em;
  --header-number: 1.2em;
  --header-number-mobile: 18px;
  --front-logo-shadow: 50px;
  --text-bg: #e1e1e1;
  --logo-width: 16vw;
  --text-label: #212121;
  --radius-player: 15px;
}

body {
  color: var(--text-color);
  --text-color: #151515;
  --menu-font: "Slussen VF", Arial, sans-serif;
  --text: "Slussen VF", Arial, sans-serif;
  --footer: #151515;
  --padding-global: 1rem;
  --button-font: "KMR Apparat", Arial, sans-serif;
  --thumb-radius: .6em;
  --background-color: whitesmoke;
  --mono: "DM Mono", Arial, sans-serif;
  --header: 5rem;
  --header-mobile: 18vw;
  --navbar-space: 32px;
  --navbar-mobile-space: var(--navbar-space);
  --padding-blackbox: 1.2rem;
  --alt-text-color: white;
  --preloader-bg: #121212;
  --titles-font: "KMR Apparat", Arial, sans-serif;
  --menu-button-radius: .25em;
  --vcr: "VCR OSD Mono", Arial, sans-serif;
  --header-prod-services: 15vw;
  --header-our-house: 15vw;
  --thumb-radius-photo: .05em;
  --transparency: white;
  --corners-opacity: 50%;
  --corners-size: 10px;
  --corners-width: .1em;
  --corners-color: whitesmoke;
  --player-window-radius: 6px;
  --pading-logo-front: 30px;
  --corner-radius: .1rem;
  --front-logo-shadow-color: #121212b3;
  --header-info-page: 17vw;
  --header-feat-works: 17vw;
  --header-photo: 17vw;
  --header-news: 19em;
  --header-number: 1.2em;
  --header-number-mobile: 18px;
  --front-logo-shadow: 50px;
  --text-bg: #e1e1e1;
  --logo-width: 16vw;
  --text-label: #212121;
  --radius-player: 15px;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1em;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 38px;
  font-weight: 700;
  line-height: 44px;
}

h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
}

a {
  text-decoration: underline;
}

ul {
  margin-bottom: 0;
}

img {
  display: inline-block;
}

figure {
  margin-bottom: 0;
}

.navbar-logo {
  align-self: flex-start;
  align-items: flex-start;
  width: 62.5px;
  display: flex;
}

.navbar-logo.w--current {
  padding: 1px;
}

.nav-menu {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: row;
  flex: 1;
  justify-content: space-between;
  align-items: stretch;
  padding-top: 1px;
  padding-bottom: 1px;
  display: flex;
}

.link-menu {
  font-family: var(--menu-font);
  text-transform: uppercase;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1em;
  text-decoration: none;
}

.link-menu.icon {
  font-size: .8em;
  line-height: 1em;
}

.list-item {
  flex-flow: column;
  flex: 1;
  justify-content: space-between;
  display: flex;
}

.text-button-mini {
  margin-top: 1px;
}

.footer-text {
  font-family: var(--text);
  color: #fff;
  font-size: 1.2em;
  font-style: normal;
  font-weight: 400;
  line-height: 1.3em;
}

.footer-text:focus {
  color: #151515;
}

.footer {
  z-index: 4;
  background-color: var(--footer);
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  height: 100svh;
  display: flex;
  position: relative;
  overflow: clip;
}

.icon {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  position: relative;
}

.icon:hover {
  text-decoration: none;
}

.footer-text-title {
  font-family: var(--text);
  color: #fff;
  text-transform: uppercase;
  font-size: 1.2em;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2em;
}

.footer-container {
  grid-column-gap: 10em;
  grid-row-gap: 10em;
  width: 100%;
  height: 100%;
  color: var(--text-color);
  flex-direction: column;
  grid-template-rows: 25% 25% auto 40px;
  grid-template-columns: 25% 25% 25% 25%;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  position: relative;
  inset: 0%;
}

.footer-legal {
  width: 100%;
  padding-right: var(--padding-global);
  padding-bottom: var(--padding-global);
  padding-left: var(--padding-global);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  display: flex;
}

.footer-logo {
  padding-right: var(--padding-global);
  padding-left: var(--padding-global);
  flex-flow: column;
  justify-content: space-between;
  display: block;
}

.footer-credits {
  grid-column-gap: var(--padding-global);
  grid-row-gap: var(--padding-global);
  mix-blend-mode: exclusion;
  flex-flow: column;
  flex: 0 auto;
  justify-content: flex-end;
  display: flex;
}

.footer-btn-group {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: wrap;
  justify-content: flex-end;
  align-items: baseline;
  display: flex;
}

.project-title {
  flex-flow: row;
  justify-content: center;
  align-items: stretch;
  display: flex;
}

.paragraf {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.navbar-logo-mobile {
  padding-left: 0;
}

.link-menu-moile {
  font-family: var(--button-font);
  color: #fff;
  justify-content: flex-end;
  align-items: flex-start;
  font-size: 5rem;
  font-weight: 500;
  line-height: .8em;
  text-decoration: none;
  display: flex;
}

.title-info {
  letter-spacing: -.02em;
  font-family: Roobert;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2em;
  position: sticky;
  top: 90px;
}

.politica-privacidad {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  background-color: #0000;
  flex-flow: column;
  align-content: space-around;
  padding-left: 15%;
  padding-right: 15%;
  display: flex;
  position: relative;
}

.news-article {
  border-radius: var(--thumb-radius);
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: relative;
}

.article-text {
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.button-standard {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-top-style: solid;
  border-top-width: 1.5px;
  border-top-color: var(--text-color);
  border-right-style: solid;
  border-right-width: 1.5px;
  border-right-color: var(--text-color);
  border-bottom-style: solid;
  border-bottom-width: 1.5px;
  border-bottom-color: var(--text-color);
  border-left-style: solid;
  border-left-width: 1.5px;
  border-left-color: var(--text-color);
  width: 350px;
  color: var(--text-color);
  letter-spacing: -.02em;
  word-spacing: -2px;
  background-color: #0000;
  border-radius: 4px;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  padding: 12px 12px 10px;
  font-family: Suisse Intl Mono;
  font-size: 16px;
  font-weight: 400;
  line-height: 1em;
  text-decoration: none;
  display: flex;
}

.button-standard:hover {
  background-color: var(--text-color);
  color: var(--background-color);
  font-weight: 400;
}

.button-standard:active {
  background-color: #ff1640;
  border-color: #ff1640;
}

.body {
  background-color: var(--background-color);
}

.footer-link {
  font-family: var(--text);
  color: #fff;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.2em;
  text-decoration: none;
}

.footer-link:hover {
  text-underline-offset: 2px;
  text-decoration: underline;
}

.label-filter {
  color: var(--text-color);
  letter-spacing: -.03em;
  border-radius: 2px;
  padding-left: 5px;
  padding-right: 5px;
  font-family: IBM Plex Mono;
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3em;
}

.filter-section-selected {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-flow: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.cat-campaign {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cat-content, .cat-editorial {
  flex-direction: column;
  justify-content: space-between;
}

.more-works-container {
  z-index: 2;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  display: block;
  position: relative;
}

.header-branded {
  font-family: var(--mono);
  font-size: var(--header);
  text-transform: uppercase;
  line-height: .8em;
  display: none;
}

.header-campaigns {
  font-family: var(--mono);
  color: #fff;
  font-size: var(--header);
  text-transform: uppercase;
  line-height: .8em;
  display: none;
}

.header-editorial, .header-music-videos {
  font-family: var(--mono);
  font-size: var(--header);
  text-transform: uppercase;
  line-height: .8em;
  display: none;
}

.more-works-list-button-space, .more-works-gallery-button-space {
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}

.campaign {
  position: relative;
}

.navbar-space {
  height: var(--navbar-space);
}

.about {
  flex-flow: column;
  width: 100%;
  display: flex;
  position: relative;
}

.column {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 20% 80%;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.symbol-button {
  color: #ffffff80;
  background-color: #0000;
  flex: 0 auto;
  margin-left: 30px;
  margin-right: 30px;
  font-family: IBM Plex Mono;
  font-size: 36px;
  font-weight: 300;
  line-height: .7em;
  text-decoration: none;
  display: none;
}

.symbol-button:hover {
  color: #333;
}

.article-img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  flex-flow: column;
  align-self: stretch;
  display: flex;
  position: relative;
  overflow: hidden;
}

.close-button {
  background-color: #0000;
  width: 32px;
  height: 32px;
  display: none;
  position: relative;
  top: -2px;
  right: -2px;
}

.photo-slider {
  width: 100%;
  height: 100%;
  padding: var(--padding-blackbox);
  background-color: #eee;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.slide-item {
  pointer-events: none;
  text-align: center;
  vertical-align: middle;
  background-color: #eee;
}

.slide-item.video {
  background-color: #121212;
  width: 100%;
}

.image-item {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.slide-container {
  z-index: 0;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  object-fit: contain;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.left-arrow {
  z-index: 3;
  width: 50%;
  height: 100%;
  padding-left: var(--padding-blackbox);
  cursor: w-resize;
  mix-blend-mode: exclusion;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  inset: 0% auto 0% 0%;
}

.left-arrow:hover {
  opacity: 1;
}

.right-arrow {
  z-index: 3;
  width: 50%;
  height: 100%;
  padding-right: var(--padding-blackbox);
  cursor: e-resize;
  mix-blend-mode: exclusion;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  inset: 0% 0% 0% auto;
}

.right-arrow:hover {
  opacity: 1;
}

.mask {
  width: 100%;
  height: 100%;
}

.img-num-container {
  z-index: 3;
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  mix-blend-mode: exclusion;
  justify-content: flex-end;
  align-items: flex-end;
  display: flex;
  position: fixed;
  inset: auto 0% 0%;
}

.asset-1-pack {
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.preloader {
  z-index: 12;
  background-color: #000;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  inset: 0%;
}

.img {
  object-fit: cover;
  width: 102%;
  min-width: 102%;
  height: 102%;
}

.page-background {
  z-index: 0;
  background-color: var(--background-color);
  opacity: .5;
  filter: blur(100px);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.vimeo-page-background {
  z-index: 0;
  aspect-ratio: 16 / 9;
  opacity: .6;
  filter: blur(100px);
  object-fit: cover;
  justify-content: center;
  align-items: center;
  min-height: 101%;
  display: flex;
  position: relative;
}

.subtext {
  font-family: var(--mono);
  color: var(--text-color);
  text-align: left;
  letter-spacing: -.02em;
  font-size: 11px;
  font-weight: 500;
  line-height: 1em;
  display: none;
}

.header {
  z-index: 10;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.header-text {
  color: var(--text-color);
  text-align: left;
  letter-spacing: -.01em;
  font-family: Aeonik Condensed Pro VF;
  font-size: 48px;
  font-weight: 500;
  line-height: .8em;
}

.section-footer {
  mix-blend-mode: exclusion;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 56% 40%;
  grid-auto-flow: row dense;
  justify-content: space-between;
  place-items: flex-end start;
  width: 100%;
  padding: 10px 25px 20px;
  display: flex;
}

.featured-project {
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.project-link {
  grid-column-gap: .6em;
  grid-row-gap: .6em;
  flex-flow: column;
  width: 100%;
  height: 100%;
  text-decoration: none;
  display: flex;
  position: relative;
}

.project-link.feat {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.text-project-bold {
  font-family: var(--text);
  color: #000;
  font-variation-settings: "wght" 700;
  text-align: left;
  letter-spacing: -.02em;
  font-size: 1em;
  line-height: 1em;
  display: flex;
}

.text-project-bold.feat {
  color: #fff;
  font-size: 1.1em;
  font-weight: 800;
}

.text-project-bold.thumb {
  color: #fff;
  letter-spacing: 0;
  white-space: nowrap;
  background-color: #121212;
  border-radius: 0;
  width: auto;
  height: auto;
  font-weight: 800;
}

.text-project-bold.light {
  color: #fff;
}

.text-project {
  font-family: var(--text);
  color: #000;
  font-variation-settings: "wght" 450;
  letter-spacing: -.02em;
  font-size: 1em;
  line-height: 1em;
  display: flex;
}

.text-project.feat {
  color: #fff;
  font-size: 1.1em;
}

.text-project.thumb {
  color: #fff;
  background-color: #121212;
  border-radius: 0;
  width: auto;
  height: auto;
  overflow: visible;
}

.text-project.light {
  color: #fff;
}

.project-info {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1.5fr .5fr;
  grid-auto-columns: 2.5fr;
  grid-auto-flow: row;
  justify-content: space-between;
  place-items: flex-start center;
  display: flex;
  position: relative;
}

.project-info.player {
  background-color: #0000;
  flex-flow: row;
  justify-content: center;
  align-items: stretch;
  width: auto;
  height: auto;
  display: flex;
}

.vimeo-thumb {
  aspect-ratio: 16 / 9;
  opacity: 0;
  object-fit: cover;
  justify-content: space-between;
  align-items: stretch;
  height: 101%;
  padding-bottom: 0;
  padding-right: 0;
  display: flex;
  position: absolute;
}

.trigger {
  width: 100%;
  height: 0;
  position: relative;
  top: 2px;
}

.button-filter {
  justify-content: center;
  align-items: center;
}

.button-filter:active {
  border-color: var(--text-color);
  background-color: var(--alt-text-color);
  color: var(--text-color);
}

.button-filter.display-all, .button-filter.display-selected {
  display: none;
}

.button-filter.display-campaign:active {
  color: var(--text-color);
}

.head-section {
  z-index: 3;
  mix-blend-mode: exclusion;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  padding-left: 25px;
  padding-right: 25px;
  display: flex;
}

.button-filter-selected {
  justify-content: center;
  align-items: center;
}

.button-filter-selected.display-archive, .button-filter-selected.display-campaign, .button-filter-selected.display-content, .button-filter-selected.display-editorial, .button-filter-selected.display-music, .button-filter-selected.display-photo, .button-filter-selected.display-social, .button-filter-selected.display-long-form {
  display: none;
}

.head-page {
  z-index: 5;
  width: 100%;
  padding: var(--padding-global);
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  mix-blend-mode: exclusion;
  flex-flow: column;
  align-items: stretch;
  display: flex;
  position: sticky;
  top: 0;
}

.head-page.centered {
  mix-blend-mode: exclusion;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 15%;
  padding-right: 15%;
}

.gallery-project {
  flex-flow: column;
  grid-template-rows: auto min-content;
  grid-template-columns: 1fr;
  justify-content: flex-start;
  place-items: stretch center;
  display: flex;
  position: relative;
}

.gallery-project.page-2 {
  opacity: 1;
}

.project-list {
  opacity: 1;
  flex-flow: column;
  justify-content: space-between;
  align-self: stretch;
  align-items: stretch;
  margin-left: 25px;
  margin-right: 25px;
  display: flex;
  position: relative;
  overflow: clip;
}

.project-list-link {
  z-index: 2;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  text-decoration: none;
  position: absolute;
  inset: 0%;
}

.thumb-list-horizontal {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  justify-content: center;
  align-self: center;
  align-items: center;
  height: 100%;
  display: flex;
  position: relative;
  overflow: clip;
}

.thumb-list-horizontal.item-3 {
  box-shadow: 0 0 11px 5px #0003;
}

.project-list-container {
  z-index: 1;
  border-top: 1.5px solid var(--text-color);
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 5% 17.5% 17.5% 60%;
  grid-auto-columns: 1fr;
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  position: relative;
}

.project-list-wrapper {
  flex: 1;
  align-self: stretch;
  display: flex;
}

.img-3-2 {
  z-index: 1;
  aspect-ratio: 3 / 2;
  border-radius: var(--thumb-radius);
  object-fit: cover;
  align-self: stretch;
  min-width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.img-2-3 {
  aspect-ratio: 2 / 3;
  border-radius: var(--thumb-radius);
  object-fit: cover;
  flex: 1;
  min-width: 104%;
  max-width: 104%;
  height: 103%;
}

.front-info {
  z-index: 3;
  flex-flow: column;
  width: 100%;
  height: 100svh;
  display: flex;
  position: relative;
}

.vimeo-player__pagecontrols {
  z-index: 8;
  padding-top: var(--padding-global);
  padding-right: var(--padding-global);
  padding-left: var(--padding-global);
  pointer-events: none;
  mix-blend-mode: exclusion;
  --text-color: #151515;
  --menu-font: "Slussen VF", Arial, sans-serif;
  --text: "Slussen VF", Arial, sans-serif;
  --footer: #151515;
  --padding-global: 1rem;
  --button-font: "KMR Apparat", Arial, sans-serif;
  --thumb-radius: .6em;
  --background-color: whitesmoke;
  --mono: "DM Mono", Arial, sans-serif;
  --header: 5rem;
  --header-mobile: 18vw;
  --navbar-space: 32px;
  --navbar-mobile-space: var(--navbar-space);
  --padding-blackbox: 1.2rem;
  --alt-text-color: white;
  --preloader-bg: #121212;
  --titles-font: "KMR Apparat", Arial, sans-serif;
  --menu-button-radius: .25em;
  --vcr: "VCR OSD Mono", Arial, sans-serif;
  --header-prod-services: 15vw;
  --header-our-house: 15vw;
  --thumb-radius-photo: .05em;
  --transparency: white;
  --corners-opacity: 50%;
  --corners-size: 10px;
  --corners-width: .1em;
  --corners-color: whitesmoke;
  --player-window-radius: 6px;
  --pading-logo-front: 30px;
  --corner-radius: .1rem;
  --front-logo-shadow-color: #121212b3;
  --header-info-page: 17vw;
  --header-feat-works: 17vw;
  --header-photo: 17vw;
  --header-news: 19em;
  --header-number: 1.2em;
  --header-number-mobile: 18px;
  --front-logo-shadow: 50px;
  --text-bg: #e1e1e1;
  --logo-width: 16vw;
  --text-label: #212121;
  --radius-player: 15px;
  justify-content: space-between;
  align-items: flex-start;
  transition: opacity .3s linear;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}

.article-link {
  z-index: 3;
  flex-flow: column;
  text-decoration: none;
  position: absolute;
  inset: 0%;
}

.text-front-about {
  color: #fff;
  text-align: justify;
  text-indent: 80px;
  text-transform: uppercase;
  font-family: IBM Plex Mono;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3em;
  position: relative;
}

.preloader-player {
  z-index: 10;
  background-color: var(--preloader-bg);
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  inset: 0%;
}

.main-section {
  z-index: 2;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: sticky;
  inset: 0;
}

.head-section-sticky {
  z-index: 3;
  mix-blend-mode: exclusion;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 80px;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.special-info {
  z-index: 3;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: 300vh;
  display: flex;
}

.vimeo-thumb-9-16 {
  aspect-ratio: 9 / 16;
  object-fit: cover;
  flex-flow: column;
  justify-content: space-between;
  min-width: 102%;
  padding-bottom: 0;
  padding-right: 0;
  position: absolute;
  overflow: hidden;
}

.image-thumb {
  object-fit: cover;
  background-color: #eee;
  flex: 1;
  min-width: 110%;
  max-width: none;
  min-height: 110%;
}

.slider-container {
  background-color: #eee;
  flex-flow: row;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100svh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.link-section-footer {
  color: #181818;
  background-color: #ececec;
  border: 1.5px solid #ececec;
  border-radius: 2px;
  justify-content: space-between;
  align-items: center;
  width: 20%;
  padding: 4px 8px;
  font-family: Roobert Mono;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.1em;
  text-decoration: none;
  display: flex;
}

.link-section-footer:hover {
  color: #151515;
  background-color: #fff;
}

.trigger-about {
  height: 0;
}

.trigger-header {
  height: 0;
  position: absolute;
  inset: .5% 0% auto;
}

.header-page-container {
  z-index: 1;
  grid-column-gap: var(--padding-global);
  grid-row-gap: var(--padding-global);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  display: flex;
  position: relative;
  top: 2em;
  overflow: hidden;
}

.header-page-section {
  z-index: 2;
  width: 100%;
  height: 100svh;
  padding: var(--padding-global);
  mix-blend-mode: exclusion;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.text-block-underline {
  text-underline-offset: 4px;
  flex-flow: wrap;
  text-decoration: underline;
  text-decoration-thickness: .06em;
}

.background-video-animation {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.video-animation-element {
  aspect-ratio: 3 / 2;
  border-radius: var(--thumb-radius);
  opacity: .5;
  filter: saturate(0%);
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translate(0);
}

.team-container {
  grid-column-gap: 240px;
  grid-row-gap: 240px;
  color: #fff;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 20% 80%;
  grid-auto-columns: 1fr;
  justify-items: start;
  width: 100%;
  display: flex;
  position: relative;
}

.footer-content-mail-group {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.label-category {
  text-transform: uppercase;
  font-family: Plaid;
  font-size: 16px;
  font-weight: 500;
  line-height: 1em;
  text-decoration: none;
  display: flex;
}

.right-group {
  padding-top: 1px;
  display: flex;
}

.up {
  height: 0;
}

.portfolio {
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  min-height: 120vh;
  padding-top: 140px;
  display: flex;
}

.icon-banner {
  position: relative;
  top: -1px;
}

.text-block-title {
  font-family: var(--menu-font);
  color: #fff;
  text-align: right;
  text-transform: uppercase;
  align-self: center;
  font-size: 1.5em;
  font-weight: 600;
  line-height: .8em;
}

.footer-adress-space {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.text-block-white {
  font-family: var(--titles-font);
  color: #000;
  text-align: center;
  text-transform: uppercase;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1em;
}

.footer-credits-link {
  font-family: var(--text);
  color: #fff;
  font-variation-settings: "wght" 460;
  text-align: right;
  text-underline-offset: .15em;
  font-feature-settings: "case";
  font-size: .9em;
  font-weight: 400;
  line-height: 1em;
  text-decoration: none;
  text-decoration-thickness: .06em;
}

.footer-credits-link:hover {
  text-decoration: underline;
}

.service-item {
  flex: 1;
  grid-template-rows: auto;
  grid-template-columns: .25fr .75fr;
  align-self: stretch;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  display: grid;
}

.nav-moblie {
  z-index: 9;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: none;
}

.description-paragraf {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  align-items: flex-start;
  width: 90%;
  display: flex;
  position: relative;
}

.navbar {
  z-index: 9;
  padding-top: var(--padding-global);
  padding-right: var(--padding-global);
  padding-left: var(--padding-global);
  mix-blend-mode: exclusion;
  grid-template-rows: auto;
  grid-template-columns: 25% 50% 25%;
  grid-auto-columns: 1fr;
  grid-auto-flow: row dense;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}

.navbar-mobile {
  display: none;
}

.open-button {
  background-color: #0000;
  width: 32px;
  height: 32px;
  position: relative;
  right: -4px;
}

.menu-mobile {
  z-index: 8;
  width: 100%;
  height: 100%;
  padding: var(--padding-global);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #000c;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-end;
  display: none;
  position: fixed;
  inset: 0%;
}

.list-item-menu-mobile {
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}

.display-section {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.menu-icon-arrow-mobile {
  margin-left: 5px;
  font-size: 3vw;
  line-height: .45em;
}

.carrusel {
  z-index: 3;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  background-color: var(--background-color);
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  padding-top: 60px;
  padding-bottom: 220px;
  display: flex;
  position: relative;
}

.auto-scroll-container {
  align-items: center;
  display: flex;
}

.thumb-carrusel {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  border-radius: var(--thumb-radius);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  overflow: hidden;
}

.img-carrusel {
  border-radius: 5px;
}

.manual-scroll-container {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.group-carrousel-3 {
  grid-template-rows: auto;
  grid-template-columns: 33.33vw;
  grid-auto-columns: 33.33vw;
  grid-auto-flow: column;
  place-items: start stretch;
  display: grid;
}

.carrusel-mobile {
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}

.filter-categories {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: wrap;
  grid-template-rows: auto;
  grid-template-columns: 7% 80%;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  place-items: flex-start start;
  display: flex;
}

.filter-old {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  border-radius: var(--menu-button-radius);
  color: #fff;
  cursor: pointer;
  mix-blend-mode: exclusion;
  border: .1rem solid #fff;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 325px;
  height: 30px;
  margin-top: 2px;
  padding-top: 5px;
  padding-left: 7px;
  padding-right: 7px;
  display: flex;
  position: relative;
}

.gradient {
  z-index: 1;
  background-image: linear-gradient(#0000, #000);
  height: 25vh;
  position: absolute;
  inset: auto 0% 0%;
}

.vimeo-special-16-9 {
  z-index: 0;
  justify-content: space-between;
  align-items: stretch;
  min-width: 280%;
  height: 101%;
  display: flex;
}

.vimeo-special-9-16 {
  z-index: 0;
  display: none;
}

.vimeo-thumb-1-1 {
  z-index: 2;
  aspect-ratio: 1;
  border-radius: var(--thumb-radius);
  object-fit: cover;
  justify-content: space-between;
  min-width: 102%;
  min-height: 102%;
  display: flex;
  position: relative;
}

.text-block {
  font-family: var(--text);
  color: #000;
  text-align: justify;
  flex-flow: wrap;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.3em;
}

.vimeo-thumb-carrusel-16-9 {
  z-index: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--thumb-radius);
  object-fit: cover;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  height: 110%;
  min-height: 110%;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.mid-section-carrousel {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 20px;
  display: flex;
  overflow: clip;
}

.legal-links {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  justify-content: space-between;
  display: flex;
}

.close-button-work {
  background-color: #0000;
  justify-content: flex-end;
  align-items: flex-start;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
}

.close-button-work:hover {
  color: #fff;
}

.phones-information {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.services-list {
  grid-column-gap: var(--padding-global);
  grid-row-gap: var(--padding-global);
  flex-flow: column;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row;
  align-self: stretch;
  display: grid;
}

.about-section-carrussel {
  z-index: 2;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 75vh;
  margin-top: 100svh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.carrusel-container {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  background-color: var(--background-color);
  flex-flow: column;
  flex: 1;
  width: 100%;
  padding-top: 80px;
  display: flex;
}

.footer-social {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-direction: column;
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-content: flex-start;
  align-items: flex-end;
  display: flex;
}

.footer-adress {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-direction: column;
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-content: flex-start;
  align-items: flex-start;
  font-style: normal;
  display: flex;
}

.footer-section {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-direction: column;
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footer-section.right {
  justify-content: flex-start;
  align-items: flex-end;
}

.about-text-container {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.text-img-num {
  font-family: var(--vcr);
  color: #fff;
  font-variation-settings: "slnt" 0;
  letter-spacing: -.02em;
  text-transform: uppercase;
  word-spacing: -5px;
  font-size: 1em;
  font-weight: 400;
  line-height: 1em;
}

.about-section-carrussel-2 {
  mix-blend-mode: difference;
  flex-flow: column;
  align-self: stretch;
  align-items: flex-end;
  padding-bottom: 40px;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
}

.services-group {
  flex-flow: column;
  align-self: stretch;
  align-items: flex-end;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}

.title-services-group {
  grid-column-gap: 5%;
  grid-row-gap: 5%;
  border-top: .12em solid var(--text-color);
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 6% 34% 1fr;
  align-self: stretch;
  place-items: center stretch;
  padding-top: 8px;
  padding-bottom: 5px;
  display: flex;
}

.text-service-element {
  font-family: var(--text);
  color: var(--text-color);
  word-spacing: 0;
  font-size: 1.2em;
  line-height: 1em;
}

.services-container {
  width: 100%;
  padding-right: var(--padding-global);
  padding-left: var(--padding-global);
  grid-row-gap: 240px;
  flex-flow: column;
  display: flex;
  position: relative;
}

.text-banner {
  font-family: var(--text);
  color: #fff;
  white-space: nowrap;
  padding-bottom: 2px;
  font-size: .9em;
  font-style: italic;
  font-weight: 400;
  line-height: 1em;
}

.text-list-category {
  opacity: .3;
  justify-content: center;
  align-items: center;
  font-family: Plaid;
  font-size: 14px;
  font-weight: 400;
  display: flex;
}

.text-block-element {
  font-family: var(--text);
  color: var(--text-color);
  word-spacing: 0;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1em;
}

.team {
  flex-flow: column;
  display: flex;
  position: relative;
}

.group-carrousel {
  filter: grayscale();
  grid-template-rows: auto;
  grid-template-columns: 20vw;
  grid-auto-columns: 20vw;
  grid-auto-flow: column;
  align-items: start;
  display: grid;
}

.mid-section-team {
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  display: flex;
  overflow: hidden;
}

.clients-container {
  width: 100%;
  padding-right: var(--padding-global);
  padding-left: var(--padding-global);
  color: #fff;
  flex-flow: column;
  display: flex;
  position: relative;
}

.mid-section-team-mobile {
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  display: none;
  overflow: hidden;
}

.team-section {
  grid-column-gap: 240px;
  grid-row-gap: 240px;
  flex-flow: column;
  display: flex;
}

.header-photo {
  font-family: var(--mono);
  font-size: var(--header);
  text-transform: uppercase;
  line-height: .8em;
  display: none;
}

.filter-section-archive {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-self: stretch;
  align-items: stretch;
  display: none;
}

.img-1-1 {
  aspect-ratio: 1;
  border-radius: var(--thumb-radius);
  object-fit: cover;
  overflow: hidden;
}

.footer-icon {
  font-family: var(--text);
  color: #fff;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.2em;
  position: relative;
}

.header-prod-services {
  color: #fff;
  font-family: Neue Montreal Extra-condensed;
  font-size: var(--header-prod-services);
  text-align: left;
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: .8em;
}

.header-our-house {
  color: #fff;
  font-family: Neue Montreal Extra-condensed;
  font-size: var(--header-our-house);
  text-align: left;
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: .8em;
}

.icon-list {
  color: #fff;
  margin-left: 2.5em;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 1.2em;
  font-weight: 400;
  display: none;
  position: relative;
}

.img-4-5 {
  border-radius: var(--thumb-radius);
  pointer-events: none;
  width: 102%;
  min-width: 102%;
  height: 102%;
}

.banner-container {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-left: -8px;
  margin-right: -8px;
  display: flex;
  position: relative;
  overflow: clip;
}

.img-4-3 {
  aspect-ratio: 4 / 3;
  border-radius: var(--thumb-radius);
  object-fit: cover;
  min-width: 100%;
}

.footer-link-wrapper {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.header-front-info-desktop {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-family: VCR OSD Mono, Arial, sans-serif;
  font-size: 8vw;
  font-weight: 400;
  line-height: .8em;
}

.block-title {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.thumb {
  border-radius: var(--thumb-radius);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.group-carrousel-2 {
  grid-template-rows: auto;
  grid-template-columns: 33.33vw;
  grid-auto-columns: 33.33vw;
  grid-auto-flow: column;
  place-items: start stretch;
  display: grid;
}

.thumb-list-photo {
  border-radius: var(--thumb-radius);
  flex-flow: row;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 6.2em;
  height: 8.5em;
  margin-right: .8em;
  display: flex;
  overflow: hidden;
}

.thumb-list-photo.item-4, .thumb-list-photo.item-5 {
  background-color: #ededed;
}

.img-bk-3-2 {
  border-radius: var(--thumb-radius);
  pointer-events: none;
  object-fit: cover;
  width: 102%;
  min-width: 102%;
  height: 102%;
  display: none;
  position: absolute;
}

.images {
  aspect-ratio: auto;
  border-radius: var(--thumb-radius-photo);
  object-fit: cover;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.img-thumb {
  border-radius: var(--thumb-radius-photo);
  object-fit: cover;
  width: 102%;
  min-width: 102%;
  height: 102%;
  position: relative;
  overflow: hidden;
}

.filter-section {
  z-index: 6;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  display: flex;
  position: sticky;
  top: 0;
}

.icon-registered {
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 9px;
  font-weight: 500;
  line-height: .8em;
}

.footer-links {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-direction: column;
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footer-content-group {
  grid-column-gap: .3em;
  grid-row-gap: .3em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: baseline;
  display: flex;
}

.text-banner-all {
  justify-content: space-around;
  align-items: center;
  width: 420px;
  display: flex;
}

.text-banner-scroll {
  justify-content: space-around;
  align-items: center;
  min-width: 840px;
  display: flex;
}

.text-filter {
  font-family: var(--menu-font);
  font-variation-settings: "wght" 640;
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-size: .95em;
  line-height: 1em;
}

.num-units-category {
  font-family: var(--menu-font);
  font-variation-settings: "wght" 640;
  letter-spacing: -.01em;
  order: 1;
  font-size: .95em;
  line-height: 1em;
}

.num-units-category:hover {
  text-decoration: none;
  text-decoration-thickness: 0;
}

.filter-element {
  border-radius: var(--menu-button-radius);
  color: #fff;
  text-transform: uppercase;
  border: 2px solid #fff;
  justify-content: space-between;
  align-items: flex-start;
  width: 325px;
  height: 46px;
  padding-top: 4px;
  padding-left: 7px;
  padding-right: 7px;
  font-size: 1em;
  text-decoration: none;
  text-decoration-thickness: 1px;
  display: flex;
}

.filter-element:hover {
  color: #000;
  text-underline-offset: 4px;
  background-color: #fff;
  text-decoration: none;
  text-decoration-thickness: 1px;
}

.categories-container {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: .9em;
  display: flex;
}

.text-list-num {
  color: var(--text-color);
  letter-spacing: -.02em;
  text-transform: uppercase;
  order: -1;
  font-family: Suisse Intl Mono;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.1em;
}

.time-num {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  color: #fff;
  text-align: right;
  letter-spacing: -.03em;
  word-spacing: -4px;
  font-family: NB International Pro Mono;
  font-size: 12px;
  font-weight: 400;
  line-height: 1em;
  display: none;
}

.pict {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  height: 12vh;
  display: flex;
  position: relative;
}

.project-list-title {
  z-index: 3;
  background-color: var(--background-color);
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 20% 10% 70%;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: start;
  width: 30%;
  display: flex;
  position: relative;
}

.project-list-client {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.wrapper-scroll {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  display: flex;
}

.project-list-thumbs {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
}

.filter-background {
  z-index: 2;
  background-image: radial-gradient(circle farthest-corner at 40% -30%, var(--background-color) 18%, var(--transparency));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-content: center flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100vh;
  padding-top: 80px;
  padding-left: 25px;
  display: none;
  position: fixed;
  inset: 0%;
}

.header-social-media {
  font-family: var(--mono);
  font-size: var(--header);
  text-transform: uppercase;
  line-height: .8em;
  display: none;
}

.categories {
  grid-column-gap: 4px;
  grid-row-gap: 6px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.display {
  grid-column-gap: 40px;
  grid-row-gap: 5px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.filter-display {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-project-list-bold {
  color: var(--text-color);
  font-family: MD System VF;
  font-size: 30px;
  font-weight: 700;
  line-height: .9em;
}

.text-project-list {
  color: var(--text-color);
  font-family: MD System VF;
  font-size: 30px;
  font-weight: 400;
  line-height: 1em;
}

.text-span-2 {
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-family: Suisse Intl Mono;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2em;
  position: relative;
  right: 8px;
}

.svg-logo-nav {
  fill: #000;
  width: 48px;
  display: none;
}

.button-banner {
  border-top-left-radius: var(--menu-button-radius);
  border-top-right-radius: var(--menu-button-radius);
  border-bottom-left-radius: var(--menu-button-radius);
  border-bottom-right-radius: var(--menu-button-radius);
  width: 280px;
  height: 36px;
  font-family: var(--menu-font);
  color: #fff;
  font-variation-settings: "wght" 650;
  letter-spacing: .01em;
  text-transform: uppercase;
  word-spacing: 0;
  background-color: #0000;
  border: .1rem solid #fff;
  justify-content: space-between;
  align-items: stretch;
  padding: .35em .5em 0;
  font-size: .95em;
  font-weight: 600;
  line-height: 1em;
  display: flex;
}

.button-banner:hover {
  color: #000;
  background-color: #fff;
}

.whatdo-section {
  grid-column-gap: 240px;
  grid-row-gap: 240px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.service-row {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: space-between;
  align-self: stretch;
  align-items: center;
  display: flex;
}

.text-paragraf {
  font-family: var(--text);
  color: var(--text-color);
  text-align: left;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.1em;
  display: block;
}

.service-item-no-line {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex: 1;
  justify-content: flex-start;
  align-self: stretch;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  display: flex;
}

.service-item-no-line:hover {
  background-color: var(--text-color);
  color: var(--alt-text-color);
}

.text-sub-logo-bold {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  font-family: var(--text);
  font-variation-settings: "wght" 480;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  font-size: .9em;
  font-weight: 400;
  line-height: 1em;
  display: flex;
}

.gradient-mask {
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(90deg, #000, #21212100 8% 92%, #000);
  position: absolute;
  inset: 0;
}

.icon-hot {
  font-family: var(--text);
  color: #fff;
  font-size: 1.25em;
  font-weight: 700;
  line-height: .8em;
  position: relative;
  bottom: 2px;
}

.description-list-container {
  border: .1em dashed #fff;
  border-radius: 2px;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.text-description {
  color: var(--text-color);
  white-space: nowrap;
  word-spacing: 0;
  font-family: MD System VF;
  font-size: 15px;
  font-weight: 500;
  line-height: 1em;
}

.gradient-mask-description {
  z-index: 3;
  background-image: linear-gradient(270deg, #fff 1%, #0000 5% 95%, #fff 99%);
  position: absolute;
  inset: 0%;
}

.team-block {
  margin-right: var(--padding-global);
  margin-left: var(--padding-global);
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 50% 50%;
  place-items: flex-start stretch;
  display: grid;
  position: relative;
}

.text-jp {
  letter-spacing: -.02em;
  padding-top: .5px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: .9em;
  font-weight: 800;
  line-height: 1em;
  position: relative;
}

.banner {
  justify-content: center;
  align-items: flex-start;
  width: 25%;
  position: relative;
}

.front-title-right {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: #fff;
  justify-content: center;
  align-items: center;
  display: flex;
}

.text-icon-bcn {
  text-align: right;
  border: .12em solid #fff;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  padding: 1px 3.5px;
  font-family: KMR Apparat, Arial, sans-serif;
  font-size: .6em;
  font-weight: 500;
  line-height: 1em;
  display: flex;
}

.button-small {
  border: .12em solid var(--text-color);
  width: 160px;
  height: 34px;
  font-family: var(--button-font);
  color: var(--text-color);
  text-transform: uppercase;
  background-color: #0000;
  border-radius: 18px;
  justify-content: center;
  align-items: center;
  padding: 1px 0 0;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.2em;
  display: flex;
}

.button-small:hover {
  background-color: var(--text-color);
  color: var(--alt-text-color);
}

.button-small:active {
  background-color: var(--alt-text-color);
  color: var(--text-color);
}

.text-description-scroll {
  justify-content: center;
  align-items: center;
  display: flex;
}

.text-description-all {
  justify-content: space-around;
  align-items: center;
  min-width: 70em;
  max-width: 70em;
  display: flex;
}

.gradient-mask-list {
  z-index: 3;
  background-image: linear-gradient(270deg, #fff, #fff0 1% 99%, #fff);
  position: absolute;
  inset: 0%;
}

.piece-num {
  color: var(--text-color);
  text-align: right;
  letter-spacing: -.03em;
  word-spacing: -3px;
  font-family: Suisse Intl Mono;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2em;
}

.cases {
  z-index: 2;
  background-color: var(--background-color);
  flex-flow: column;
  width: 100%;
  min-height: 200vh;
  margin-top: -1px;
  display: flex;
  position: relative;
}

.cases-list-container {
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  display: grid;
}

.filter-hover-wrapper {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  margin-top: 6px;
  margin-left: -8px;
  display: none;
  position: absolute;
  top: 100%;
}

.button-footer {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  border-radius: var(--menu-button-radius);
  height: 30px;
  font-family: var(--button-font);
  color: #fff;
  text-transform: uppercase;
  background-color: #0000;
  border: .12em solid #fff;
  justify-content: center;
  align-items: center;
  padding-bottom: .5px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.3em;
  text-decoration: none;
  display: flex;
  position: relative;
}

.button-footer:hover {
  color: var(--text-color);
  background-color: #fff;
}

.button-footer:active {
  background-color: var(--text-color);
  color: #fff;
}

.footer-contact {
  padding-top: 40px;
  padding-right: var(--padding-global);
  padding-left: var(--padding-global);
  align-items: flex-start;
  display: flex;
}

.section-footer-sticky {
  z-index: 3;
  width: 100%;
  padding-right: var(--padding-global);
  padding-bottom: var(--padding-global);
  padding-left: var(--padding-global);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template: "Area Area-2"
  / 56% 40%;
  grid-auto-flow: row dense;
  place-content: end flex-end;
  align-self: stretch;
  place-items: flex-end stretch;
  display: flex;
  position: sticky;
  bottom: 0;
}

.latest-works-section {
  z-index: 2;
  grid-column-gap: 1.4%;
  grid-row-gap: 15rem;
  flex-flow: column;
  grid-template: ". line1 line1 line1 line1 line1 line1 line1 . . ."
                 ". . . . line2 line2 line2 line2 line2 line2 ."
                 ". line3 line3 line3 line3 line3 line3 line3 . . ."
                 ". . . . . . line4 line4 line4 line4 line4"
                 ". . . line5 line5 line5 . . . . ."
                 ". . . . line6 line6 line6 line6 line6 line6 ."
                 ". line7 line7 line7 line7 line7 line7 line7 line7 . ."
                 ". . . . . . line8 line8 line8 line8 line8"
                 ". . line9 line9 line9 line9 line9 line9 line9 . ."
                 ". . . . . . . line10 line10 line10 ."
                 ". line11 line11 line11 line11 line11 line11 line11 line11 . ."
                 ". . . . line12 line12 line12 line12 line12 line12 line12"
                 / 7.05% 7.05% 7.05% 7.05% 7.05% 7.05% 7.05% 7.05% 7.05% 7.05% 7.05% 7.05%;
  grid-auto-flow: row;
  place-items: start;
  margin-top: 15rem;
  margin-bottom: 15rem;
  padding-left: 1rem;
  padding-right: 1rem;
  display: grid;
  position: relative;
}

.title-section {
  z-index: 3;
  padding-right: var(--padding-global);
  padding-left: var(--padding-global);
  grid-column-gap: .2em;
  grid-row-gap: .2em;
  pointer-events: auto;
  color: #fff;
  mix-blend-mode: exclusion;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 60px;
  display: flex;
  position: sticky;
  top: 50%;
  transform: none;
}

.header-title {
  grid-column-gap: .2em;
  grid-row-gap: .2em;
  font-family: var(--titles-font);
  color: var(--text-color);
  text-transform: uppercase;
  font-feature-settings: "ccmp";
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 1.8em;
  font-weight: 700;
  line-height: .8em;
}

.header-title.light {
  color: #fff;
  display: flex;
}

.button-mini {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  color: #fff;
  fill: #fff;
  background-color: #151515;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  height: 25px;
  padding-left: 8px;
  padding-right: 8px;
  font-family: Plaid;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  text-decoration: none;
  display: flex;
}

.button-mini:hover {
  color: #151515;
  fill: #151515;
  background-color: #fff;
  border-color: #fff;
}

.icon-button {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: .9em;
  font-weight: 400;
  line-height: .9em;
}

.nav-desktop {
  z-index: 9;
  grid-column-gap: var(--padding-global);
  grid-row-gap: var(--padding-global);
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 25% 75%;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: stretch;
  width: 60vw;
  display: flex;
}

.ratio-2-3 {
  aspect-ratio: auto;
  border-radius: var(--thumb-radius-photo);
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.portfolio-gird {
  grid-column-gap: 0.5%;
  grid-row-gap: 50px;
  flex-flow: wrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
  place-items: start stretch;
  width: 100%;
  margin-top: 50px;
  padding-bottom: 30px;
  padding-left: .5%;
  padding-right: .5%;
  display: grid;
  position: relative;
}

.header-wrapper {
  grid-column-gap: var(--padding-global);
  grid-row-gap: var(--padding-global);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.header-wrapper:lang(es-es) {
  padding-left: 0;
}

.hover-hide-controls {
  flex: 1;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  display: flex;
}

.header-ok {
  grid-column-gap: .8rem;
  grid-row-gap: .8rem;
  font-family: var(--titles-font);
  color: #fff;
  text-transform: uppercase;
  align-items: flex-start;
  font-size: 3.5em;
  font-weight: 700;
  line-height: .8em;
  display: flex;
}

.header-ok.longform {
  display: none;
}

.header-ok.filter {
  color: #ffffff26;
  display: flex;
}

.header-ok.campaign, .header-ok.branded, .header-ok.social, .header-ok.editorial, .header-ok.music, .header-ok.photo {
  display: none;
}

.header-ok.dark {
  color: #000;
  text-transform: uppercase;
  word-spacing: 0;
  font-size: 4rem;
}

.header-number {
  font-family: var(--mono);
  color: #fff;
  font-feature-settings: "case";
  font-size: .5em;
  font-weight: 400;
  line-height: 1em;
  position: relative;
  bottom: .4em;
}

.header-number.longform, .header-number.photo {
  display: none;
}

.header-number.all {
  margin-top: 1px;
}

.header-number.campaign, .header-number.content, .header-number.social-media, .header-number.editorial, .header-number.music-videos {
  display: none;
}

.header-number.light {
  color: #fff;
}

.text-header-intro {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  word-spacing: 2px;
  font-family: KMR Apparat, Arial, sans-serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1em;
}

.new-releases {
  z-index: 2;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  display: flex;
  position: relative;
}

.element-carrusel {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-right: 2%;
  display: flex;
  overflow: hidden;
}

.services-block, .clients-block {
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 50% 50%;
  place-items: flex-start stretch;
  display: grid;
  position: relative;
}

.banner-button {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.hover-zone {
  z-index: 8;
  flex: 1;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  position: relative;
}

.slides-container {
  z-index: 0;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hover-zone-wrapper {
  z-index: 1;
  mix-blend-mode: exclusion;
  flex-direction: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  inset: 0%;
}

.slide-1 {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.image-slide {
  pointer-events: none;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.slide-2, .slide-3, .slide-4, .slide-5, .slide-6, .slide-7, .slide-8, .slide-9 {
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.slide-10 {
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  inset: 0%;
}

.vimeo-thumb-16-9 {
  aspect-ratio: 16 / 9;
  opacity: 1;
  pointer-events: none;
  object-fit: cover;
  height: 101%;
  min-height: 101%;
  padding-bottom: 0;
  padding-right: 0;
  position: absolute;
}

.hover-slider {
  z-index: 7;
  width: 100%;
  height: 100%;
  position: relative;
}

.menu-mobile-logo-space {
  width: 100%;
  display: flex;
}

.text-separator {
  font-family: var(--mono);
  background-color: #eaeaea;
  padding: .25em .15em .2em;
  display: none;
}

.ratio-9-16 {
  aspect-ratio: 9 / 14;
  border-radius: var(--thumb-radius);
  object-fit: cover;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.section-background-sticky {
  z-index: 0;
  filter: grayscale(60%);
  flex-flow: column;
  grid-template: "Area Area-2"
  / 56% 40%;
  grid-auto-flow: row dense;
  align-content: end;
  justify-items: start;
  width: 100%;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
}

.image-2 {
  z-index: 1;
  width: 100%;
  height: 140vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: visible;
}

.main {
  z-index: 1;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.main.home {
  position: relative;
}

.main.homepage {
  background-color: #121212;
}

.project-element {
  flex-flow: column;
  grid-template-rows: 1px auto 1px;
  grid-template-columns: 1px 1fr 1px;
  justify-content: flex-start;
  place-items: center;
  width: 97%;
  display: flex;
  position: relative;
}

.project-element.photo {
  width: 70%;
}

.project-element.feat {
  width: 100%;
}

.corners {
  z-index: 8;
  width: 100%;
  height: 100%;
  opacity: var(--corners-opacity);
  pointer-events: none;
  mix-blend-mode: exclusion;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  inset: 0%;
}

.corner-left-up {
  width: var(--corners-size);
  height: var(--corners-size);
  border-right: var(--corners-width) solid var(--corners-color);
  border-bottom: var(--corners-width) solid var(--corners-color);
  display: flex;
  position: absolute;
  inset: -15px auto auto -15px;
}

.corner-left-down {
  width: var(--corners-size);
  height: var(--corners-size);
  border-top: var(--corners-width) solid var(--corners-color);
  border-right: var(--corners-width) solid var(--corners-color);
  position: absolute;
  inset: auto auto -15px -15px;
}

.corner-right-down {
  width: var(--corners-size);
  height: var(--corners-size);
  border-top: var(--corners-width) solid var(--corners-color);
  border-left: var(--corners-width) solid var(--corners-color);
  position: absolute;
  inset: auto -15px -15px auto;
}

.corner-right-up {
  width: var(--corners-size);
  height: var(--corners-size);
  border-bottom: var(--corners-width) solid var(--corners-color);
  border-left: var(--corners-width) solid var(--corners-color);
  display: flex;
  position: absolute;
  inset: -15px -15px auto auto;
}

.text-project-number {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  color: #fff;
  letter-spacing: .02em;
  justify-content: center;
  align-items: center;
  font-family: Plaid;
  font-size: .7em;
  line-height: 1em;
  display: none;
  position: absolute;
  inset: 6px 6px auto auto;
}

.filter-section-mobile {
  z-index: 4;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  inset: auto 0% 0%;
}

.corner-med-down {
  width: var(--corners-size);
  height: var(--corners-width);
  border-bottom: var(--corners-width) solid var(--corners-color);
  display: none;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%);
}

.corner-med-up {
  width: var(--corners-size);
  height: var(--corners-width);
  border-top: var(--corners-width) solid var(--corners-color);
  display: none;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 50%;
  transform: translate(-50%);
}

.corner-left-med {
  width: var(--corners-width);
  height: var(--corners-size);
  border-left: var(--corners-width) solid var(--corners-color);
  display: none;
  position: absolute;
  top: 50%;
  left: 0%;
  right: auto;
  transform: translate(0, -50%);
}

.corner-right-med {
  width: var(--corners-width);
  height: var(--corners-size);
  border-right: var(--corners-width) solid var(--corners-color);
  display: none;
  position: absolute;
  top: 50%;
  left: auto;
  right: 0%;
  transform: translate(0, -50%);
}

.ratio-square {
  aspect-ratio: 1;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.hover-zone-2 {
  z-index: 10;
  cursor: default;
  position: relative;
}

.images-container {
  z-index: 0;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  display: flex;
  overflow: hidden;
}

.hover-zone-container {
  z-index: 2;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-direction: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  height: 100vh;
  display: grid;
  position: absolute;
  inset: 0%;
}

.slide-11 {
  flex: 1;
  position: absolute;
  inset: 0%;
}

.image-slide-2 {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.slide-12, .slide-13, .slide-14 {
  flex: 1;
  position: absolute;
  inset: 0%;
}

.slide-15 {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.slide-16, .slide-17, .slide-18, .slide-19, .slide-20 {
  flex: 1;
  position: absolute;
  inset: 0%;
}

.vimeo-thumb-16-9-2 {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  justify-content: space-between;
  align-items: stretch;
  min-height: 100%;
  display: flex;
}

.header-block {
  grid-column-gap: 6px;
  grid-row-gap: 10px;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  width: 85%;
  display: flex;
  position: relative;
}

.text-elements {
  display: none;
}

.home {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: 100svh;
  display: flex;
  position: fixed;
  inset: 0%;
}

.front-logos {
  z-index: 2;
  width: 100%;
  height: 100svh;
  padding: var(--padding-global);
  mix-blend-mode: exclusion;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  place-content: space-between flex-end;
  place-items: center end;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.img-hover {
  border-radius: var(--thumb-radius-photo);
  opacity: 0;
  object-fit: cover;
  width: 102%;
  min-width: 102%;
  height: 102%;
  display: inline-flex;
  position: absolute;
  overflow: hidden;
}

.controls {
  z-index: 3;
  width: 100%;
  padding-right: var(--padding-blackbox);
  padding-bottom: var(--padding-blackbox);
  padding-left: var(--padding-blackbox);
  mix-blend-mode: exclusion;
  background-image: none;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  inset: auto 0% 0%;
}

.pause-button {
  z-index: 3;
  color: #fff;
  background-color: #0000;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: none;
}

.pause-button:hover {
  color: #fff;
}

.unmute-button {
  opacity: .5;
  background-color: #0000;
  background-image: url('../images/mute.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  display: none;
  position: relative;
}

.unmute-button:hover {
  opacity: 1;
}

.total-time-bar {
  background-color: #ffffff1a;
  border-radius: 2px;
  flex: 1;
  height: 2.5px;
  display: flex;
  position: relative;
}

.text-timmer {
  color: #fff9;
  background-color: #ffffff1a;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  height: 14px;
  padding-left: 3px;
  padding-right: 3px;
  font-family: PP Fraktion Sans VF;
  font-size: .7em;
  font-weight: 400;
  line-height: .8em;
  display: flex;
  position: absolute;
  inset: auto 0% 0% auto;
  transform: translate(50%, -8px);
}

.video-screen {
  aspect-ratio: 16 / 9;
  border-radius: var(--player-window-radius);
  object-fit: cover;
  background-color: #090909;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.video-screen._9-16 {
  aspect-ratio: 9 / 16;
  width: auto;
  height: 100%;
}

.button-icon {
  color: #fff;
  background-color: #0000;
  border: .12em solid #fff;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  width: 21px;
  height: 21px;
  padding-top: 1px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: .9em;
  font-weight: 500;
  line-height: 100%;
  text-decoration: none;
  display: none;
}

.button-icon:hover {
  color: #000;
  background-color: #fff;
}

.control-buttons {
  z-index: 1;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-flow: row;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.player {
  background-color: #151515;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 100svh;
  display: flex;
  position: relative;
}

.play-pause-icon {
  fill: #fff;
  width: 50px;
  height: 50px;
  display: block;
}

.text-timmer-total {
  color: #ffffff80;
  font-feature-settings: "ss03";
  margin-top: 1px;
  font-family: PP Fraktion Sans VF;
  font-size: .9em;
  font-weight: 400;
  line-height: .8em;
}

.fullscreen-button {
  opacity: .5;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  position: relative;
}

.fullscreen-button:hover {
  opacity: 1;
}

.play-pause-controls {
  z-index: 3;
  width: 33.33%;
  height: 33.33%;
  transform: scale3d(1none, 1none, 1none);
  mix-blend-mode: exclusion;
  transform-style: preserve-3d;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  position: absolute;
}

.progress-time-bar {
  background-color: #ffffff80;
  border-radius: 2px;
  width: 0%;
  position: absolute;
  inset: 0%;
}

.mute-button {
  opacity: .5;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  position: relative;
}

.mute-button:hover {
  opacity: 1;
  color: #fff;
}

.play-button {
  z-index: 3;
  color: #fff;
  background-color: #0000;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.play-button:hover {
  color: #fff;
}

.window {
  z-index: 0;
  background-color: #000;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.window.vertical {
  flex-flow: row;
}

.hover-zone-wrapper-2 {
  z-index: 2;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-direction: row;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
}

.time-bar {
  z-index: 2;
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 16px;
  display: flex;
  position: relative;
}

.detail-wrapper {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.text-detail {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: #fff;
  letter-spacing: -.02em;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: Plaid;
  font-size: 1.2em;
  font-weight: 500;
  line-height: 1em;
  text-decoration: none;
  display: flex;
}

.info {
  z-index: 6;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #ffffff40;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  display: none;
  position: fixed;
  inset: 0%;
}

.icon-link {
  opacity: .55;
  font-variation-settings: "wght" 550;
  font-size: .8em;
  font-weight: 500;
  line-height: .8em;
}

.text-wrapper {
  grid-column-gap: 9%;
  grid-row-gap: 9%;
  flex-flow: row;
  display: flex;
}

.text-description-2 {
  color: #fff;
  font-family: Helvetica Now Display;
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.2em;
}

.project-info-2 {
  z-index: 1;
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  padding: 30px 30px 60px;
  display: flex;
}

.text-data {
  opacity: 1;
  color: #fff;
  text-transform: uppercase;
  font-family: MD System Mono;
  font-size: .9em;
  font-weight: 400;
  line-height: 1em;
}

.text-data.light {
  color: #fff;
  font-weight: 500;
}

.slide-nav {
  display: flex;
}

.info-bar {
  z-index: 2;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.text-category-symbol {
  display: none;
}

.menu-button-border {
  grid-column-gap: .15em;
  grid-row-gap: .15em;
  border-radius: var(--menu-button-radius);
  color: #fff;
  border: .12em solid #fff;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-top: .12em;
  padding-left: 1em;
  padding-right: 1em;
  text-decoration: none;
  display: flex;
}

.project-name {
  grid-column-gap: .3em;
  grid-row-gap: .3em;
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.project-name.forplayer {
  justify-content: center;
  align-items: center;
}

.project-name.forplayer.gallery {
  justify-content: flex-end;
  align-items: flex-start;
}

.project-name.thumb {
  justify-content: center;
  align-items: center;
}

.subtitle-logo {
  z-index: 5;
  padding-right: var(--padding-global);
  padding-bottom: var(--padding-global);
  padding-left: var(--padding-global);
  mix-blend-mode: exclusion;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: fixed;
  inset: auto 0% 0%;
}

.svg-22 {
  padding: 1px;
}

.site-credits {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  display: flex;
}

.header-group {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  font-family: var(--mono);
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.category-wrapper {
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  flex-flow: row;
  align-items: flex-start;
  display: none;
}

.preloader-container {
  width: 120px;
  display: flex;
}

.header-number-wrapper {
  display: flex;
  position: relative;
  bottom: .7em;
}

.close-icon {
  width: 28px;
  height: 28px;
}

.close-icon:hover {
  opacity: 1;
}

.close-icon:active {
  opacity: 100;
}

.arrow {
  width: 32px;
  display: none;
}

.vimeo-player__btn {
  justify-content: center;
  align-items: center;
  width: 6em;
  height: 6em;
  transition: opacity .3s linear;
  display: flex;
  position: relative;
}

.vimeo-player__duration-span {
  text-align: center;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  font-family: Slussen VF, Arial, sans-serif;
  font-size: 14px;
  display: block;
}

.vimeo-player__play {
  cursor: pointer;
  mix-blend-mode: exclusion;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.vimeo-player__iframe {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  min-width: 100%;
  min-height: 100%;
  display: flex;
  position: absolute;
}

.vimeo-player__btn-play-svg {
  width: 40%;
}

.vimeo-player {
  z-index: 1;
  pointer-events: auto;
  color: #efeeec;
  isolation: isolate;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translateX(0);
}

.vimeo-player__timeline {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  height: 1.5em;
  display: flex;
  position: relative;
}

.vimeo-player__loading {
  pointer-events: none;
  color: #fff;
  mix-blend-mode: overlay;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  display: flex;
  position: absolute;
}

.vimeo-player__fullscreen-scale-svg {
  width: 100%;
  position: absolute;
}

.vimeo-player__loading-svg {
  width: 8em;
}

.vimeo-player__duration {
  flex-shrink: 0;
  width: 2.25em;
}

.vimeo-player__timeline-input {
  pointer-events: auto;
  cursor: pointer;
  appearance: none;
  background-color: #0000;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.vimeo-player__mute {
  cursor: pointer;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  position: relative;
}

.vimeo-player__interface-bottom {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.vimeo-player__volume-up-svg {
  width: 100%;
  position: absolute;
}

.vimeo-player__dark {
  opacity: .5;
  pointer-events: none;
  background-color: #131313;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  position: absolute;
}

.vimeo-player__btn-pause-svg {
  width: 50%;
}

.vimeo-player__placeholder {
  object-fit: contain;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  transition: opacity .3s linear;
  position: absolute;
}

.vimeo-player__pause {
  cursor: pointer;
  mix-blend-mode: exclusion;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.vimeo-player__before {
  padding-top: 56.25%;
}

.vimeo-player__volume-mute-svg {
  width: 100%;
  position: absolute;
}

.vimeo-player__interface {
  pointer-events: none;
  mix-blend-mode: exclusion;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  padding: min(2.5em, 4vw);
  transition-property: opacity;
  transition-duration: .3s;
  transition-timing-function: linear;
  display: flex;
  position: absolute;
  inset: 0%;
}

.vimeo-player__fullscreen {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  position: relative;
}

.vimeo-player__fullscreen-shrink-svg {
  width: 100%;
  position: absolute;
}

.vimeo-player__timeline-progress {
  vertical-align: top;
  appearance: none;
  width: 100%;
  height: var(--progress-height);
  border-radius: var(--timeline-rounded-corners);
  color: var(--progress-fill-bg);
  background-color: #0000;
  border: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  overflow: hidden;
}

.page-controls {
  z-index: 10;
  width: 100%;
  padding-top: var(--padding-blackbox);
  padding-right: var(--padding-blackbox);
  padding-left: var(--padding-blackbox);
  pointer-events: auto;
  mix-blend-mode: exclusion;
  --text-color: #151515;
  --menu-font: "Slussen VF", Arial, sans-serif;
  --text: "Slussen VF", Arial, sans-serif;
  --footer: #151515;
  --padding-global: 1rem;
  --button-font: "KMR Apparat", Arial, sans-serif;
  --thumb-radius: .6em;
  --background-color: whitesmoke;
  --mono: "DM Mono", Arial, sans-serif;
  --header: 5rem;
  --header-mobile: 18vw;
  --navbar-space: 32px;
  --navbar-mobile-space: var(--navbar-space);
  --padding-blackbox: 1.2rem;
  --alt-text-color: white;
  --preloader-bg: #121212;
  --titles-font: "KMR Apparat", Arial, sans-serif;
  --menu-button-radius: .25em;
  --vcr: "VCR OSD Mono", Arial, sans-serif;
  --header-prod-services: 15vw;
  --header-our-house: 15vw;
  --thumb-radius-photo: .05em;
  --transparency: white;
  --corners-opacity: 50%;
  --corners-size: 10px;
  --corners-width: .1em;
  --corners-color: whitesmoke;
  --player-window-radius: 6px;
  --pading-logo-front: 30px;
  --corner-radius: .1rem;
  --front-logo-shadow-color: #121212b3;
  --header-info-page: 17vw;
  --header-feat-works: 17vw;
  --header-photo: 17vw;
  --header-news: 19em;
  --header-number: 1.2em;
  --header-number-mobile: 18px;
  --front-logo-shadow: 50px;
  --text-bg: #e1e1e1;
  --logo-width: 16vw;
  --text-label: #212121;
  --radius-player: 15px;
  flex-flow: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
  transition: opacity .3s linear;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.video-card {
  flex-flow: column;
  display: flex;
}

.video-card:hover {
  background-color: #fff;
}

.video-card-visual {
  border-radius: var(--thumb-radius);
  object-fit: cover;
  justify-content: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.video-card-visual__img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.video-card-visual__img._9-16 {
  aspect-ratio: 4 / 5;
}

.video-card-visual__video {
  opacity: 0;
  height: 100%;
  padding: 0;
  transition: opacity .2s;
  position: absolute;
}

.bunny-player {
  pointer-events: none;
  color: #fff;
  isolation: isolate;
  background-color: #050505;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100svh;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translateX(0);
}

.bunny-player__before {
  align-self: center;
  padding-top: 62.5%;
  position: absolute;
}

.bunny-player__interface {
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  inset: 0%;
}

.bunny-player__time {
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.bunny-player__toggle-mute {
  cursor: pointer;
  width: 1.5em;
  height: 1.5em;
}

.bunny-player__toggle-fullscreen {
  cursor: pointer;
  width: 1.4em;
  height: 1.4em;
}

.bunny-player__interface-btns {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  align-items: center;
  margin-left: 1em;
  display: flex;
}

.bunny-player__placeholder {
  object-fit: cover;
  border-radius: .8rem;
  max-width: 80%;
  max-height: 70%;
  margin-bottom: 15px;
  position: relative;
  transform: translate(0, -1.2rem);
}

.bunny-player__placeholder.full {
  object-fit: contain;
  border-radius: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin-bottom: 0;
  transform: none;
}

.bunny-player__timeline-progress {
  pointer-events: none;
  background-color: #fff;
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateX(-100%);
}

.bunny-player__video {
  border-radius: .8rem;
  justify-content: center;
  align-items: center;
  max-width: 80%;
  max-height: 70%;
  margin-bottom: 28px;
  padding-bottom: 0;
  padding-right: 0;
  display: block;
  position: absolute;
  transform: translate(0, -1.2rem);
}

.bunny-player__video.full {
  border-radius: 0;
  max-width: 100%;
  max-height: 100%;
  margin-bottom: 0;
  transform: none;
}

.bunny-player__text {
  font-family: var(--vcr);
  font-variation-settings: "slnt" 0;
  letter-spacing: -.05em;
  white-space: nowrap;
  font-feature-settings: "case";
  margin-bottom: 0;
  font-size: .685rem;
  font-weight: 400;
}

.bunny-player__playpause {
  pointer-events: auto;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 70%;
  max-width: 80%;
  height: 100%;
  max-height: 70%;
  margin-bottom: 28px;
  display: flex;
  position: absolute;
  transform: translate(0, -1.2rem);
}

.bunny-player__playpause.full {
  width: 100%;
  max-width: none;
  max-height: none;
  margin-bottom: 0;
  transform: none;
}

.bunny-player__fullscreen-scale-svg {
  display: block;
}

.bunny-player__big-btn {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 8em;
  padding: 2em;
  display: flex;
  position: relative;
}

.bunny-player__volume-mute-svg, .bunny-player__fullscreen-shrink-svg {
  display: none;
}

.bunny-player__timeline-bg {
  background-color: #ffffff1a;
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
}

.bunny-player__timeline-bar {
  border-radius: 1em;
  width: 100%;
  height: 15%;
  position: absolute;
  overflow: hidden;
}

.bunny-player__interface-bottom {
  z-index: 3;
  width: 100%;
  padding-top: 15px;
  padding-bottom: var(--padding-blackbox);
  grid-column-gap: .685rem;
  grid-row-gap: .685rem;
  pointer-events: auto;
  padding-right: calc(var(--padding-blackbox)  + 10px);
  padding-left: calc(var(--padding-blackbox)  + 10px);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
  inset: auto 0% 0%;
}

.bunny-player__volume-up-svg {
  display: block;
}

.bunny-player__timeline {
  cursor: pointer;
  flex: 1;
  align-items: center;
  height: 1em;
  margin-left: .5em;
  margin-right: .5em;
  display: flex;
  position: relative;
}

.bunny-player__pause-svg {
  display: none;
}

.bunny-player__interface-fade {
  opacity: .65;
  background-image: linear-gradient(#0000, #0009 50%, #000);
  width: 100%;
  height: 20%;
  position: absolute;
  inset: auto 0% 0%;
}

.bunny-player__timeline-buffered {
  opacity: .25;
  pointer-events: none;
  background-color: #fff;
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateX(-100%);
}

.bunny-player__loading-svg {
  width: 6em;
}

.bunny-player__dark {
  opacity: .1;
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
}

.bunny-player__timeline-handle {
  pointer-events: none;
  border-radius: 1em;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)scale(0);
}

.bunny-player__loading {
  opacity: 0;
  visibility: hidden;
  justify-content: center;
  align-items: center;
  margin-bottom: 28px;
  display: flex;
  position: absolute;
  transform: translate(0, -1.2rem);
}

.bunny-player__loading.full {
  margin-bottom: 0;
  transform: none;
}

.bunny-player__interface-projectname {
  justify-content: center;
  align-items: stretch;
  display: flex;
  position: relative;
}

.progressive-blur_wrap {
  z-index: 4;
  pointer-events: none;
  height: 12vw;
  min-height: 10rem;
  position: fixed;
  inset: 0% 0% auto;
  overflow: clip;
}

.progressive-blur_panel {
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  padding: 0;
  position: absolute;
  -webkit-mask: linear-gradient(#0000 10%, #000 20% 40%, #0000 50%);
  mask: linear-gradient(#0000 10%, #000 20% 40%, #0000 50%);
}

.progressive-blur_panel.is-4 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(#0000 10%, #000 30% 40%, #0000 60%);
  mask: linear-gradient(#0000 10%, #000 30% 40%, #0000 60%);
}

.progressive-blur_panel.is-3 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(#0000 0%, #000 20% 30%, #0000 50%);
  mask: linear-gradient(#0000 0%, #000 20% 30%, #0000 50%);
}

.progressive-blur_panel.is-7 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(#0000 40%, #000 60% 70%, #0000 90%);
  mask: linear-gradient(#0000 40%, #000 60% 70%, #0000 90%);
}

.progressive-blur_panel.is-6 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(#0000 30%, #000 50% 60%, #0000 80%);
  mask: linear-gradient(#0000 30%, #000 50% 60%, #0000 80%);
}

.progressive-blur_panel.is-5 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(#0000 20%, #000 40% 50%, #0000 70%);
  mask: linear-gradient(#0000 20%, #000 40% 50%, #0000 70%);
}

.progressive-blur_panel.is-8 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(#0000 50%, #000 70% 80%, #0000 100%);
  mask: linear-gradient(#0000 50%, #000 70% 80%, #0000 100%);
}

.progressive-blur_panel.is-9 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(#0000 60%, #000 80% 90%, #0000 100%);
  mask: linear-gradient(#0000 60%, #000 80% 90%, #0000 100%);
}

.progressive-blur_panel.is-10 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  backdrop-filter: blur(calc(var(--blur) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))));
  -webkit-mask: linear-gradient(#0000 70%, #000 90%, #0000 100%);
  mask: linear-gradient(#0000 70%, #000 90%, #0000 100%);
}

.progressive-blur_panel.is-2 {
  -webkit-backdrop-filter: blur(calc(var(--blur) / var(--ratio)));
  backdrop-filter: blur(calc(var(--blur) / var(--ratio)));
  -webkit-mask: linear-gradient(#0000 0%, #000 10% 20%, #0000 40%);
  mask: linear-gradient(#0000 0%, #000 10% 20%, #0000 40%);
}

.progressive-blur_panel.is-1 {
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  -webkit-mask: linear-gradient(#000 0% 10%, #0000 30%);
  mask: linear-gradient(#000 0% 10%, #0000 30%);
}

.bunny-bg__playpause {
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 4vw;
  right: 4vw;
}

.bunny-bg__pause-svg {
  display: none;
}

.bunny-bg__placeholder {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

.bunny-bg__loading-svg {
  width: 6em;
}

.bunny-bg {
  filter: grayscale();
  pointer-events: none;
  color: #fff;
  isolation: isolate;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  transform: translateX(0);
}

.bunny-bg.home {
  filter: grayscale(0%);
}

.bunny-bg__video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  padding-right: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.bunny-bg__btn {
  -webkit-backdrop-filter: blur(1em);
  backdrop-filter: blur(1em);
  cursor: pointer;
  background-color: #6464644d;
  border: 1px solid #ffffff1a;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  padding: .8125em;
  display: flex;
  position: relative;
}

.bunny-bg__loading {
  opacity: 0;
  visibility: hidden;
  background-color: #00000054;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.text-category-label {
  font-family: var(--vcr);
  color: #000;
  font-variation-settings: "slnt" 0;
  text-transform: uppercase;
  font-feature-settings: "case", "kern";
  justify-content: center;
  align-items: center;
  font-size: .8em;
  font-weight: 500;
  line-height: 1em;
}

.text-category-label.feat {
  font-family: var(--mono);
  color: #fff;
  font-size: .85em;
}

.media {
  border-radius: var(--thumb-radius);
  width: 100%;
  position: relative;
}

.aspect-ratio {
  padding-top: 66.66%;
}

.cover-media {
  border-radius: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.cover-placeholder {
  text-align: center;
  border-radius: inherit;
  background-color: #80808026;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1em;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  container-type: inline-size;
}

.cover-placeholder__p {
  opacity: .2;
  color: var(--text-color);
  font-variation-settings: "wght" 540;
  text-transform: uppercase;
  word-spacing: -3px;
  margin-bottom: 0;
  font-family: Slussen Mono VF, Arial, sans-serif;
  font-size: 3cqw;
  display: none;
}

.cover-video, .cover-image {
  object-fit: cover;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.filter-btn {
  grid-column-gap: .35em;
  grid-row-gap: .35em;
  border-radius: var(--menu-button-radius);
  min-width: 150px;
  height: 32px;
  font-family: var(--menu-font);
  color: #fff;
  font-variation-settings: "wght" 650;
  letter-spacing: -.015em;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: #0000;
  justify-content: flex-start;
  align-items: flex-start;
  padding: .35em 25px 0 .5em;
  font-size: .95em;
  font-weight: 600;
  line-height: 1em;
  text-decoration: none;
  display: flex;
}

.filter-btn:hover {
  color: #000;
  background-color: #fff;
}

.filter-group {
  flex-flow: column;
  display: flex;
}

.filter-list__item {
  justify-content: center;
  align-items: center;
  width: 25%;
  display: flex;
}

.filter-list__item._9-16 {
  padding-left: 5%;
  padding-right: 5%;
}

.reset-btn {
  outline-offset: -2px;
  color: #c90f0f;
  appearance: none;
  background-color: #c90f0f0d;
  border-radius: 10em;
  outline: 2px solid #c90f0f;
  padding: .65em 1.25em;
  font-size: 1.5em;
}

.filter-buttons {
  z-index: 5;
  grid-column-gap: .4em;
  grid-row-gap: .4em;
  mix-blend-mode: exclusion;
  flex-flow: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: center;
  align-self: center;
  place-items: stretch start;
  display: flex;
  position: fixed;
  top: 50px;
}

.bunny-player__close-btn {
  cursor: pointer;
  width: 32px;
  height: 32px;
  position: relative;
  top: -2px;
  right: -2px;
}

.filter-list {
  box-sizing: border-box;
  grid-row-gap: 60px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 40px .5% 220px;
  display: flex;
}

.svg-25 {
  display: flex;
}

.list {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  margin-top: 80px;
  padding-left: 0;
  display: flex;
}

.metrica-container {
  z-index: 2;
  width: 100%;
  height: 15px;
  margin-top: var(--padding-global);
  mix-blend-mode: normal;
  justify-content: space-between;
  display: flex;
  position: relative;
}

.line-metrica {
  box-sizing: content-box;
  background-color: var(--alt-text-color);
  border-radius: 1px;
  width: 1.5px;
  overflow: hidden;
}

.div-block-24 {
  width: 100%;
  padding-right: var(--padding-global);
  padding-left: var(--padding-global);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translate(0);
}

.svg-27 {
  display: flex;
}

.svg-43 {
  width: 102%;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.background-video {
  background-color: #151515;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: 100svh;
  display: flex;
  position: fixed;
  inset: 0%;
}

.trigger-logo {
  width: 100%;
  height: 0;
  position: relative;
  top: 3px;
}

.logo {
  flex-flow: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  display: flex;
  position: sticky;
  top: 0%;
}

.svg-45 {
  padding: 1px;
}

.padding-logo {
  pointer-events: none;
}

.padding-logo.pages {
  margin-top: 0;
}

.img-slider__thumb {
  aspect-ratio: 16 / 9;
  opacity: .4;
  pointer-events: auto;
  cursor: pointer;
  border: .15rem solid #fff3;
  border-radius: .4rem;
  justify-content: center;
  align-items: center;
  width: 12rem;
  transition: border-color .2s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.img-slider__thumb:hover {
  border-color: #fff6;
}

.img-slider__thumb.is--current {
  opacity: 1;
  outline-offset: 0px;
  border-width: .15rem;
  border-color: #fff;
  outline: 3px #fff;
  justify-content: center;
  align-items: center;
  display: flex;
}

.img-slider {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  border-radius: .5em;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100svh;
  display: none;
  position: relative;
}

.img-slider__nav {
  z-index: 3;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  pointer-events: none;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  max-width: 95svh;
  display: flex;
  position: absolute;
  bottom: 3vh;
}

.slider-thumb__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

.img-slide {
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  grid-area: 1 / 1 / -1 / -1;
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
  position: relative;
  overflow: hidden;
}

.img-slide.is--current {
  opacity: 1;
  pointer-events: auto;
}

.img-slider__list {
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
  overflow: hidden;
}

.link-block {
  width: 100%;
  height: 100%;
  position: absolute;
}

.svg-46 {
  padding: 1px;
  display: flex;
}

.img-slider__mini {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  align-items: center;
  display: flex;
}

.progressive-blur {
  z-index: 4;
  pointer-events: none;
  isolation: isolate;
  contain: paint;
  width: 100%;
  height: 15em;
  transform-style: preserve-3d;
  position: fixed;
  inset: 0 0 auto;
  overflow: hidden;
  transform: translateZ(0);
}

.progressive-blur__layer {
  width: 100%;
  height: 100%;
  position: absolute;
}

.progressive-blur__layer.is--1 {
  -webkit-backdrop-filter: blur(.09375em);
  backdrop-filter: blur(.09375em);
  -webkit-mask: linear-gradient(to top, #0000 50%, #000 62.5% 75%, #0000 87.5%);
  mask: linear-gradient(to top, #0000 50%, #000 62.5% 75%, #0000 87.5%);
}

.progressive-blur__layer.is--2 {
  -webkit-backdrop-filter: blur(.1875em);
  backdrop-filter: blur(.1875em);
  -webkit-mask: linear-gradient(to top, #0000 62.5%, #000 75% 87.5%, #0000 100%);
  mask: linear-gradient(to top, #0000 62.5%, #000 75% 87.5%, #0000 100%);
}

.progressive-blur__layer.is--3 {
  -webkit-backdrop-filter: blur(.375em);
  backdrop-filter: blur(.375em);
  -webkit-mask: linear-gradient(to top, #0000 75%, #000 87.5% 100%);
  mask: linear-gradient(to top, #0000 75%, #000 87.5% 100%);
}

.progressive-blur__layer.is--4 {
  -webkit-backdrop-filter: blur(.75em);
  backdrop-filter: blur(.75em);
  -webkit-mask: linear-gradient(to top, #0000 82%, #000 92% 100%);
  mask: linear-gradient(to top, #0000 82%, #000 92% 100%);
}

.progressive-blur__layer.is--5 {
  -webkit-backdrop-filter: blur(1.5em);
  backdrop-filter: blur(1.5em);
  -webkit-mask: linear-gradient(to top, #0000 88%, #000 100%);
  mask: linear-gradient(to top, #0000 88%, #000 100%);
}

.logo-page {
  z-index: 8;
  padding-top: var(--padding-global);
  padding-right: var(--padding-global);
  mix-blend-mode: exclusion;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  place-content: space-between flex-start;
  place-items: flex-end end;
  display: flex;
  position: fixed;
  inset: 0% 0% auto auto;
}

.navbar-logo-fixed {
  width: 65px;
  display: flex;
}

.home-overlay {
  z-index: 3;
  opacity: 0;
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  background-color: #000000bf;
  display: flex;
  position: absolute;
  inset: 0%;
}

.no-wrap {
  white-space: nowrap;
}

.text-project-player {
  font-family: var(--mono);
  color: #fff;
  letter-spacing: -.02px;
  word-spacing: -5px;
  font-size: 1.1em;
}

.text-client-player {
  font-family: var(--titles-font);
  color: #fff;
  font-size: 1.1em;
  font-weight: 700;
}

.video-slider {
  background-color: #121212;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.video-right-arrow {
  z-index: 3;
  width: 30%;
  height: 100%;
  padding-right: var(--padding-blackbox);
  cursor: e-resize;
  mix-blend-mode: exclusion;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  inset: 0% 0% 0% auto;
}

.video-right-arrow:hover {
  opacity: 1;
}

.video-right-arrow.video {
  width: 15%;
}

.video-left-arrow {
  z-index: 3;
  width: 30%;
  height: 100%;
  padding-left: var(--padding-blackbox);
  cursor: w-resize;
  mix-blend-mode: exclusion;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  inset: 0% auto 0% 0%;
}

.video-left-arrow:hover {
  opacity: 1;
}

.video-left-arrow.video {
  width: 15%;
}

.video-slide-item {
  pointer-events: none;
  text-align: center;
  vertical-align: middle;
  background-color: #eee;
}

.bunny-player-gallery {
  pointer-events: none;
  color: #fff;
  isolation: isolate;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translateX(0);
}

.video-num-container {
  z-index: 3;
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  mix-blend-mode: exclusion;
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: relative;
  transform: translate(0, -1.2rem);
}

.loader__logo-wrap {
  justify-content: center;
  align-items: center;
  width: 22em;
  height: 8em;
  display: flex;
  position: relative;
}

.loader__bg {
  background-color: #121212;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.loader__bg-bar {
  z-index: 1;
  transform-origin: 0%;
  width: 100%;
  height: .1em;
  transform-style: preserve-3d;
  background-color: #f5f5f5;
  position: absolute;
  inset: auto 0% 0%;
  transform: scale3d(0, 1, 1);
}

.loader__text-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 3.5em;
}

.loader__text-el {
  font-family: var(--mono);
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: -.25em;
  padding-bottom: .25em;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1em;
  position: absolute;
}

.loader__container {
  z-index: 2;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.loader {
  z-index: 100;
  color: #fff;
  width: 100%;
  height: 100dvh;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
}

.loader__logo-item {
  width: 100%;
  position: absolute;
}

.loader__logo-item.is--top {
  clip-path: inset(0 100% 0 0);
}

.loader__logo-item.is--base {
  opacity: .2;
}

.loader__logo-img {
  width: 100%;
  padding: 1px;
  display: block;
}

.article {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-flow: column;
  display: flex;
}

.text-header {
  color: #000;
  margin-top: 0;
  margin-bottom: 10px;
  font-family: KMR Apparat, Arial, sans-serif;
}

.page-content {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  flex-flow: column;
  width: 100%;
  padding-top: 140px;
  padding-bottom: 220px;
  display: flex;
  position: relative;
}

.text-block-2 {
  font-family: var(--text);
  display: flex;
}

.list-2 {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-flow: column;
  display: flex;
}

.list-3 {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  color: #000;
  flex-flow: column;
  padding-left: 20px;
  list-style-type: disc;
  display: flex;
}

.list-4 {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  color: #000;
  flex-flow: column;
  padding-left: 12px;
  display: flex;
}

.list-5 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  color: #000;
  flex-flow: column;
  padding-left: 12px;
  list-style-type: disc;
  display: flex;
}

.list-item-3 {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  list-style-type: disc;
}

.link-block-2 {
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}

.logo-for-footer {
  mix-blend-mode: screen;
  flex-flow: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  display: flex;
}

.svg-48 {
  display: none;
}

.logo-wrapper {
  flex-flow: column;
  display: flex;
}

.logo-wrapper.mobile {
  width: 58px;
}

.svg-49 {
  padding: 1px;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.menu-btn {
  border-top-left-radius: var(--menu-button-radius);
  border-top-right-radius: var(--menu-button-radius);
  border-bottom-left-radius: var(--menu-button-radius);
  border-bottom-right-radius: var(--menu-button-radius);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  height: 28px;
  font-family: var(--menu-font);
  color: #fff;
  font-variation-settings: "wght" 620;
  text-transform: uppercase;
  appearance: none;
  white-space: nowrap;
  background-color: #ffffff1f;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: .45em;
  padding-left: .6em;
  padding-right: .6em;
  font-size: .9em;
  font-weight: 600;
  line-height: 1em;
  text-decoration: none;
  display: flex;
}

.menu-btn:hover {
  color: var(--text-color);
  background-color: #fff;
}

.menu-btn:active {
  color: var(--text-color);
  background-color: #fff;
  border-color: #fff;
}

.menu-btn.w--current {
  color: #000;
  background-color: #fff;
}

.menu-buttons {
  z-index: 5;
  grid-column-gap: .35em;
  grid-row-gap: .35em;
  mix-blend-mode: exclusion;
  flex-flow: row;
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: space-between;
  place-items: stretch start;
  display: flex;
}

.text-btn-number {
  font-family: var(--mono);
  letter-spacing: -.05em;
  font-feature-settings: "case";
  font-size: .9em;
  font-weight: 400;
  line-height: .8em;
  position: relative;
  top: .1em;
}

.brand-wrapper {
  display: flex;
}

.navbar-brand-box {
  border-top-left-radius: var(--menu-button-radius);
  border-top-right-radius: var(--menu-button-radius);
  border-bottom-left-radius: var(--menu-button-radius);
  border-bottom-right-radius: var(--menu-button-radius);
  font-family: var(--menu-font);
  color: #fff;
  font-variation-settings: "wght" 650;
  letter-spacing: -.02em;
  white-space: nowrap;
  appearance: none;
  border: .12em solid #fff;
  justify-content: flex-start;
  align-items: center;
  padding-left: 1em;
  padding-right: 1em;
  font-size: 1.3em;
  font-weight: 600;
  line-height: 1em;
  text-decoration: none;
  display: flex;
}

.navbar-brand-box:hover {
  border-color: var(--background-color);
  background-color: var(--text-color);
  color: var(--background-color);
}

.svg-50 {
  display: none;
}

.button {
  border-radius: var(--menu-button-radius);
  font-family: var(--menu-font);
  color: #000;
  text-transform: uppercase;
  background-color: #0000;
  border: .12em solid #000;
  font-size: 1em;
  font-weight: 600;
}

.button:hover {
  color: #fff;
  background-color: #000;
}

.standard-btn {
  border-top-left-radius: var(--menu-button-radius);
  border-top-right-radius: var(--menu-button-radius);
  border-bottom-left-radius: var(--menu-button-radius);
  border-bottom-right-radius: var(--menu-button-radius);
  width: 220px;
  height: 32px;
  font-family: var(--menu-font);
  color: #fff;
  font-variation-settings: "wght" 650;
  letter-spacing: -.015em;
  text-transform: uppercase;
  white-space: nowrap;
  mix-blend-mode: exclusion;
  appearance: none;
  border: .1em solid #fff;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: .35em;
  padding-left: .5em;
  padding-right: .5em;
  font-size: 1em;
  font-weight: 600;
  line-height: 1em;
  text-decoration: none;
  display: flex;
}

.standard-btn:hover {
  background-color: #212121;
}

.standard-btn:active {
  color: #000;
  background-color: #fff;
  border-color: #fff;
}

.standard-btn.w--current {
  color: #000;
  background-color: #fff;
}

.scramble-section {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  display: flex;
}

.scramble-section.u--bg-light {
  background-color: #efeeec;
}

.scramble-heading {
  text-align: center;
  letter-spacing: -.03em;
  text-transform: uppercase;
  max-width: 12em;
  margin: 0 auto;
  font-size: 3em;
  font-weight: 400;
  line-height: .9;
}

.scramble-button {
  color: #131313;
  text-transform: uppercase;
  border: 1px dotted #000;
  border-radius: .3125em;
  padding: .5em 1em;
  font-size: 1em;
  font-weight: 400;
  text-decoration: none;
}

.scramble-button-text {
  margin-bottom: 0;
}

.link {
  color: var(--text-color);
  font-weight: 600;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.big-btn {
  border-top-left-radius: var(--menu-button-radius);
  border-top-right-radius: var(--menu-button-radius);
  border-bottom-left-radius: var(--menu-button-radius);
  border-bottom-right-radius: var(--menu-button-radius);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  min-width: 240px;
  height: 36px;
  font-family: var(--menu-font);
  color: var(--text-color);
  font-variation-settings: "wght" 620;
  text-transform: uppercase;
  appearance: none;
  white-space: nowrap;
  background-color: #0000001f;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  padding-left: .8em;
  padding-right: .8em;
  font-size: 1em;
  font-weight: 600;
  line-height: 1em;
  text-decoration: none;
  display: flex;
}

.big-btn:hover {
  background-color: var(--text-color);
  color: #fff;
}

.big-btn.w--current {
  color: #000;
  background-color: #fff;
}

.filter-btn-2 {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  border-top-left-radius: var(--menu-button-radius);
  border-top-right-radius: var(--menu-button-radius);
  border-bottom-left-radius: var(--menu-button-radius);
  border-bottom-right-radius: var(--menu-button-radius);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  min-width: 120px;
  height: 28px;
  font-family: var(--menu-font);
  color: #fff;
  font-variation-settings: "wght" 620;
  text-transform: uppercase;
  appearance: none;
  white-space: nowrap;
  background-color: #ffffff1f;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: .45em;
  padding-left: .6em;
  padding-right: .6em;
  font-size: .9em;
  font-weight: 600;
  line-height: 1em;
  text-decoration: none;
  display: flex;
}

.filter-btn-2:hover {
  color: var(--text-color);
  background-color: #fff;
}

.filter-btn-2:active {
  color: var(--text-color);
  background-color: #fff;
  border-color: #fff;
}

.filter-btn-2.w--current {
  color: #000;
  background-color: #fff;
}

@media screen and (max-width: 991px) {
  body {
    --text-color: #151515;
    --menu-font: "Slussen VF", Arial, sans-serif;
    --text: "Slussen VF", Arial, sans-serif;
    --footer: #151515;
    --padding-global: 1rem;
    --button-font: "KMR Apparat", Arial, sans-serif;
    --thumb-radius: .4em;
    --background-color: whitesmoke;
    --mono: "DM Mono", Arial, sans-serif;
    --header: 5rem;
    --header-mobile: 18vw;
    --navbar-space: 32px;
    --navbar-mobile-space: var(--navbar-space);
    --padding-blackbox: 1.2rem;
    --alt-text-color: white;
    --titles-font: "KMR Apparat", Arial, sans-serif;
    --menu-button-radius: .25em;
    --vcr: "VCR OSD Mono", Arial, sans-serif;
    --header-prod-services: 15vw;
    --header-our-house: 15vw;
    --thumb-radius-photo: .05em;
    --transparency: white;
    --corners-opacity: 50%;
    --corners-size: 10px;
    --corners-width: .1em;
    --corners-color: whitesmoke;
    --player-window-radius: 6px;
    --pading-logo-front: 30px;
    --corner-radius: .1rem;
    --front-logo-shadow-color: #121212b3;
    --header-info-page: 17vw;
    --header-feat-works: 17vw;
    --header-photo: 17vw;
    --header-news: 19em;
    --header-number: 1.2em;
    --header-number-mobile: 18px;
    --front-logo-shadow: 50px;
    --text-bg: #e1e1e1;
    --logo-width: 16vw;
    --text-label: #212121;
    --radius-player: 15px;
  }

  .navbar-logo {
    display: flex;
  }

  .nav-menu {
    align-self: stretch;
  }

  .list-item {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .footer-container {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 40% 60%;
    overflow: hidden;
  }

  .footer-btn-group {
    width: 100%;
  }

  .navbar-logo-mobile.w--current {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: flex;
  }

  .link-menu-moile {
    font-size: 8vw;
  }

  .news-article {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .article-text {
    padding-bottom: 6px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .body {
    background-color: var(--background-color);
  }

  .filter-section-selected {
    grid-column-gap: 16px;
    grid-row-gap: 10px;
    background-color: #fff;
    place-content: center;
    align-items: center;
    height: 160px;
    padding-bottom: 20px;
    padding-left: 8%;
    padding-right: 8%;
  }

  .more-works-list-button-space {
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .navbar-space {
    height: var(--navbar-mobile-space);
  }

  .close-button {
    justify-content: center;
    align-self: stretch;
    align-items: center;
  }

  .header-text {
    color: #fff;
    display: none;
  }

  .section-footer {
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }

  .featured-project {
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .vimeo-thumb {
    display: none;
  }

  .button-filter {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    font-family: var(--button-font);
    color: var(--text-color);
    letter-spacing: -.01em;
    text-transform: uppercase;
    word-spacing: -3px;
    background-color: #0000;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    font-size: 1.8em;
    font-weight: 700;
    line-height: .8em;
    display: flex;
  }

  .button-filter.display-all {
    display: none;
  }

  .button-filter.display-campaign {
    word-spacing: -5px;
  }

  .head-section {
    mix-blend-mode: difference;
    position: sticky;
    top: 0;
  }

  .button-filter-selected {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    font-family: var(--button-font);
    letter-spacing: -.01rem;
    text-transform: uppercase;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 1.8em;
    font-weight: 700;
    line-height: .8em;
    display: flex;
  }

  .gallery-project.cat-editorial.cat-photo {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .project-list {
    flex-direction: column;
    align-items: stretch;
  }

  .thumb-list-horizontal {
    margin-top: -20px;
    margin-bottom: -20px;
    padding: 10px;
  }

  .project-list-container {
    left: 20px;
  }

  .article-link {
    flex: 1;
  }

  .text-front-about {
    width: auto;
    font-size: 16px;
  }

  .head-section-sticky {
    position: sticky;
    top: 0;
  }

  .link-section-footer {
    flex: 1;
  }

  .header-page-section {
    height: 100svh;
  }

  .background-video-animation {
    flex-flow: column;
    overflow: hidden;
  }

  .video-animation-element {
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 6px;
    width: 120vw;
  }

  .team-container {
    grid-column-gap: 160px;
    grid-row-gap: 160px;
  }

  .footer-credits-link {
    font-size: 15px;
  }

  .service-item {
    width: 75%;
  }

  .nav-moblie {
    justify-content: space-between;
    width: 100%;
  }

  .navbar-mobile {
    z-index: 10;
    mix-blend-mode: difference;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 24px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    position: fixed;
    inset: 0% 0% auto;
  }

  .open-button {
    align-self: stretch;
  }

  .display-section {
    display: none;
  }

  .menu-icon-arrow-mobile {
    margin-left: 4px;
    font-family: MD System VF;
    font-size: 40px;
    line-height: 1em;
    top: -1.6vw;
  }

  .carrusel {
    display: none;
  }

  .img-carrusel {
    border-radius: 4px;
  }

  .carrusel-mobile {
    width: 100%;
    height: 90vh;
    padding-bottom: 60px;
    display: none;
  }

  .thumb-carrusel-mobile {
    aspect-ratio: auto;
    border-radius: 4px;
    justify-content: center;
    align-self: stretch;
    align-items: flex-start;
    width: 33.33vw;
    padding-left: 5px;
    padding-right: 5px;
  }

  .filter-categories {
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: flex;
  }

  .filter-old, .vimeo-special-16-9 {
    display: none;
  }

  .vimeo-special-9-16 {
    aspect-ratio: 9 / 16;
    object-fit: cover;
    justify-content: center;
    align-items: center;
    height: 115%;
    min-height: 115%;
    display: block;
  }

  .text-block {
    text-align: left;
    font-size: 17px;
  }

  .mid-section-carrousel {
    overflow: hidden;
  }

  .legal-links {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .services-list {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .about-text-container {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .about-section-carrussel-2 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .text-service-element {
    width: auto;
  }

  .services-container {
    grid-column-gap: 160px;
    grid-row-gap: 160px;
  }

  .text-banner {
    font-size: 14px;
  }

  .team {
    width: 100%;
    max-width: 100%;
  }

  .mid-section-team {
    display: none;
  }

  .mid-section-team-mobile {
    filter: grayscale();
    display: block;
  }

  .team-section {
    grid-column-gap: 160px;
    grid-row-gap: 160px;
  }

  .filter-section-archive {
    flex: 1;
  }

  .thumb-list-photo {
    margin-top: -20px;
    margin-bottom: -20px;
    padding: 10px;
  }

  .footer-content-group {
    width: 100%;
  }

  .text-filter {
    color: #fff;
    display: none;
  }

  .filter-background {
    padding-top: 22px;
    padding-left: 18px;
    padding-right: 20px;
  }

  .header-social-media, .social-media {
    display: none;
  }

  .filter-display {
    justify-content: flex-start;
    align-self: stretch;
    align-items: center;
    display: flex;
  }

  .text-project-list-bold {
    font-size: 18px;
    font-weight: 500;
  }

  .text-project-list {
    font-size: 18px;
    font-weight: 300;
  }

  .svg-logo-nav {
    width: 55px;
  }

  .button-banner {
    width: 45%;
  }

  .whatdo-section {
    grid-column-gap: 160px;
    grid-row-gap: 160px;
  }

  .service-row {
    padding-left: 0%;
  }

  .service-item-no-line {
    width: 75%;
  }

  .icon-hot {
    width: auto;
    font-size: 16px;
  }

  .description-list-container {
    display: none;
  }

  .text-description {
    width: auto;
    font-size: 16px;
  }

  .team-block {
    grid-template-columns: 30% 65%;
  }

  .cases {
    padding-top: 18em;
  }

  .cases-list-container {
    flex: 1;
  }

  .section-footer-sticky {
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }

  .latest-works-section {
    grid-row-gap: 15vh;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "line1 line1 line1 line1 . ."
                         ". line2 line2 line2 line2 line2"
                         "line3 line3 line3 . . ."
                         ". . line4 line4 line4 ."
                         ". line5 line5 line5 . ."
                         ". . line6 line6 line6 line6"
                         "line7 line7 line7 line7 line7 ."
                         ". line8 line8 line8 line8 ."
                         ". . line9 line9 line9 line9"
                         "line10 line10 line10 . . ."
                         ". . line11 line11 line11 line11"
                         ". line12 line12 line12 . .";
  }

  .portfolio-gird {
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
  }

  .header-wrapper {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .new-releases {
    display: flex;
  }

  .services-block {
    grid-template-columns: 30% 65%;
  }

  .clients-block {
    grid-template-columns: 30% 70%;
  }

  .banner-button {
    width: 50%;
  }

  .slides-container {
    display: block;
  }

  .hover-zone-wrapper {
    display: flex;
  }

  .section-background-sticky {
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }

  .filter-section-mobile {
    flex-flow: column;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    transform: translate(0, 160px);
  }

  .images-container {
    display: block;
  }

  .hover-zone-container {
    display: flex;
  }

  .button-show-filter {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    width: 100%;
    height: 100%;
    font-family: var(--button-font);
    color: var(--text-color);
    text-transform: uppercase;
    text-shadow: none;
    background-color: #0000;
    justify-content: center;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1.6em;
    font-style: italic;
    font-weight: 500;
    line-height: 1em;
    display: flex;
  }

  .button-hide-filter {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    width: 100%;
    height: 100%;
    font-family: var(--button-font);
    color: var(--text-color);
    text-transform: uppercase;
    text-shadow: 0 0 10px #fff;
    background-color: #0000;
    justify-content: center;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1.6em;
    font-style: italic;
    font-weight: 500;
    line-height: 1em;
    display: none;
  }

  .filter-tap {
    background-image: linear-gradient(0deg, #fff 5%, #fffffff2 18%, #fffc 38%, #ffffff80 60%, #ffffff26 85%, #fff0);
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    display: flex;
  }

  .header-block {
    width: 95%;
  }

  .button-filter-number {
    font-family: var(--text);
    font-feature-settings: "case";
    padding-top: 1px;
    font-size: .45em;
    font-weight: 600;
    line-height: 1em;
  }

  .front-logos {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    align-items: stretch;
    display: flex;
  }

  .play-pause-controls {
    z-index: 2;
    width: 100%;
    height: 100%;
    inset: 0%;
    transform: none;
  }

  .hover-zone-wrapper-2 {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
  }

  .text-detail {
    font-size: 1.2em;
  }

  .text-description-2 {
    font-size: 1.8em;
  }

  .text-data {
    font-size: .65em;
  }

  .site-credits {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .arrow {
    display: none;
  }

  .bunny-bg__playpause {
    bottom: 1em;
    right: 1em;
  }

  .filter-list__item {
    width: 50%;
  }

  .filter-buttons {
    grid-column-gap: .4em;
    grid-row-gap: .4em;
    flex-flow: wrap;
    place-content: flex-start;
  }

  .filter-list {
    padding-left: .8%;
    padding-right: .8%;
  }

  .img-slider__thumb {
    flex: none;
  }

  .img-slider__list {
    width: 100%;
  }

  .logo-page {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    align-items: stretch;
    display: flex;
  }

  .navbar-logo-fixed {
    display: flex;
  }

  .menu-buttons {
    width: 100%;
  }

  .navbar-brand-box {
    flex: 0 auto;
    padding-right: 5em;
  }
}

@media screen and (max-width: 767px) {
  body {
    --text-color: #151515;
    --menu-font: "Slussen VF", Arial, sans-serif;
    --text: "Slussen VF", Arial, sans-serif;
    --footer: #151515;
    --padding-global: 1rem;
    --button-font: "KMR Apparat", Arial, sans-serif;
    --thumb-radius: .25em;
    --background-color: whitesmoke;
    --mono: "DM Mono", Arial, sans-serif;
    --header: 5rem;
    --header-mobile: 18vw;
    --navbar-space: 32px;
    --navbar-mobile-space: var(--navbar-space);
    --padding-blackbox: 1rem;
    --alt-text-color: white;
    --titles-font: "KMR Apparat", Arial, sans-serif;
    --menu-button-radius: .25em;
    --vcr: "VCR OSD Mono", Arial, sans-serif;
    --header-prod-services: 15vw;
    --header-our-house: 15vw;
    --thumb-radius-photo: .05em;
    --transparency: white;
    --corners-opacity: 50%;
    --corners-size: 10px;
    --corners-width: .1em;
    --corners-color: whitesmoke;
    --player-window-radius: 6px;
    --pading-logo-front: 20px;
    --corner-radius: .1rem;
    --front-logo-shadow-color: #121212b3;
    --header-info-page: 17vw;
    --header-feat-works: 17vw;
    --header-photo: 17vw;
    --header-news: 19em;
    --header-number: 1.2em;
    --header-number-mobile: 18px;
    --front-logo-shadow: 50px;
    --text-bg: #e1e1e1;
    --logo-width: 16vw;
    --text-label: #212121;
    --radius-player: 15px;
  }

  .nav-menu {
    flex-direction: column;
    padding-bottom: 30px;
    padding-left: 0;
  }

  .footer-container {
    grid-template-columns: 45% 55%;
  }

  .footer-btn-group {
    width: 100%;
  }

  .news-article {
    padding-left: 3px;
    padding-right: 3px;
  }

  .text-front-about {
    letter-spacing: -.01em;
  }

  .nav-moblie {
    align-items: stretch;
    display: flex;
  }

  .open-button {
    align-self: center;
  }

  .menu-mobile {
    display: none;
  }

  .text-block {
    font-size: 17px;
  }

  .about-section-carrussel-2 {
    padding-top: 20px;
  }

  .text-banner {
    letter-spacing: -.01em;
  }

  .footer-content-group {
    width: 100%;
  }

  .icon-hot, .text-description {
    letter-spacing: -.01em;
  }

  .nav-desktop {
    display: none;
  }

  .header-ok {
    font-size: 4.5rem;
  }

  .text-header-intro {
    font-size: 2rem;
  }

  .project-element.photo {
    width: 85%;
  }

  .header-block {
    width: 90%;
  }

  .video-screen {
    width: 100%;
  }

  .project-name.forplayer.gallery {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }

  .bunny-player__big-btn {
    width: 8em;
  }

  .bunny-bg.home {
    display: block;
  }

  .filter-group {
    padding-top: 0;
  }

  .filter-buttons {
    width: 100%;
    padding-right: var(--padding-global);
    padding-bottom: var(--padding-global);
    padding-left: var(--padding-global);
    position: fixed;
    inset: auto 0% 0%;
  }

  .filter-list {
    grid-row-gap: 50px;
    padding-left: .7%;
    padding-right: .7%;
  }

  .img-slider__thumb {
    border-radius: .25rem;
    width: 5rem;
  }

  .img-slider__nav {
    flex-flow: wrap;
  }

  .logo-page {
    display: none;
  }

  .menu-btn {
    flex: 0 auto;
    padding-right: 5em;
  }

  .menu-buttons {
    width: 100%;
  }

  .navbar-brand-box {
    flex: 0 auto;
    padding-right: 5em;
  }

  .svg-51 {
    width: 100%;
    height: 100%;
  }

  .standard-btn, .big-btn, .filter-btn-2 {
    flex: 0 auto;
    padding-right: 5em;
  }
}

@media screen and (max-width: 479px) {
  body {
    --text-color: #151515;
    --menu-font: "Slussen VF", Arial, sans-serif;
    --text: "Slussen VF", Arial, sans-serif;
    --footer: #151515;
    --padding-global: 1em;
    --button-font: "Kmr Apparat", Arial, sans-serif;
    --thumb-radius: .25em;
    --background-color: whitesmoke;
    --mono: "DM Mono", Arial, sans-serif;
    --header: 5rem;
    --header-mobile: 1.8rem;
    --navbar-space: 32px;
    --navbar-mobile-space: var(--navbar-space);
    --padding-blackbox: 1rem;
    --alt-text-color: white;
    --titles-font: "KMR Apparat", Arial, sans-serif;
    --menu-button-radius: .25em;
    --vcr: "VCR OSD Mono", Arial, sans-serif;
    --header-prod-services: 15vw;
    --header-our-house: 15vw;
    --thumb-radius-photo: .05em;
    --transparency: white;
    --corners-opacity: 50%;
    --corners-size: 10px;
    --corners-width: .1em;
    --corners-color: whitesmoke;
    --player-window-radius: 6px;
    --pading-logo-front: 10px;
    --corner-radius: .1rem;
    --front-logo-shadow-color: #121212b3;
    --header-info-page: 17vw;
    --header-feat-works: 17vw;
    --header-photo: 17vw;
    --header-news: 19em;
    --header-number: 1.2em;
    --header-number-mobile: 18px;
    --front-logo-shadow: 50px;
    --text-bg: #e1e1e1;
    --logo-width: 16vw;
    --text-label: #212121;
    --radius-player: 15px;
  }

  .nav-menu {
    flex-direction: column;
  }

  .list-item {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }

  .footer {
    height: 100vh;
  }

  .footer-container {
    grid-template-rows: auto auto auto auto auto;
    grid-template-columns: 1fr;
  }

  .footer-legal {
    flex-flow: column;
    justify-content: space-between;
    display: flex;
  }

  .footer-logo, .footer-credits {
    width: 100%;
  }

  .footer-btn-group {
    justify-content: flex-start;
    align-items: baseline;
    width: 100%;
  }

  .link-menu-moile {
    font-size: 12vw;
  }

  .news-article {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    padding-left: 0;
    padding-right: 0;
  }

  .article-text {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .button-standard {
    border-width: .12em;
  }

  .label-filter {
    color: var(--text-color);
    padding-left: 0;
    padding-right: 10px;
    font-size: 12px;
    line-height: 1em;
  }

  .filter-section-selected {
    grid-column-gap: 14px;
    grid-row-gap: 8px;
    height: 160px;
    padding: 5px;
  }

  .more-works-container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .header-branded {
    font-size: var(--header-mobile);
    letter-spacing: -.01em;
    display: none;
  }

  .header-campaigns, .header-editorial, .header-music-videos {
    font-size: var(--header-mobile);
    letter-spacing: -.01em;
  }

  .more-works-list-button-space {
    margin-left: 10px;
    margin-right: 10px;
  }

  .content, .editorial, .campaign, .music-videos {
    position: static;
  }

  .about {
    width: 100%;
  }

  .left-arrow {
    padding-left: 0;
  }

  .right-arrow {
    padding-right: 0;
  }

  .img {
    border-radius: 3px;
  }

  .header {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    text-transform: uppercase;
    flex-flow: wrap;
    justify-content: flex-start;
  }

  .section-footer {
    flex-flow: column;
    overflow: hidden;
  }

  .project-link {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }

  .text-project-bold {
    font-size: .9em;
  }

  .text-project-bold.feat {
    font-size: 1em;
  }

  .text-project {
    font-size: .9em;
  }

  .text-project.feat {
    font-size: 1em;
  }

  .project-info {
    grid-column-gap: .125em;
    grid-row-gap: .125em;
    flex-flow: row;
    grid-template-columns: 90% 10%;
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
  }

  .project-info.feat {
    grid-template-rows: auto;
    grid-template-columns: 90% 10%;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .vimeo-thumb {
    display: none;
  }

  .trigger {
    top: 5px;
  }

  .button-filter {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    font-family: var(--button-font);
    color: var(--text-color);
    letter-spacing: -.02em;
    text-transform: uppercase;
    word-spacing: -2px;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    font-size: 1.8em;
    font-weight: 700;
    line-height: .8em;
    display: flex;
  }

  .button-filter-selected {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    opacity: .25;
    height: auto;
    font-family: var(--button-font);
    color: var(--text-color);
    letter-spacing: -.02px;
    text-transform: uppercase;
    word-spacing: -2px;
    background-color: #0000;
    border-width: 0;
    border-radius: 0;
    justify-content: center;
    align-items: flex-start;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 1.8em;
    font-weight: 700;
    line-height: .8em;
    display: flex;
  }

  .head-page {
    mix-blend-mode: normal;
  }

  .gallery-project.cat-campaign.cat-photo {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }

  .project-list-link {
    overflow: hidden;
  }

  .thumb-list-horizontal {
    align-items: center;
    height: 10vw;
  }

  .img-3-2 {
    border-radius: 4px;
  }

  .img-2-3 {
    aspect-ratio: 3 / 4;
  }

  .link-section-footer {
    border-left-style: none;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .header-page-container {
    padding: 0;
  }

  .text-block-underline {
    text-underline-offset: 2px;
    text-decoration-thickness: .08em;
  }

  .label-category {
    border-width: .1em;
    line-height: 1.1em;
  }

  .right-group {
    z-index: 2;
  }

  .up {
    width: 100%;
  }

  .portfolio {
    padding-top: 0;
  }

  .footer-adress-space {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .text-block-white {
    font-size: 1.8rem;
  }

  .footer-credits-link {
    font-size: 13px;
    display: none;
  }

  .service-item {
    width: 80%;
  }

  .nav-moblie {
    display: flex;
  }

  .menu-icon-arrow-mobile {
    font-size: 32px;
    top: -1.6vw;
  }

  .thumb-carrusel {
    margin-left: 6px;
    margin-right: 6px;
  }

  .img-carrusel {
    border-radius: 3px;
  }

  .filter-old {
    display: none;
  }

  .text-block {
    font-size: 15px;
  }

  .legal-links {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }

  .close-button-work {
    min-width: 30px;
  }

  .services-list {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-columns: 1fr;
  }

  .about-section-carrussel {
    flex-flow: column;
  }

  .footer-social {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .footer-adress, .footer-section {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }

  .title-services-group {
    grid-column-gap: 0%;
    grid-row-gap: 0%;
    grid-template-columns: 20% 80%;
  }

  .text-list-category {
    top: 3px;
  }

  .mid-section-team {
    display: none;
  }

  .mid-section-team-mobile {
    display: flex;
  }

  .photo {
    position: static;
  }

  .header-photo {
    font-size: var(--header-mobile);
    letter-spacing: -.01em;
  }

  .filter-section-archive {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: wrap;
    flex: 0 auto;
    width: 100%;
    display: none;
  }

  .img-1-1 {
    border-radius: var(--thumb-radius);
  }

  .footer-icon {
    font-weight: 300;
  }

  .icon-list {
    font-size: 20px;
    font-weight: 300;
  }

  .header-front-info-desktop {
    font-size: 20vw;
  }

  .block-title {
    margin-bottom: 40px;
    display: flex;
  }

  .group-carrousel-2 {
    grid-template-columns: 50vw;
    grid-auto-columns: 50vw;
  }

  .thumb-list-photo {
    align-items: center;
    height: 10vw;
  }

  .images {
    width: 100%;
  }

  .footer-links {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .footer-content-group {
    justify-content: flex-start;
    align-items: baseline;
    width: 100%;
  }

  .text-filter {
    display: flex;
  }

  .text-list-num {
    top: 3px;
  }

  .filter-background {
    display: none;
    position: relative;
  }

  .header-social-media {
    font-size: var(--header-mobile);
    letter-spacing: -.01em;
  }

  .filter-display {
    padding-left: 10px;
  }

  .text-project-list-bold {
    text-transform: uppercase;
    word-spacing: -4px;
    font-size: .95em;
    font-weight: 600;
    line-height: 1em;
  }

  .text-project-list {
    text-transform: uppercase;
    word-spacing: -4px;
    flex-flow: wrap;
    font-size: .95em;
    font-weight: 400;
    line-height: 1em;
    display: flex;
  }

  .button-banner {
    border-width: .12em;
    flex: 0 auto;
    width: 100%;
  }

  .service-row {
    padding-left: 0%;
  }

  .service-item-no-line {
    width: 80%;
  }

  .text-sub-logo-bold {
    font-size: 1em;
  }

  .team-block {
    flex-flow: column;
    grid-template-rows: auto;
    grid-template-columns: 100%;
    display: grid;
  }

  .text-jp {
    white-space: nowrap;
  }

  .text-icon-bcn {
    white-space: nowrap;
    top: 3px;
  }

  .button-small {
    border-width: .12em;
    padding-top: 0;
  }

  .cases {
    padding-top: 17em;
  }

  .cases-list-container {
    overflow: hidden;
  }

  .filter-hover-wrapper {
    display: none;
  }

  .button-footer {
    border-width: .1em;
    line-height: 1.1em;
  }

  .footer-contact {
    flex-flow: column;
    height: 100%;
    padding-top: 100px;
  }

  .section-footer-sticky {
    grid-row-gap: 10px;
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
  }

  .latest-works-section {
    grid-column-gap: 1.2%;
    grid-row-gap: 15vh;
    grid-template-columns: 15.66% 15.66% 15.66% 15.66% 15.66% 15.66%;
    grid-template-areas: "line1 line1 line1 line1 . ."
                         ". line2 line2 line2 line2 line2"
                         "line3 line3 line3 line3 . ."
                         ". . line4 line4 line4 line4"
                         ". line5 line5 line5 line5 ."
                         ". . line6 line6 line6 line6"
                         "line7 line7 line7 line7 line7 ."
                         ". . line8 line8 line8 ."
                         ". line9 line9 line9 line9 ."
                         "line10 line10 line10 . . ."
                         ". line11 line11 line11 line11 line11"
                         "line12 line12 line12 line12 . .";
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .header-title {
    font-size: 1.1rem;
  }

  .button-mini {
    border-width: .1em;
    line-height: 1.1em;
  }

  .icon-button {
    padding-bottom: 2px;
  }

  .nav-desktop {
    display: none;
  }

  .portfolio-gird {
    grid-column-gap: 1%;
    flex-flow: column;
    padding-left: 1%;
    padding-right: 1%;
  }

  .header-wrapper {
    width: 100%;
  }

  .header-ok {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    letter-spacing: -.02em;
    font-size: 2.6rem;
  }

  .header-number {
    font-size: .85rem;
  }

  .header-number.all {
    margin-top: 0;
    font-size: .9em;
  }

  .text-header-intro {
    width: auto;
    font-size: 1.5rem;
  }

  .element-carrusel {
    margin-left: 6px;
    margin-right: 6px;
  }

  .services-block, .clients-block {
    flex-flow: column;
    grid-template-rows: auto;
    grid-template-columns: 100%;
    display: grid;
  }

  .banner-button {
    flex-flow: column;
    width: 100%;
  }

  .vimeo-thumb-16-9 {
    display: none;
  }

  .text-separator {
    font-variation-settings: "wght" 400;
    text-transform: uppercase;
    flex-flow: wrap;
    font-weight: 400;
    display: none;
  }

  .ratio-9-16 {
    aspect-ratio: 9 / 14;
    width: 100%;
  }

  .section-background-sticky {
    flex-flow: column;
  }

  .project-element {
    width: 96%;
  }

  .project-element.photo {
    width: 85%;
  }

  .text-project-number {
    flex-flow: wrap;
    order: 1;
    font-size: 10px;
    line-height: 1em;
    display: none;
  }

  .filter-section-mobile {
    background-color: #0000;
    background-image: linear-gradient(0deg, #fff 78%, #ffffffa6 90%, #fff0);
    position: fixed;
    inset: auto 0% 0%;
    transform: none;
  }

  .button-show-filter {
    grid-row-gap: 10px;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .button-hide-filter {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    display: none;
  }

  .filter-tap {
    padding-top: 2px;
  }

  .header-block {
    width: 100%;
  }

  .button-filter-number {
    font-family: var(--text);
    font-variation-settings: "wght" 520;
    letter-spacing: 0;
    font-feature-settings: "case";
    padding-top: 0;
    font-size: .45em;
    font-weight: 500;
    line-height: 1.2em;
  }

  .front-logos {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    --text-color: #151515;
    --menu-font: "Slussen VF", Arial, sans-serif;
    --text: "Slussen VF", Arial, sans-serif;
    --footer: #151515;
    --padding-global: 1em;
    --button-font: "Kmr Apparat", Arial, sans-serif;
    --thumb-radius: .25em;
    --background-color: whitesmoke;
    --mono: "DM Mono", Arial, sans-serif;
    --header: 5rem;
    --header-mobile: 1.8rem;
    --navbar-space: 32px;
    --navbar-mobile-space: var(--navbar-space);
    --padding-blackbox: 1rem;
    --alt-text-color: white;
    --titles-font: "KMR Apparat", Arial, sans-serif;
    --menu-button-radius: .25em;
    --vcr: "VCR OSD Mono", Arial, sans-serif;
    --header-prod-services: 15vw;
    --header-our-house: 15vw;
    --thumb-radius-photo: .05em;
    --transparency: white;
    --corners-opacity: 50%;
    --corners-size: 10px;
    --corners-width: .1em;
    --corners-color: whitesmoke;
    --player-window-radius: 6px;
    --pading-logo-front: 10px;
    --corner-radius: .1rem;
    --front-logo-shadow-color: #121212b3;
    --header-info-page: 17vw;
    --header-feat-works: 17vw;
    --header-photo: 17vw;
    --header-news: 19em;
    --header-number: 1.2em;
    --header-number-mobile: 18px;
    --front-logo-shadow: 50px;
    --text-bg: #e1e1e1;
    --logo-width: 16vw;
    --text-label: #212121;
    --radius-player: 15px;
  }

  .controls {
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .total-time-bar {
    margin-bottom: 2px;
  }

  .text-timmer {
    padding-top: 1px;
    padding-left: 3px;
    padding-right: 3px;
    font-size: .75em;
    transform: translate(50%, -8px);
  }

  .button-icon {
    border-width: .1em;
    line-height: 1.1em;
  }

  .text-timmer-total {
    font-size: .95em;
  }

  .window {
    padding-left: 5px;
    padding-right: 5px;
  }

  .time-bar {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding-left: 12px;
  }

  .text-detail {
    font-size: 1.15em;
  }

  .icon-link {
    line-height: .8em;
  }

  .text-wrapper {
    grid-column-gap: 16%;
    grid-row-gap: 30px;
    flex-flow: wrap;
  }

  .text-description-2 {
    font-variation-settings: "wght" 400;
    letter-spacing: -.015em;
    font-size: 1.6em;
    line-height: 1.2em;
  }

  .project-info-2 {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 20px 16px 40px;
  }

  .text-data {
    margin-left: 0;
  }

  .site-credits {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }

  .header-group {
    grid-column-gap: .6em;
    grid-row-gap: .6em;
  }

  .category-wrapper {
    z-index: 2;
  }

  .header-number-wrapper {
    margin-top: 0;
  }

  .vimeo-player__iframe {
    aspect-ratio: 9 / 16;
    object-fit: cover;
    width: 100%;
  }

  .vimeo-player__placeholder {
    width: 100%;
  }

  .bunny-player__interface-btns {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .bunny-player__placeholder {
    max-width: 90%;
    margin-bottom: 12px;
  }

  .bunny-player__video {
    max-width: 90%;
    max-height: 70%;
    margin-bottom: 25px;
  }

  .bunny-player__playpause {
    margin-bottom: 25px;
  }

  .bunny-player__interface-bottom {
    padding-right: calc(var(--padding-blackbox)  + 5px);
    padding-left: calc(var(--padding-blackbox)  + 5px);
  }

  .bunny-player__timeline {
    margin-left: 0;
    margin-right: 0;
  }

  .bunny-player__loading {
    margin-bottom: 25px;
  }

  .progressive-blur_wrap.filter {
    z-index: auto;
    position: absolute;
  }

  .text-category-label {
    font-size: .6em;
    top: 3px;
  }

  .filter-btn {
    height: 28px;
    padding-left: .5em;
    padding-right: .5em;
    font-size: .9em;
    position: relative;
  }

  .filter-list__item {
    padding-right: 0%;
  }

  .filter-buttons {
    background-image: linear-gradient(#000, #fff);
  }

  .filter-list {
    padding-left: 1%;
    padding-right: 1%;
  }

  .img-slider__thumb {
    width: 6rem;
  }

  .img-slider__nav {
    grid-column-gap: .4rem;
    grid-row-gap: .4rem;
  }

  .svg-47 {
    padding: 1px;
  }

  .logo-page {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    --text-color: #151515;
    --menu-font: "Slussen VF", Arial, sans-serif;
    --text: "Slussen VF", Arial, sans-serif;
    --footer: #151515;
    --padding-global: 1em;
    --button-font: "Kmr Apparat", Arial, sans-serif;
    --thumb-radius: .25em;
    --background-color: whitesmoke;
    --mono: "DM Mono", Arial, sans-serif;
    --header: 5rem;
    --header-mobile: 1.8rem;
    --navbar-space: 32px;
    --navbar-mobile-space: var(--navbar-space);
    --padding-blackbox: 1rem;
    --alt-text-color: white;
    --titles-font: "KMR Apparat", Arial, sans-serif;
    --menu-button-radius: .25em;
    --vcr: "VCR OSD Mono", Arial, sans-serif;
    --header-prod-services: 15vw;
    --header-our-house: 15vw;
    --thumb-radius-photo: .05em;
    --transparency: white;
    --corners-opacity: 50%;
    --corners-size: 10px;
    --corners-width: .1em;
    --corners-color: whitesmoke;
    --player-window-radius: 6px;
    --pading-logo-front: 10px;
    --corner-radius: .1rem;
    --front-logo-shadow-color: #121212b3;
    --header-info-page: 17vw;
    --header-feat-works: 17vw;
    --header-photo: 17vw;
    --header-news: 19em;
    --header-number: 1.2em;
    --header-number-mobile: 18px;
    --front-logo-shadow: 50px;
    --text-bg: #e1e1e1;
    --logo-width: 16vw;
    --text-label: #212121;
    --radius-player: 15px;
    display: none;
  }

  .navbar-logo-fixed {
    width: 65px;
  }

  .home-overlay {
    display: none;
  }

  .video-right-arrow {
    padding-right: 0;
  }

  .video-left-arrow {
    padding-left: 0;
  }

  .page-content {
    width: 100%;
  }

  .logo-for-footer {
    justify-content: space-between;
    align-items: center;
  }

  .menu-btn {
    flex: 0 auto;
    padding-right: 3em;
  }

  .menu-buttons {
    width: 100%;
    display: flex;
    position: relative;
  }

  .navbar-brand-box, .standard-btn, .big-btn, .filter-btn-2 {
    flex: 0 auto;
    padding-right: 3em;
  }
}

#w-node-a269e220-627d-482f-6b8c-563e2b7020ee-e379e8fd {
  grid-area: line1;
}

#w-node-ec5b8e07-f7ad-4a54-f4f5-9136ebf7594d-e379e8fd {
  grid-area: line2;
}

#w-node-_562dea5c-30d5-7779-1007-246b91e0d76b-e379e8fd {
  grid-area: line3;
}

#w-node-_38a6fd2c-a9f1-9218-bcce-d3a67a836e33-e379e8fd {
  grid-area: line4;
}

#w-node-f820ed00-08e2-9aff-cc85-0fd8bb752e2d-e379e8fd {
  grid-area: line5;
}

#w-node-ca852629-f776-b62b-abac-d2b06d6eb8ed-e379e8fd {
  grid-area: line6;
}

#w-node-fb799fd8-68ae-6b7a-22f7-754a8024b8f5-e379e8fd {
  grid-area: line7;
}

#w-node-_427c486c-7a81-0074-13ca-156520e5dac0-e379e8fd {
  grid-area: line8;
}

#w-node-_0ca0a582-575a-0f1e-68e5-af25fca5c295-e379e8fd {
  grid-area: line9;
}

#w-node-_919e291a-30c3-811d-37ef-6578ec7b63ea-e379e8fd {
  grid-area: line10;
}

#w-node-f701f2e0-2b23-a6fe-4430-21ea90c0f905-e379e8fd {
  grid-area: line11;
}

#w-node-_081ad75b-aac8-da0c-bbdc-6b33b239bae4-e379e8fd {
  grid-area: line12;
}

#w-node-_68db6839-1862-2914-5fdc-0dee97d124da-5a3104e7 {
  grid-area: 2 / 1 / 3 / 2;
}

#w-node-c93ed8af-725e-feaa-9a7a-6f115a3104f7-5a3104e7 {
  grid-area: 2 / 2 / 3 / 3;
}

#w-node-c93ed8af-725e-feaa-9a7a-6f115a310508-5a3104e7 {
  grid-area: 2 / 3 / 3 / 4;
}

#w-node-_3d098c2e-78e3-a7bf-491f-fb28d2f0b1b5-5a3104e7 {
  grid-area: 2 / 4 / 3 / 5;
}

#w-node-_96e84f23-c36e-427c-6707-a1e31559904e-15599034 {
  justify-self: end;
}

#w-node-dee54170-8f3f-5af6-7819-d6152633192d-ab3e3132 {
  grid-area: _3;
  place-self: start end;
}

#w-node-_82c50d72-b3d5-b6eb-2b17-a4971e714487-e379e97c, #w-node-_7e5db4fa-4a66-f2fe-e225-e19f547bc395-e379e97c, #w-node-_32b32221-f7f1-d7ca-e28f-94574e5b1802-e379e97c, #w-node-bbd4593c-24a4-928d-f8d2-5b0dc4440d99-e379e97c, #w-node-c5678659-7ba0-b77e-7817-83b0fc6f1e61-e379e97c, #w-node-_829a312e-8c61-ac90-d352-bd3bdfdaa93b-e379e97c, #w-node-_5006cc2d-5901-7ffb-de33-ec588d59bead-e379e97c, #w-node-d492f2cb-dd8d-2609-efba-421bc0067033-e379e97c, #w-node-cff6d7f0-7def-c983-d7a6-c5e0d45369c6-e379e97c, #w-node-_5dd19eff-6d6a-e6d8-1945-6c8f5b950c50-e379e97c, #w-node-_14d81441-b8ab-d725-5340-9018d6783cb1-e379e97c, #w-node-c06cf0d3-fb94-f1e4-aa9e-05abb4e69830-e379e97c, #w-node-e7a27894-049c-2a40-81d8-cafef642ed9d-e379e97c, #w-node-_89ae92d7-c066-9603-12f6-47de79232fd6-e379e97c, #w-node-_6d3e3230-e860-2c7d-c25c-6b91bdad8a35-e379e97c, #w-node-a47b8908-be28-c347-1199-74e1a374640b-e379e97c, #w-node-_90b484a4-b936-78b7-d757-450d014d60c4-e379e97c, #w-node-b5e5c5b5-5aaa-e2cb-4528-377d75ba43b1-e379e97c, #w-node-ce8e382f-dd55-3c1c-13ff-2794ba6da4d2-e379e97c, #w-node-_6370b231-3999-c80f-ef52-853d9ee6b0f1-e379e97c, #w-node-_0740d9fe-58b1-8e11-fa88-d96ca62a7388-e379e97c, #w-node-_05a451c5-569e-c4e3-0e17-803fa12f9e8a-e379e97c {
  grid-area: 1 / 2 / 2 / 2;
}

#w-node-ab0519af-bfdc-c31f-477a-617a22e7194f-e379e97c {
  grid-area: 1 / 3 / 2 / 2;
}

#w-node-_9ebbe47d-b215-d9c8-8815-0da6f1d9db1b-e379e97c {
  grid-area: Area-2;
  justify-self: stretch;
}

#w-node-_84b4f5cb-5766-760c-0736-fdb635cbca7c-2ac96b68 {
  place-self: start;
}

#w-node-d59422cd-1fcd-a7ab-678e-14ba2ac96b72-2ac96b68 {
  justify-self: stretch;
}

@media screen and (max-width: 991px) {
  #w-node-a269e220-627d-482f-6b8c-563e2b7020ee-e379e8fd {
    grid-area: line1;
  }

  #w-node-c93ed8af-725e-feaa-9a7a-6f115a3104f7-5a3104e7 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-c93ed8af-725e-feaa-9a7a-6f115a310508-5a3104e7 {
    grid-area: 1 / 2 / 2 / 3;
  }

  #w-node-_3d098c2e-78e3-a7bf-491f-fb28d2f0b1b5-5a3104e7, #w-node-_318c1259-325e-7e6d-8de8-9075832c0432-e379e97c {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-_96cea9da-557a-965b-1604-46ed4de2454e-e379e97c {
    grid-area: 1 / 2 / 2 / 3;
  }

  #w-node-_7a96ceb4-2fa6-a03d-83b1-2df89528c044-e379e97c {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-_0ab9a15e-1dfa-aa46-5703-10a612273e96-e379e97c {
    grid-area: 1 / 2 / 2 / 3;
  }

  #w-node-_22f833a6-572d-bb90-dfe9-d23a73481887-e379e97c {
    grid-area: 2 / 2 / 3 / 3;
  }

  #w-node-ca63af21-8ebe-4e4a-e48e-0ffa08a74339-e379e97c {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-ca8774e4-f3e3-4b22-07bc-2538c412c5e9-e379e97c {
    grid-area: 1 / 2 / 2 / 3;
  }

  #w-node-_7d3d69df-58d9-24d4-d755-89afe4acf17a-e379e97c {
    grid-area: 2 / 2 / 3 / 3;
  }
}

@media screen and (max-width: 479px) {
  #w-node-c93ed8af-725e-feaa-9a7a-6f115a3104f7-5a3104e7, #w-node-c93ed8af-725e-feaa-9a7a-6f115a310508-5a3104e7, #w-node-_3d098c2e-78e3-a7bf-491f-fb28d2f0b1b5-5a3104e7, #w-node-_318c1259-325e-7e6d-8de8-9075832c0432-e379e97c, #w-node-_96cea9da-557a-965b-1604-46ed4de2454e-e379e97c, #w-node-_7a96ceb4-2fa6-a03d-83b1-2df89528c044-e379e97c, #w-node-_0ab9a15e-1dfa-aa46-5703-10a612273e96-e379e97c, #w-node-_22f833a6-572d-bb90-dfe9-d23a73481887-e379e97c, #w-node-ca63af21-8ebe-4e4a-e48e-0ffa08a74339-e379e97c, #w-node-ca8774e4-f3e3-4b22-07bc-2538c412c5e9-e379e97c, #w-node-_7d3d69df-58d9-24d4-d755-89afe4acf17a-e379e97c {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}


@font-face {
  font-family: 'VCR OSD Mono';
  src: url('../fonts/vcrosdmono-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KMR Apparat';
  src: url('../fonts/KMR-Apparat-Book.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KMR Apparat';
  src: url('../fonts/KMR-Apparat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KMR Apparat';
  src: url('../fonts/KMR-Apparat-Heavy.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KMR Apparat';
  src: url('../fonts/KMR-Apparat-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KMR Apparat';
  src: url('../fonts/KMR-Apparat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KMR Apparat';
  src: url('../fonts/KMR-Apparat-Medium.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KMR Apparat';
  src: url('../fonts/KMR-Apparat-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Dot Long';
  src: url('../fonts/Dot-Long.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'New Heterodox Mono';
  src: url('../fonts/new-heterodox-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Pixel Square';
  src: url('../fonts/GeistPixel_Square.p.38oedokznorgu.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chivo Mono';
  src: url('../fonts/Chivo-Mono.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Univers LT Pro';
  src: url('../fonts/Univers-LTPro-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ft Calhern';
  src: url('../fonts/ft-calhern-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ft Calhern';
  src: url('../fonts/ft-calhern-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Univers LT Pro';
  src: url('../fonts/Univers-LTPro.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Pixel Circle';
  src: url('../fonts/GeistPixel_Circle.p.3zurfnrwei_77.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'T-Star TW';
  src: url('../fonts/T-StarTW-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sometype Mono';
  src: url('../fonts/SometypeMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/DMMono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Serial B Neue';
  src: url('../fonts/SerialBNeueTRIAL-Black.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Serial B Neue';
  src: url('../fonts/SerialBNeueTRIAL-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Serial B Neue';
  src: url('../fonts/SerialBNeueTRIAL-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Serial B Neue';
  src: url('../fonts/SerialBNeueTRIAL-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Serial B Neue';
  src: url('../fonts/SerialBNeueTRIAL-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Serial B Neue';
  src: url('../fonts/SerialBNeueTRIAL-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Serial B Neue';
  src: url('../fonts/SerialBNeueTRIAL-Heavy.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Slussen VF';
  src: url('../fonts/Slussen-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Slussen Mono VF';
  src: url('../fonts/Slussen-Mono-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Uncut Plan 8';
  src: url('../fonts/UncutPlan8-Variable.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mono MMM 5';
  src: url('../fonts/monoMMM_5.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Supply Sans';
  src: url('../fonts/PPSupplySans-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}