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

:root {
  --pop: #6495ed;
  --white: #faf0e6;
  --black: #000000;
  --grey: #efefef;
}


body{
	margin:0px;
	height:100%;
	font-size: 1rem;
}

html {
	
	font-size: 16px;
	overflow-x:hidden;
	background-color: black;
}




a {
	text-decoration: none;
	color:black;
}

.header {
	display:inline-grid;
	grid-template-columns:repeat(12, 1fr);
	grid-gap: 1em;
	background-color: #e4decc;
	height:60px;
	width:100%;
	border-bottom: 3px solid black;
	align-items: center;
	position:fixed;
	top:0;
	z-index: 100;
	
}

.logo {
	grid-column: 2 /span 3;
	justify-self: start;
	width: inherit;
	max-width: 300px;
	filter: invert(9%) sepia(15%) saturate(3146%) hue-rotate(143deg) brightness(92%) contrast(103%);
}

.art-btn {
	background-color: #f5f5f5;
	grid-column: 11 / span 2;
	height: inherit;
	border-left: 3px solid black;
	display: flex;
	align-items: center;
	justify-content:center;
	}

	.art-btn:hover {
	background-color: black;
	
	color:white;
}


.btn-txt {

	 font-family: 'space grotesk', sans-serif;
	 font-weight: 700;
	 font-size: 0.8em;
}

.intro-container{
	z-index: 1;
	display:grid;
	grid-gap: 1em;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(7, 8vw);
	background-color: #001017;
	color:white;
	
}



.intro-text {
	grid-column: 2 / span 5;
	grid-row: 4/ span 2;
  font-family: "black han sans", sans-serif;	
  font-size: 4.5vw;
  max-width:1000px;
	line-height: 1em;
	letter-spacing: -0.02em;
	font-weight: 400;

}

.image-container-one {
	grid-column: 7 / span 4;
	grid-row: 2/ span 5;
	padding-right:4px;
	background-image: url("../images/kyle_sitting.jpg");
	 background-color: #cccccc;
   background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px solid black;

}




.round-btn {
	line-height:4vw;
}

.rnd-art-btn {
	position:relative;
	background-color:#f5f5f5;
	border: 2px solid black;
	padding-left:30px;
	padding-right:30px;
	padding-top:15px;
	padding-bottom:15px;
	font-family: 'space grotesk', sans-serif;
	 font-weight: 700;
	 font-size: 1.2vw;
	 text-align: center;
	 border-radius:100px;
	 line-height:1em;
	 letter-spacing: 0;

}


.rnd-art-btn:hover {
	background-color: black;
	
	color:white;

}



/* --------------------------------------------BIO--------------------------------------- */

.bio-container{
	z-index: 1;
	border-top:2px solid black;
	border-bottom:2px solid black;
	background-color: #f5f5f5;
	display:grid;
	grid-gap: 1em;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(5, 8vw);
	
	
	padding-top: 5em;
	padding-bottom: 5em;
	
}


.bio-image-container {
	grid-column: 4 / span 2;
	grid-row: 2 ;
	
	padding-right:4px;
}


.bio-head-container {
	grid-column: 7 / span 3;
	grid-row: 2 ;

	padding-right:4px;
	

}


.profile {
	 max-width: 100%; 
	 height: auto;
	 border: 2px solid black;
	}





.bio-head-txt {
	font-family:  'ultra', sans-serif;
	 font-weight: 400;
	 font-size: 4vw;
	 width:100%;
	 letter-spacing: -0.02em;

}




.bio-pull-txt {
	font-family:  'black han sans', sans-serif;
	 font-weight: 400;
	 font-size: 1.5em;
	 width:80%;
	 letter-spacing: -0.02em;
	  margin-top: 1em;
}





.bio-block-container {
	
	width: 100%;
	height:auto;
	display:flex;
	justify-content: space-between;
	margin-top: 1em;
}

.half-block1 {
	font-family: 'inter', sans-serif;
	 font-weight: 300;
	 font-size: 1.2em;
	 letter-spacing: -0.02em;
	 
	
}


/* --------------------------------------------DISCO--------------------------------------- */



.disco-container{
	z-index: 1;
	border-top:2px solid black;
	border-bottom:2px solid black;
	background-color: #f1ebda;
	display:grid;
	grid-gap: 1em;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(8, 8vw);

	
	padding-top: 5em;
	padding-bottom: 5em;
	
}



