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

@font-face {
	font-family: ogg;
	src: url("../global data/fonts/Ogg-Italic.otf")
  }

 @font-face {
	font-family: agl;
	src: url("../global data/fonts/agl.otf")
  }




body {
		padding: 0;
		margin: 0;
		max-height: 100vh;
		max-width: 100vw;

		font-family: agl;
		font-size: 2.5vh;
		background-color: #d599c4;
		color: #008c93;
		overflow: auto;
    	-webkit-overflow-scrolling: touch;
		overflow-y: hidden;
		overflow-x: hidden;		

}

  


/* width */
::-webkit-scrollbar {
	width: 2px;

  }
  
  /* Track */
  ::-webkit-scrollbar-track {
	background: #d599c4;  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
	background:#008c93; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
	background:#008c93; 
  }




.scroller {
		height: 100vh;
		overflow: auto;
    	-webkit-overflow-scrolling: touch;
		-ms-overflow-style: none;  /* IE and Edge */
  		scrollbar-width: none;  /* Firefox */
		scroll-snap-type: y mandatory;

}
	
.scroller section {
		scroll-snap-align: start;
}

main {
	padding-bottom: 1rem;
	margin-left: 5vw;
	margin-right: 5vw; 
}	

#mainfloorplan, #info{
	display:none;
}

#mainfloorplanmobile {
	display:none;
}

#outline {
	display: none;
}

ul {
	list-style: none;	
	left:0;
	text-align: left;

}

li {
	font-family: ogg;
	padding-left: 0.5rem;
	color: #008c93;
}

p {
	font-size: 2.5vh;
	width: fit-content;


}


a {
	text-align: left;
	padding-top: 0.5rem;
	left:0;
	text-decoration: none;
	font-style: none;
}

h1 {
	text-align: center;
	font-size: 3vh;
	font-family: ogg;

}

h2 {
	font-size: 7.5vh;
	font-family: ogg;
}

h3 {
	font-size: 3vh;
	font-family: ogg;

}

h6 {
	font-size: 2vh;
	line-height: 1.5vh;
	padding-right: 0.5rem;
}

h7 {
	display: flex;
	font-size: 2.25vh;
	line-height: 2.25vh;
	padding-left: 2rem;
	margin-top: 0;
	padding-top: 0;
}

h8 {
	font-size:2vh;
	line-height: 3vh;
	padding-right: 0.5rem;
}

h9 {
	font-size: 2.5vh;
	line-height: 2.5vh;
	font-family: ogg;
	padding: 0;
	margin-bottom: 0;
}

h10 {
	font-size: 2.25vh;
	line-height: 2.25vh;
	padding-left: 19vw;
	padding-top: -1.5rem;
}

h11 {
	font-size: 2.25vh;
	line-height: 2.5vh;
	padding-left: 1rem;
	font-family: ogg;}


h12 {
	font-size: 2.25vh;
	padding-left: 3rem;
	line-height: 2.25vh;
}

h20 {
	font-size: 5.5vh;
	font-style: italic;
	text-decoration: underline;	
}

h30 {
	font-size: 1.5vh;
	line-height: 2vh;
}




figure {

	max-width: 90vw;
	max-height: 90vh;
	text-align: center;
	display: block;
	margin: 0 auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);

}

#pdf  {

	position: absolute;
	  top: 50%;
	left: 50%;
	  transform: translate(-50%, -50%);
	  margin: 0;
}



#concept p{
	font-size: 2.25vh;
	padding-left: 1vh;
	padding-right: 1vh;
	display: block;
	line-height: 2.5vh;
	padding-top: 0;

}

#infomobile {
	padding-bottom: 5vh;
	bottom: 5vh;

}

#information p{
	font-size: 2vh;
	padding-left: 1vh;
	padding-right: 1vh;

	line-height: 2vh;
}

h6, li {
	display: inline;
}


/* Pages */
#front, #concept, #information, #partfront, .veryfront, #partwork, #partbio, #partmedia, #partmedia2, #partmedia3, #partmedia4, #partmedia5, #programme {
	height: 100vh;
	max-height: 100vh;
	min-height: 100vh;
	padding-top: 0.1rem;
	padding-bottom: 0.1rem;
	position: relative;
	display: block;
}

