@charset "UTF-8";
/* CSS Document */



@font-face {
  	font-family: 'AK65';
  	src: url('../fonts/SuisseIntl-Regular.otf');
}
:root{
	--color-dimmed-40:rgba(0,0,0,0.3);
}

	body,html{
        width:100%;
        height:100%;
        padding:0px;
        margin:0px;
		font-family:"AK65", Helvetica, sans-serif;
        font-size:15px;
        line-height:20px;
		scroll-behavior:smooth;	
		letter-spacing: 0.02em;
    }
	body.overlay{
		overflow: hidden;
	}
	
	.font{
		font-family:"AK65", Helvetica, sans-serif;
        line-height: 1;
	}
	.font.bold{
		font-family:"AK65", Helvetica, sans-serif;
	}
	.font.heavy{
		font-family:"AK95", Helvetica, sans-serif;
	}
   

	.dimmed{
		color:var(--color-dimmed-40);
	}
	
	/* type */

	h1, h2, h3, h4{
		font-weight: inherit;
		margin:0px;
		line-height: inherit;
	}
    h1{
		font-size:80px;
        line-height:72px;
		padding:20px 4px 0px;
	}
	h2{
		font-size:72px;
		line-height:1;
		padding:1em 10% calc(1em - 0.1em) 10%;
		text-align: center;
	}
	h2 span{
		display: block;
		text-transform: none;
	}
	h3{
		font-size:72px;
		line-height:1;
		padding:1em 0 calc(1em - 0.1em) 0;
		text-align: center;
		hyphens:auto;
		hyphenate-limit-chars:10 6 4;
	}
	h3.left{
		text-align: left;
		width:80%;
        padding-bottom: 4px;
	}
    .page-text h3{
        padding-bottom:8px;
	}
	
	h4{
		font-size:inherit;
	}
	p{
		line-height: 1.4;
		margin:0;
		padding:0;
		margin-bottom:20px;
	}
	b, strong{
		font-weight: 460 !important;
	}
	a{
        display: inline-block;
        color:inherit;
		text-decoration: none;   
    }
	a.tag{
		display:inline-block !important;
		border:1px solid black;
		padding:4px 12px;
		border-radius:16px;
		margin-right:4px;
	}
	a.tag2{
		display:inline-block !important;
		border:1px solid black;
		background:black;
		color:white;
		padding:4px 12px;
		border-radius:16px;
		margin-right:4px;
	}

	/* text */
	
	.text p{
		margin-bottom:0;		
	}
	.text p+p{
		text-indent: 2rem;
	}
	.text a{
		color:var(--color-dimmed-40);
	}
	
	/* table */

	table{
		table-layout: fixed;
		border-spacing: 0px;
		border-spacing: 0;
		padding:0px;
		margin: 0px;
		width:100%;
	}
	table tr, td, th{
		padding:4px 0px 4px 0px;
		text-align: left;
		font-weight: inherit;
		vertical-align: top;
		font-variant:tabular-nums;
		
	}
	table th,table td{
		padding:0px 0px;
	}
	table th{
		width:33.3%;
	}
	table.lines{
		border-top:1px solid black;
		border-bottom:1px solid black;
	}
	table.lines th{
		border-right:1px solid black;
	}
	table.lines td{
		padding-left:8px;
	}

	/* layout */

    #app{
	   position: relative;
	   z-index: 100;	
	}
	#app > .inner{
		position: relative;
		background:white;
		z-index: 1000;
	}
    .home, .footer{
        position: fixed;
        height:100svh;
        width:100%;
        top:0px;
        left:0px;
		overflow: hidden;
		pointer-events: none;
    }
    .home > div, .footer > div{
        position: absolute;
        height:100%;
        width:100%;
        top:0px;
        left:0px;
		background-color:#f6f6f6;
		background-repeat: no-repeat;
		background-position: center;
        background-size:cover;
        transform:scale(105%);
        overflow: hidden;
		transform: translateZ(0);
		opacity:0;
		transition: opacity 2s;
		transform: translate3d(1,1,1);
		-webkit-backface-visibility: visible;
    }
	
	
	.home.on div.img{
		transition: all 2s ease-in;
	}
	
	.home.focus div.bg{
		opacity: 1;
	}
    
	@keyframes aa {
  		0% {opacity: 0;}
  		100% {opacity: 1;}
	}
	@keyframes aac {
  		0% {
			opacity: 0;
			filter:blur(30px) grayscale(100%) brightness(100%);
		}
		50% {
			opacity: 1;
		}
  		100% {
			opacity: 1;
			filter:blur(30px) grayscale(50%) brightness(130%);
		}
	}

	.footer{
		z-index: 500;
		display:none;
	}
	.footer.on, .footer.on > div{
		opacity:1;
		display:block;
	}

	.toptitle{
		position: fixed;
		top:0px;
		left:0px;
		width:100%;
		padding:36px 0px;
		text-align: center;
		z-index: 5000;
		text-transform: uppercase;
	}
    
    .mm{
        position: relative;
		top:0px;
        left:0px;
        width:100%;
        height:100%;
        z-index: 200;
		overflow: hidden;
		mix-blend-mode:difference;
		perspective: 800px;
		transform: translateZ(0);
		
    }
	.mm .logo{
		position: absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		display: flex;
		justify-content:center;
		align-items: center;
		transition: all 0.2s;
		pointer-events: none;
		user-select: none; 
		transition: all 1s;
	}
	.mm.on .logo{
		color:#fff;
	}
	
	/* typestyle */

	.is-grey .mm .logo{
		top:auto;
		bottom:12px;
		font-size:80px;
		text-align: left;
		padding:0px 10px;
		line-height:72px;
		height:auto;
	}

	/* style1 (gray)*/

	.is-grey .bg{
		z-index:100;
        filter:grayscale(100%);

	}
	.is-grey .img{
		opacity: 0;
        z-index: 300;
        filter:grayscale(100%);
        display: none;
	}
	.mm.is-grey {
		z-index: 200;
		mix-blend-mode:difference;
	}

	/* style3 (gray blur)*/

	.is-greyblur .bg{
		filter:grayscale(100%) brightness(200%) contrast(80%);
        z-index: 100;
        mix-blend-mode: multiply;
	}
	.is-greyblur .img{
		filter:blur(30px) grayscale(100%) brightness(150%);
        mix-blend-mode: multiply;
        z-index: 300;
        pointer-events: none;

	}
	.mm.is-greyblur{
    	 z-index: 200;
		color:white;
		mix-blend-mode:difference;
	}

	.home.is-greylur.on div.bg{
		opacity: 1;
        filter:grayscale(100%) brightness(200%) contrast(80%);

    }
	.home.is-greyblur.on div.img{
		opacity: 1;
		filter:blur(30px) grayscale(100%) brightness(130%);
	}

	/* style4 (color blur)*/

	.is-colorblur .bg{
		filter:grayscale(50%) brightness(200%);
        z-index: 100;
        mix-blend-mode: multiply;
	}
	.is-colorblur .img{
		filter:blur(30px) grayscale(50%) brightness(130%);
        mix-blend-mode: multiply;
        z-index: 300;
        pointer-events: none;
		
	}
	.mm.is-colorblur{
    	z-index: 200;
		color:white;
		mix-blend-mode:difference;
		
	}

	.home.is-colorblur.on div.img{
		opacity: 1;
		filter:blur(30px) grayscale(50%) brightness(130%);
    }
	.home.is-colorblur.on div.img{
		opacity: 1;
		filter:blur(30px) grayscale(50%) brightness(130%);
	}

    .rel{
        mix-blend-mode:difference;
        color:white;
        z-index: 200;
    } 

    section{
        position: relative;
        width:100%;
		max-width:1800px;
		margin:0px auto;
		padding:0px 8px;
	
    }
	section.fixed{
        position:fixed;
		z-index: 2000;
		pointer-events: none;
		
    }
	
	section .credits{
		text-align:center;
		margin:-80px 33% 40px;
	}
   
    section.first{
        position: absolute;
        top:0px;
    }
	.fullscreen{
		height:100svh;
	}
   
    .top{
        mix-blend-mode:normal;
        z-index: 4200;
        background:white;
        color:black;
    }
	.dark .top{
		 background:black;
        color:white;
	}

	/* grid */

	.grid{
		display: grid;
	  	grid-template-columns: repeat(4, 1fr);
	  	gap: 0px 8px;
		margin: 0px;
	}
	.grid.center{
		justify-content: center;
	}
	.grid.right{
		justify-content: right;
	}
	
	
	.grid.w1{
		grid-template-columns: repeat(1, 1fr);	
	}
	.grid.w2{
		grid-template-columns: repeat(2, 1fr);	
	}
	.grid.w3{
		grid-template-columns: repeat(3, 1fr);	
	}
	.grid.w4{
		grid-template-columns: repeat(4, 1fr);	
	}
	.grid.w6{
		grid-template-columns: repeat(6, 1fr);	
	}
	.grid.w8{
		grid-template-columns: repeat(8, 1fr);	
	}
	.grid.gr3{		
	  	grid-template-columns: repeat(3, 1fr);
	  	width:75%;
	}
	.grid.gr31{
	  	grid-template-columns: repeat(2, 1fr 3fr);
	}
	.grid .tile.grw3{
		grid-column-start: 2;
  		grid-column-end: 5;
	}
	.grid .tile.grw2{
		grid-column-start: 2;
  		grid-column-end: 4;
	}

	.grid.hidden{
		display:none;
	}
	.grid a{
		position: relative;
		transition:all 0.25s ease-out;
	}
	.grid a:hover{
		position: relative;
		z-index: 200;
	}

	.flex{
		display: flex;
		flex-wrap: wrap;
 		margin: 0px -4px;
	}
	.flex > div{
		padding: 0px 4px;
        margin-bottom:8px;
	}
	.flex.center{
		justify-content: center;	
	}
	.flex.right{
		justify-content:flex-end;	
	}
	.flex.w2 > div{
		flex:0 0 50%;
	}
	.flex.w3 > div{
		flex:0 0 33.3%;
	}
	.flex.w4 > div{
		flex:0 0 25%;
	}

	/* Tile -------------------- */
	
	.tile{
		position: relative;
		transition: background 0.25s;
		margin-bottom:8px;
		overflow: hidden;
        min-height: 64px;
	}
	.tile.noborder{
		border-top:0px solid black;
	}
    .tile.noselect{
		pointer-events: none;
	}
	.tile.border{
		border-top:4px solid black;
		padding-top:8px;
	} 
	.tile .hot{
		position: absolute;
		top:0px;
		left:0px;
		padding:4px;
		z-index: 1000;
	}
    .tile .tiletext{
		padding:6px 20px 8px 0px;
	}
	.medias h4{
		padding:16px 0 10px;
		font-size:36px;
		line-height:1.2;
	}

	.tile h4 span{
		text-transform: none;
		font-weight: normal;
		word-break: normal;
	}
	
	.tile p{
		margin:0px 20px 20px 0px;
	}
	.tile.txt{
		width:50%;
		float:left;
		column-count:2;
		column-gap:10px;
	}
	.tile .bgs{
		position: relative;
		aspect-ratio: 1.41;
		background-position:center;
		background-size:cover;
		display: flex;
		align-items:center;
		justify-content: center;
		transform: scale(100%);
		overflow: hidden;
	}

	.tile .bgs.blur{
		transform: translateZ(36px);
		filter:blur(36px) grayscale(0%) brightness(100%);	
	}
	.tile .bgs > *{
		position: absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		background-position:top center;
		background-size:cover;
		background-repeat: no-repeat;
	}
	.tile .bgs .fs{
		z-index: 20;
		display:block;
		mix-blend-mode: multiply;
	}
	.tile .bgs .fs > .color{
		position: absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		mix-blend-mode: multiply;
		
	}
	.tile .bgs .ft{
        position: absolute;
        width:100%;
        height: 100%;
		z-index: 30;
		mix-blend-mode: difference;
	}
	
    .tile .bgs .ft span{
        display:block;
		font-size: 32px; /*v1*/
		font-size:72px;
        line-height: 1;
        padding: 7px 0px 1px 4px;/*v1*/
		color:white;
        line-height:1;
		hyphens: auto;
		
	}

	.tile.topic .bgs .fs{
		background:#eee;
		display:block;
		mix-blend-mode: multiply;
		display: none;
	}
	.tile .bgs .bs{
		z-index: 10;
		transition: all 2s ease-out;
		overflow:hidden;
	}
	.tile.highlight .bgs{
		filter: grayscale(100%);

	}
	.tile .bgs:hover .bs{
		filter: blur(40px);	
	}
	.tile .bgs h4{
		z-index: 15;
		mix-blend-mode: difference;	
		color:white;
		margin:4px;
		text-align: ce
	}

	.tile.team .bgs{
		filter:grayscale(100%);
	}

	.tile.new, .tile.new .hot{
		background: #d599ff;
	}
	.tile.award, .tile.award .hot{
		background: #97fc6d;
	}

	.tile:hover{
		cursor:pointer;
	}
	.detail .tile:hover{
		background: white;
	}
	.tile:hover .bgs{
		filter:blur(0px);
		background-color:white;
	}
	
	.upercase{
		text-transform: uppercase;
	}
  
	#idaktuell .tile, #idthemen .tile{
		height:100%;
	}
	#idaktuell .tile > div, #idthemen .tile > div{
		height:100%;
	}
	
	#idaktuell a{
		display: block;
	}

	#idaktuell .more{
		text-align: center;
	}

	#idwettbewerbe .bgs{
		mix-blend-mode: multiply;
	}

	#idkontakt a{
		position: relative;
		color: inherit;
		text-decoration: none !important;
	}

	#idkontakt a:after{
		position: absolute;
		left:0px;
		bottom:5px;
		height:1px;
		width:100%;
		border-bottom:1px dotted black;
		content:'';
	}

	/* projectnav ------------- */
	
	.projectnav{
		padding:10px 10px;
		text-align: center;
	}
	.projectnav a{
		display: inline-block;
		padding:6px 6px;
		text-decoration: none;
		border:none;
		cursor:pointer;
	}
	.projectnav a.on{
		text-transform: uppercase;
	}

	.topbarx{
		position: fixed;
		width:100%;
		top:0px;
		z-index: 6000;
		mix-blend-mode: difference;
	}
	.topbarx section > div{
		position: relative;
	}
    .topbarx a{
        position: absolute;
		display: block;
		top:10px;
		left:0px;
		width:72px;
		height:72px;
		transition:all 0.2s ease-out;
		background-repeat: no-repeat;
		background-position: center;
		cursor: pointer;
		color:white;
    }
	.topbarx .burger{
        left:auto;
		right:0px;
		text-align: center;
		font-size:72px;
        line-height: 72px;  
		overflow: hidden;
    }
    .topbarx .burger:hover{
        background-color: white;
		border-radius:100%;
		font-size:36px;
    }
    .navigattion .topbarx .burger{
        background-image:url(../img/icon_close_w_s.svg);
		background-color:black;
		border-radius:100%;
    }
    .navigattion .topbarx .burger span{
        opacity: 0;
    }
	
	.topbarx .back{
		background-image:url(../img/icon_back_w_s.svg);
		pointer-events: none;
		opacity: 0;
		transition: all 0.4s;
	}
	.topbarx .back.on{
		pointer-events: auto;
		opacity: 1;
	}
	.nav{
		position: fixed;
		display: block;
		top:10px;
		right:62px;
		width:72px;
		height:72px;
		z-index: 5000;
		transition: top 0.5s, right 0.5s, width 0.5s, height 0.5s;
		overflow: hidden;
        box-sizing: border-box;
	}
    .navigation .nav{
        background: black;
    }
	.navigation .nav{
		width:50%;
		height:100%;
		top:0px;
		right:0px;
        background: black;
	}
	.navigation .nav .inner{
		opacity: 1;
	}
	.nav .inner{
		transition: all 0.5s;
		padding:8px 10px;
		color:white;
		height:100%;
		opacity: 0;
		background:blue;
		background:#5FFFBC;
		background:#000;
	}
	
	.navi{
		margin:28px 0px;
	}
	.navi a{
		font-size: 5vw;
		line-height:5vw;
        font-size: 72px;
        line-height: 1;
		display: block;
		padding:0px 0px;
		border-bottom:0px solid white;
		text-decoration: none;
		transition: all 0.3s;  
	}
	
	.goup{
		display:none;
		position: fixed;
		bottom:12px;
		right:10px;
		width:60px;
		height:60px;
		z-index: 20000;
		opacity:0.5;
		transition: all 0.3s;
		background:url(../img/icon_up.svg) no-repeat center center;
	}
	.goup.on{
		opacity:1;
	}

	/* detail ---------------------------------------- */

	
	.detail{
		position: fixed;
		top:0px;
		left:0px;
		width:100%;
		height:100vh;
		overflow-x: hidden;
  		overflow-y: auto;
		z-index: 3000;
		pointer-events: none;
		opacity:0;
		transition:opacity 0.5s ease-out;
	}
	.detail > .inner{
		display: block;
		position: relative;
		padding-top:100px;
		margin-top:0px;
		transition:padding-top 0.8s ease-out, margin-top 0.8s ease-out;	
		z-index: 20;
	}

	.detail.project > .inner{
		background:none;
	}

	.detail .content{
		background:white;
		position: relative;
		min-height: 100vh;
		padding:80px 0px;
	}
	.detail.project .content{
		padding:10px 0px;
	}
	.detail.on{
		opacity:1;
		pointer-events: auto;
	}
	.detail.on .inner{
		padding-top:0px;
	}
	.detail img{
		width:100%;
	}
	
	.detail.off{
		opacity: 0;
		pointer-events: none;
	}
	.detail.off .inner{
		margin-top:-100px;
	}

	/* detail header */
	.detail .header{
		display: none;
		background-color:white;
	}
	.detail.project.on .header{
		display: block
	}
	.detail .header .img{
		position: fixed !important;
		width:100vw;
		height:100vh;
		z-index: 10;
	}
	
	.detail .pageimage{
		position: absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		background-size:cover;
		max-width:none;
		
	}
	/* hide images after scroll*/
	.detail.scroll .pageimage{
		display: none;
	}
	
	.detail .pageimage.one{
		filter:blur(3vw) brightness(120%) saturate(80%);
		opacity: 1;
	}
	.detail .pageimage.two{
		pointer-events:none;
		opacity: 0;
		transition: all 0.8s ease-out;
	}
	.detail.focus .pageimage.two{
		opacity: 1;
	}
	.detail.project .pagetitle{
		padding-top:100px;
		width:100vw;
		height:100vh !important;
		mix-blend-mode: difference;
		color:white;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 200;
		transition:padding-top 0.8s ease-out, margin-top 0.8s ease-out;
	}
	.detail.project.on2 .pagetitle{
		padding-top:0px;
	}
	.detail.project .pagetitle h2{
		font-size: 7vw;
	}

	.detail-medias{
		margin-bottom:20px;
	}
	.detail-medias .media{
		background-size: cover;
	}
	
	.links a{
		display:block;
		padding-left:24px;
		background: url(../img/icon_next.svg) no-repeat top left;
		background-size:16px;
		border-bottom:0px solid black;			
		overflow-wrap: break-word;
  		word-wrap: break-word;
		word-break: break-word;
	
	}
	.detail-text a.link span, a.forcelink span{
		border-bottom:1px solid black;	
	}
	.detail-text a.link b{
		text-transform: uppercase;
		font-weight: normal;
	}
    .page-text h3{
        text-align: left;
    }
	#topicprojekte .grid{
		margin:0px 80px;
	}
	.detail table .year{
		width:110px;
		text-align: right;
		padding-right:1rem;
		white-space:nowrap;
		letter-spacing: 0;
		
	}

	/* detail content-item */
	
	.content-item{
		max-width:1000px;
		margin:0 auto;
		padding:8px 8px 16px 8px;
	}

	.content-item .head{
		border-top:1px solid black;
		text-align: center;
	}
	.content-item h3{
		padding:1em 0 calc(1em - 0.1em) 0;
	}
	.content-item .date{
		padding:8px 0;
		line-height: 1.25;
	}
	.content-item .medias{
		display:grid;
		grid-template-columns: 1fr 1fr;
		gap:8px;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
		flex-wrap: wrap;
	}
	.content-item .media{
		aspect-ratio: 1.41;
		background-size: cover;
	}
	.content-item .links{
		margin:0 auto 16px auto;
	}
	.content-item.news .links{
		width:50%;
	}
	.content-item .medias > div:only-child {
		grid-column: 1 / -1;   /* über beide Spalten */
		justify-self: center;  /* horizontal zentrieren */
		width: 50%;
	}
	.content-item .text{
		margin:0 0 20px 0;
	}
	.content-item.news .text{
		width:50%;
		margin:0 auto 20px auto;
	}
	
	.content-item table{
		width:100%;
		margin-bottom:20px;
	}
	.content-item .links.icons{
		text-align: center;
	}
	.content-item .icon{
		display: inline-block;
		width:36px;
		height:36px;
		margin:4px;
		background-repeat: no-repeat;
		background-position: center;
		background-size:36px 36px;
	}
	.content-item .icon.mail{
		background-image:url(../img/icon_mail.svg);
	}
	.content-item .icon.insta{
		background-image:url(../img/icon_insta.svg);
	}
	.content-item .icon.linkedid{
		background-image:url(../img/icon_linkedin.svg);
	}
	/* pageimg */
	
	.detail .pageimg{
		position: sticky;
		top:0px;
		display: block;
		width:100%;
		height:100vh;
		overflow: hidden;
		z-index: 500;
		pointer-events: none;
		
	}
	.detail .pageimg > div{
		height:100%;
		width:100%;
		background-size:cover;
		background-position: bottom;
		transform: scale(105%);
		transition:all 1s ease-in;
		filter:blur(36px);
	}
	
	/* sections */
	
	.detail	.sections{
		position: relative;
		background:white;
		z-index: 3000;
		padding:24px 80px;
	}	
	.sectiontext{
		width:66.6%;
		margin:0 auto;
		padding:8px 8px;
		column-width: 22rem;
	}
	
	.hyphen{
		 -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
		-webkit-hyphenate-limit-before: 4; /* For Safari */
        -webkit-hyphenate-limit-after: 4; /* For Safari */
        -ms-hyphenate-limit-chars: 10 4 4;
        hyphenate-limit-chars: 10 4 4;
	}

	.line-clamp-2{
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.detail .topics{
		margin:20px 0px;
	}
	
	.detail .data .upercase{
		display: inline-block;
		width:110px;
	}
	.detail .data{
		width:100%;
		column-gap: 8px;
		padding:0px 0px;
		margin:0 auto 2rem auto;
		column-width: 22rem;
	}
	.detail .data .spec{
		padding:0px 0px 1rem 0px;
	}
	.detail .data .spec > div:first-child{
		flex:0 0 12rem;
	}
	.detail .data .spec > div:last-child{
		color: var(--color-dimmed-40);		
	}

	.detail .medias{
		position: relative;
	}
	.detail .medias .tile{
		float:left;
		width:25%;
		margin:0px;
	}
	.detail .medias img{
		display: block;	
	}
	.detail .medias .img.grey,.detail .medias .img.gray{
		background:rgba(0,0,0,0.05); /*v2*/
	}
	.detail .medias .img.heller{
		filter:brightness(120%);
	}
	.detail .medias .img.dark{
		background:#a3a3a3;
	}
	.detail .medias.w1 .img.space{
		padding:40px;
	}
	.detail .medias.w2 .img.space{
		padding:40px;
	}
	.detail .medias.w3 .img.space{
		padding:20px;
	}
	.detail .medias.w4 .img.space{
		padding:20px;
	}
	.detail .medias.section_w100 .img.space{
		padding:40px;
	}
	.detail .medias .img.grey img,.detail .medias .img.gray img{
		mix-blend-mode: darken;
	}
	.detail .medias.grid{
		padding:0px;
	}
	.detail .medias.grid2 .tile{
		float:left;
		width:50%;
		margin:0px;
	}
	.detail .medias .tile > div{
		padding:4px;	
	}
	.detail .medias .bgs{
		margin:0px;	
	}
	
	.detail .medias.one img{
		width:100%;
	}

	.detail .medias.two, .detail .medias.slide2{
		margin:0px 25%;
	}
	.detail .medias.two .media{
		margin-bottom:8px;	
	}
	
	.detail .medias.grid .media{
		margin-bottom:8px;
	}
	.detail .medias.grid .media.zoom{
		overflow: hidden;
	}
	.detail .medias.grid .media.zoom .img{
		transition: all .2s;	
	}
	
	/* section with */

	.detail .section_w100{
		width:66.6%;
		margin:0px auto;
	}
	.detail .section_w75{
		width:66.6%;
		margin:0px auto;
	}
	.detail .section_w66{
		width:66.6%;
		margin:0px auto;
	}
	.detail .section_w50{
		width:66.6%;
		margin:0px auto;
	}
	.detail .media .img > div{
		position:relative;
	}
	.detail .media .num{
		position: absolute;
		width:24px;
		height:24px;
		border-radius: 100%;
		color:white;
		background:black;
		text-align: center;
		line-height: 26px;
		transform: translate(-50%,-50%);
	}
	
	.mediatext{
		margin-bottom:1rem;
	}
	.mediatext p{
		margin:0 0 1rem 0;
		color:var(--color-dimmed-40);
		column-width: 22rem;
	}
	
	.mediatext ul{
		list-style: none;
		padding:0px;
		margin:0px 20px 10px 0px;
		color:var(--color-dimmed-40);
	}
	.mediatext li{
		padding:0px;
		padding-left:24px;
		margin:0px;
	}
	.mediatext i{
		position: absolute;
		margin-left:-24px;
		font-style: normal;
		display: inline-block;
		width:18px;
		height:18px;
		font-size:12px;
		padding:2px 0px;
		line-height: 12px;
		border-radius: 100%;
		text-align: center;
		vertical-align: top;
		border:1px solid black;
		border-color:color:var(--color-dimmed-40);
	}

	.mediatext span.num{
		position: relative;
		display: block;
		width:100%;
		margin-top:-12px;
	}
	.detail .backarea{
		display: block;
		position: relative;
		width:100%;
		height:100vh;
		z-index: 500;
		background:rgba(0,0,0,0.5);
	}	

	
	/* fade in lazy loaded image */
	
	.carousel-cell-image.flickity-lazyloaded,
	.carousel-cell-image.flickity-lazyerror {
  		opacity: 1;
	}
	.flickity .mediatext{
		background:white;
	}
	.flickity .mediatext p{
		margin:0px;
	}
	.flickity-page-dots{
		display: none;
		bottom:0px !important;
		height:20px;
		mix-blend-mode: difference;
	}
	.flickity-page-dots .dot{
		background:white !important;
		margin:0px 4px !important;
	}	
	
	.images{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		margin:0px -4px;
	}
	.images.grid4{
		grid-template-columns: repeat(4, 1fr);
	}
	
	.images > div > div{
		padding:4px;
	}
	.images img{
		display: block;
		background:grey;
		width:100%;
	}

	/* photoswipe */

	.pswp__top-bar{
		height:80px;
		padding-right:10px;
	}
	.pswp__button--close{
		background:red;
	}
	.mobilehide{
		display: none;
	}