.disco-head-txt {
	font-family:  'ultra', sans-serif;
	 font-weight: 400;
	 font-size: 4vw;
	 width:100%;
	 letter-spacing: -0.02em;
	 	grid-column: 4 / span 3;
	 	margin-top:auto;
	 		 color:#031523;


	

}

.record-1 {
	grid-column: 8 / span 1;
	grid-row: 3
}

.record-2 {
	grid-column: 7 / span 1;
	grid-row: 3 
}
.record-3 {
	grid-column: 8/ span 1;
	grid-row: 2
}

.record-4 {
	grid-column: 7/ span 1;
	grid-row: 2 
}
.record-5 {
	grid-column: 4/ span 3;
	grid-row: 2  
}


.disco-pull-cont {
	display: flex;
  justify-content: center;
  align-items: center;

  grid-column: 4/ span 6;
	grid-row: 6 / span 2;

}


.disco-pull{

	
	text-align: center;
	font-family:  'black han sans', sans-serif;
	 font-weight: 400;
	 font-size: 1.5vw;
	 letter-spacing: -0.02em;
	 color:#031523;

}

.disco-small {
	text-align: center;
		 font-size: 1vw;
		 color:#92691e;


}


.disco-round-btn {
	margin-top:50px;

}


/* --------------------------------------------STATS--------------------------------------- */



.stats-container{
	z-index: 1;
	border-top:2px solid black;
	border-bottom:2px solid black;
	background-color: #f1ebda;
	display:grid;
	grid-gap: 1em;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(5, 8vw);

	background-color: #001017;
	color:white;
	padding-top: 5em;
	padding-bottom: 5em;
	
}

.stats-head {

		font-family:  'ultra', sans-serif;
	 font-weight: 400;
	 font-size: 4vw;
	 width:100%;
	 letter-spacing: -0.02em;
	 	grid-column: 7 / span 4;
	 	grid-row: 1;
	 	margin-top:auto;
	 		 color:orange;
	 		 line-height: 20px;
	 		 

}

.stats-desc {

		font-family:  'black han sans', sans-serif;
	 font-weight: 400;
	 font-size: 1vw;
	 letter-spacing: -0.02em;
	 color:#5d676c;

}




.stat-card-container{
	grid-column: 3 / span 4;
	 	grid-row: 2 / span 3;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 10px;
	justify-content: flex-end;
}
.stat-card {
	padding:30px;
	font-family: "inter", sans-serif;
	border: 2px solid orange;
}

.stat-title {
	font-size:16px;

}

.stat-figure {

	font-family: "black han sans", sans-serif;
	font-size:2.5vw;

}

.stats-image-container {
	grid-column: 7 / span 2;
	grid-row: 2 / span 3;
		background-image: url("../images/thegarden.gif");
	 background-color: #cccccc;
   background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px solid black;
  mix-blend-mode: hard-light;
	
}


/* --------------------------------------------TV--------------------------------------- */


.tv-container{
	z-index: 1;
	border-top:2px solid black;
	border-bottom:2px solid black;
	display:grid;
	grid-gap: 1em;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(3, 8vw);

	background-color: white;
	color:white;
	padding-top: 5em;
	padding-bottom: 5em;
	
}


.tv-head-txt {
	font-family:  'ultra', sans-serif;
	 font-weight: 400;
	 font-size: 4vw;
	 width:100%;
	 letter-spacing: -0.02em;
	 	grid-column: 4 / span 6;
	 	margin-top:auto;
	 		 color:#031523;
	 		 line-height:0.5em;



}


.tv-desc-txt {
		font-family:  'black han sans', sans-serif;
	 font-weight: 400;
	 font-size: 1.5rem;
	 letter-spacing: -0.02em;
	 color:#92691e;
}


.vid-1 {

	grid-column: 4 / span 1;
	grid-row: 2;

}

.vid-2 {
	grid-column: 5 / span 1;
	grid-row: 2;
	
}


.vid-3 {
	grid-column: 6 / span 1;
	grid-row: 2;
	
}

.vidtxt{
	font-family: "space grotesk" , sans-serif;
	text-transform: uppercase;
	font-size: 12px;
}


/* --------------------------------------------CONTACT--------------------------------------- */


.contact-container{
	z-index: 1;
	display:grid;
	grid-gap: 1em;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(5, 8vw);
	
	background-color: #fec763;

}