/* Al's (failed ) text

#partwork, #partmedia, #partmedia2, #partmedia3, #partmedia4, #partmedia5, #programme, #partbio, #workimage {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
} */



.veryfront #tilt img{

	display:none;
}


#logo {
	max-width: 85vw;
	padding-top: 10%;
	display: block;

}



#tilt {
	position: sticky;
	display: block;
	height: 6vh;
	left: 88vw;
	bottom: 89vh;
	top: 9vh;
}

#tilt2 {
	position: sticky;
	display: block;
	height: 6vh;
	left: 88vw;
	bottom: 89vh;
	top: 9vh;
}


#students {
	position: relative;
	text-align: left;
	margin-left:0;
	padding-left: 0;
	padding-top: 3vh;
	left: 0;
	max-width: 80vw;
}

#students ul{
	text-align: left;
	margin-left:0;
	padding-left: 0;
	left: 0;
	line-height: 2.5vh;

} 

#students ul li{
	text-align: left;
	margin-left:0;
	padding-left: 0;
	left: 0;
	line-height: 0;

}

#students ul li a{
	text-align: left;
	margin-left:0;
	padding: 0;
	left: 0;
	font-size: 2.75vh;
	color: #008c93;

}

.soundcloud {
	position: relative;
	margin-top: 5vh;
	padding-top: 0vh;

}



#overview {
	padding: 3vh;
	text-align: center;
	color: #008c93;	
}

#overview a{
	font-size: 3vh;
	font-family: agl;
	color: #008c93;
}



#location {
		padding: 1rem;
}

#floorplan img {
	
	text-align: center;
	width: 90%;
	fill: #008c93;
	
}

#workdescription {
		padding: 1rem;
		font-size: 2.5vh;
	line-height: 2.75vh ;
}

#workdescriptionlong {
	padding: 1rem;
	font-size: 2.5vh;
	line-height: 2.75vh ;
}

#workdescription a{
	font-size: 2.5vh;
	line-height: 2.75vh ;
	font-style: italic;
	color: #008c93;
	text-decoration: underline;
}

#workdescriptionlong a {
	font-style: italic;
	font-size: 2.5vh;
	line-height: 2.75vh ;
	color: #008c93;
	text-decoration: underline;


}


#media {
		padding: 1rem;

}

.workimage img {
	max-width: 85vw;
	max-height: 50vh;
	text-align: center;
	display: block;
	margin: 0 auto;
	
}

.workimage  {
	max-width: 85vw;
	max-height: 50vh;
		text-align: center;
		display: block;
margin: 0 auto;


}

.workimagecentered {
	max-width: 90vw;
	max-height: 90vh;
	text-align: center;
	display: block;
	margin: 0 auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.partmedia img, #partmedia4 img, #partmedia2 img, #partmedia3 img {
	max-width: 90vw;
	max-height: 90vh;
	text-align: center;
	display: block;
	margin: 0 auto;
}






#video {
	text-align: center;
	width: 90vw;
	height: 90vh;

	padding: 0;
	margin: 0;
	background-color: #d599c4;
}

#vimeo {
  top: 50%;
  left: 50%;

	padding: 0;
	position: absolute;
  transform: translate(-50%, -50%);

}

#cv {
		padding: 1rem;

}

#bio {	
		padding: 1rem;

}

#other {
		
		padding: 1rem;

}


#programmelist, #programmelist2{

	position: relative;
	padding-top: 3vh;
	height: 100vh;
	text-align: left;
	margin-left:0;
	left: 0;
	width: 80vw;
	vertical-align: middle;
}


#programmelist .centered{

position: relative;

}

#programmelist .centered4{

	position: relative;
	
	}
	


#concepttext {
	position: relative;
	height: 100vh;
	vertical-align: middle;
	padding-top: 3vh;
	line-height: 0.5rem;
	margin-left: 0;

}





#concepttext .centered2{

	position: relative;
	
	}




.colophon {
	position: relative;
	height: 100vh;
	vertical-align: middle;
	padding: 0;

}


	.colophon .centered3{

	position: relative;
	
		}





		@media screen and (max-device-width: 480px), 
		screen and (-webkit-min-device-pixel-ratio: 2),
		screen and (device-width: 768px) {
   body {
	 -webkit-text-size-adjust: 88%;
   }
		}


