* {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  -moz-osx-font-smoothing: grayscale; 
  -webkit-font-smoothing: antialiased; 
  -moz-font-smoothing: antialiased; 
  font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: 'helvetica-medium';
  src: url('../fonts/helvetica.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'pitch';
  src: url('../fonts/pitch-sans-medium.woff2') format('woff');
  font-weight: normal;
  font-style: normal;
}

html {
  min-height: 0vw;
  text-size-adjust: 100%;
}

:root {
  --red: rgb(255, 39, 0);
  --shadow-orange: rgb(245, 67, 10);
  --black: rgb(34, 34, 34);
  --white: rgb(229, 229, 229);
  --blurry-white: rgba(229, 229, 229, 0.2);
  --blurry-black: rgba(0, 0, 0, 0.2);
  --outer-image-margin: calc(1.5 * var(--outer-margin));


  /* Plyr */
  --plyr-color-main: var(--white);
  --plyr-video-background: var(--black);
  --plyr-video-controls-background: rgba(0, 0, 0, 0);
  --plyr-video-control-background-hover: rgba(0, 0, 0, 0);
  --plyr-control-spacing: var(--outer-margin);
  --plyr-control-padding: var(--outer-margin);
  --plyr-video-control-color: var(--white);
  --plyr-font-family: "pitch", monospace;
  --plyr-font-size-base: var(--pitch-25);
  --plyr-font-size-small: var(--pitch-25);
  --plyr-font-size-large: var(--pitch-25);
  --plyr-font-size-xlarge: var(--pitch-25);
  --plyr-font-size-badge: var(--pitch-25);
  --plyr-range-thumb-height: 0px;
  --plyr-range-track-height: 3px;
  --plyr-range-fill-background: var(--white);
  --plyr-video-range-track-background: var(--black);
  --plyr-tooltip-background: rgba(0, 0, 0, 0);
  --plyr-tooltip-color: var(--white);
  --plyr-tooltip-padding: 0;
  --plyr-tooltip-shadow: none;
  --plyr-control-padding: 0 0 0 0;
  --plyr-control-radius: 0;
  --plyr-control-icon-size: calc(1.1 * var(--pitch-25));
}

@media screen and (min-width: 700px)  {
  html {
    font-size: calc(4px + .9vw);
  }
  :root {
    --outer-margin: 1rem;
    --space-l: 15rem;
    --space-m: 7.8rem;
    --space-s: 6rem;
    --space-xs: 3.3rem;
    --border-radius: .4rem;
    --shadow: 0rem 0rem 2vw var(--shadow-orange);
    --helvetica-45: 2rem;
    --helvetica-45-letter-spacing: -.1rem;
    --helvetica-45-line-height: 1.044;
    --helvetica-45-shaddow: 0rem 0rem .5rem var(--shadow-orange);
    --helvetica-76: 3.377rem;
    --helvetica-76-letter-spacing: -.168rem;
    --helvetica-76-line-height: 0.815;
    --pitch-60: 2.666rem;
    --pitch-60-line-height: 1.083;
    --pitch-30: 1.4rem;
    --pitch-30-line-height: 1.1666;
    --pitch-25: 1.2rem;
    --pitch-25-line-height: 1.2;
  }

}
@media screen and (max-width: 699px)  {
  html {
    font-size: calc(4px + .75vw);
  }
  :root {
    --outer-margin: 2rem;
    --section-row-margin: 15rem;
    --space-l: 32rem;
    --space-m: 15rem;
    --space-s: var(--space-m);
    --space-xs: 5rem;
    --border-radius: .8rem;
    --shadow: 0rem 0rem 3.5vw var(--shadow-orange);
    --helvetica-45: 3.8rem;
    --helvetica-45-letter-spacing: -.19rem;
    --helvetica-45-line-height: 1;
    --helvetica-45-shaddow: 0rem 0rem .8rem var(--shadow-orange);
    --helvetica-76: 6.41rem;
    --helvetica-76-letter-spacing: -.168rem;
    --helvetica-76-line-height: 1.1;
    --pitch-60: 3.6rem;
    --pitch-60-line-height: 1.2;
    --pitch-30: 2.8rem;
    --pitch-30-line-height: 1.1;
    --pitch-25: var(--pitch-30);
    --pitch-25-line-height: var(--pitch-30-line-height);

  }
}

body {
  margin: 0;
  padding: 0;
  font-family: 'pitch', monospace;
  font-size: var(--text-size);
  line-height: var(--text-line-height);
  color: var(--white);
  background-color: var(--black);
  overflow-x: clip;
}

.disabled-scroll {
  overflow: hidden;
}

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

a {
  color: var(--black);
  text-decoration: none;
}

p:first-child {
  margin-top: 0 !important;
}

p:last-child {
  margin-bottom: 0 !important;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-family: "helvetica-medium", "helvetica", sans-serif;
}

.cursor--play {
  cursor: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='100' height='43' viewBox='0 0 857 371' style='enable-background:new 0 0 857 371;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23222222;%7D .st1%7Bfill:%23E4E4E4;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M805.71,371H51.29C22.96,371,0,348.04,0,319.71V51.29C0,22.96,22.96,0,51.29,0h754.42 C834.04,0,857,22.96,857,51.29v268.42C857,348.04,834.04,371,805.71,371z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st1' d='M93.2,80.85h93.2c14.99,0,27.22,2.17,36.69,6.51c9.47,4.34,16.76,9.76,21.89,16.27 c5.13,6.51,8.63,13.61,10.5,21.3c1.87,7.69,2.81,14.79,2.81,21.3c0,6.51-0.94,13.56-2.81,21.16c-1.88,7.6-5.38,14.65-10.5,21.15 c-5.13,6.51-12.43,11.89-21.89,16.12c-9.47,4.24-21.7,6.36-36.69,6.36h-56.22v81.07H93.2V80.85z M130.19,180.86h54.14 c4.14,0,8.38-0.59,12.72-1.78c4.34-1.18,8.33-3.11,11.98-5.77c3.65-2.66,6.61-6.21,8.88-10.65c2.27-4.44,3.4-10.01,3.4-16.72 c0-6.9-0.99-12.62-2.96-17.16c-1.97-4.54-4.64-8.14-7.99-10.8c-3.36-2.66-7.2-4.48-11.54-5.47c-4.34-0.98-8.98-1.48-13.91-1.48 h-54.74V180.86z'/%3E%3Cpath class='st1' d='M269.54,80.85h36.98v179.3h107.4v31.95H269.54V80.85z'/%3E%3Cpath class='st1' d='M495.88,80.85h39.35l81.37,211.25h-39.65l-19.82-55.92H472.8l-19.82,55.92h-38.17L495.88,80.85z M482.86,208.08h64.5l-31.66-90.83h-0.89L482.86,208.08z'/%3E%3Cpath class='st1' d='M658.02,209.26L578.73,80.85h42.9l55.92,94.68l55.03-94.68H774l-79,128.41v82.84h-36.98V209.26z'/%3E%3C/g%3E%3C/svg%3E%0A") 50 22, auto;
}

.cursor--plus {
  cursor: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='43' height='43' viewBox='0 0 371 371' style='enable-background:new 0 0 371 371;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23222222;%7D .st1%7Bfill:none;stroke:%23E3E3E3;stroke-width:33;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M337.5,370.75H34c-18.64,0-33.75-15.11-33.75-33.75V33.5C0.25,14.86,15.36-0.25,34-0.25h303.5 c18.64,0,33.75,15.11,33.75,33.75V337C371.25,355.64,356.14,370.75,337.5,370.75z'/%3E%3C/g%3E%3Cg%3E%3Cline class='st1' x1='185.75' y1='84.25' x2='185.75' y2='286.25'/%3E%3Cline class='st1' x1='286.75' y1='185.25' x2='84.75' y2='185.25'/%3E%3C/g%3E%3C/svg%3E%0A") 22 22, auto;
}

menu {
  margin: 0;
  padding: 0;
}

.button {
  line-height: 1;
  text-transform: uppercase;
  display: inline-block;
  user-select: none;
}

.lang-container {
  pointer-events: none; 
}

.backdroped {
  background-color: var(--blurry-white);
  -webkit-backdrop-filter: blur(var(--helvetica-45)) brightness(150%);
  backdrop-filter: blur(var(--helvetica-45)) brightness(150%);
  border-radius: var(--border-radius);
}

.backdroped.h {
  font-family: "helvetica-medium", "helvetica", sans-serif;
  font-size: var(--helvetica-45);
  letter-spacing: var(--helvetica-45-letter-spacing);
}

.backdroped.p {
  font-family: "pitch", monospace;
  font-size: var(--pitch-25);
  line-height: var(--pitch-25-line-height);
}

.button.p {
  text-transform: lowercase;
}

.button.tag.active {
  background-color: var(--blurry-black);
  -webkit-backdrop-filter: blur(var(--helvetica-45)) brightness(60%);
  backdrop-filter: blur(var(--helvetica-45)) brightness(60%);
  color: var(--white);
}

.button.tag.active:not(:first-child)::after{
  content:" ×";
}


.button h1 {
  font-size: var(--helvetica-45);
  letter-spacing: var(--helvetica-45-letter-spacing);
}


.button.social {
  text-transform: lowercase;
}

.backdroped.a {
  cursor: pointer;
  transition: scale 100ms ease-in-out, -webkit-backdrop-filter 100ms ease-in-out, backdrop-filter 100ms ease-in-out;
}

.backdroped.a:hover {
  scale: .97;
  -webkit-backdrop-filter: blur(var(--helvetica-45)) brightness(250%);
  backdrop-filter: blur(var(--helvetica-45)) brightness(250%);
}

.backdroped.a.active:hover {
  -webkit-backdrop-filter: blur(var(--helvetica-45)) brightness(100%);
  backdrop-filter: blur(var(--helvetica-45)) brightness(100%);
}

.fixed {
  position: fixed;
  z-index: 50;
}
.top-left {
  left: var(--outer-margin);
  top: var(--outer-margin);
  z-index: 60;
}
.top-right {
  right: var(--outer-margin);
  top: var(--outer-margin);
  text-align: right;
}

.bottom-right {
  right: var(--outer-margin);
  bottom: var(--outer-margin);
  font-size: 0;
  text-align: right;
}

menu .bottom-right .button {
  margin: calc(var(--outer-margin) / 2) 0 0 calc(var(--outer-margin) / 2);
}

menu .instagram {
  height: calc(var(--helvetica-45)/1.4);
}
menu .instagram .st0 {
  fill:none
}
menu .instagram .st1 {
  fill: var(--black);
}

.lang {
  pointer-events: auto; 
  transition: opacity 300ms ease-in-out;
}
.button:hover .lang, .lang.active {
  opacity: .26;
}
.button .lang:hover {
  opacity: 1;
}

.close-cross {
  height: calc(.7 * var(--helvetica-45));
}

menu .close-cross {
  display: none;
  margin-left: calc(var(--outer-margin) / 4);
}

menu .active .close-cross {
  display: inline-block;
}

.close-cross .st0 {
  fill: none;
  stroke: var(--black);
}

menu .tags {
  display: flex;
  height: 0;
  flex-direction: column;
  align-items: end;
}

menu .active .tags {
  height: auto;
}

menu .a.tag {
  display: block;
  width: fit-content;
  transform: translateX(calc(100% + var(--outer-margin)));
  transition: transform 100ms ease-in-out var(--item-animation-delay-out);
}

menu .active .a.tag {
  transform: translateX(0%);
  transition: transform 100ms ease-in-out var(--item-animation-delay-in);
}


.logo-animation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  background-color: var(--black);
  transition: opacity 300ms ease-in-out;
}