.contact-text {
	grid-column: 4 / span 2;
	grid-row: 2;
	font-family: 'space grotesk', sans-serif;
	font-weight: 400;
	font-size: 1.8vw;
	line-height: 1.3em;
	letter-spacing: -0.02em;
	
}
.text-link {
	font-weight: 700;
	color: black;

}

.text-link:hover {
	color: blue;


}


.exhibition-text {
	grid-column: 8/ span 3;
	grid-row: 2;
	
	}

.exhibition-header {
	font-family: 'space grotesk', sans-serif;
	font-weight: 400;
	font-size: 1.2vw;
	letter-spacing: -0.02em;
	
	
}

.exhibition-list {
	font-family: 'space grotesk', sans-serif;
	 font-weight: 300;
	 margin-top: 1em;
	 font-size: 1vw;
	 line-height: 1.8em;
	 letter-spacing: -0.02em;
	 width:100%;


}

.footer {
	z-index: 1;
	display:grid;
	grid-gap: 1em;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(1, 50px);
	border-top: 2px solid #ffb33c;
	font-size: 0.8em;
	color:#ffb33c;
	background-color: #001017;
	font-family: courier, monospace, sans-serif;
	align-items:center;
	
}

.copyright {
	grid-column: 2 / span 5;

}

.design {
	grid-column: 8 / span 4;
	text-align: right;


}

.link-off {
	color: white;
	text-decoration: underline;
}




/* --------------------------------------------BREAKDOWNS-------------------------------------- */


@media only screen and (min-width: 1750px) {



.intro-text {
	
  font-size: 6.5rem;
}

.rnd-art-btn {
	font-size:16px;
	margin-top:30px;

}

}

@media only screen and (max-width: 1750px) {


	.bio-container{

	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(6, 8vw);

}


	.bio-image-container {
		grid-column: 4 / span 3;
	}


		.bio-head-container {
		grid-column: 7 / span 4;
	}

}



@media only screen and (max-width: 1400px) {



.bio-head-txt {
	font-size: 4vw;

}

.bio-pull-txt {
	font-size: 1.8vw;
	width: 100%;

}

.half-block1 {
	font-size: 0.95em;
	line-height: 1.1em;

}



/* --------------------------------------------1400 DISCO-------------------------------------- */



.disco-container{



	grid-template-rows: repeat(10, 8vw);


	
}



.disco-head-txt {

	 font-size: 4vw;
	 	grid-column: 2 / span 4;
	


	

}

.record-1 {
	grid-column: 9 / span 2;
	grid-row: 4;
	margin-top: -1.2em;

}

.record-2 {
	grid-column: 7 / span 2;
	grid-row: 4 ;
	margin-top: -1.2em;
}
.record-3 {
	grid-column: 9/ span 2;
	grid-row: 2;
	margin-top: auto;
}

.record-4 {
	grid-column: 7/ span 2;
	grid-row: 2 ;
	margin-top: auto;
}
.record-5 {
	grid-column: 2/ span 5;
	grid-row: 2  ;
	margin-top: auto;
}


.disco-pull-cont {

  grid-column: 3/ span 8;
	grid-row: 7 / span 3;

}


.disco-pull{


	 font-size: 2.0vw;
	 letter-spacing: -0.02em;
	 color:#031523;

}

.disco-small {
	text-align: center;
		 font-size: 1.5vw;
	


}






/* --------------------------------------------1400 DISCO-------------------------------------- */


/* --------------------------------------------1400 STATS--------------------------------------- */



.stats-container{

	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(6, 8vw);


	
}

.stats-head {

	
	 font-size: 4vw;

	
	 	grid-column: 8 / span 5;
	 	grid-row: 1;
	 
	 		 line-height: 20px;
	 		 

}

.stats-desc {

	
	 font-size: 1.2vw;
	 letter-spacing: -0.02em;
	 color:#5d676c;

}




.stat-card-container{
	grid-column: 1 / span 7;
	 	grid-row: 2 / span 3;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 10px;
	justify-content: flex-end;
}
.stat-card {
	padding:30px;
	font-family: "inter", sans-serif;
	border: 2px solid orange;
}

.stat-title {
	font-size:14px;

}

.stat-figure {

	font-family: "black han sans", sans-serif;
	font-size:2.2vw;

}

.stats-image-container {
	grid-column: 8 / span 3;
	grid-row: 2 / span 4;
		background-image: url("../images/thegarden.gif");
	 background-color: #cccccc;
   background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px solid black;
  mix-blend-mode: hard-light;
	
}



/* --------------------------------------------1400 STATS--------------------------------------- */



/* --------------------------------------------1400TV--------------------------------------- */


.tv-container{
	
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(3, 8vw);


	
}


.tv-head-txt {
	
	 font-size: 4vw;
	
	
	 	grid-column: 4 / span 6;
	 	margin-top:auto;
	 	
	 		 line-height:0.7em;



}


.tv-desc-txt {

	 font-size: 2.0vw;

}


.vid-1 {

	grid-column: 4 / span 2;
	grid-row: 2;

}

.vid-2 {
	grid-column: 6 / span 2;
	grid-row: 2;
	
}


.vid-3 {
	grid-column: 8 / span 2;
	grid-row: 2;
	
}

.vidtxt{

	font-size: 12px;
}


}