/***** Landscape (Exhibition Map) *************************/


@media screen and (max-device-width: 580px) and (orientation:landscape) {



body {
	padding: 0;
	margin: 0;
	max-height: 100vh;
	overflow:hidden;
	-webkit-overflow-scrolling: none;
}


#front, #concept, #information, #partfront, .veryfront, #partwork, #partbio, #partmedia, #partmedia2, #partmedia3, #partmedia4, #partmedia5 #programme {
	display: none;}

input {
	-webkit-appearance: none;
	-moz-appearance: none;
	
	}
	::-webkit-scrollbar {
	width: 0;
	scrollbar-color: #008c93 #d599c4;
	display: none;
}

	::-webkit-scrollbar-track {
		background: #d599c4;  
		display: none;
}
	   
	  /* Handle */
	  ::-webkit-scrollbar-thumb {
		background:#008c93; 
		display: none;

	  }
	

	#mainfloorplanmobile {
		height: 100vh;
		width: 100vw;
		background-color: #d599c4;
		z-index: 2500;
		position: fixed;
		display: flex;
		position: center;
		top: 0;
		left: 0;
		text-align: center;
		vertical-align: middle;
	}

#mainfloorplan {
	height: 100vh;
	width: 100vw;
	background-color: #d599c4;
	z-index: 1000;
	position: fixed;
	display: flex;
	position: center;
	top: 0;
	left: 0;
	text-align: center;
	vertical-align: middle;

}
#mainfloorplanmobile img {
	display: flex;
	height: auto;
	max-width: 60vw;

	padding-top: 1vh;
	padding-left: 20vw;
	position: center;
	text-align: center;
	vertical-align: middle;
	z-index: 3001;

}
	#mainfloorplan img {
		display: flex;
		height: auto;
		width: 55vw;
		padding-top: 1vh;
		padding-left: 20vw;
		position: center;
		text-align: center;
		vertical-align: middle;
		z-index: 1001;

	}
}





/****** Desktop Computers ****************************************************************/

@media (min-width : 974px) and (orientation:landscape) {

	body {
		padding: 0;
		margin: 0;
		max-height: 100vh;
		overflow: auto;
    	-webkit-overflow-scrolling: none;
	}


/* width */
::-webkit-scrollbar {
	width: 2px;
	scrollbar-color: #008c93 #d599c4;
  }

	::-webkit-scrollbar-track {
		background: #d599c4;  }
	   
	  /* Handle */
	  ::-webkit-scrollbar-thumb {
		background:#008c93; 
	  }
   

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
	background: #008c93; 
  }


	main {
		padding-left: 10vw;
		padding-right: 10vw;
	}

	#logo, #infomobile, .veryfront  {
		display: none;
	
	}
	input {
		-webkit-appearance: none;
		-moz-appearance: none;
	}

	::-webkit-scrollbar {
		width: 0;

	}

	#outline {
		display: block;
	}
	





  /* Index ****************************************************/




  #subline {
	position: relative;
	padding: 0;

}

#flexbox {
	padding:0;
	margin: 0;
	top: 0;


}

.col {
	flex: 1;
}
#megaflexbox {
	display: flex;
	align-items: flex-start;
}

  #students {
	text-align: left;
	margin-left:0;
	left: 0;
	margin-top: 0;
	top: 0;
	height: 100vh;
	width:auto;
	margin: auto;
	line-height: 2rem;
}



#programmelist{

	position: relative;

	height: 100vh;
	text-align: left;
	margin-left:0;
	left: 5vw;
	width: 70vw;
	vertical-align: middle;
}	


#programmelist .centered{

position: absolute;
  top: 50%;

  transform: translate(0, -50%);
  margin: 0;

}

#programmelist2 .centered4{

	position: absolute;
	  top: 50%;
	
	  transform: translate(0, -50%);
	  margin: 0;
	
	}

	
#concepttext {
	position: relative;
	height: 100vh;
	vertical-align: middle;

	line-height: 0.5rem;
	margin-left: 23vw;

}