.logo-animation .player {
  object-fit: cover;
  display: none;
}

/* 
.landing-animation {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  font-family: "helvetica-medium", "helvetica", sans-serif;
  font-size: 21vw;
  letter-spacing: -1vw;
  text-align: center;
  text-transform: uppercase;
  background-color: var(--black);
  overflow: clip;
  color: var(--red);
}

.landing-animation div {
  flex: 1;
  filter: url("#shadow2");
} */


.inline-player {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100dvh;
  width: 100vw;
  object-fit: cover;
}

.fullscreen-player {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100vw;
  z-index: 50;
}

.close-fullscreen-player {
  display: none;
  z-index: 55;
}
.close-fullscreen-player.active {
  display: block;
}


.blurry-title {
  font-family: "helvetica-medium", "helvetica", sans-serif;
  color: var(--red);
  font-size: 21vw;
  letter-spacing: -1.1vw;
  line-height: .85;
  text-transform: uppercase;
  text-shadow: var(--shadow);
  user-select: none;
}
.blurry-title span {
  display: inline-block;
}

.landing-headlines {
  padding: calc(90dvh + var(--space-l)) 0 30dvh 0;
  overflow-x: hidden;
}

.landing-headlines .headline {
  width: 100%;
  text-align: center;
}

/* .landing-headlines .headline:not(:last-child){
  margin-bottom: 40dvh;
} */

