:root {
  --margin_ext: 10vw;
  --half_margin_ext: 5vw;
  --eye_dimension: 4vw;

  --main_width: calc(100vw - var(--margin_ext) * 2 );

  --site_bkg: #FFFFFF;
  --project_bkg: #EDEDED;
  --dark: #000000;
  --light: #FFFFFF;
  --medium: #FF7F50;

  --light_hover: var(--medium);
  --medium_hover: var(--light);

  --transition: var(--medium);

  --grid_width: calc( ( var(--main_width) - var(--margin_ext) ) / 3  );
  --grid_double_width: calc( var(--grid_width) * 2 + var(--half_margin_ext) );
  --division_1: 1;
  --division_2: 2;
  --division_3: 3;
}

::selection { background: var(--selection); opacity: .2; }
.display-none { display: none; }
.hidden { opacity: 0; pointer-events: none; }
.appear_on_scroll { opacity: 0; transform: translateY(100px); transition: opacity .7s ease, transform .7s ease; }
.appear_on_scroll.appear { opacity: 1; transform: translateY(0); }
.mobile-only { display: none; }

* { padding: 0; margin: 0; }
a { color: inherit; text-decoration: none; }
html.transition a { pointer-events: none; }
a.active { pointer-events: all; }


img.lazy,
img.swiper-lazy { opacity: 0; transition: opacity .5s ease; object-fit: cover; }

img.lazy.loaded,
img.swiper-lazy-loaded { opacity: 1; }

img.swiper-lazy:not(.swiper-lazy-loaded) { content: url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); }

html { background: var(--site_bkg_transition); color: var(--dark); }
main { background: var(--site_bkg); }

html.wait * { overflow: hidden; }

html, body { height: 100vh; width: 100vw; }

#intro { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background: var(--intro); overflow: hidden; z-index: 1000; }

#intro-wrapper { position: absolute; top: 50%; left: 50%; height: 26.54vw; width: 12vw; transform: translate(-50%, -50%); }

#intro-eye { position: absolute; top: .5vw; left: 1.4vw; height: 9vw; width: 9vw; overflow: hidden; }
#intro svg { position: absolute; top: 0; left: -63vw; height: 9vw; width: 72vw; }
#intro svg.square { width: 9vw; left: 0; }
#intro svg#signature { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }

#intro_eye_pupil path, #intro_eye_mask path { fill: var(--intro); transition: fill .6s ease .3s; }
#intro_eye_iris, #intro_eye_eyelids, #signature { fill: var(--dark); }

#intro-wrapper,
#intro-eye,
#signature { opacity: 0; transition: opacity .7s ease; }

#intro-eye { transition-delay: .4s; }
#signature { transition-delay: 1.7s; }

#intro.appear #intro-wrapper,
#intro.appear #intro-eye,
#intro.appear #signature { opacity: 1; }

#intro_eye_mask, #intro_eye_eyelids { animation: openIntro .6s steps(7) forwards 3.2s; animation-iteration-count: 2; }

@keyframes openIntro {
  0% { left: -63vw; }
	50% { left: 0; }
  100% { left: -63vw; }
}

header { position: absolute; z-index: 200; }

header,
header .header-wrapper { background-color: var(--transition); }
.transition header,
.transition header .header-wrapper { background-color: transparent; }

header .header-wrapper { position: fixed; top: 0; height: var(--margin_ext); width: 100vw; transition: height .3s ease; z-index: 100; }
header.two_menus .header-wrapper, header.scroll .header-wrapper { height: var(--half_margin_ext); }

header .main-menu { font-size: 1.2vw; width: calc(50% - var(--half_margin_ext) * 3); position: absolute; top: 50%; left: var(--margin_ext); transform: translateY(-50%); text-transform: uppercase; }
header .main-menu--left { text-align: right; }
header .main-menu--right { text-align: left; left: auto; right: var(--margin_ext); }

header nav a { padding: .4em 1em; cursor: pointer; font-weight: 700; }
header nav a:hover,
header nav a.active { color: var(--medium_hover); }

header .secondary_menu { position: absolute; top: var(--half_margin_ext); width: 100vw; height: var(--half_margin_ext); line-height: var(--half_margin_ext); text-align: center; z-index: 99; transition: opacity .3s ease; }
header .secondary_menu:not(.active) { opacity: 0; pointer-events: none; }

header.static nav a:hover,
header.static nav a.active { color: var(--light_hover); }

