main {min-height:100vh;}

header #search {line-height:2;padding:0 .5em;margin-left:.5em}
header #search svg {display:inline-block;fill:none;height:.5em;width:.5em;stroke:currentColor;stroke-width:2;overflow:visible;transition: scale .5s, rotate .5s;cursor:pointer;}
header #search svg:hover {scale:1.2;rotate:90deg;}
header #search input {display:inline-block;color:inherit;background:none;border:none;border-bottom:1px solid;font-family: inherit;font-size: 75%;font-weight:inherit;max-width:0;padding: 0;transition:max-width .5s;}
header #search.active input {max-width:6em;}

header #search-result {font-size: 1rem;line-height:1.4;position: absolute;right: 0;top:5vw;max-height: calc(100vh - 3.5rem);width: 31.5rem;overflow: auto;z-index: 10;background:#fff;color:#000;}
header #search-result .search-result{padding:.5rem 1rem;}
header #search-result h3{font-size:150%;line-height: 1.1;}
header #search-result a{padding:0;}
header #search-result .highlight{background:rgb(0 255 57 / 50%) }

footer {background: linear-gradient(180deg, #fafafa, transparent 20%);}

figure.logo img {filter: grayscale(100%) ;scale:.75;	transform-origin: left bottom;}


.fp {position: relative;width: 100vw;height: 100vh;max-height:100vw;overflow: hidden;}
.fp.mh {height: calc(100vh - 10rem);max-height: 50vw;}
.fp.ah {height: auto;min-height: 50vh;}
.fp .bg {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;}
.fp .fg {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;user-select: none;}
.fp .fg .fg-inner {position: absolute;width: 100%;top: 50%;left: 0;translate: 0 -50%;}
.fp .fg .fg-footer {position: absolute;width: 100%;bottom: 0;left: 0;}
.fp img {width: 100%;height: 100%;object-fit: cover;}
.fp video {width: 100%;height: 100%;object-fit: cover;}
.fp h1{font-size:20vw;}
.fp h2{font-size:6vw;}
.fp h3{font-size:4vw;}
.fp .p1{font-size:2vw;line-height: 1}
.fp .p2{font-size:2vw;line-height: 1}
.fp .section-header {z-index: 2;position: relative;}
.fp.upskirt {height:80vh}

.fp a.arw-dwn{	content: '';position: absolute;width: 1vw;height: 1vw;bottom: 1.5vw;left: 50%;translate: -50% 0;border: .1vw solid;z-index: 10;rotate: 45deg;color: #000;border-left: 0;border-top: 0;cursor: pointer;transition:translate .5s;}
.fp a.arw-dwn:hover {translate:-50% 50%;}

.vc {display: flex;align-items: center;justify-content: center;}
.vb {display: flex;align-items: flex-end;}
.cc {background:#f00;}

.c0 {margin:0 auto;width:100%;}
.c1 {margin:0 auto;width:100%;max-width:80rem;}
.c2 {margin:0 auto;width:100%;max-width:60rem;}
.c3 {margin:0 auto;width:100%;max-width:40rem;}

.qot {padding-left:2rem;}

.darken {position:relative}
.darken:before {content:'';position: absolute;width:100%;height:100%;background: linear-gradient(0deg, rgb(0 0 0/40%), transparent);top:0;left:0;z-index: 1;}

.fx.active {transition:all .5s;}
.fx.fadein {opacity: 0;}
.fx.fadein.active {opacity:1;}
.fx.zoomin {scale:.5;}
.fx.zoomin.geny {transform-origin: left bottom;transition-delay: .25s;}
.fx.zoomin.active  {scale:1}
.fx.up {translate:0 20%;}
.fx.up.active {translate: 0 0;}
.fx.delay {transition-delay: 4s;}

:root {	--swiper-theme-color: #000;	--swiper-navigation-size: 1.5rem;--swiper-navigation-top-offset: 50vh;}
.swiper {width: 100%;height: 100%;}
.swiper.gallery {height: 40vw;}
.swiper.gallery.projects {height: 20vw;hyphens: auto;}
.swiper.gallery .max-12 {height: 40%;max-height: unset;}
.swiper-wrapper {width: 100%;height: 100%;}
.swiper-slide {width:33%;height:100%;}
.single .swiper-slide {width:100%;height:100%;}
.swiper-slide.date .col {padding:0;height: 100%;}
.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
.swiper-button-prev {left:1rem;}
.swiper-button-next {right:1rem;}

.lightbox {position:fixed;width:100vw;height:100vh;top:0;left:0;display:none;z-index:100;}
.lightbox .swiper {opacity:0;transition:opacity .5s;background:#fff;}
.lightbox .swiper-close {font-size:2rem;position:absolute;top:1rem;right:1rem;z-index:100;line-height:1;cursor:pointer;}
.lightbox .swiper-close:hover {scale:1.2;}
.lightbox .swiper .swiper-slide {padding:1em;}
.lightbox .swiper .swiper-slide img {width: 100%;height:100%;object-fit:contain;}

.lightbox.active {display:block;}
.lightbox.active .swiper {opacity:1;transition:opacity .5s;}

.slideshow-container {
	position: relative;
	width: 100vw;
	height:100vh; /* Full viewport height */
	overflow: hidden;
}

.slideshow-container .slide {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 2s ease-in-out, transform 7s ease-in-out;
}

.slideshow-container .slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 2s ease-in-out;
}

.slideshow-container .fade {
	opacity: 0;
}

.slideshow-container .active {
	opacity: 1;
	transform: scale(1.25); /* Zoom-in effect */
}
.blocks img {cursor:pointer;}

.tc {display:grid;grid-template-rows:3em 0fr; transition: .25s linear;}
.tc .t.ul {border-bottom:.5px solid;}
.tc > .t {position: relative;padding-left: 1em;line-height: 2.25;cursor:pointer;border-bottom:.5px solid;}
.tc > .t:before { position: absolute; content: ''; border-right: 1px solid; border-bottom: 1px solid; width: 0.3em; height: 0.3em; rotate: -45deg; left: 0; top: 1em; transition: .5s; }
.tc > .c {overflow:hidden;padding-left: 1em;border-bottom: .5px solid;}

.tc.auto:hover, .tc.active{grid-template-rows:3em 1fr}
.tc.auto:hover > .t:before, .tc.active > .t:before{rotate:45deg;left: .15em;}
.tc.preview {grid-template-rows:10.6em 3em;}
.tc.preview .t {display:flex;align-items: center;justify-content: center;}
.tc.preview .t:before {content:'';width:1em;height:1em;border:2px solid;rotate:135deg;border-left:none;border-bottom:0;transition:rotate .5s;}
.tc.preview.active{grid-template-rows:1fr 3em}
.tc.preview.active .t:before{rotate:-45deg}

.filter-index ul{white-space:nowrap;overflow:auto;}
.filter-index ul li {display: inline-block;padding: .5rem;cursor: pointer}

.filter-index ul.filter-categories li:nth-child(1) {font-weight:bold;}
.filter-index.on ul.filter-categories li:nth-child(1) {font-weight:unset;}
.filter-index.on ul.filter-categories li:nth-child(2) {font-weight:bold;}

.filter-index ul.filters:nth-child(3) {display:none}
.filter-index.on ul.filters:nth-child(2) {display:none}
.filter-index.on ul.filters:nth-child(3) {display:block}
  
.filter-index ul.filters li {transition:translate;}
.filter-index ul.filters li.active  .trigger {font-weight: 600;}

.filter-index ul.filters li .theme_button {opacity: 0;transition:opacity 1s;transition:translate .5s;}
.filter-index ul.filters li.active .theme_button {opacity: 1;}
.filter-index ul.filters li.active .theme_button:hover {translate: .5em;}

.block img{max-height: 100vh;object-fit:contain;}

.specs {display:flex;gap:1rem;}
.specs .spec{flex:1;}

.cols {display:grid;gap:2rem;grid-template-columns: 3fr 2fr}
.cols.lr1 {display:grid;gap:2rem;grid-template-columns: 2fr 3fr}
.vv {display:flex;}
.vv:before {display:inline-block;vertical-align:top;min-width:7em;font-size: .9rem;left:0;top:.2em;content: attr(data-vr)}

.bx {position: relative;}
.bx .bx-title {position: absolute;bottom:0;z-index: 10;pointer-events: none}

.thu {position:relative;}
.thu figure:nth-child(2){position: absolute;top:0;left:0;opacity:0;transition:opacity 1s;}
.thu:hover figure:nth-child(2){opacity:1;}

.theme {position:relative;}
.theme .theme-text {position:absolute;width:100%;padding:1rem;bottom:0;z-index:2;;}

@media (min-width: 740px) {
	body.hero nav {color:#fff;}

	header {height: 5vw;position: fixed;  top: 0;  left: 0;  width: 100vw; z-index:100;}
	header:has(.sub){height: 7vw;}
	header nav {width: 100%;height: 100%; font-size: 2.5vw;  line-height: 1;transition: translate .5s;}
	header nav ul {  display: flex; list-style: none;   }
	header nav ul li { position:relative;}
	header nav ul li:first-child {  flex: 1}
	header nav ul li a {padding: .5em .25em;  display: block;}
	header nav ul li a.active { text-decoration: underline;text-decoration-thickness: .05em;text-underline-offset: .1em;}
	
	header .title span {display:inline-block;max-width:0;overflow:hidden;opacity: 0;transition:max-width 1s, opacity .5s;}
	header .title span.initial, .title:hover span, header.compact .title span {max-width:2em;text-transform: lowercase;opacity:1;}
	
	header .lb{opacity: 0;transition:opacity .5s;}
	header:hover .lb{opacity: 1;}
	header .lb a{padding:.5em .25em}
	header .lb a.active{text-decoration: underline;text-decoration-thickness: .05em;text-underline-offset: .1em;}
	
	header ul.sub {position:absolute;right:-.5em;top:4vw;white-space:nowrap;opacity:0;transition:opacity .5s;pointer-events: none}
	header ul.sub li {display:inline-block;}
	header ul.sub li a{padding:.5em;}
	header ul.sub li a.active{font-weight:500;}
	header ul > li:hover ul.sub, header ul > li:has(a.active) ul.sub {pointer-events: all;opacity: 1;}
	
	
	header.slideup nav{  translate: 0 -100%;}
	header.slideup:hover nav{ translate: 0 0%;}
	header nav ul {padding: 0 1rem;}
	header.compact{color:#000;}
	
	header .hide-compact{display:inline-block;max-width:100vw;overflow:hidden;vertical-align:bottom;transition:max-width 1s;white-space:nowrap;}
	header.compact .hide-compact{max-width:0}
	
	
	.header-spacer {height:7vw;}

	.tb {display:grid;grid-gap:1% 5%}
	.tb.f0 {grid-template-columns:100%;}
	.tb.f1 {grid-template-columns:35% 60%;}
	.tb.f2 {grid-template-columns:60% 35%;}
	.tb.f3 {grid-template-columns:47.5% 47.5%;}
	.tb figure {width:100%;/*position: sticky;top:1rem;*/}
	.tb figure img{width:100%}
	/*.c0 .txt {padding:0 2rem;}*/
}

@media (max-width: 740px) {
	body{hyphens: auto;}
	header {position:fixed;z-index:100;top:0;left:0;width:100vw;}
	header nav{font-size:1.5rem;background: #fff;height:3.5rem;background:#fff}
	header nav ul {	display:flex;flex-direction: column;}
	header nav ul li {display: block;background: #fff;max-height:0;overflow: hidden;transition: max-height .5s;}
	header nav ul li a {padding:.5em;display:block;}
	header nav > ul > li:first-child {max-height:16em;}
	header nav > ul > li:first-child a{padding: .5rem;font-size: 1.75rem;}
	
	header nav ul li ul.sub {padding-left:2em;}
	header .burger {position: absolute; top: 0; right: 0; width: 1em; height: .65em; margin: .8em .5em;}
	header .burger span {position: absolute; display: block; height: 3px; width: 100%; background: #000; transition: all .5s; right: 0;}
	header .burger span:nth-child(1) {top: 0%; transform-origin: right bottom}
	header .burger span:nth-child(2) {top: 50%;}
	header .burger span:nth-child(3) {top: 100%; transform-origin: right top}
	
	header .title span {text-transform: lowercase;}
	
	body.nav-active {height:100vh;overflow:hidden}
	body.nav-active header nav {height:100vh;}body.nav-active header nav ul li {max-height:16em;}
	header .lb{	display:none;position: absolute;top: 4rem;right: 0.5em;}
	header .lb a{padding:.25em;}
	body.nav-active header .lb {display:block;}
	
	h1, .h1 {font-size:2.5rem;}
	h2, .h2 {font-size:1.5rem;}
	h3, .h3 {font-size:1.25rem;}
	h4, .h4 {font-size:1.1rem;}
	.c0 {padding:0 .5rem}
	.c1 {padding:0 .5rem}
	.c2 {padding:0 .5rem}
	.c3 {padding:0 .5rem}
	
	.p0 {font-size:1.5rem;line-height: 1;line-height: 1.2;}
	.p1 {font-size:1.5rem;line-height: 1.2;}
	.p2 {font-size:1.25rem;line-height: 1.3;}
	.p3 {font-size:1.25rem;}
	.p4 {font-size:.9rem;}
	
	.qot {padding-left:2rem;}
	/*
	body.nav-active header nav ul li {max-height:4em;}
	body.nav-active header nav ul .search{display:block;}
	body.nav-active header .burger span:nth-child(1) {rotate: -45deg; right: 72%; width: 50%;}
	body.nav-active header .burger span:nth-child(3) {rotate: 45deg; right: 72%; width: 50%;}
	*/
	header #search {padding:0;}
	header #search input {max-width:unset;line-height:2;}
	header #search.active input {max-width:100%;}
	.tb figure {margin-bottom:1rem;}
	.header-spacer {height:4em;}
	.filter-index.pd0 {padding:0;}
	.filter-index {margin-bottom:1rem;}
	.filter-index ul li {padding-left:0;}
	.isotope .col {padding:0;}
	.isotope .grid-item {margin-bottom:1rem;}
	
	.swiper.gallery.projects {height:60vw;}
	
	.fp.hero {margin-top:3rem;}
	.fp h1{font-size:3rem;}
	.fp h2{font-size:2.5rem;}
	.fp h3{font-size:2rem;}
	.fp .p1{font-size:1.5rem;line-height: 1}
	.fp .p2{font-size:1.5rem;line-height: 1}
	
	.tb {display:grid;grid-gap:1% 5%;grid-template-columns:100%;}

	.row.inset{margin:0 -.5rem}
	.col {width:100% !important;padding:.5rem;}	
	

	
	.footer-inner .dfg {display:block;}
	
	.slideshow-container {height:100vw;margin-top:3rem;}
	
	
	header .title span {display:inline-block;max-width:2em;overflow:hidden;transition:max-width 1s, opacity .5s;}
	header.slideup .title span {display:inline-block;max-width:0;opacity: 0;}
	header.slideup .title span.initial {max-width:2em !important;o;opacity: 1 !important;}
	
}