.landing-headlines .blurry-title {
  font-size: 9vw;
  letter-spacing: -0.6vw;
}

.landing-clients {
  background-color: var(--white);
  color: var(--black);
  padding: var(--space-s) var(--outer-margin) var(--space-m) var(--outer-margin);
}

.landing-section-title {
  font-family: "helvetica-medium", helvetica, sans-serif;
  font-size: var(--helvetica-45);
  line-height: var(--helvetica-45-line-height);
  letter-spacing: var(--helvetica-45-letter-spacing);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
  text-align: center;
}

.landing-clients .grid {
  display: grid;
  row-gap: var(--outer-margin);
}

.landing-projects {
  padding: var(--space-s) 0 var(--space-m) 0;
  background-color: var(--black);
}

.landing-projects-grid img {
  width: 100%;
  object-fit: cover;
}

.landing-projects h3 {
  font-family: "pitch", monospace;
  font-size: var(--pitch-25);
  line-height: var(--pitch-25-line-height);
  color: var(--white);
  text-transform: uppercase;
  margin-top: var(--outer-margin);
}

.landing-description {
  background-color: red;
  color: var(--black);
  font-family: "pitch", monospace;
  font-size: var(--pitch-60);
  line-height: var(--pitch-60-line-height);
  text-align: center;
  padding: var(--space-l) 0 var(--space-l) 0;
  display: flex;
  justify-content: center;
}

