@media screen and (max-width: 900px){
	
	.mobilehide{
		display:none;
	}
	.mobileonly{
		display:block;
	}
	
	html, body, .topictext .lead{
		font-size:18px;
		line-height: 24px;
	}
	
	.header{
		position: fixed;
		overflow: hidden;
		padding:80px var(--space) 0px var(--space);
		z-index: 2000;
	}
	
    .textbut{
        display: none;
    }
    .topictext{
        position: relative;
        left:0px;
        height:auto;
        width:100%;
        background:none;
        pointer-events: auto;

    }
    
    .topictext .panel{
        position: relative;
        left:0px;
        height:auto;
        width:100vw;
        background:none;
		padding-top:160px !important;
        border:0px;
        box-shadow:none;
    }
  
    .topictext p{
        padding-top:10px;
        margin-bottom:12px;
    }
	.topictext .essay{
		margin-bottom:24px;
	}
	.essay i{
		width:32px;
		height:40px;
		background-size:60px;
	}
	
	.extras .item .title{
		padding-top:0px;
	}
    
    .main-carousel{
        padding:0px var(--space);
       
    }
    .carousel-cell{
        margin:0;
        height:auto;
    }
	.carousel-cell.wide{
		padding:0;
		background: none;
	}
	.carousel-cell .videoplayer{
        width:100%;
    }
    .carousel-cell.photo{
        width:100%;
        height: auto;
    }
    .carousel-cell.photo img{
        width:100%;
        height: auto;
    }
    .videoplayer, .gallery{
        width:100%;
    }
    .gallery .carousel-cell{
        width:100%;
    }
    .global-videotext{
        display: none;
    }
	.carousel-cell.photos{
		position: relative;
		height:auto;
		margin-top:20px;
        margin-left:0px;
        margin-right:0px;
		padding:40px 0;
	}
	.carousel-cell.photos .grid{
		height:auto;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-gap: 12px;
	}
	.carousel-cell.photos .grid div{
		aspect-ratio:1.5;
	}
	.carousel-cell.photos .inline-videotitel{
		width:100%;
		border-top:1px solid black;
		position: absolute;
		top:0px;
	}
	
	/* lampshares */
	
	.carousel-cell.lampshare .inline-videotitel{
		display: block;
	}
	.carousel-cell.lampshare .lightbut{
        display: block;
        width:36px;
        height:36px;
		background-size:36px;
    }

	/* flickity */
	
	.topic .subnav{
		padding-top:160px;
	}
	.topic .subnav a.on::after{
		top:22px;
	}
	.topic .main-carousel{
		overflow:hidden
	}
	
    
	/* video --------------------------- */
	
	.videoplayer .playframe{
        pointer-events:auto;
	}
	
	.topic.text .playbut{
		opacity: 1;
	} 
	.topic.text .inline-videotitel{
		opacity:1;
	}
	
	/* avatar */
	
	.avatarlayer{
		z-index: 2100;
		height:100dvh;
	}
   
	
	/* index text stuff --------------------------- */
	
	.content .title, .content h2{
		border-top:1px solid black;
		padding:10px 0 10px;
		margin:0px;
        //text-transform: none;
	}
    .content h2, .content h3{
        text-transform: none;
	}
    .content h2 b{
        margin-left: 0px;
	}
	.content .title a{
		padding:0px;
		
	}
	.content .title a:after{
		top:3px;
		width:26px;
		height:26px;
		background:black;
	}
   
    .content ul{
        margin:0px;
        margin-bottom:6px;
    }
	.content .media .video{
		width:100%;
	}
	.content .logo{
		width:50%;
	}
	
	.img .title{
        font-size:12px;
	}
	
	.hex .title span{
		width:35vw;
        border-bottom-left-radius:5px;
        border-bottom-right-radius:5px;
        height: auto;
		padding:1px;
		border-radius:0px;
		font-size:12px;
		line-height: 16px;
	}
	
	
	/* detail */
	#detail .carousel-num{
        height: 100px;
        line-height: 100px;
        padding: 0px;
    }
    #detail .carousel-num .num{
        padding: 0 !important;
    }
    
    #detail.video .navbut.close{
		filter:none;
		mix-blend-mode: normal;
	}
    #detail .media{
        padding-top:96px;
    }
    #detail .media > div{
        background: none;
    }
    #detail .media iframe{
        width:100%;
        height:100%;
    }
   
    #detail .carousel-cell{
        padding:0;
        text-align: left;
	}
    #detail .main-carousel > .flickity-button{
        width: 60px;
        background-size:60px; 
    }
    #detail .content .read{
        font-size: 16px;
        line-height: 20px;
    }
    #detail .content .read p.question{
        padding:0 24px 0 24px;
    }
	
    
}
/*
@media screen and (max-width: 800px) and (orientation:landscape){
    .header{
		position: relative;
        padding-left:60px;
        padding-right:60px;
		
	}
    .topictext .panel{
        padding-top:0px !important;
    }
    .topictext .panel > div{
        padding:0 60px;
    }
    .main-carousel{
        padding:0 60px;   
    }
    .content{
        padding:0 60px;   
    }
    .topic .content{
        padding-top:0px;
    }
    #detail .media{
        padding-top:0px;
        background: black;
    }
    #detail.video .navbut.close{
        filter:invert(100%);
        mix-blend-mode: difference;
    }
   
}
/* tablet portrait */
/*
@media screen and (max-width: 800px) and (orientation:portrait){
	html, body{
		font-size:20px;
		line-height: 24px;
	}
	.topictext .lead{
		font-size:20px;
		line-height: 24px;
	}
	.header h1{
		font-size:72px;
	}
	
	.ft-title-1, h1{
		font-size:72px;
	}
	.content h2, .content h3{
		font-size:48px;
	}
	.apptitle{
		height:72px;
	}
	.apptitle > div{
		line-height: 1;
	}
	.header{
		padding-top:72px;
		padding-bottom:12px;
	}
	.topic .content{
		padding-top:144px;
	}
	.topictext .panel{
		padding-top:144px !important;
	}
	#detail .content .read{
		font-size:20px;
		line-height: 24px;
	}
}
*/
@media screen and (max-width: 500px) {
	:root { 
		--space: 12px;
	}
	html, body, .topictext .lead{
		font-size:16px;
		line-height: 20px;
	}
	.ft-title-1, h1{
		font-size:40px;
		line-height: 1;
	}
	.ft-title-2, h2{
		font-size:40px;
	}
	.ft-title-3, h3{
		font-size:32px;
	}
	
	
	.apptitle{
		height:60px;
		margin:0;
		padding:0px;
	}
    
	.header{
		padding:44px var(--space) 0px var(--space);		
	}

	.header h1{
		font-size:40px;
		line-height: 60px;
	}
	
	.navbut.back, .navbut.close, .navbut.menu{
		width:60px;
		height:60px;
		background-size: 70px;
		
		top:0px;
		left:0px;
		margin:0px;
		transition:all 0s;
	}
	.navbut.close{
		left:auto;
		right:0px;
	}
	.navbut.menu{
		left:auto;
		right:0px;
	}
	.navbut.pause{
		right:var(--space); 
        bottom:var(--space); 
		background-size:70px;
		background-size:36px;
		width:36px;
		height:36px;
		transition:all 0s;
	}
    .langbut{
		position: fixed;
		width:100%;
		top:22px;
		right:0px;		
		margin:0px;
		z-index: 9000;
		text-align: center;
	}
	
	/* topic */
	
	.topic .subnav{
		padding-top:104px !important;
	}
	.topictext .panel{
		padding-top:104px !important;
	}
	
	.extras .item .icon{
		position: absolute;
		top:4px;
		left:0px;
		width:36px;
		height:36px;
		background-size:70px;
	}
	.extras .item .title{
		padding:0 0 0 48px;
	}
	.extras .item .title p{
		padding:0px;
		text-decoration: underline;
	}
	
	
	/* video */
	
	.video .playframe .playbut{
		width:50px;
		height:50px;
	}
	.video .playbar .but{
		width:36px;
	}
	
	/* work */
	.subnav{
		padding-bottom:12px;
	}
	.subnav a{
		padding:0px;
	}
	.subnav a.on::after{
		top:4px !important;
	}
	
	.filters{
		justify-content: flex-start;
	}
	.filters a{
		flex: 1 0 33.3%;
        min-width:0px;
	}
	.filters a:first-child{
		border-left:0px;
	}
	.filters a:last-child{
		border-right:0px;
	}
	
	.work .item > div{
        display: block;
    }
	.work .item .media{
		width:66.6%;
	}
	
	.work .item img:hover{
		filter:grayscale(100%);
		mix-blend-mode: multiply;
	}
	.work .item img.on{
		filter:grayscale(0%);
		mix-blend-mode: normal;
	}
	
	.work .item .info{
		border:0px;
		padding-top:8px;
	}
    
    .exhibitions .item .media div{
        width:100%;
    }
    
	/* avatar */
	
	.avatar{
		right:-10px;
	}
    .avatar .avatarvideo{
		padding:0;
	}
	.avatar .msg{
		width:calc(100% - 12px);
        right: 12px;
	}
	
	/* detail */
	 #detail .carousel-num{
        height: 60px;
        line-height: 60px;
        padding: 0px;
    }
    #detail .carousel-num .num{
        padding: 0 !important;
    }
	
    #detail .content{
        padding-top: 54px;
    }
   
    #detail .media{
        padding-top:60px;
    }

}