@media only screen and (max-width: 1280px) {


			.bio-head-container {
		grid-column: 7 / span 5;
	}

		.bio-image-container {
		grid-column: 3 / span 4;
	}


	.round-btn {
	line-height:6vw;
}




/* --------------------------------------------1400TVEND --------------------------------------- */





/* --------------------------------------------1400CONTACT--------------------------------------- */


.contact-container{

	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(5, 8vw);


}

.contact-text {
	grid-column: 3 / span 3;
	grid-row: 2;
	font-family: 'space grotesk', sans-serif;
	
	font-size: 2.2vw;
	line-height: 1.3em;

	
}





.exhibition-text {
	grid-column: 8/ span 3;
	grid-row: 2;
	
	}

.exhibition-header {
	
	font-size: 2.0vw;
	letter-spacing: -0.02em;
	
	
}

.exhibition-list {

	 margin-top: 1em;
	 font-size: 1.5vw;
	 line-height: 1.8em;



}

.footer {


	grid-gap: 1em;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(1, 50px);

	font-size: 0.6em;
	color:#ffb33c;
	background-color: #001017;
	font-family: courier, monospace, sans-serif;
	align-items:center;
	
}

.copyright {
	grid-column: 2 / span 5;

}

.design {
	grid-column: 8 / span 4;
	text-align: right;


}

.link-off {
	color: white;
	text-decoration: underline;
}



/* --------------------------------------------1400CONTACT--------------------------------------- */



}




@media only screen and (max-width: 1025px) {


.round-btn {
	line-height:8vw;
}

}

/* --------------------------------------------MOBILE SWITCH--------------------------------------- */
/* --------------------------------------------MOBILE SWITCH--------------------------------------- */
/* --------------------------------------------MOBILE SWITCH--------------------------------------- */
/* --------------------------------------------MOBILE SWITCH--------------------------------------- */
/* --------------------------------------------MOBILE SWITCH--------------------------------------- */
/* --------------------------------------------MOBILE SWITCH--------------------------------------- */
/* --------------------------------------------MOBILE SWITCH--------------------------------------- */