.marquee-container {
  position: relative;
  z-index: 10;
}

.marquee-inner {
  white-space: nowrap;
  font-size: 0;
  width: fit-content;
  animation: marquee-inner 5s linear infinite;
}

.marquee-inner > * {
  margin-right: calc(2 * var(--outer-margin));
  display: inline;
}

@keyframes marquee-inner {
  from {transform: translateX(0);}
  to {transform: translateX(-20%);}
}


.about-hero {
  color: var(--white);
  margin: var(--space-m) 0 var(--space-s) 0;
}

.about-manifesto {
  background-color: var(--white);
  color: var(--black);
}

.about-hero, .about-manifesto {
  font-family: "pitch", monospace;
  font-size: var(--pitch-30);
  line-height: var(--pitch-30-line-height);
  text-align: center;
  display: flex;
  justify-content: center;
}

.about-hero ul, .about-manifesto h2 {
  font-family: "helvetica-medium", helvetica, sans-serif;
  font-size: var(--helvetica-45);
  line-height: var(--helvetica-45-line-height);
  letter-spacing: var(--helvetica-45-letter-spacing);
  text-transform: uppercase;
}

.about-manifesto h2 {
  margin-bottom: var(--space-xs);
}

.about-hero ul {
  list-style-type: none;
  margin: 0 0 var(--space-m) 0;
  padding: 0;
}

.about-hero li {
  margin: 0;
  padding: 0;
}

.about-team {
  padding: var(--space-s) 0 var(--space-m) 0
}

.about-team .grid {
  display: grid;
  column-gap: var(--outer-margin);
  row-gap: var(--space-xs);
  padding: var(--space-s) var(--outer-image-margin) 0 var(--outer-image-margin);
  font-family: 'pitch', monospace;
  font-size: var(--pitch-25);
  line-height: var(--pitch-25-line-height);
}

.about-team h3 {
  font-family: 'pitch', monospace;
  font-size: var(--pitch-25);
  line-height: var(--pitch-25-line-height);
  text-transform: uppercase;
}

.about-team img {
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  margin-bottom: calc(var(--outer-margin) / 2);
}

.projects-grid, .landing-projects-grid {
  display: grid;
  gap: var(--outer-margin);
  padding: 0 var(--outer-image-margin) 0 var(--outer-image-margin);
  cursor: pointer;
}

.projects-grid {
  margin: var(--space-l) 0 var(--space-m) 0;
}

.projects-grid .cell {
  position: relative;
}

