@font-face {
    font-family: 'opensans';
    src: url('/_incf/opensans-regular-webfont.woff2') format('woff2'),
         url('/_incf/opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
:root {
	--fontsize1: 1rem;
	--fontsize2: 1.875rem;
	--fontsize3: 3rem;
}
* { box-sizing: border-box; }
#site {
	padding-bottom: 4rem;
}
body {
	border: 0; margin: 0; padding: 0;
	font-family: opensans;
	font-size: var(--fontsize1);
	line-height: 1.50;
	background-color: white;
	color: #878786;
	min-height: 100dvh;
	margin-left: 3vw;
	margin-right: 3vw;
}
a {
	color: inherit;
}
ul {
	list-style: none; /* Remove default bullets */
	padding-left: 1em; /* Optional: add some indentation */
	padding-top: 0;
	margin-top: -1rem;
}
ul li {
	position: relative;
	padding-left: 1rem;
}
ul li::before {
	content: "– "; /* Insert a dash and a space */
	color: inherit; /* Make the dash match the text color */
	font-weight: normal; /* Optional */
	position: absolute;
	left: 0;
	top: 0;  
}
header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	transition: transform 0.3s ease;
	will-change: transform;
	transform: translateZ(0);
	height: 5rem;
	background-color: white;
}
#pagetitle {
	display: none;
	position: absolute;
	left: 3vw;
	top: 5rem;
	width: auto;
	line-height: 1.7rem;
	letter-spacing: 0.06rem;
}
#judith {
	position: fixed;
	left: 0;
	top: 0;
	padding-top: 1rem;
	font-size: var(--fontsize2);
	letter-spacing: 0.1rem;
	width: 100%;
	text-align: center;
	z-index:101;
}
#judith a {
	text-decoration: none;
}
#hamburger {
	position: fixed;
	left: 0;
	top: 0;
	font-size: var(--fontsize3);
	cursor: pointer;
	padding-left: 3vw;
	padding-right: 3vw;
	z-index:102;
}
#hamburger img {
	height: 1.5rem;
}
#closemenu {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	font-size: var(--fontsize3);
	cursor: pointer;
	padding-left: 3vw;
	padding-right: 3vw;
	z-index: 102;
}
#closemenu img {
	height: 1.5rem;
}
div.menuholder {
	display: none;
	position: fixed;
	top: 0;
	left: 3vw;
	padding-top: 5rem;
	padding-bottom: 2rem;
	width: 100vw;
	background-color: white;
	z-index: 100;
}
div.menuitem {
	text-transform: uppercase;
	line-height: 1.875;
	letter-spacing: 0.1rem;
	letter-spacing: 0.05rem;
}
div.menuitem.active {
	color: black;
}
div.menuitem a {
	text-decoration: none;
}
div.menuitem a:hover {
	color: black;
}
div.menuitem div {
	margin-left: 2rem;
	display: block;
	color: #878786;
	font-weight: normal;
}
div.menuitem div.active {
	color: black;
}
div.pagecontent {
	padding-top: 4rem;
}
div.grid {
	width: 94vw;
	z-index: -1;
}
div.boxholder {
	position: relative;
	display: inline-block;
	display: block;
	float: left;
}
.box {
	position: absolute;
}
div.boxholder div.imgholder {
	display: block;
	position: absolute;
}
div.boxholder div.imgholder img {
	max-width: 100%;
	max-height: 100%;
}
div.boxholder div.imgholder div.grouphover {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.7;
	color: white;
	justify-content: center; /* Horizontal center */
	align-items: center;
	font-size: var(--fontsize2);
	text-transform: uppercase;
	cursor: pointer;
}
div.boxholder div.imgholder div.grouphover.hovered {
	display: flex;
}
div.infopage {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 4rem;
}
div.infopage img {
	display: inline-block;
	width: auto;
	height: auto;
	max-width: 720px;
	max-height: min(720px, calc(100dvh - 6rem));
	margin-left: auto;
	margin-right: auto;
}
.content {
    position: absolute;
    top: 5rem;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}
.slideshow {
	display: block;
	height: 100%;
}
.slide {
    min-width: 100%;
	height: 100%;
    box-sizing: border-box;
    padding: 0;
	padding-left: 3vw;
	padding-right: 3vw;
    overflow-y: auto;   /* scroll only inside this slide if needed */
    position: relative;
}
.item {
	padding-bottom: 0;
	margin-bottom: 0;
    text-align: center;
	position: relative;
	height: 100%;
}
.item.mtop {
	margin-top: 0;
}
div.prev {
	position: fixed;
	display: block;
	left: 3vw;
	top: 6rem;
	width: 50px;
	height: calc(100dvh - 6rem);
	font-size: var(--fontsize2);
	line-height: calc(100dvh - 12rem);
	text-align: left;
	cursor: pointer;
	z-index: 99;
}
div.next {
	position: fixed;
	display: block;
	right: 3vw;
	top: 6rem;
	width: 50px;
	height: calc(100dvh - 6rem);
	font-size: var(--fontsize2);
	line-height: calc(100dvh - 12rem);
	text-align: right;
	cursor: pointer;
	z-index: 99;
}
div.prev img,
div.next img {
	width: 1vw;
}
div.prev a, div.next a {
	text-decoration: none;
	color: inherit;
}
div.morebelow {
	position: absolute;
	left: calc(50% - 0.85vw);
	top: calc(100vh - 10.5rem);
	background-color: transparent;
	text-align: center;
	margin: 0;
	cursor: pointer;
	display: none;	
}
div.morebelow img {
	height: 1vw;
}
div.imagewrapper {
	display: inline-block;
	max-width: calc(100% - 100px);
}
div.workdescription {
	margin-top: 0.5rem;
	line-height: 1.3rem;
	text-align: left;
	display: block;
}
.item img,
.item video {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
	max-height: calc(100dvh - 9rem);
	object-fit: cover;
}
.item video {
	height: calc(100dvh - 9rem);
}
.hidden {
    opacity: 0;
    pointer-events: none;
}
@media only screen and (orientation: portrait) {
/*@media only screen and (orientation: portrait) and (max-width: 768px) {*/
/*@media only screen and (orientation: portrait) or ((orientation: landscape) and (max-width: 768px)) {*/
	:root {
		--fontsize1: 1rem;
		--fontsize2: 1.5rem;
		--fontsize3: 2.75rem;
	}
	div.prev, div.next {
		display: none !important;
	}
	.content {
		bottom: unset;
	}
	.slideshow {
		display: block;
		height: auto;
		overflow: visible;
		min-height: unset;
	}
	.slide {
		display: block !important;
		position: relative;
		left: 0;
		transform: none;
		min-height: auto;
		margin-bottom: 1rem;
	}
	.slideshow div.item {
		margin-bottom: 0;
		height: auto;
		padding-bottom: 4rem;
		padding-bottom: 2.5rem;
	}
	.item.mtop {
		margin-top: -3rem;
	}
	.item video {
		width: 100%;
		height: auto;
	}
	div.workdescription {
		position: relative;
		top: unset;
		display: block;
	}
	div.infopage img {
		max-width: 100%;
		height: auto;
	}
	iframe, video  {
		max-width: 100%;
		height: auto !important;
	}
	div.imagewrapper {
		max-width: calc(100% - 100px);
	}
}