@media only screen and (max-width: 768px) {




.logo {
	grid-column: 2 /span 5;

}


.art-btn {
	
	grid-column: 8 / span 5;

}


	.round-btn {
	line-height:16vw;
}








	.intro-container{

	grid-gap: 0.5em;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(20, 8vw);
	
}


.intro-text {
	grid-column: 2 / span 10;
	grid-row: 14/ span 2;	
  font-size: 9vw;
	line-height: 1em;
	letter-spacing: -0.02em;
	font-weight: 400;

}

.image-container-one {
	grid-column: 2 / span 10;
	grid-row: 4 / span 9;

  border: 2px solid black;

}






.rnd-art-btn {
	
	padding-left:30px;
	padding-right:30px;
	padding-top:15px;
	padding-bottom:15px;
	font-family: 'space grotesk', sans-serif;
	 font-weight: 700;
	 font-size: 2.2vw;
	 text-align: center;
	 border-radius:100px;
	 margin-top:2.5vw;
	 line-height:1em;
	 letter-spacing: 0;

}

/* --------------------------------------------BREAKDOWNS-----------------------

___________________BIO___________________________--------------- */


	.bio-container{

	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(18, 8vw);
	grid-gap: 0.5em;
}


	.bio-image-container {
		grid-column: 6 / span 6;
		grid-row: 10 / span 4;
	}


		.bio-head-container {
		grid-column: 2 / span 10;
	}


	.bio-head-txt  {
	font-size: 10vw;


}

.bio-pull-txt {
	font-size: 4vw;
	width: 100%;

}

.half-block1 {
	font-size: 0.95em;
	line-height: 1.1em;
	width:80%;

}




/* --------------------------------------------DISCO 780--------------------------------------- */



.disco-container{

	grid-gap: 0.5em;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(30, 8vw);


	
}



.disco-head-txt {

	 font-size: 10vw;
	
	 	grid-column: 2 / span 3;



	

}

.record-1 {
	grid-column: 7 / span 5;
	grid-row: 18;
	margin-top:-2.7em;

}

.record-2 {
	grid-column: 2 / span 5;
	grid-row: 18 ;
	margin-top:-2.7em;
}
.record-3 {
	grid-column: 7/ span 5;
	grid-row: 13;
	margin-top: -0.8em;
}

.record-4 {
	grid-column: 2/ span 5;
	grid-row: 13 ;
	margin-top: -0.8em;
}
.record-5 {
	grid-column: 2/ span 10;
	grid-row: 3  ;
}


.disco-pull-cont {

  grid-column: 2/ span 10;
	grid-row: 22 / span 8;

}


.disco-pull{

	

	 font-size: 4vw;


}

.disco-small {

		 font-size: 2.7vw;
		


}


.disco-round-btn {
	margin-top:50px;

}



/* --------------------------------------------STATS 780--------------------------------------- */




.stats-container{
 
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(26, 8vw);
	grid-gap: 0.5em;
	
}

.stats-head {


	 font-size: 10vw;

	 letter-spacing: -0.02em;
	 	grid-column: 2 / span 9;
	 	grid-row: 1;
	 		 line-height: 20px;
	 		 

}

.stats-desc {

	
	 font-size: 4vw;
	 letter-spacing: -0.02em;
	

}




.stat-card-container{
	grid-column: 1 / span 11;
	 	grid-row: 4 / span 12;


}


.stat-title {
	font-size:12px;

}

.stat-figure {

	font-size:6.5vw;

}

.stats-image-container {
	grid-column: 2 / span 8;
	grid-row: 17 / span 10;
		
	
}





/* --------------------------------------------780TV--------------------------------------- */


.tv-container{
	
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(8, 8vw);
	grid-gap: 0.5em;


	
}


.tv-head-txt {
	
	 font-size: 10vw;
	
	
	 	grid-column: 2 / span 10;
	 	margin-top:auto;
	 	
	 		 line-height:1em;



}


.tv-desc-txt {

	 font-size: 6.0vw;

}


.vid-1 {

	grid-column: 2 / span 3;
	grid-row: 5;

}

.vid-2 {
	grid-column: 5 / span 3;
	grid-row: 5;
	
}


.vid-3 {
	grid-column: 8 / span 3;
	grid-row: 5;
	
}

.vidtxt{

	font-size: 12px;
}


/* --------------------------------------------780CONTACT--------------------------------------- */


.contact-container{

	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(11, 8vw);
	grid-gap: 0.5em;


}

.contact-text {
	grid-column: 2 / span 10;
	grid-row: 2;
	font-family: 'space grotesk', sans-serif;
	
	font-size: 5vw;
	line-height: 1.3em;

	
}





.exhibition-text {
	grid-column: 2/ span 6;
	grid-row: 8;
	
	}

.exhibition-header {
	
	font-size: 3.5vw;
	letter-spacing: -0.02em;
	
	
}

.exhibition-list {

	 margin-top: 1em;
	 font-size: 3vw;
	 line-height: 1.8em;



}

.footer {


	grid-gap: 1em;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(1, 50px);

	font-size: 0.6em;

	background-color: #001017;
	font-family: courier, monospace, sans-serif;
	align-items:center;
	
}

.copyright {
	grid-column: 2 / span 4;

}

.design {
	grid-column: 6 / span 6;
	text-align: right;



}

.link-off {
	color: white;
	text-decoration: underline;
}



/* --------------------------------------------1400CONTACT--------------------------------------- */




}


@media only screen and (max-width: 580px) {


.half-block1 {
	
	width:100%;

}

	.bio-image-container {
		grid-column: 6 / span 6;
		grid-row: 12 / span 4;
	}



}


}