.projects-grid .cell img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projects-grid .cell .inner {
  position: relative;
  height: 100%;
  width: 100%;
  padding: var(--outer-margin);
  display: block;
  color: var(--white);
  -webkit-backdrop-filter: blur(1rem) brightness(85%);
  backdrop-filter: blur(1rem) brightness(85%);
  opacity: 0;
  transition: opacity 100ms ease-in-out;
  font-size: var(--pitch-25);
  line-height: var(--pitch-25-line-height);
  display: flex;
  flex-direction: column;
}

.projects-grid .cell:hover .inner {
  opacity: 1;
}

.projects-grid .cell .inner h2 {
  font-size: var(--helvetica-45);
  line-height: var(--helvetica-45-line-height);
  letter-spacing: var(--helvetica-45-letter-spacing);
  text-transform: uppercase;
  flex-shrink: 1;
}

.projects-grid .cell .inner .description {
  flex-grow: 1;
}

.projects-grid .cell .inner .tags {
  flex-shrink: 1;
  text-transform: uppercase;
}


.project-header {
  position: fixed;
  z-index: 55;
  right: var(--outer-margin);
  top: var(--outer-margin);
  left: var(--outer-margin);
  color: var(--black);
  display: flex;
  flex-direction: column;
  align-items: end;
}

.project-title {
  font-size: 0;
  display: flex;
  justify-content: end;
}

.project-title > * {
  width: fit-content;
  margin-bottom: calc(var(--outer-margin) / 2);
}

.project-title .button:not(:first-child){
  margin-left: calc(var(--outer-margin) / 2);
}

.project-details {
  font-family: "pitch", monospace;
  font-size: var(--pitch-25);
  line-height: var(--pitch-25-line-height);
  width: fit-content;
  text-align: left;
  overflow-y: scroll;
}

.project-details .title {
  user-select: none;
  cursor: pointer;
}

.project-details .title::after {
  content:" ×";
  position: absolute;
}

.project-details a {
  text-decoration: underline;
}
.project-details a:hover {
  text-decoration: none;
}

.project-details .tags, .project-details .clients {
  text-transform: uppercase;
}

.project-details {
  display: none;
}

.project-header.active .project-details{
  display: block;
}

.project-header.active .project-details-button {
  display: none;
}

.project-details-button:first-letter {
  text-transform: uppercase;
}

.plyr {
  height: 100%;
}

.plyr__poster {
  background-size: cover;
}

.plyr__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  cursor: initial;
}


.plyr__time + .plyr__time::before {
  content: "";
  margin: 0;
}

.player-button {
  font-size: var(--pitch-25);
  padding: 0 var(--outer-margin) 0 var(--outer-margin);
  user-select: none;
  
}

.plyr__control {
  scale: 1;
  transition: scale 100ms ease-in-out;
}
.plyr__control:hover {
  scale: .95;
}

.player-button[data-plyr="play"] {
  width: calc(4.5 * var(--pitch-25));
}
.player-button[data-plyr="mute"] {
  width: calc(5.5 * var(--pitch-25));
}
.player-button[data-plyr="fullscreen"] {
  padding: 0 var(--outer-margin) 0 var(--outer-margin);
}
.player-button[data-plyr="fullscreen"] path, .player-button[data-plyr="fullscreen"] line {
  fill:none;stroke:var(--white);stroke-width:1.5;
}

.player {
  height: 100%;
  object-fit: cover;
}

.slideshow-inner {
  width: fit-content;
  display: flex;
}

