:root { 
        --space: 2.5vw;
        --space: 24px;
        --color: #FFF000;
    }
    @font-face {
        font-family: 'font';
        src: url('../fonts/AkkuratLLWeb-Regular.woff2');

    }

    html, body{
        width:100%;
        height:100%;
        margin:0px;
        font-family: font, Arial, sans-serif;
        
        font-size:16px;
        line-height: 20px;
    }
    body{
        background: #FFF000;
        //transition: background 0.5s;
        transition:all 0.5s;
    }
/* resets */
	
    img,video{
        display: block;	
    }
    p{
        margin:0 0 1rem 0;
    }
	p.small{
        font-size:12px;
        line-height: 15px;
    }
	hr{
		border:0px;
        border-top:1px solid black;
		margin:0 0 20px 0;
    }
    a{
        color:inherit;
		cursor:pointer;
    }
	* {
		text-decoration-thickness: 1px;
	}


    .main{
        position: fixed;
        width:100vw;
        height:100svh;
        overflow: hidden;
        
    }

    .ft-title-1, h1{
		//font-family: fontx, Arial, sans-serif;
        font-size:60px;
        line-height: 1;
        font-weight: normal;
        text-transform: uppercase;
    }

    .ft-title-2, h2{
		//font-family: font, Arial, sans-serif;
        font-size:60px;
        line-height: 1;
        font-weight: normal;
        //text-transform: uppercase;
    }
    .ft-title-3, h3{
        font-size:60px;
        line-height: 1;
        font-weight: normal;
        //text-transform: uppercase;
        padding:0px;
        margin:0px;
    }
	.tac{
		//text-align: center;
	}
/* topic */


    .topic{
        position: absolute;
        top:0px;
        left:0px;
        width:100vw;
        height:100svh;
        min-height: 100svh;	
        z-index: 2000;
        opacity: 0;
        pointer-events: none !important;
        transition: opacity 1s; 
        overflow: hidden;
		
    }
	.topic .bigbg{
		position: fixed;
        top:-5%;
        left:-5%;
		width:110%;
		height:110%;
		z-index: -1;
		background-image:url(../media/upload/m_124.png);
		background-position:center;
        filter:blur(20px);
	}
    .topic.on{
        opacity: 1;
        height:auto;
        pointer-events: auto !important;
        overflow: auto;
    }
	.topic .bottom{
		display: relative;
	}

/* header */

	.apptitle{
		position:fixed;
		width:100%;
		height:100px;
		z-index: 8000;
        opacity: 0;
        pointer-events: none;
		text-align: center;
		display: flex;
		justify-content:center;
		align-items:center;
		display: none;
	}
    .istopic .apptitle, nav.istopic .apptitle, #detail .apptitle{
        opacity: 1;
        
    }
	.apptitle > div{
		display: inline-block;
		padding:12px 24px;
        min-height:60px;
		text-align: center;
		border-radius:32px;
        display: flex;
		justify-content:center;
		align-items:center;
        border:1px solid rgba(0,0,0,0);
        min-width:224px;
        transition:all 0.3s;
	}
    .apptitle.scroll > div{
        border:1px solid rgba(0,0,0,1); 
    }
	.navbut{
		position: fixed;
		top:20px;
		left: var(--space);
		width:60px;
		height:60px;
		margin:0px;
		background-size:110px;
		background-position:center;
		z-index: 10000;
        cursor: pointer;
	}
	.navbut.back{
		background-image:url(../img/icon_back.svg);
        opacity: 0;
        pointer-events: none;
        transition:all 0.3s;
		z-index: 4000;
	}
    .istopic .navbut.back{
        opacity: 1;
        pointer-events: auto;   
    }
	.navbut.close{
		left:auto;
		right:var(--space); 
		background-image:url(../img/icon_close.svg);
	}
	.navbut.menu{
		left:auto;
		right:var(--space); 
		background-image:url(../img/icon_menu.svg);
		z-index: 10000;
	}
	.navbut.menu.on{
		background-image:url(../img/icon_close.svg);
	}
    .navbut.pause{
		left:auto;
		right:calc(var(--space) + 8px); 
        top:auto;
        bottom:calc(var(--space) + 8px); 
		background-image:url(../img/icon_pause.svg);
		background-size:48px;
		width:48px;
		height:48px;
        transition: all 0.3s;
        border:1px solid black;
        border-radius:100%;
		z-index: 4000;
	}
    
    .ispaused .navbut.pause{
        background-image:url(../img/icon_play2.svg);
    }
    .istopic .navbut.pause{
        opacity: 0;
        pointer-events: none;
    }

	.langbut{
		position: fixed;
		top:40px;
		right:108px;		
		margin:0px;
		z-index: 10000;
		display: none;
	}
	.langbut a.on{
		border-bottom:1px solid black;	
	}

	.header{
		position: relative;
		top:0px;
		left:0px;
		width:100%;
		padding:80px var(--space) 0px;
		z-index: 1000;
        pointer-events: none;
	}
	.header .apptitle{
		display: none;
		height:80px;
		line-height: 36px;
	}
	.header h1{
		font-size:60px;
		font-weight: normal;
		line-height: 80px;
		padding:0px var(--space);
		margin:0px;
        margin-left:-2px;
		padding:0px;
		text-transform: uppercase;
	}