#eye_link { cursor: pointer; }

#eye { position: absolute; top: 50%; left: 50%;  height: var(--eye_dimension); width: var(--eye_dimension); transform: translate(-50%, -50%); overflow: hidden; }

#eye svg { display: block; position: absolute; top: 0; left: 0; height: var(--eye_dimension); width: calc(var(--eye_dimension) * 8); }
#eye svg.square { width: var(--eye_dimension); }

#eye_pupil, #eye_mask { fill: var(--transition); transition: fill .6s ease .3s; }
#eye_iris, #eye_eyelids { fill: var(--dark); }

#eye .animation_element { left: calc(var(--eye_dimension) * -7); }
#eye.desactivated .animation_element { left: 0; }
#eye.desactivated.open .animation_element { animation: open .5s steps(7) forwards; }

#eye:not(.desactivated).animate .animation_element { animation: openClose .3s steps(7) forwards; }
#eye.hover .animation_element { animation: close .5s steps(7) forwards; }

@keyframes open {
  from { left: 0; }
  to { left: calc(var(--eye_dimension) * -7); }
}

@keyframes close {
  from { left: calc(var(--eye_dimension) * -7); }
  to { left: 0; }
}

@keyframes openClose {
  0% { left: calc(var(--eye_dimension) * -7); }
	50% { left: 0; }
  100% { left: calc(var(--eye_dimension) * -7); }
}

#transitioner { position: fixed; height: 0; width: 100vw; background: var(--transition); pointer-events: none; transition: height .3s; z-index: 100;  }
header:not(.two_menus) + #transitioner, header:not(.scroll) + #transitioner { height: var(--margin_ext); }
header.two_menus + #transitioner, header.scroll + #transitioner { height: var(--half_margin_ext); }
header:not(.two_menus) + #transitioner.active, header:not(.scroll) + #transitioner.active,
header.two_menus + #transitioner.active, header.scroll + #transitioner.active { height: 100vh; }
.transition #transitioner { transition: height .6s ease, background-color .6s ease .3s; }

.vertical-aside { position: fixed;  width: 100vh; height: var(--margin_ext); z-index: 103; padding: 0 var(--half_margin_ext); text-transform: uppercase; }
#languages { top: calc(100vh - var(--margin_ext)); left: var(--margin_ext); transform: rotate(-90deg); transform-origin: bottom left; }
#socials { top: 100vh; right: 0; transform: rotate(90deg); transform-origin: top right; text-align: right; }

.vertical-aside a { position: relative; display: inline-block; margin: 0; margin-top: calc( var(--half_margin_ext) - .5rem ); text-decoration: none; color: inherit; font-size: 0; }
#languages a { padding-right: .5rem; }
#socials a { padding-left: .5rem; }

.vertical-aside a span { display: inline-block; width: auto; max-width: 0; padding: 0; opacity: 0; margin: 0; font-size: 1.05vw; transition: max-width .7s ease, padding .5s ease, opacity .5s ease; pointer-events: none; }
.vertical-aside a span.initial,
/* .vertical-aside a.active span, */
.vertical-aside a:hover span { max-width: 2em; padding: 0 .1em; opacity: 1; pointer-events: all; }

main { position: absolute; min-height: 100vh; }
main a:hover { color: var(--light_hover); }

#content { width: var(--main_width); padding: var(--half_margin_ext) var(--margin_ext); text-align: center; font-size: 0; }
#home #presentation + #content { padding-top: 0; }

#grid { min-height: calc( 100vh - var(--margin_ext) * 1.5 ); transition: height 1s ease; }
#grid.wait { opacity: 0; }

.gutter-sizer { width: var(--half_margin_ext); }
.grid-sizer, .grid-item { width: var(--grid_width); }
.grid-item.two-cols { width: var(--grid_double_width); }
.grid-item { margin-top: var(--half_margin_ext); }
.grid-item--project .grid-item-wrapper { font-size: 0; height: calc( var(--grid_width) / var(--ratio) ); transition: height .3s ease; }
.shopping .grid-item--project .grid-item-wrapper { height: calc( var(--grid_width) / var(--ratio2) ); }
.grid-item--project.two-cols .grid-item-wrapper { height: calc( var(--grid_double_width) / var(--ratio) ); }
.grid-item--project .grid-item-wrapper a { position: relative; display: block; height: 100%; width: 100%; }