.slideshow-slide.text {
  font-family: "pitch", monospace;
  display: flex;
  justify-content: center;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

.slideshow-slide.text .slide-inner {
  text-align: center;
  width: min(40rem, 80%);
  align-self: center;
}

.slideshow-slide.text h2 {
  text-transform: uppercase;
  font-family: "pitch", monospace;
  font-size: var(--pitch-30);
  line-height: var(--pitch-30-line-height);
  margin-bottom: var(--space-xs);
}

.slideshow-slide.text h3 {
  text-transform: uppercase;
  font-size: var(--helvetica-76);
  line-height: var(--helvetica-76-line-height);
  letter-spacing: var(--helvetica-76-letter-spacing);
}

.slideshow-slide.text p {
  margin: var(--space-xs) 0  var(--space-xs) 0;
}

.slideshow-slide.text h3 + p {
  margin-top: 0;
}


.slideshow-controler {
  position: fixed;
  bottom: var(--outer-margin);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0;
  pointer-events: none;
}

.slideshow-controler > * {
  display: inline-block;
  pointer-events: auto;
}

.slideshow-controler button {
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
  text-align: inherit;
  font: inherit;
  border-radius: 0;
  appearance: none;
  cursor: pointer;
}

.slideshow-controler button:hover {
  opacity: .6;
  transition: opacity 200ms ease-in-out;
}

.slideshow-controler button span {
  display: none;
}

.slide-bullets {
  padding: 0 calc(var(--outer-margin)/2) 0 calc(var(--outer-margin)/2);
  font-size: 0;
}

.slide-bullets .bullet {
  width: calc(.6 * var(--pitch-25));
  margin: 0 .05rem 0 .05rem;
  aspect-ratio: 1;
  background-color: var(--black);
  border-radius: 50%;
  display: inline-block;
  scale: .5;
  transition: scale 200ms ease-in-out;
}

.slide-bullets .bullet.active,  .slide-bullets .bullet:hover {
  scale: 1
}



.slideshow-controler svg {
  height: calc(.6 * var(--pitch-25));
}

.slideshow-controler svg path {
  fill: var(--black);
  stroke-width: 0;
}

#slideshow-next svg {
  transform: rotate(180deg);
}

footer {
  min-height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-l) var(--outer-margin) var(--outer-margin) var(--outer-margin);
  overflow-x: hidden;
}

.footer-section {
  width: 100%;
}
.footer-infos {
  flex-grow: 1;
  color: var(--red);
  font-family: "helvetica-medium", helvetica, sans-serif;
  font-size: var(--helvetica-45);
  letter-spacing: var(--helvetica-45-letter-spacing);
  line-height: var(--helvetica-45-line-height);
  text-shadow: var(--helvetica-45-shaddow);
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  padding-bottom: var(--space-s);
}

.footer-infos a {
  color: var(--red);
}
.footer-social:not(:last-of-type){
  margin-right: 13rem;
}
.footer-menu {
  font-size: var(--pitch-25);
  line-height: var(--pitch-25-line-height);
  flex-shrink: 1;
  color: var(--white);
  text-transform: uppercase;
}

.footer-menu a {
  color: var(--white);
}


.background {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  z-index: -1;
}

.legal-notice {
  margin: var(--space-s) auto;
  font-size: var(--pitch-30);
  line-height: var(--pitch-30-line-height);
  text-align: center;
}

.legal-notice strong, .legal-notice h2 {
  font-family: "helvetica-medium", helvetica, sans-serif;
  font-size: var(--helvetica-45);
  line-height: var(--helvetica-45-line-height);
  letter-spacing: var(--helvetica-45-letter-spacing);
  text-transform: uppercase;
}

.legal-notice label strong {
  font-family: "pitch" !important;
  font-size: var(--text-size) !important;
  line-height: var(--text-line-height) !important;
  letter-spacing: initial !important;
  font-weight: normal !important;
  text-transform: initial !important;
}

.legal-notice h2 {
  margin: var(--space-xs) 0 0 0;
}

.legal-notice a {
  color: var(--white);
  text-decoration: underline;
}

.legal-notice a:hover {
  text-decoration: none;
}