#concepttext .centered2{

	position: absolute;
	  top: 50%;
	
	  transform: translate(0, -50%);
	  margin: 0;
	
	}




.colophon {
	position: relative;
	height: 100vh;
	vertical-align: middle;
	padding: 0;

}


	.colophon .centered3{

	position: absolute;
	top: 50%;
		
	transform: translate(0, -50%);
	margin: 0;
		
		}
	

#mainfloorplanmpobile {
	display:none;
}

#mainfloorplanmpobile img{
	display:none;
}

#mainfloorplan {
	position: relative;
	display: flex;
	max-width: 40vw;
	max-height: 35vw;

	width: auto;
	height: auto;
	margin-right: 0;
	fill: #008c93;

}

#mainfloorplan img {
	height: 30vw;
	vertical-align: middle;
	text-align: center;
	position: relative;
	margin-top: auto;
	margin-bottom: auto;
	fill: #008c93;



}

#info {
	display: block;

}

#address {
	flex:1;
	position: relative;
	max-width: 35vw;
}

#access {
	position: relative;
	display: flex;
	max-width: 40vw;

	right: 0;

}



#tilt {
	display: none;
}

#tilt2 {
	display: none;
}



a, p {
	font-size: 1rem;
}


h1 {
	text-align: center;
	font-size: 3.5vh;
	font-family: ogg;
	margin-top: 1vh;

}

h2 {
	font-size: 5vh;
	font-family: ogg;
}

h3 {
	font-size: 2.5vh;
	font-family: ogg;

}

h6 {
	font-size: 2.25vh;
	line-height: 1.5vh;
	padding-right: 0.5rem;
}

h7 {
	font-size: 1.75vh;
	line-height: 1.75vh;
	padding-left: 3vw;
	margin-top: 0;
	padding-top: 0;
	padding-right: 2vw;
	display: inline-flex;
}

#info p{

	font-size: 1.75vh;
	line-height: 2vh;
}

h8 {
	font-size: 1.75vh;
	line-height: 2vh;
	padding-right: 0.5rem;
}

h9 {
	font-size: 2.5vh;
	line-height: 3.25vh;
	font-family: ogg;
}

h10 {
	font-size: 1.75vh;
	line-height: 1vh;
	padding-left: 7.5vw;
}

h11 {
	font-size: 2.5vh;
	line-height: 2.75vh;
	padding-left: 1rem;
	font-family: ogg;}


h12 {
	font-size: 2vh;
	padding-left: 4vw;
	line-height: 3.5vh;
}

#concept p{
	font-size: 2vh;
	padding-left: 1vh;
	padding-right: 1vh;
	line-height: 2.25vh;
}




#students ul  {
	position:relative;
	vertical-align: middle;
	min-width: 30vw;
	line-height: 2.75vh;
	margin-top: 0;
	padding-top: 0;


}



#students ul li a{
	text-align: left;
	margin-left:0;
	padding-left: 0;
	left: 0;
	font-size: 2vh;
	line-height: 2vh;
	

}

#workdescription {
	padding-top: 5vh;
	font-size: 3vh;
line-height: 3.25vh ;
}

#workdescriptionlong {
	padding-top: 5vh;

font-size: 3vh;
line-height: 3.25vh ;
}

#workdescription a{
font-size: 3vh;
line-height: 3.25vh ;
font-style: italic;
color: #008c93;
text-decoration: underline;
}

#workdescriptionlong a {
font-style: italic;
font-size: 3vh;
line-height: 3.25vh ;
color: #008c93;
text-decoration: underline;

}


.workimagecentered {
	max-width: 70vw;
	max-height: 90vh;
	text-align: center;
	display: block;
	margin: 0 auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}


.workimage img {
	max-width: 85vw;
	max-height: 50vh;
	text-align: center;
	display: block;
	margin: 0 auto;
	
}

.workimage  {
	max-width: 85vw;
	max-height: 50vh;
		text-align: center;
		display: block;
margin: 0 auto;

}

#video {
	text-align: center;
	width: 90vw;
	height: 90vh;

	padding: 0;
	margin: 0;
	background-color: #d599c4;
}

#vimeo {
  top: 50%;
  left: 50%;

	padding: 0;
	position: absolute;
  transform: translate(-50%, -50%);

}




}