.grid-item--project img { display: block; width: 100%; height: 100%; transition: filter .3s ease, opacity .7s ease, transform .7s ease; opacity: 0; filter: grayscale(0%) contrast(1) brightness(1) drop-shadow(.2vw .2vw .5vw rgba(0,0,0,.1)); }
.grid-item--project img.shop.lazy.loaded { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; }
.grid-item--project img.shop.lazy.loaded,
.shopping .grid-item--project img.shop + img.lazy.loaded { opacity: 0; pointer-events: none; }
.shopping .grid-item--project img.shop.lazy.loaded { opacity: 1; pointer-events: all; }

.grid-item--project .grid-item-wrapper{  }
.grid-item--project-hover {  z-index: 10; color: var(--dark); display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; height: calc(100% - 2em); width: calc(100% - 2em); padding: 1em; text-align: center; font-size: 1.5vw; opacity: 0; user-select: none; transition: opacity .3s ease; }
.grid-item--project .grid-item-wrapper:hover .grid-item--project-hover { opacity: 1; user-select: all; transition: opacity .75s ease; }
.grid-item--project .grid-item-wrapper:hover img:not(.loaded) + .grid-item--project-hover { opacity: 0!important; }
.grid-item--project .grid-item-wrapper:hover img { filter: grayscale(100%) contrast(calc(1/6)) brightness(1.75) drop-shadow(.7vw .7vw 1.5vw rgba(0,0,0,.3)); }

.grid-item--project img { transform: translateY(100px); }
.grid-item--project img.lazy.loaded { transform: translateY(0); }


.grid-item--project video{   z-index: 8; transition: all .3s; height: 100%;   } 
.grid-item--project .grid-item-wrapper:hover video { opacity: 0.2; }