@media screen and (min-width: 700px)  {
  .backdroped.h {
    padding: .55rem .5rem 0 .5rem;
  }

  .backdroped.p {
    padding: .3rem .5rem .3rem .5rem;
  }

  .project-details .title::after {
    right: .5rem;
  }

  .close-cross .st0 {
    stroke-width: 3.5;
  }

  menu .tags {
    padding-top: var(--outer-margin);
  }

  menu .tags a {
    margin-bottom: calc(var(--outer-margin) / 4);
  }

  .landing-description .inner {
    width: min(65rem, 80%);
  }

  .landing-clients .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .about-hero {
    padding: 0 var(--outer-margin) 0 var(--outer-margin);
  }

  .about-hero .inner {
    width: min(50rem, 70%);
  }

  .about-manifesto {
    padding: var(--space-s) 0 var(--space-s) 0;
  }

  .about-manifesto .inner {
    width: min(44rem, 60%);
  }

  .about-team .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-title {
    margin-top: 4.5rem;
  }

  .landing-projects-grid {
    grid-template-columns: repeat(3, 1fr); 
  }

  .landing-projects-grid img {
    height: 25rem;
  }


  .projects-grid {
    grid-template-columns: repeat(6, 1fr); 
    grid-auto-rows: 25rem;
  }
  
  .projects-grid .cell {
    grid-column: auto /span 2;
  }
  .projects-grid .cell:nth-child(16n+3), .projects-grid .cell:nth-child(16n+4), .projects-grid .cell:nth-child(16n+10), .projects-grid .cell:nth-child(16n+11){
    grid-column: auto /span 3;
  }
  .projects-grid .cell:nth-child(16n+1), .projects-grid .cell:nth-child(16n+9), .projects-grid .cell:nth-child(16n+16){
    grid-column: auto /span 4;
  }

  .project-details {
    width: 30rem;
    max-height: calc(-8rem + 100dvh);
  }

  .project-title {
    flex-direction: row;
  }

  .plyr__progress {
    width: 35rem;
  }

  .slideshow {
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
  }

  .slideshow-inner {
    height: 100%;
    flex-direction: row;
  }

  .slideshow-inner.shifting {
    transition: transform .4s ease-out;
  }

  .slideshow-slide {
    height: 100%;
    width: 100vw;
    user-select: none;
  }

  .slideshow-slide.text {
    font-size: var(--pitch-30);
    line-height: var(--pitch-30-line-height);
    user-select: initial;
  }

  .slideshow img {
    height: 100%;
    object-position: center;
  }

  .slideshow img.landscape {
    object-fit: cover;
  }

  .slideshow img.portrait {
    object-fit: contain;
  }

  .slideshow-slide.video .plyr__controls {
    margin-bottom: 4rem;
  }

  .slideshow-slide .player.story {
    object-fit: contain;
  }
   
  .footer-infos h2 {
    margin-bottom: -2vw;
  }
  

  .legal-notice {
    width: min(65rem, 80%);
  }
  
}

@media screen and (max-width: 699px)  {
  .backdroped.h {
    padding: 1.1rem 1rem 0 1rem;
  }

  .backdroped.p {
    padding: .8rem 1rem .8rem 1rem;
  }
  .project-details .title::after {
    right: .8rem;
  }

  .close-cross .st0 {
    stroke-width: 3.5;
  }


  menu .tags {
    margin-top: calc(1.5 * var(--outer-margin));
  }

  menu .tags a {
    margin-bottom: calc(var(--outer-margin) / 2);
  }

  .landing-description {
    padding: var(--space-l) var(--outer-margin) var(--space-l) var(--outer-margin);
  }

  .landing-clients .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-projects-grid {
    row-gap: calc(3 * var(--outer-margin));
  }

  .about-hero {
    padding: 0 var(--outer-margin) 0 var(--outer-margin);
  }
  
  .about-manifesto {
    padding: var(--space-m) var(--outer-margin) var(--space-m) var(--outer-margin);
  }

  .about-team .grid {
    grid-template-columns: 1fr;
  }

  .page-title {
    margin-top: 6.5rem;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .projects-grid .cell, .landing-projects-grid img {
    aspect-ratio: 0.75;
  }

  .project-title {
    flex-direction: column-reverse;
    align-items: end;
  }

  .project-details {
    width: 100%;
    max-height: 60dvh;
  }

  .player-button[data-plyr="play"] {
    order: 4
  }
  .player-button[data-plyr="mute"] {
    order: 5
  }

  .controls_break {
    width: 100%;
    height: 0;
  }

  .plyr__progress {
    flex-grow: 1;
  }

  .slideshow {
    padding-top: var(--outer-image-margin);
  }

  .slideshow-inner {
    flex-direction: column;
    padding: 0 var(--outer-image-margin) 0 var(--outer-image-margin);
    row-gap: var(--outer-margin);
  }

  .slideshow-slide.text {
    font-size: var(--pitch-30);
    line-height: var(--pitch-30-line-height);
  }

 .slideshow-controler {
  display: none;
 }
  
  .footer-infos h2 {
    margin-bottom: 20vw;
  }

  .footer-menu {
    padding-right: 26rem;
  }

  .legal-notice {
    padding: 0 var(--outer-margin) 0 var(--outer-margin);
  }

}

@media (hover: hover) {

}