/* nav*/

	nav{
		position: fixed;
		top:0px;
		right:-100vw;
		width:100%;
		height:100%;
		background:#FFF300;
		z-index: 5000;
		padding:0px var(--space);
		transition: right 0.3s;
		
	}
	nav.on{
		right:0vw;
	}
	.nav .apptitle{
		position: relative;	
		display: flex;
		opacity: 1;
	}	
	.nav ul,nav li{
		list-style: none;
		padding:0px;
		margin:0px;
	}
	.nav ul{
		border-top:1px solid black;
		padding: 8px 0px
	}
	.nav a{
		display: block;
		text-decoration: none;
		text-align: center;
	}
	.nav .service{
		text-align: center;
	}
	.nav .service a{
		display: inline-block;	
	}


/* subnav */

	.subnav{
		padding:0px var(--space);
		max-width:1024px;
		margin:0px auto;
	}
	.subnav a{
		position: relative;
		display: inline-block;
		padding:16px 0px;
		margin-right:16px;
		color:inherit;
		text-decoration: none;
	}
	.subnav a.on{
		padding-left:18px;
	}
	.subnav a.on:after{
		position: absolute;
		top:20px;
		left:0px;
		width:12px;
		height:12px;
		border-radius:12px;
		background:black;
		content:'';
	}
	

        
	/* topic ------------------------- */
       
	.topic > .inner{
		position: relative;
		min-height:100svh;
		overflow: auto;
	}
	.topic > .inner .top{
		padding:var(--space);
		flex:0 1;
		height: 15svh;
		min-height:100px;
	}
	.topic > .inner .middle{
		position: relative;
		flex:1 1;
		display: flex;
		align-items: center;

	}
			

    /* topictext ------------------------- */

    .textbut{
        display: inline-block;
        padding:2px 12px;
        border:1px solid black;
        border-radius:24px;
        margin:0px var(--space) 16px;
        cursor:pointer;
    }

    .topictext{
        position:absolute;
        top:0px;
        left:0px;
        width:100vw;
        height:100%;
        margin-top:0px;
        z-index: 500;
        overflow: hidden;
        pointer-events: none;
		background-color:rgba(0,0,0,0);
        transition: background-color 0.3s;
    }
    
    .topictext .panel{
        position:absolute;
        top:0px;
        left:-50vw;
        width:50%;
        height:100%;
        padding:200px 0 0 0 !important;
        transition: left 0.3s;
    }
    .topictext .panel > div{
        height:100%;
        padding:0 var(--space);
        overflow-y: auto;
    }
	.topictext .navbut{
		position: absolute;
		right:8px;
		top:20px;
		background-position: center;
		background-repeat: no-repeat;
		background-size:40px;
		pointer-events: none;
		display: none;
	}
	.topictext p{
		border-top:1px solid black;
		padding-top:10px;
        margin-bottom:10px;
	}
	.topictext .lead b{
		font-weight: normal;
		display: inline-block;
		margin-top:8px;;
	}

    .istopic .topic.text .topictext{
        pointer-events: auto;
		background-color:rgba(0,0,0,0.1);
    }
    
    .topic.text .topictext > div{
        left:0px;
    }
    
	.extras{
		padding-top:24px;
	}
	.extras .item{
		display: block;
		padding-top:4px;
		margin-bottom:20px;
		position: relative;
	}
	.extras .item .title{
		display: block;
		padding:4px 0 0 66px;		
	}
	.extras .item .title p{
		padding: 0;	
		text-decoration: underline;
		text-decoration-thickness: 1px;
		
	}
	.extras a.item{
		text-decoration:none;
	}
	.extras .item p{
		margin:0px;
		border:0px;
	}
	.extras .item .icon{
		position: absolute;
		display: block;
		top:6px;
		left:0px;
		width:48px;
		height:48px;
		background-image:url(../img/icon_extra_text.svg);
		background-size: 100px;
		background-position: center;
	}
	.extras .item.text .icon{
		background-image:url(../img/icon_extra_text.svg);
	}
	.extras .item.video .icon{
		background-image:url(../img/icon_extra_video.svg);
	}

    /* carousel -------------------------- */
		
    .main-carousel{
        position: relative;
        width:100%;
		z-index: 200;
    }
    .carousel-cell{
		margin-right:var(--space);
		margin-right:0px;
		margin-right:calc(var(--space) / 2);
		height:50vh;
		margin-bottom:40px;
    }

	.carousel-cell.wide{
		padding:0 10svh;
		background:rgba(0,0,0,1);
	}
    .carousel-cell.black .video{
		background:rgba(0,0,0,0.2);
	}
	.carousel-cell .vp{
		height:100%;
	}
	.carousel-cell .vp > div{
			
	}
    .carousel-cell > div{
        position: relative;
    }
	
	/* photos gallery */

	.carousel-cell.photos{
		margin-left:10svh;
        margin-right:10svh;
	}
    .carousel-cell.photos2{
		margin-left:0svh;
        margin-right:10svh;
	}
    .carousel-cell.space-right{
		margin-left:0svh;
        margin-right:10svh;
	}
    .carousel-cell.space-left{
		margin-left:10svh;
        margin-right:0svh;
	}
    .carousel-cell.nospace{
		margin-left:0svh;
        margin-right:12px;
	}
	.carousel-cell.photos img{
		display: inline-block;
		margin:0px 20px 20px 0px;
	}
	.carousel-cell.photos .grid{
		width:100%;
		height:100%;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
  		grid-template-rows: 1fr 1fr 1fr;
		grid-gap:calc(var(--space) / 2);
	}
	.carousel-cell.photos.p6 .grid{
		width:100%;
		height:100%;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
  		grid-template-rows: 1fr 1fr;
		grid-gap:calc(var(--space) / 2);
	}
	.carousel-cell.photos .grid a{
		display: block;
		width:100%;
		height:100%;
	}
	.carousel-cell.photos .grid div{
		width:100%;
		height:100%;
		background-color:black;
		background-size:cover;
		background-position: center;
	}

	.carousel-cell.is-selected .inline-videotitel{
		opacity:1;
	}

	/* lampshares */

	.carousel-cell.lampshare{
		margin-bottom:0px;
	}
	.carousel-cell.lampshare .inner{
		height:100%;
		position: relative;
	}
	.carousel-cell.lampshare .slide{
		height:100%;
		position: absolute;
		top:0px;
		left:0px;
		transition:opacity 0.2s;
	}
	.carousel-cell.lampshare img{
		display: block;
		height:100%;
	}
	.carousel-cell.lampshare .slide1{
		opacity:0;
	}
	.carousel-cell.lampshare.light .slide1{
		opacity:1;
	}
	.carousel-cell.lampshare .inline-videotitel{
		display: none;
	}
	.carousel-cell.lampshare .lightbut{
        position: absolute;
		display: none;
        width:48px;
        height:48px;
        border-radius:100%;
       
		right:var(--space);
        bottom:var(--space);
        background-image: url(../img/icon_light_2.svg);
		background-position: center;
		background-repeat: no-repeat;
        background-size:32px;
		
        cursor:pointer;		
        z-index: 200;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
        
    }
	.carousel-cell.lampshare.light .lightbut{
		 background-image: url(../img/icon_light_on_2.svg);	
	}

	.is-pointer-down .carousel-cell{
		//pointer-events: none;
	}
  

    /* flickity ----------------------------- */
		
    .flickity-page-dots{
        bottom:-24px;
    }
    .flickity-page-dots .dot{
        margin:0 4px;
        border:1px solid black;
        opacity: 1;
        background: none;	
    }
    .flickity-page-dots .dot.is-selected{
        background: black;	
    }
    .main-carousel > .flickity-button{
        top:0px;
        height:calc(100% - 40px);
        width:108px;
        transform: none;
        border-radius:0px;
       
		color:black;
		background:none;
		
		display: flex;
		justify-content:center;
		align-items:center;
		background-image:url(../img/icon_prev.svg);
		background-repeat: no-repeat;
		background-size: 110px;
		background-position: center;
    }
    .main-carousel > .flickity-button .flickity-button-icon{
		position: relative;
		top:auto;
		left:auto;
		width:40px;
		height:40px;
		display: none;
	}
    
	.flickity-button:disabled{
		opacity: 0 !important;
	}
	
	.flickity-button:hover{
		background-color:none !important;
	}
    .flickity-prev-next-button.previous{
		background-image:url(../img/icon_prev.svg);
        left:0px !important;
    }
    .flickity-prev-next-button.next{
		background-image:url(../img/icon_next.svg);
        right:0px !important;
    }
		
	

	.title h1{
		font-weight: normal;
		font-size:5vw;
		line-height: 1;
		pointer-events: none;
		margin:0px;
		padding:0px;
	}
	
	/* avatar */
	.avatarlayer{
		position: fixed;
		top:0px;
		left:0px;
		width:100svw;
		height:100svh;
		z-index: 3000;
		pointer-events: none;
		
	}
    .avatar{
		position: absolute;
		height:40vh;
		width:35vh;
        bottom:0;
		right:0;
		opacity:0;	
		pointer-events:auto;
		transition: opacity 0.3s; 
		pointer-events: none;
	}
	.avatar.on{
		opacity:1;	
		pointer-events: auto;
	}
	.avatar *{
		pointer-events: none;
	}
	
	.avatar.on *{
		pointer-events: auto;
	}
	.main-carousel-a{
		width:35vh;
		z-index: 50;
		pointer-events: none;
	}
	
	.carousel-cell-a{
		height:40vh;
		width:35vh;
	}
	
	.avatar .avatarvideo{
		height:100%;
		width:100%;
		padding:0 20px 0 0;
	}
	.avatar.av3 .avatarvideo{
        transform: translate(3vh, 2vh) scale(108%);
	}
	.avatar.av4 .avatarvideo{
        transform: translate(3vh, 0vh) scale(100%);
	}
    .avatar.av5 .avatarvideo{
        //transform: translate(0px, 10px);
		transform: translate(1vh, 5vh) scale(120%);
	}
    .avatar.av6 .avatarvideo{
        //transform: translate(20px, 30px);
		transform: translate(0vh, 5vh) scale(120%);
	}
	.avatar video{
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		height:100%;
	}
	
	.avatar a{
		color:inherit;
		text-decoration: none;
	}
	.avatar .msg{
		position: absolute;
		bottom:37vh;
		right:4vw;
		width:calc(100% - 5vw);
		background:white;
		padding:12px 12px;
		margin:0 auto;
		border-radius:30px;
		opacity:0;
		transform-origin: center;
		box-shadow: 0px 0px 12px rgba(255,255,255,0.5);
		text-align: center;
		display: block;	
		z-index: 200;
		pointer-events: none;
	}
	.avatar.msg .msg{
		opacity:1;
		pointer-events: auto;
		-webkit-animation: scale-in-bottom 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-bottom 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		
	}
	.avatar .msg:after{
		position: absolute;
		bottom:-30px;
		left:22%;
		width:65px;
		height:30px;
		background:url(../img/icon_msg2.svg);
		content:'';
	}
	.avatar .msg p{
		margin:0px;
	}
	.avatar .msg u{
		text-decoration: none;
		border-bottom:1px solid black;
	}

    .avatar .close{
        position: absolute;
        bottom:calc(var(--space) + 10px);
        right:calc(var(--space) + 10px);
        width:40px;
        height:40px;
        border-radius: 100%;
        border:1px solid black;
        background:url(../img/icon_close.svg) no-repeat center;
        background-size:40px;
        z-index: 100;
		pointer-events: auto !important;
		transition:all 0.3s;
		cursor: pointer;
		display:none;
    }
	.avatar .close:hover{
		background-color:rgba(0,0,0,0.1);	
	}
	

	@keyframes example {
	  0%   {opacity: 0;filter:blur(20px);transform: scale(0.7);}
	  25%  {opacity: 1;filter:blur(0px);transform: scale(1)}
	  100%  {opacity: 1;filter:blur(0px);transform: scale(1)}	
	 
	}
	@keyframes msg {
	  0%   {opacity: 0;transform: scale(0.7);}
	  100%  {opacity: 1;transform: scale(1)}	
	}

	@-webkit-keyframes scale-in-bottom {
	  0% {
		-webkit-transform: scale(0);
				transform: scale(0);
		-webkit-transform-origin: 50% 100%;
				transform-origin: 50% 100%;
		opacity: 1;
	  }
	  100% {
		-webkit-transform: scale(1);
				transform: scale(1);
		-webkit-transform-origin: 50% 100%;
				transform-origin: 50% 100%;
		opacity: 1;
	  }
	}
	@keyframes scale-in-bottom {
	  0% {
		-webkit-transform: scale(0);
				transform: scale(0);
		-webkit-transform-origin: 50% 100%;
				transform-origin: 50% 100%;
		opacity: 1;
	  }
	  100% {
		-webkit-transform: scale(1);
				transform: scale(1);
		-webkit-transform-origin: 50% 100%;
				transform-origin: 50% 100%;
		opacity: 1;
	  }
	}

	/* dtail page */
    
    body.isdetail{
        pointer-events: none;
        overflow: hidden;
    }
 	
	#detail{
		z-index: 12000;
		position: fixed;
		top:0px;
		left:0px;
		width:100px;
		height:100px;
		width:100vw;
		height:100vh;
		background:white;
		opacity: 0;
		transition:opacity 0.5s;
		pointer-events: none;
		overflow: scroll;
	}
	#detail.on{
		opacity: 1;
		pointer-events: auto;
	}
	
	#detail .apptitle .in{
		background:white;
	}
	#detail .content h1{
		margin-bottom:var(--space) ;
	}
	#detail .content .read{
		margin-bottom:60px;	
	}
	#detail .content .read{
		font-size:24px;
		line-height:30px;
	}
	#detail .content .read h1{
		text-transform: none;
	}
	#detail .content .read h1.smaller{
		font-size: 48px;
	}
	#detail .content .read h3{
		text-transform: none;
		border:0px;
		padding:24px 0px;
	}
	#detail .content .read p{
		margin-bottom:24px;
	}
	#detail .content .read p.small{
		font-size:16px;
		line-height:20px;
	}
	#detail .content .read p.question{
		font-size:16px;
		line-height:20px;
		padding:0 60px; 
	}

	#detail .title{
		padding:var(--space);
		font-size: 4vw;
	}
	

	
	#detail.video .apptitle{
		display: none;
	}
	#detail.video .back, #detail.gallery .back{
		filter:invert();
	}
	#detail.video .navbut.close{
		filter:invert();
		mix-blend-mode: difference;
	}

	#detail .inner{
		width:100%;
		height:100%;
	}
	
	#detail .media{
		position: relative;
		top:0px;
		height:auto;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		display: flex;
		align-items: center;
		max-height:100svh;
		overflow: hidden;
		
	}
    #detail .media > div{
        background-color:black;
    }
    #detail .media .videoplayer{
       // pointer-events: auto;    
    }
    #detail .media .videoplayerx{
        width:100%;
        height:100%;
       // pointer-events: auto;    
    }
	#detail .media iframe{
		display: block;
        width:100%;
        aspect-ratio:1.778;
		margin:0 auto;
     }
    #detail .carousel{
		position: relative;
        height:100svh;
        width:100svw;
	}
    #detail .carousel-num{
		position: absolute;
        height:100px;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content:center;
        align-items:flex-end;
	}
	#detail .carousel-num .num{
		padding: 8px 12px;	
	}
	#detail .main-carousel{
        padding:0px;
		height:100%;
        width: 100%;
	}
    
	#detail .carousel-cell{
        width:100svw;
		height:100svh;
		text-align: center;
        display: flex;
        flex-direction: column;
        padding:0px 108px;
        margin-right: var(--space);
	}
    #detail .carousel-cell .top{
		display: flex;
		align-items:flex-end;
		flex:0 0 100px;
	}

    #detail .carousel-cell .middle{
        flex:1 1 100%;
        background-position: center;
        background-size:contain;
        background-repeat: no-repeat;
    }
    #detail .carousel-cell .bottom{
        flex:0 0 100px;
        padding:8px;
    }
	#detail .carousel-cell p{
		padding-top:8px 12px;
	}
    #detail .main-carousel > .flickity-button{
        height: 100%;
        width: 100px;
    }


	/*
	#detail .medialayer{
		position: absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		background-size:cover;
		background-position: center;
		//brder:10px solid yellow;
		opacity:1;
		transition:all 0.5s;
		pointer-events: none;
	}
	#detail.on .medialayer{
		opacity:0;	
	}
    */
	.opendetail{
		cursor:pointer;
	}
	#detail .info{
		padding:16px var(--space);
		//opacity:0;
	}
	#detail.active .info{
		transition:all 0.5s;
		opacity:1;
	}
	#detail .text{
		padding:0px var(--space);
		margin-bottom: var(--space);
		font-size:16px;
	}
	
	#detail .content{
		padding-top:90px;
		display: block;
	}
	
    
    /* content -------------------- */

	.content{
		display: none;
		max-width:1024px;
		padding:0px var(--space);
		margin:0 auto;
	}
    .content.on{
        display: block;
    }
	
	.content h1{
		padding:0 0p 20px;
		margin:0px;
	}
	.content h2{
		padding:24px 0px;
		margin:0px;
        margin-left:-2px;
		border-top:1px solid black;
	}
    .content h2 b{
        display: inline-block;
		font-weight: normal;
        margin-left: -3px;
	}
	.content h3{
		font-size:24px;
		line-height: 1;
		text-align: left;
		//padding:20px 0;
		padding:12px 0;
		margin:0px;
		border-top:1px solid black;
		
	}
	.content p{
		padding:0px;
		//margin:0 0 20px 0;
		margin:0 0 12px 0;
	}
	.content hr{
		padding:0px;
		margin:0 0 20px 0;
	}
	.content h4{
		font-weight: normal;
		border-top:1px solid black;
		padding:4px 0px;
		margin:0 ;
	}
	.content ul{
		padding:0px;
		margin:-24px 0 4px 60px;
	}
	.content li{
		position: relative;
		padding:0 0  0 20px;
		margin:0;
		list-style: none;
	}
	.content li:after{
		position: absolute;
		top:3px;
		left:0px;
		width:12px;
		height:12px;
		border-radius: 100%;
		background:black;
		content:'';
	}
    .content li:after{
		position: absolute;
		top:9px;
		left:0px;
		width:12px;
		height:1.5px;
		background:black;
		content:'';
	}

	.content.txt ul{
		padding:0px;
		margin:0px 0 20px 0px;
	}

    .link{
        position: relative;
        padding-left:18px;
        cursor:pointer
    }
    .link:after{
        position: absolute;
        top:4px;
        left:0px;
        width: 12px;
        height:12px;
        border-radius: 12px;
        background:black;
        content: '';
    }
    /* werkliste -------------------- */	
	
    .work{
        width:100%;		
    }
	.work .empty{
		padding:12px 0 var(--space);
		display: none;
		text-align: center;
    }
	.work .empty.on{
		display: block;
    }
    .work .item{
        width:100%;
        
        max-height:0;
        overflow: hidden;
        transition: all 0.3s;
    }
    .work .item > div{
        margin-bottom:24px;  
        display: grid;
        grid-template-columns: 25% 75%;
        grid-gap:24px;
    }
    .work .item.on{
        max-height:1000px;   
    }
    .work .item .media{
        width:100%;
        aspect-ratio:1.77;
        background:rgba(0,0,0,0.5)
    }
    .work .item img{
        width:100%;
        filter:grayscale(100%);
		mix-blend-mode: multiply;
    }
    .work .item img:hover{
		filter:grayscale(0%);	
		mix-blend-mode: normal;
	}
    .work .item .info{
    	border-top:1px solid black;
		padding-top:12px;
    }
    
    .exhibitions .item{
        padding-bottom:var(--space);
    }
    .exhibitions .item.active .title{
        font-size:5vw;
        line-height: 1;
    }
    .exhibitions .item .media{
        padding-bottom:var(--space);
    }
    .exhibitions .item .media div{
        width:33%;
    }
    .exhibitions .item .media img{
        width:100%;
    }
    .credits{
		margin-top:1rem;
	}
    .credits .credits-content{
		display: none;
	}
    .credits.on .credits-content{
		display: block;
        font-size:13px;
        line-height: 18px;
		padding-top:16px;
	}
    #detail .credits{
        padding-bottom:24px;
    }
    #detail .credits.on{
        padding-bottom:0px;
    }
	/* index text stuff --------------------------- */
	
	.content .index a, .content .exhibitions a{
		display: block;
		position: relative;
		text-decoration: none;
		padding-left:20px;
	}
	.content .index .title{
		text-transform: uppercase;
	}
	.content .index p{
		margin:0px !important;
	}

	.content .index a{
		transition: all 0.3s;
		cursor:pointer;
	}
	.content .media .video{
		width:50%;
	}
	.content .media .video img{
		width:100%;
	}
	.content .media label{
		display: block;
		padding:8px 0 20px;
	}
	.content .title{
		border-top:1px solid black;
		padding:24px 0px;
		margin:0px;
	}
	.content .title a{
		padding:0px;
		
	}
	.content .title a:after{
		top:8px;
		width:42px;
		height:42px;
		background:black;
	}
	.content .logo{
		//background:black;
		width:33.3%;
		padding:24px 0;
		//border:1px solid black;
		//background:rgba(0,0,0,0.1);
	}
	.content .logo img{
		//width:25%;
		//filter:invert();
	}
	.content .logo.duisburg img{
		//width:20%;
	}

	/* exhibition text stuff --------------------------- */

	
    /* filters */

    .filters{
        padding:var(--space) 0;
        display: flex;
        justify-content: center;
        border-top:1px solid black;
    }
    .filters a{
        //display: inline-block;
        padding:4px 18px;
        //border:1px solid rgba(0,0,0,0.8);
        //border-radius:18px;
        //margin-right:4px;
        cursor:pointer;
        flex:0 1;
        text-align: center;
        min-width:120px;
		border-right:1px solid black;
    }
	.filters a:first-child{
		border-left:1px solid black;	
	}
    .filters a.on{
        background:black;
        color:var(--color) !important;
		//border-radius:2px;
    }
	/* footer */

	.footer{
		border-top:1px solid black;
		padding:18px 0 60px;
	}
	.footer a{
		display: inline-block;
		margin:0px 4px;
		text-decoration: none;
		border-bottom:1px solid black;
		
	}
	/* video aspect ratio*/



	@media (min-aspect-ratio: 1.77) {
		#detail .media{
			height:100svh;
		}
		#detail .media iframe{
			width:auto;
			height:100%;
		}
		#detail .info{
			width: calc(100svh * 1.77);
			margin:0 auto;
			padding-left:0px;
			
		}
		#detail .info > div{
			padding-left:0px;
		}
	}
	
	.mobile-only{
		display: none !important;
	}

    /* This used to work for the parent element of button divs */
    /* But it does not work with newer browsers, the below doesn't hide the play button parent div */

    *::-webkit-media-controls-panel {
      display: none!important;
      -webkit-appearance: none;
    }

    /* Old shadow dom for play button */

    *::-webkit-media-controls-play-button {
      display: none!important;
      -webkit-appearance: none;
    }

    /* New shadow dom for play button */

    /* This one works! */

    *::-webkit-media-controls-start-playback-button {
      display: none!important;
      -webkit-appearance: none;
    }