.grid-item--project .shop-info { font-size: 2rem; text-align: center; height: 0; padding: 0; opacity: 0; transition: opacity 0s ease; pointer-events: none; user-select: none; }
.shopping .grid-item--project .shop-info { height: 1.5em; padding-top: 1em; opacity: 1; transition: opacity .7s ease; pointer-events: all; user-select: all; }
.shopping .grid-item--project .shop-info a { display: block; }
.shopping .grid-item--project .shop-info span.text { display: block; font-size: 0.5em; }
.shop-info .line-through { text-decoration: line-through; color: #7f7f7f; }
.shop-info a:hover .line-through { color: var(--light_hover); }
.shop-info .old-price { display: inline; font-size: .55em; }
.shop-info .sold-out { color: #7f7f7f;}

.grid-item--text { font-size: 1.16vw; text-align: left; }

/* @media screen and (min-width: 0px) {
  .grid-item:not(.isotope-hidden):nth-child(1) .appear_on_scroll { opacity: 1; transform: translateY(0); }
}
@media screen and (min-width: 800px) {
  .grid-item:not(.isotope-hidden):nth-child(-n+4) .appear_on_scroll { opacity: 1; transform: translateY(0); }
}
@media screen and (min-width: 1024px) {
  .grid-item:not(.isotope-hidden):nth-child(-n+5) .appear_on_scroll { opacity: 1; transform: translateY(0); }
} */

#presentation { background: var(--medium); position: relative; padding: var(--margin_ext); padding-top: var(--margin_ext); padding-bottom: calc(var(--half_margin_ext) / 4); overflow: hidden; font-size: 0; }
#presentation h1 { text-align: center; }
#presentation h1 span { display: inline-block; }
#presentation h1 span.letter { font-size: 3vw; line-height: 1.5em; transform: translateY(1em); transition: opacity .3s ease, transform .3s ease; opacity: 0; }
#presentation h1.present.active span.letter { transform: translateY(0); opacity: 1; transition: opacity .7s ease, transform .5s ease; }
#presentation h1 span.letter:last-child { margin-right: .34em; }
#presentation h1 span.letter.upper + span.letter.lower { margin-left: -.1em; }
#presentation h1 span.word:last-child span.letter:last-child { margin-right: 0; }

#filters { background: var(--medium); position: absolute; z-index: 99; }
#filters.fixed { position: fixed; top: var(--half_margin_ext); }
#filters .filters-wrapper { bottom: 0; min-height: calc(var(--half_margin_ext) / 2 ); width: var(--main_width); padding: 0 var(--margin_ext); background: rgba(255,255,255,.2); text-align: center; }
#filters .filter { display: inline-block; padding: 0 1em; line-height: calc(var(--half_margin_ext) / 2 ); font-size: 1.07vw; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
#filters .filter:hover,
#filters .filter.active { color: var(--medium_hover); }

.stylized > *:first-child,
.stylized blockquote > *:first-of-type { margin-top: 0; }
.stylized > * { margin-bottom: var(--half_margin_ext); }
.stylized > *:last-child,
.stylized blockquote > :last-of-type { margin-bottom: 0; }
.stylized blockquote { border-left: .2em solid var(--medium); padding: .5em 0em .5em .5em; }
.stylized hr { border: 0; border-top: 1px solid var(--medium); width: 80%; margin-left: 10%; }

.block { display: block; position: relative; margin: auto; }

.block.block-size--s { width: calc( ( var(--main_width) - var(--margin_ext) ) / 3 ); }
.block.block-size--m { width: calc( var(--main_width) - ( var(--main_width) - var(--margin_ext) ) / 3 ); }
.block.block-size--l { width: var(--main_width); }
.block.block-size--xl { width: calc( var(--main_width) + var(--margin_ext) * 2 ); margin-left: calc( -1 * var(--margin_ext) ); }

.block-align--justify { text-align: justify; }
.block-align--left { text-align: left; }
.block-align--center { text-align: center; }
.block-align--right { text-align: right; }

.block.block-margin--s { margin-bottom: calc(var(--half_margin_ext) / 2); }
.block.block-margin--m { margin-bottom: var(--half_margin_ext); }
.block.block-margin--l { margin-bottom: var(--margin_ext); }
.block:last-child { margin-bottom: 0; }

.block-text { font-size: 1rem; }

.block-text--small { font-size: 1.8rem; font-weight: 700; }

.block-text.block-align--center li { padding-left: 0; margin-left: 0; list-style: none; }
.block-text.block-align--center li::before { display: none; }

.block-text--form > * { transition: opacity .3s ease; }
.block-text--form > label:first-of-type,
.block-text--form > input:first-of-type { position: fixed; top: -100vh; left: -100vw; }
.block-text--form > input.id { display: none; }
.block-text--form label { margin-top: 1em; margin-bottom: .5em; font-size: .7em; font-weight: 700; }
.block-text--form label.required::after { content: '*'; margin-left: .35em; color: red; font-weight: 400; vertical-align: top; }
.block-text--button a,
.block-text--form input.submit { display: inline-block; padding: 1em; background: var(--medium); box-shadow: .2vw .2vw .5vw rgba(0,0,0,.1); font-style: italic; font-weight: 700; transition: all .3s ease; border: none; }
.block-text--button a:hover,
.block-text--form input.submit:hover { background: var(--site_bkg); color: var(--medium); box-shadow: .7vw .7vw 1.5vw rgba(0,0,0,.3); cursor: pointer; }
.block-text--form input.submit { width: auto; font-size: .9em; margin-top: 1em; }
.block-text--form p.message_container { position: absolute; top: 50%; left: 50%; width: calc(100% - 8em); transform: translate(-50%, -50%); padding: 2em; background: var(--site_bkg); box-shadow: .7vw .7vw 1.5vw rgba(0,0,0,.3); text-align: center; opacity: 0; pointer-events: none; user-select: none; }
.block-text--form.message > * { opacity: .3; pointer-events: none; user-select: none; }
.block-text--form.message p.message_container { opacity: 1; pointer-events: all; user-select: all; }
.block-text--form p.message_container span.message_wrapper > span.msg { display: none; }
.block-text--form p.message_container span.message_wrapper > span.msg.active { display: inline-block; }
.block-text--form span.message_trigger { position: absolute; display: block; top: -1.5em; right: -1.5em; height: 1em; width: 1em; cursor: pointer; }
.block-text--form span.message_trigger::before,
.block-text--form span.message_trigger::after { content: ''; position: absolute; display: block; left: calc(-25% + 1px); height: 2px; width: 141%; background: var(--dark); transition: background-color .3s ease; }
.block-text--form span.message_trigger:hover::before,
.block-text--form span.message_trigger:hover::after { background: var(--medium); }
.block-text--form span.message_trigger::before { top: calc(50% - 1px); transform: rotate(45deg); }
.block-text--form span.message_trigger::after { bottom: calc(50% - 1px); transform: rotate(-45deg); }
.block-text--form > * { display: inline-block; width: 100%; box-sizing: border-box; }
.block-text--form input:not(.submit),
.block-text--form textarea { padding: .5em; border-radius: 5px; border: 1px solid lightgrey; font-size: .7em; }
.block-text--form input:not(.submit):focus,
.block-text--form textarea:focus { border: 1px solid var(--medium); outline: none; }
.block-text--form fieldset.name { border: none; }
.block-text--form fieldset.name input { width: calc(50% - 2.65em); }
.block-text--form fieldset.name input:first-child { float: left; }
.block-text--form fieldset.name input:last-child { float: right; }
.block-text--form textarea { max-width: 100%; min-width: 100%; }

figcaption { font-size: .7rem; padding-top: 1em; font-style: italic; z-index: 2; }
.block-media.block-size--xl figcaption { padding-left: var(--margin_ext); padding-right: var(--margin_ext); }

.block-media--images div { display: flex; flex-direction: row; justify-content: space-between; }
.block-media--images.block-media--images-count-one.block-size--s img,
.block-media--slider.block-size--s img { width: calc( ( var(--main_width) - var(--margin_ext) ) / 3 ); height: calc( ( ( var(--main_width) - var(--margin_ext) ) / 3 ) / var(--ratio)); }
.block-media--images.block-media--images-count-one.block-size--m img,
.block-media--slider.block-size--m img { width: calc( var(--main_width) - ( var(--main_width) - var(--margin_ext) ) / 3 ); height: calc( ( var(--main_width) - ( var(--main_width) - var(--margin_ext) ) / 3 ) / var(--ratio)); }
.block-media--images.block-media--images-count-one.block-size--l img,
.block-media--slider.block-size--l img { width: var(--main_width); height: calc( var(--main_width) / var(--ratio)); }
.block-media--images.block-media--images-count-one.block-size--xl img,
.block-media--slider.block-size--xl img { width: calc( var(--main_width) + var(--margin_ext) * 2 ); height: calc( ( var(--main_width) + var(--margin_ext) * 2 ) / var(--ratio)); }
.block-media--images.block-media--images-count-two img { width: calc( ( var(--main_width) - var(--half_margin_ext) ) / 2 ); height: calc( ( ( var(--main_width) - var(--half_margin_ext) ) / 2 ) / var(--ratio)); }
.block-media--images.block-media--images-count-three img { width: calc( ( var(--main_width) - var(--margin_ext) ) / 3 ); height: calc( ( ( var(--main_width) - var(--margin_ext) ) / 3 ) / var(--ratio)); }

.block-media--slider { font-size: 0; }
.block-media--slider img { display: inline-block; margin-right: var(--half_margin_ext); vertical-align: top; }
.block-media--slider img:last-child { margin-right: 0; }

.block-media--video iframe {  width: 100%; border: none; }
.block-media--video.block-size--s iframe { height: calc( ( ( var(--main_width) - var(--margin_ext) ) / 3 ) / 1.78 ); }
.block-media--video.block-size--m iframe { height: calc( ( var(--main_width) - ( var(--main_width) - var(--margin_ext) ) / 3 ) / 1.78 ); }
.block-media--video.block-size--l iframe { height: calc( var(--main_width) / 1.78 ); }
.block-media--video.block-size--xl iframe { height: calc( 100vw / 1.78 ); }

.swiper-container { height: auto; padding-bottom: 2rem; }
#project .swiper-container { height: calc(100% - 2rem + 4px); }
#project .swiper-container.captioned { padding-bottom: 4rem; }
.swiper-pagination-bullet-active { background: var(--medium); }
.swiper-control { position: absolute; top: 0; height: 100%; width: 50%; z-index: 2; cursor: pointer; user-select: none; outline: none; }
.swiper-control--left { left: 0; }
.swiper-control--right { right: 0; }
.only-one .swiper-control { display: none; }

#project { background: var(--project_bkg); height: 100vh; }

#project .arrow { display: block; position: fixed; top: 50vh; transition: padding .5s ease, transform .5s ease; z-index: 104; }

#project .arrow, #project .arrow span { height: 20px; width: 20px; }

#project .arrow--left { left: var(--half_margin_ext); transform: translate(-50%, -50%); }
#project .arrow--right { right: var(--half_margin_ext); transform: translate(50%, -50%); }
html:not(.transition) #project .arrow--left:hover { padding-right: 10px; transform: translate(calc(-50% - 5px), -50%); }
html:not(.transition) #project .arrow--right:hover { padding-left: 10px; transform: translate(calc(50% + 5px), -50%); }
#project .arrow span { position: absolute; display: block; pointer-events: none; }
#project .arrow--left span { left: 35%; transform: rotate(-45deg); }
#project .arrow--right span { right: 35%; transform: rotate(135deg); }
#project .arrow span::before,
#project .arrow span::after { content: ''; position: absolute; height: 100%; width: 4px; border-radius: 2px; background: var(--medium); }
#project .arrow span::before { height: 4px; width: 100%; }

#project #content { padding-top: var(--margin_ext); padding-bottom: var(--half_margin_ext); }
#project .col { width: calc( ( var(--main_width) - var(--half_margin_ext) ) / 3 ); }
#project .col--images { height: calc( 100vh - var(--half_margin_ext) * 3 ); position: fixed; top: var(--margin_ext); width: calc( ( var(--main_width) - var(--half_margin_ext) ) / 3 * 2 ); }
#project .col--images img { height: 100%; width: 100%; object-fit: contain; }
#project .col--text { min-height: calc( 100vh - var(--half_margin_ext) * 3 ); display: flex; flex-direction: column; justify-content: center; margin-left: calc( 66% + var(--half_margin_ext) / 2 ); font-size: 1rem; text-align: left; }
#project h1 { margin-bottom: .35em; padding-top: .1em; }
#project .col--text p { text-align: justify; }
#project .shop-info { font-size: 1.5rem; margin-top: 1em; text-align: right; }
#project .shop-info a { display: inline-block; padding: .2em .5em 0 .5em; border: 2px solid transparent; text-decoration: none; }
#project .shop-info a:not(.no-link):hover { border: 2px solid var(--light_hover); color: var(--light_hover); }
#project .shop-info a.no-link { pointer-events: none; }
#project .shop-info span { display: inline-block; vertical-align: top; height: 1.5rem; line-height: 1.5rem; }
#project .shop-info span.text { font-size: .7em; margin-right: .3em; }
#project .shop-info span.old-price { margin-top: 0.1rem; margin-right: .3em; }


@media screen and (max-width: 1800px) {
  #project .col--text { font-size: .885vw; }
}

@media screen and (max-width: 1500px) {
  #project .col--text { font-size: 1vw; }
}

@media screen and (max-width: 1200px) {
  #project .col { width: calc( ( var(--main_width) - var(--half_margin_ext) ) / 2 )!important; }
  #project .col--text { font-size: 1rem; margin-left: calc( 50% + var(--half_margin_ext) / 2 ); }
}

#box_cookies { position: fixed; display: block; left: 0; bottom: 0; width: calc(100% - 2rem); padding: 1rem; background: var(--transition); text-align: center; font-style: italic; z-index: 180; transition: background-color .6s ease .3s; }
#box_cookies * { display: inline; }
#bt_cookies_accept { margin: 0 .2em; padding: .2em; background: var(--light); font-weight: bold; font-style: normal; cursor: pointer; }
#bt_cookies_accept:hover { background: var(--dark); color: var(--light); }
#bt_cookies_link { font-weight: bold; text-decoration: underline; }
#bt_cookies_link:hover { color: var(--light); }

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

  :root {
    --eye_dimension: 20vw;
    --grid_width: calc( ( var(--main_width) - var(--half_margin_ext) ) / 2  );
    --division_2: 1;
    --division_3: 1;
  }

  .mobile-only { display: block }

  #intro-wrapper { height: 53.08vw; width: 24vw; }
  #intro-eye { top: 1vw; left: 2.8vw; height: 18vw; width: 18vw; }
  #intro svg { top: 0; left: -126vw; height: 18vw; width: 144vw; }
  #intro svg.square { width: 18vw; left: 0; }
  #intro svg#signature { top: 0; left: 0; height: 100%; width: 100%; }
  @keyframes openIntro {
    0% { left: -126vw; }
  	50% { left: 0; }
    100% { left: -126vw; }
  }

  header { position: fixed; height: 100vh; width: 100vw; pointer-events: none; }
  header::after { content: ''; position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; background-color: var(--transition); opacity: 0; transition: opacity .6s ease .3s, background-color .6s ease .3s; }

  #menu_trigger { position: fixed; top: var(--half_margin_ext); right: var(--half_margin_ext); height: 20px; width: 20px; transform: translateX(50%); cursor: pointer; pointer-events: all; z-index: 201; }
  #menu_trigger span { display: block; position: absolute; left: 0; height: 2px; width: 100%; background: var(--dark); transition: all .3s ease; }
  #menu_trigger span:nth-child(1) { top: 15%; transform-origin: bottom left; }
  #menu_trigger span:nth-child(2) { top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
  #menu_trigger span:nth-child(3) { bottom: 15%; transform-origin: top left; }

  .open #menu_trigger span:nth-child(1) { top: -1px; transform: rotate(45deg); }
  .open #menu_trigger span:nth-child(2) { transform: scaleX(0); }
  .open #menu_trigger span:nth-child(3) { bottom: -1px; transform: rotate(-45deg); }
  .open #menu_trigger span:nth-child(1),
  .open #menu_trigger span:nth-child(3) { left: -1px; width: 141%;  }

  header, header .header-wrapper { background: none; }

  #eye_link { display: block; position: absolute; top: -25vw; left: 50%; height: var(--eye_dimension); width: var(--eye_dimension); transform: translateX(-50%); pointer-events: none; cursor: default; }
  #eye { display: none; }

  .header-wrapper,
  .header-wrapper .main-menu,
  .secondary_menu { position: relative!important; left: 0; right: 0; height: auto!important; width: 100%; transform: none!important; font-size: 5vw; text-align: center; opacity: 1!important; }

  .header-wrapper { margin-top: calc(50vh - 17vw); }

  #eye_link,
  header a { display: block; opacity: 0; transition: opacity .6s ease; }
  .secondary_menu a { padding: 0; }

  header.open { pointer-events: all; }
  header.open::after { opacity: 1; transition: opacity .6s ease; }
  header.open #eye_link,
  header.open a { display: block; opacity: 1; transition: opacity .6s ease .6s; pointer-events: all; cursor: pointer; }

  header:not(.open) a { pointer-events: none!important; }

  header.two_menus + #transitioner, header.scroll + #transitioner,
  header:not(.two_menus) + #transitioner, header:not(.scroll) + #transitioner { height: 0; }

  .vertical-aside a span { font-size: .85rem; }

  #presentation { padding-top: calc( var(--half_margin_ext) + .5rem); padding-bottom: var(--half_margin_ext); }
  #presentation h1 span.letter { font-size: 6vw!important; }

  #filters, #filters.fixed { position: relative; top: auto; }
  #filters .filter { display: block; padding: .2em 1em; line-height: var(--half_margin_ext); font-size: .9rem; }

  .grid-item--project-hover { font-size: 2.25vw; }
  .grid-item--text { font-size: 1.9vw; }

  #content { padding-top: var(--margin_ext); }

  .block.block-size--s,
  .block.block-size--m,
  .block.block-size--l,
  .block.block-size--xl { width: var(--main_width); }
  .block.block-size--xl { margin-left: auto; }

  .block-text--form p.message_container { width: calc(100% - 2em); }

  .block-text { font-size: 1rem; }
  .block-media.block-size--xl figcaption { padding-left: 0; padding-right: 0; }

  .block-media--images div { flex-direction: column; }
  .block-media img { width: var(--main_width)!important; height: calc(var(--main_width) / var(--ratio))!important; }
  .block-media--images img:not(:first-child) { margin-top: var(--half_margin_ext); }

  .block-media--video iframe { width: var(--main_width); height: calc( var(--main_width) / 1.78 )!important; }

  .block.block-margin--s { margin-bottom: var(--half_margin_ext); }
  .block.block-margin--m { margin-bottom: var(--margin_ext); }
  .block.block-margin--l { margin-bottom: calc(var(--margin_ext) * 2); }

  #project { height: auto; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
  #project .col { position: relative!important; top: auto!important; height: auto!important; min-height: 0!important; width: 100%!important; margin: 0!important; }
  #project .col--text { font-size: 1rem; }
  #project .swiper-container { height: var(--main_width); margin-bottom: var(--half_margin_ext); }
}

@media screen and (max-width: 800px) {
  :root {
    --grid_width: var(--main_width);
    --grid_double_width: var(--grid_width);
  }
  .grid-item--project-hover { font-size: 5vw; }
  .grid-item--text { font-size: .8rem; }
  .block-text { font-size: .8rem; }
  #project .col--text { font-size: .8rem; }
}