@font-face {                                                                                       
	font-family: 'Bandeins Strange'; 
	src: url('../typo/BandeinsStrangeVariableGX.ttf') format('truetype'); 
 }
 
 *{
	 margin: 0;
	 padding: 0;
	 cursor: none;
 }

 html {
    scrollbar-width: none;
    scrollbar-height: none;
    -ms-overflow-style: none;
	-webkit-text-size-adjust: 100%;
}
 
 
 ::selection { 
	 background: rgba(0, 0, 0, 0.9); 
 }
 
 body{
	 width: 100vw;
	 height: 100vh;
	 overflow-x: hidden;
	 scrollbar-width: none;
	  -ms-overflow-style: none;
	 font-family: Bandeins Strange;
	 cursor: none;
 }
 
 /* -------------- background -------------- */
 
 #circle{
	 width: 22px;
	 height: 22px;
	 background: transparent;
	 position: absolute;
	 border-radius: 160px;
	 border: solid 2px #000	;
	 left: 0px;
	 top: 0px;
	 transform: translate(-50%,-50%);
	 z-index: 99999999;
	 
 }
 
 /*#kreis{
	 width: 24px;
	 height: 24px;
	 background: transparent;
	 position: absolute;
	 border: solid 2px #000;
	 left: -1px;
	 top: -1px;	
	 transform: translate(-50%,-50%);
	 z-index: 2;
 }*/
 
 .bg {
	 width: 100vw;
	 height: 100vh;
	 background: #000;
 }
 
 
 
 
 
 
 
 /* -------------- header -------------- */
 
 .header-grid{
	 position: fixed;
	 width: 100vw;
	 height: 8vh;
	 overflow-x: hidden;
	 display: grid;
	 grid-template-rows: 100%;
	 grid-template-columns: 16.66666% 16.66666% 16.66666% 16.66666% 16.66666% 16.66666%;
	 grid-template-areas: 
		 "header header header header header header";
 }
 
 .header-grid div{
	 border: solid 1px #000;
 }
 
 .header-grid .header a{
	 display: flex;
	 width: 100%;
	 height: 100%;
	 font-size: 2rem;
	 align-items: center;
	 justify-content: center;
	 text-decoration: none;
	 color: #000;
	 z-index: 1;
 }
 
 .header-grid div:hover{
	 border: solid 2px #fff;
 }
 
 .header-grid .header a:hover{
	 color: #fff;
 }
 
 @media (max-width: 500px) {
 
	 .header-grid {
		 position: absolute;
		 width: 100vw;
		 height: 10vh;
		 display: grid;
		 grid-template-rows: 50% 50%;
		 grid-template-columns: 33.33333% 33.33333% 33.33333%;
		 grid-template-areas: 
			 "header header header" 
			 "header header header";
		 }
 
		 .header-grid .header a{
			 font-size: 1.3rem !important;
		 }

		 .header-grid div{
			border: solid 0.1px #000;
		}
 }
 
 @media (min-width: 501px) and (max-width: 1024px) {
 
	.header-grid {
		position: absolute;
		width: 100vw;
		height: 10vh;
		display: grid;
		grid-template-rows: 50% 50%;
		grid-template-columns: 33.33333% 33.33333% 33.33333%;
		grid-template-areas: 
			"header header header" 
			"header header header";
		}

		.header-grid .header a{
			font-size: 2rem;
		}

		.header-grid div{
		   border: solid 0.1px #000;
	   }
}
 
 
 
 
 
 
 /* -------------- ABOUT |PROGRAMM -------------- */
 
 
 

 
 
 
 .program-grid{
	 position: fixed;
	 overflow-x: scroll;
	 scrollbar-width: none;
	 top: 8vh;
	 width: 100vw;
	 height: 92vh;
	 display: grid;
	 grid-template-columns: 33.33333% 33.33333% 33.33333%;
	 grid-template-areas: 
		 "program program program"	
		 "program program program"
		 "program program program"	
		 "program program program"
		 "program program program"	
		 "program program program";
		 
 }
 
 .program-grid .program{
	 transition: all 250ms;
	 animation: fadeIN 0.8s ease-out normal backwards;	
 }
 
 .program-grid .element1{ animation-delay: 0 }
 .program-grid .element2{ animation-delay: 100ms }
 .program-grid .element3{ animation-delay: 100ms }
 .program-grid .element4{ animation-delay: 200ms }
 .program-grid .element5{ animation-delay: 200ms }
 .program-grid .element6{ animation-delay: 300ms }
 
 
 @keyframes fadeIN {
	 0% {transform: scale(0);}
	 50% {transform: scale(1.03);}
	 100%{transform: scale(1);}
 }
 
 .program-grid div{
	 border: solid 1px #000;
	 height: 45vh;
	 overflow-x: scroll;
	 scrollbar-width: none;
 }
 
 .program-grid .program img{
   display: flex;
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: opacity(30%);
 }
 
 .program-grid .program h1{
	 position: relative;
	 display: flex;
	 font-size: 3rem;
	 padding: 0.5rem;
	 font-weight: normal;
	 text-transform: uppercase;
	 filter: opacity(30%);
	
 }
 
 .program-grid .program p{
	 display: flex;
	 font-size: 1.5rem;
	 padding: 0.5rem;
	 overflow-x: scroll;
	 scrollbar-width: none;
	 filter: opacity(30%);
 }
 
 .program-grid .program a.link{
	 display: flex;
	 font-size: 1.5rem;
	 padding: 0.5rem;
	 overflow-x: scroll;
	 scrollbar-width: none;
	 text-decoration: none;
	 text-transform: uppercase;
	 color: #000;
 }
 
 .program-grid .program a.link:hover{
	 color: #fff;
 }
 
 
 .program-grid .program:nth-child(4) h1,
 .program-grid .program:nth-child(4) p,
 .program-grid .program:nth-child(5) img,
 .program-grid .program:nth-child(6) h1,
 .program-grid .program:nth-child(6) p{
	 filter: none;
 }
 
 
 @media (max-width: 500px) {
 
	 .program-grid {
		 position: absolute;
		 overflow-x: scroll;
		 scrollbar-width: none;
		 top: 10vh;
		 width: 100vw;
		 height: 90vh;
		 display: grid;
		 grid-template-columns: 25% 25% 50%;
		 grid-template-areas:  
			 "program program program"	
			 "program program program"
			 "program program program"	
			 "program program program"
			 "program program program"	
			 "program program program";
			 }
 
	 .program-grid div{
		 height: 25vh !important;
		 border: solid 0.5px #000;
	 }
		 
	 .program-grid .program h1{
		 font-size: 1.5rem;
		 word-break: break-word;
		 padding: 0.3rem;
	 }
 
	 .program-grid .program p{
		 font-size: 1rem;
		 padding: 0.3rem;
	 }
 
	 .program-grid .program a.link{
		 font-size: 1rem;
		 padding: 0.3rem;
	 }
 }
 
 
 @media (min-width: 501px) and (max-width: 1024px) {
 
	.program-grid {
		position: absolute;
		top: 10vh;
	}
 }
 
 
 
 
 
 
 /* -------------- Project | Archive | Shop --- OVERVIEW-------------- */
 
 
 .project-grid{
	 position: absolute;
	 top: 8vh;
	 width: 100vw;
	 height: 92vh;
	 display: grid;
	 grid-template-columns: 25% 25% 25% 25%;
	 grid-template-areas: 
		 "project project project project" 
		 "project project project project"
		 "project project project project";
	 overflow-x: scroll;
	 scrollbar-width: none;	
 }
 
 .project-grid .project{
	 transition: all 250ms;
	 animation: fadeIN 0.8s ease-out normal backwards;	
 }
 
 .project-grid .element1{ animation-delay: 0 }
 .project-grid .element2{ animation-delay: 100ms }
 .project-grid .element3{ animation-delay: 200ms }
 .project-grid .element4{ animation-delay: 400ms }
 .project-grid .element5{ animation-delay: 100ms }
 .project-grid .element6{ animation-delay: 200ms }
 .project-grid .element7{ animation-delay: 300ms }
 .project-grid .element8{ animation-delay: 400ms }
 
 
 
 @keyframes fadeIN {
	 0% {transform: scale(0);}
	 50% {transform: scale(1.03);}
	 100%{transform: scale(1);}
 }
 
 .project-grid div{
	 border: solid 1px #000;
	 height: 40vh;
 }
 
 @media (max-width: 500px) {
 
	 .project-grid {
		 position: absolute;
		 top: 10vh;
		 width: 100vw;
		 height: 90vh;
		 display: grid;
		 grid-template-columns: 50% 50%;
		 grid-template-areas: 
			 "project project"
			 "project project"
			 "project project" 
			 "project project";
		 }
		 
	.project-grid div{
	    border: solid 0.5px #000;
	    height: 25vh;
    }
 }

 @media (min-width: 501px) and (max-width: 1024px) {
 
	.project-grid {
		position: absolute;
		top: 10vh;
	}
	
	.project-grid div{
	 height: 32vh;
     }
 }
 
 .project-grid .project h1{
	position: absolute;
    display: flex;
    text-transform: uppercase;
    padding: 0.5rem;
    font-size: 3rem;
    font-weight: normal;
    color: #000;
    z-index: 4;
    word-break: break-word;
    max-width: 20%;
 }
 
 .project-grid .project a img{
	 display: flex;
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 filter: opacity(20%);
 }
 
 
 .project-grid .project img:hover{
	 filter: opacity(100%);
 }
 
 @media (max-width: 500px) {
 
	 .project-grid .project:nth-child(1) h1{
		 font-size: 1.5rem;
	 }
 
	 .project-grid .project h1{
		 font-size: 1.5rem;
	 }

	 .project-grid .project:nth-child(6) a{
		 font-size: 1.5rem;	
	 }
 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 /* -------------- ARCHIV-ITEM -------------- */
 
 
 .item-grid{
	 position: fixed;
	 top: 8vh;
	 width: 100vw;
	 height: 92vh;
	 display: grid;
	 overflow-x: scroll;
	 scrollbar-width: none;
	 grid-template-columns: 33.33333% 33.33333% 33.33333%;
	 grid-template-areas: 
		 "item item item" 
		 "item item item"
		 "item item item";
		 
 }
 
 .item-grid .item{
	 transition: all 250ms;
	 animation: fadeIN 0.8s ease-out normal backwards;	
 }
 
 .item-grid .element1{ animation-delay: 0 }
 .item-grid .element2{ animation-delay: 100ms }
 .item-grid .element3{ animation-delay: 100ms }
 .item-grid .element4{ animation-delay: 200ms }
 .item-grid .element5{ animation-delay: 200ms }
 .item-grid .element6{ animation-delay: 300ms }
 
 
 @keyframes fadeIN {
	 0% {transform: scale(0);}
	 50% {transform: scale(1.03);}
	 100%{transform: scale(1);}
 }
 
 .item-grid div{
	 border: solid 1px #000;
	 height: 45vh;
	 overflow-x: scroll;
	 scrollbar-width: none;
 }
 
 .item-grid .item img{
	 display: flex;
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 padding: 0;
 }
 
 .item-grid .item video{
	display: flex;
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding: 0;
	cursor: pointer;
}
 
 .item-grid .item h1{
	 position: relative;
	 display: flex;
	 font-size: 3rem;
	 padding: 0.5rem;
	 font-weight: normal;
	 text-transform: uppercase;
	 word-break: break-word;
 }
 
 .item-grid .item .aaryan h1{
     color:white !important;
 }
 
 .item-grid .item p{
	 display: flex;
	 font-size: 1.5rem;
	 padding: 0.5rem;
	 overflow-x: scroll;
	 scrollbar-width: none;
 }
 
 .item-grid .item a.link{
	 display: flex;
	 font-size: 1.5rem;
	 padding: 0.5rem;
	 /* overflow: scroll; */
	 text-decoration: none;
	 text-transform: uppercase;
	 color: #000;
 }
 
 .item-grid .item a:hover{
	 color: #fff;
 }
 
 @media (max-width: 500px) {
 
	 .item-grid {
		 position: absolute;
		 top: 10vh;
		 width: 100vw;
		 height: 90vh;
		 display: grid;
		 grid-template-columns: 33.333333% 33.333333% 33.333333%;
		 grid-template-areas: 
			 "item item item"
			 "item item item" 
			 "item item item";
		 }
 
	 .item-grid div{
		 height: 30vh;
	    border: solid 0.5px #000;
	 }
 
	 .item-grid .item h1{
		 font-size: 1.5rem;
		 word-break: break-word;
		 padding: 0.3rem;
	 }
 
	 .item-grid .item p{
		 font-size: 1rem;
		 padding: 0.3rem;
	 }
 
	 .item-grid .item a.link{
		 font-size: 1rem;
		 padding: 0.3rem;
	 }	
 }
 
 @media (min-width: 501px) and (max-width: 1024px) {
 
	.item-grid {
		position: absolute;
		top: 10vh;
	}
 }
 
 
 .item-grid .item h1.aaryan{
    color: white;
}
 
.item-grid .item p.aaryan{
     color: white;
}
 
 
 
 
 
 
 
 
 
 
 /* -------------- PROJECT-ITEM -------------- */
 
 
 .project-item-grid{
	 position: fixed;
	 top: 8vh;
	 width: 100vw;
	 height: 92vh;
	 display: grid;
	 overflow-x: scroll;
	 scrollbar-width: none;
	 grid-template-columns: 33.33333% 33.33333% 33.33333%;
	 grid-template-areas: 
		 "project-item project-item project-item" 
		 "project-item project-item project-item"
		 "project-item project-item project-item";
		 
 }
 
 .project-item-grid .project-item{
	 transition: all 250ms;
	 animation: fadeIN 0.8s ease-out normal backwards;	
 }
 
 .project-item-grid .element1{ animation-delay: 0 }
 .project-item-grid .element2{ animation-delay: 100ms }
 .project-item-grid .element3{ animation-delay: 100ms }
 .project-item-grid .element4{ animation-delay: 200ms }
 .project-item-grid .element5{ animation-delay: 200ms }
 .project-item-grid .element6{ animation-delay: 300ms }
 
 
 @keyframes fadeIN {
	 0% {transform: scale(0);}
	 50% {transform: scale(1.03);}
	 100%{transform: scale(1);}
 }
 
 .project-item-grid div{
	 border: solid 1px #000;
	 height: 46vh;
	 overflow-x: scroll;
	 scrollbar-width: none;
 }
 
 .project-item-grid .project-item img{
	 display: flex;
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
 }

 .project-item-grid .project-item img.logo{
	display: flex;
	width: 55%;
	height: auto;
	object-fit: cover;
	padding: 0.5rem;
}
 
 .project-item-grid .project-item h1{
	 position: relative;
	 display: flex;
	 font-size: 3rem;
	 padding: 0.5rem;
	 font-weight: normal;
	 text-transform: uppercase;
	 word-break: break-word;
 }
 

 
 .project-item-grid .project-item p{
	 display: flex;
	 font-size: 1.5rem;
	 padding: 0.5rem;
	 overflow-x: scroll;
	 scrollbar-width: none;
 }
 

 
 .project-item-grid .project-item a.link{
	 display: flex;
	 font-size: 1.5rem;
	 padding: 0.5rem;
	 overflow-x: scroll;
	 scrollbar-width: none;
	 text-decoration: none;
	 text-transform: uppercase;
	 color: #000;
 }
 
 
 .project-item-grid .project-item a:hover{
	 color: #fff;
 }
 
 @media (max-width: 500px) {
 
	 .project-item-grid {
		 position: absolute;
		 top: 10vh;
		 width: 100vw;
		 height: 90vh;
		 display: grid;
		 grid-template-columns: 50% 50%;
		 grid-template-areas: 
			 "project-item project-item"
			 "project-item project-item" 
			 "project-item project-item";
		 }
 
	 .project-item-grid div{
		 height: 30vh;
		 border: solid 0.5px #000;
	 }
 
	 .project-item-grid .project-item h1{
		 font-size: 1.5rem;
		 word-break: break-word;
	 }
 
	 .project-item-grid .project-item p{
		 font-size: 1rem;
		 word-break: break-word;
	 }
 
	 .project-item-grid .project-item a.link{
		 font-size: 1rem;
		 word-break: break-word;
	 }	
 }
 
 @media (min-width: 501px) and (max-width: 1024px) {
 
	.project-item-grid {
		position: absolute;
		top: 10vh;
	}
 }
 
 
 
 
 
 
 
 
 
 /* -------------- exhibition -------------- */
 
 .exhibition-grid{
	 position: absolute;
	 top: 8vh;
	 width: 100vw;
	 height: 92vh;
	 display: grid;
	 overflow-x: hidden;
	 scrollbar-width: none;
	 grid-template-columns: 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333% 3.3333%;
	 /* grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); */
	 grid-template-areas: 
		 "exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition" ;
 }
 
 .exhibition-grid .exhibition{
	 transition: all 250ms;
	 animation: fadeIN 0.8s ease-out normal backwards;	
	 font-size: 12rem;
	 overflow-x: scroll;
	 scrollbar-width: none;
	 scrollbar-width: none;
    -ms-overflow-style: none;
 }
 
 .exhibition-grid .element1{ animation-delay: 0 }
 .exhibition-grid .element2{ animation-delay: 100ms }
 .exhibition-grid .element3{ animation-delay: 100ms }
 .exhibition-grid .element4{ animation-delay: 200ms }
 .exhibition-grid .element5{ animation-delay: 200ms }
 .exhibition-grid .element6{ animation-delay: 300ms }
 .exhibition-grid .element7{ animation-delay: 300ms }
 .exhibition-grid .element8{ animation-delay: 400ms }
 .exhibition-grid .element9{ animation-delay: 400ms }
 .exhibition-grid .element10{ animation-delay: 500ms }
 .exhibition-grid .element11{ animation-delay: 500ms }
 .exhibition-grid .element12{ animation-delay: 600ms }
 .exhibition-grid .element13{ animation-delay: 600ms }
 .exhibition-grid .element14{ animation-delay: 700ms }
 .exhibition-grid .element15{ animation-delay: 700ms }
 .exhibition-grid .element16{ animation-delay: 800ms }
 .exhibition-grid .element17{ animation-delay: 800ms }
 .exhibition-grid .element18{ animation-delay: 900ms }
 .exhibition-grid .element19{ animation-delay: 900ms }
 .exhibition-grid .element20{ animation-delay: 1000ms }
 .exhibition-grid .element21{ animation-delay: 1000ms }
 .exhibition-grid .element22{ animation-delay: 1100ms }
 .exhibition-grid .element23{ animation-delay: 1100ms }
 .exhibition-grid .element24{ animation-delay: 1200ms }
 .exhibition-grid .element25{ animation-delay: 1200ms }
 .exhibition-grid .element26{ animation-delay: 1300ms }
 .exhibition-grid .element27{ animation-delay: 1300ms }
 .exhibition-grid .element28{ animation-delay: 1400ms }
 .exhibition-grid .element29{ animation-delay: 1400ms }
 .exhibition-grid .element30{ animation-delay: 1500ms }
 .exhibition-grid .element31{ animation-delay: 1500ms }
 .exhibition-grid .element32{ animation-delay: 1600ms }
 .exhibition-grid .element33{ animation-delay: 1600ms }
 .exhibition-grid .element34{ animation-delay: 1700ms }
 .exhibition-grid .element35{ animation-delay: 1700ms }
 .exhibition-grid .element36{ animation-delay: 1800ms }
 .exhibition-grid .element37{ animation-delay: 1800ms }
 .exhibition-grid .element38{ animation-delay: 1900ms }
 .exhibition-grid .element39{ animation-delay: 1900ms }
 .exhibition-grid .element40{ animation-delay: 2000ms }
 .exhibition-grid .element41{ animation-delay: 2000ms }
 .exhibition-grid .element42{ animation-delay: 2100ms }
 .exhibition-grid .element43{ animation-delay: 2100ms }
 .exhibition-grid .element44{ animation-delay: 2200ms }
 .exhibition-grid .element45{ animation-delay: 2200ms }
 .exhibition-grid .element46{ animation-delay: 2300ms }
 .exhibition-grid .element47{ animation-delay: 2300ms }
 .exhibition-grid .element48{ animation-delay: 2400ms }
 .exhibition-grid .element49{ animation-delay: 2400ms }
 .exhibition-grid .element50{ animation-delay: 2500ms }
 .exhibition-grid .element51{ animation-delay: 2500ms }
 .exhibition-grid .element52{ animation-delay: 2600ms }
 .exhibition-grid .element53{ animation-delay: 2600ms }
 .exhibition-grid .element54{ animation-delay: 2700ms }
 .exhibition-grid .element55{ animation-delay: 2700ms }
 .exhibition-grid .element56{ animation-delay: 2800ms }
 .exhibition-grid .element57{ animation-delay: 2800ms }
 .exhibition-grid .element58{ animation-delay: 2900ms }
 .exhibition-grid .element59{ animation-delay: 2900ms }
 .exhibition-grid .element60{ animation-delay: 3000ms }
 .exhibition-grid .element61{ animation-delay: 3000ms }
 .exhibition-grid .element62{ animation-delay: 3100ms }
 .exhibition-grid .element63{ animation-delay: 3100ms }
 .exhibition-grid .element64{ animation-delay: 3200ms }
 .exhibition-grid .element65{ animation-delay: 3200ms }
 .exhibition-grid .element66{ animation-delay: 3300ms }
 .exhibition-grid .element67{ animation-delay: 3300ms }
 .exhibition-grid .element68{ animation-delay: 3400ms }
 .exhibition-grid .element69{ animation-delay: 3400ms }
 .exhibition-grid .element70{ animation-delay: 3500ms }
 .exhibition-grid .element71{ animation-delay: 3500ms }
 .exhibition-grid .element72{ animation-delay: 3600ms }
 .exhibition-grid .element73{ animation-delay: 3600ms }
 .exhibition-grid .element74{ animation-delay: 3700ms }
 .exhibition-grid .element75{ animation-delay: 3700ms }
 .exhibition-grid .element76{ animation-delay: 3800ms }
 .exhibition-grid .element77{ animation-delay: 3800ms }
 .exhibition-grid .element78{ animation-delay: 3900ms }
 .exhibition-grid .element79{ animation-delay: 3900ms }
 .exhibition-grid .element80{ animation-delay: 4000ms }
 .exhibition-grid .element81{ animation-delay: 4000ms }
 .exhibition-grid .element82{ animation-delay: 4100ms }
 .exhibition-grid .element83{ animation-delay: 4100ms }
 .exhibition-grid .element84{ animation-delay: 4200ms }
 .exhibition-grid .element85{ animation-delay: 4200ms }
 .exhibition-grid .element86{ animation-delay: 4300ms }
 .exhibition-grid .element87{ animation-delay: 4300ms }
 .exhibition-grid .element88{ animation-delay: 4400ms }
 .exhibition-grid .element89{ animation-delay: 4400ms }
 .exhibition-grid .element90{ animation-delay: 4500ms }
 .exhibition-grid .element91{ animation-delay: 4500ms }
 .exhibition-grid .element92{ animation-delay: 4600ms }
 .exhibition-grid .element93{ animation-delay: 4600ms }
 .exhibition-grid .element94{ animation-delay: 4700ms }
 .exhibition-grid .element95{ animation-delay: 4700ms }
 .exhibition-grid .element96{ animation-delay: 4800ms }
 .exhibition-grid .element97{ animation-delay: 4800ms }
 .exhibition-grid .element98{ animation-delay: 4900ms }
 .exhibition-grid .element99{ animation-delay: 4900ms }
 .exhibition-grid .element100{ animation-delay: 5000ms }
 .exhibition-grid .element101{ animation-delay: 5000ms }
 .exhibition-grid .element102{ animation-delay: 5100ms }
 .exhibition-grid .element103{ animation-delay: 5100ms }
 .exhibition-grid .element104{ animation-delay: 5200ms }
 .exhibition-grid .element105{ animation-delay: 5200ms }
 .exhibition-grid .element106{ animation-delay: 5300ms }
 .exhibition-grid .element107{ animation-delay: 5300ms }
 .exhibition-grid .element108{ animation-delay: 5400ms }
 .exhibition-grid .element109{ animation-delay: 5400ms }
 .exhibition-grid .element110{ animation-delay: 5500ms }
 

 
 
 @keyframes fadeIN {
	 0% {transform: scale(0);}
	 50% {transform: scale(1.03);}
	 100%{transform: scale(1);}
 }
 
 .exhibition-grid div{
	 position: relative;
	 border: solid 1px #000;
	 height: 6.6666vh;
	 width: 3.3333vw;
	 overflow: hidden;
 }
 
 .exhibition-grid .exhibition img{
	 display: flex;
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 filter: opacity(30%);
 }
 
 .exhibition-grid .exhibition img:hover{
	 filter: opacity(100%);
 }
 
 
 @media (max-width: 500px) {
	 .exhibition-grid{
		 top: 10vh;
		 grid-template-columns: 20% 20% 20% 20% 20%;
		 grid-template-areas: "exhibition exhibition exhibition exhibition exhibition";

	 }
	 
	 .exhibition-grid div{
	 border: solid 0.5px #000;
	 width: 20vw;
	 }
	 
 }
 
 @media (min-width: 501px) and (max-width: 1024px) {
 
	.exhibition-grid {
		position: absolute;
		top: 10vh;
		grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10% ;
		grid-template-areas: "exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition exhibition";
	}

	.exhibition-grid div{
		border: solid 0.5px #000;
		width: 10vw;
		height: 10vh;
		}
 }
 
 
 
 /* -------------- AGBs -------------- */
 
 
 .AGB-grid{
	 position: fixed;
	 width: 100vw;
	 top: 99vh;
	 height: 10vh;
	 display: grid;
	 grid-template-rows: 100%;
	 grid-template-columns: 25% 25% 25% 25%;
	 grid-template-areas: 
		 "AGB AGB AGB AGB";
 }
 
 .AGB-grid div{
	 background-color: transparent;
	 border-top: solid 2px #000;
	 border-bottom: solid 2px #000;
	 border-left: solid 1px #000;
	 border-right: solid 1px #000;
 }
 
 .AGB-grid:hover{
	 top: 90vh;
 }
 
 .AGB-grid .AGB a{
	 display: flex;
	 width: 100%;
	 height: 100%;
	 font-size: 2rem;
	 align-items: center;
	 justify-content: center;
	 text-decoration: none;
	 color: #000;
	 text-transform: uppercase;
 }
 
 .AGB-grid .AGB a:hover{
	 color: #fff;
	 /*font-variation-settings: "wdth" 200;
	 transition: font-variation-settings 2000ms;*/
 }
 
 @media (max-width: 500px) {
 
	 .AGB-grid {
		 position: fixed;
		 top: 99vh;
		 width: 100vw;
		 height: 16vh;
		 display: grid;
		 grid-template-rows: 50% 50%;
		 grid-template-columns: 50% 50%;
		 grid-template-areas: 
			 "AGB AGB"
			 "AGB AGB";
		 }
 
	 .AGB-grid .AGB a{
		 font-size: 1rem;
		 }
 
	 .AGB-grid:hover{
		 top: 84vh;
		 }
 }