*{
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body, html{
	font-size: 25px;
	overflow-x: hidden;
	width: 100%;
	font-family: 'Lazurski-Regular', Times, serif;
}
html{
	background-color: black;
	color: white;
}

body{
	background-color: transparent;
}

#root, .p5Canvas{
	position: fixed;
	z-index: -1;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
}

svg, path{
	-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
}

#background{
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0;
	transition: opacity 1.5s;
}

h1, h2, h3, h4, li.menu_item{
	font-size: 1.25rem;
	line-height: 1.2;
	font-weight: normal;
}

h5, h6, p, ol, ul, li, figure{
	font-size: 1rem;
	font-weight: normal;
}

hr{
	display: block;
	width: calc(100% - 0.5rem);
	height: 1px;
	background-color: white;
	border: none;
	margin: 0 auto;
	margin-top: 6rem;
}

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

@media(any-hover: hover){
	a:hover{
		opacity: 0.5;
	}
}

ul{
	list-style: none;
}

header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 0.25rem;
	z-index: 1000;
}

main{
	padding-top: 8rem;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	min-height: 80vh;
	box-sizing: border-box;
	background-color: transparent;
}

main#home_main{
	padding-top: 0;
}

main header{
	position: relative;
	z-index: 999;
	min-height: 8rem;
}

img{
	user-select: none;
	pointer-events: none;
}


#intro_image{
	position: absolute;
	top: 0.5rem;
	right: 0.25rem;
	width: calc(33.33% - 0.5rem);
	max-width: 30rem;
	max-height: 12rem;
	object-fit: contain;
	object-position: right;
	margin-bottom: 2rem;
	vertical-align: bottom;
}


#intro_statement{
	width: calc(66.66%);
	margin-top: 10rem;
	margin-bottom: 1rem;
	display: inline-block;
	vertical-align: bottom;
}

#intro_statement p,
#intro_statement h1,
#intro_statement h2,
#intro_statement h3,
#intro_statement h4,
#intro_statement h5,
#intro_statement h6,
#intro_statement ul,
#intro_statement ol,
#intro_statement figure,
#intro_statement img{
	margin-bottom: 0.75rem;
}

@media (max-width: 1024px){
	#intro_image{
		position: relative;
		width: calc(50% - 0.5rem);
	}

	#intro_statement{
		margin-top: 3rem;
		box-sizing: border-box;
		padding-right: 1rem;
		width: calc(50% + 0.5rem);
	}
}

@media (max-width: 768px){
	#intro_image{
		position: relative;
		width: 100%;
	}

	#intro_statement{
		margin-top: 3rem;
		width: calc(100% - 0.5rem);
	}
}

nav, 
.menu_items, 
.news_items, 
.concert_items, 
.work_header, 
.work_item a, 
.archive_item,
.archive_item a, 
.archive_photography,
footer{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.menu_items{
	margin-bottom: 2rem;
}


.menu_items.unselected li.menu_item{
	min-height: 10rem;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
  justify-content: center;
}

.menu_items.unselected li.menu_item a{
	min-height: 10rem;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
  justify-content: center;
}



@media(max-width: 768px){

	.menu_items.unselected li.menu_item{
		min-height: 5rem;
	}

	.menu_items.unselected li.menu_item a{
		min-height: 5rem;
	}

}

nav h2{
	text-align: center;
}

nav *:not(a){
	margin-left: 0.25rem;
	margin-right: 0.25rem;
}

.grid_third, .grid_sixth{
	box-sizing: border-box;
	margin-bottom: 0.5rem;
}

.grid_third{
	width: calc(33.33% - 0.5rem);
	flex-basis: calc(33.33% - 0.5rem);
}

.grid_sixth{
	width: calc(16.66% - 0.5rem);
	flex-basis: calc(16.66% - 0.5rem);
}

@media(max-width: 1024px){
	.grid_third{
		width: calc(50% - 0.5rem);
		flex-basis: calc(50% - 0.5rem);
	}

	nav h2.grid_third{	text-align: right;}

	.grid_sixth{
		width: calc(33.33% - 0.5rem);
		flex-basis: calc(33.33% - 0.5rem);
	}
}

@media(max-width: 768px){
	.grid_third{
		width: calc(100% - 0.5rem);
		flex-basis: calc(100% - 0.5rem);
	}

	nav .grid_third{
		width: calc(50% - 0.5rem);
		flex-basis: calc(50% - 0.5rem);	
	}

	nav h2.grid_third{	text-align: right;}

	.grid_sixth{
		width: calc(50% - 0.5rem);
		flex-basis: calc(50% - 0.5rem);
	}
}

li.menu_item{
	border: dashed 1px white; 
	text-align: center;
	margin-left: 0.25rem;
	margin-right: 0.25rem;
	margin-bottom: 0.5rem;
	text-transform: capitalize;
}

@media(any-hover: hover){
	li.menu_item:hover{
		background-color: rgba(0,0,0,0.3);
	}
}

li.menu_item a{
	display: block;
	padding-top: 1rem;
	padding-bottom: 1rem;
}


/* 
 *
 * ============================
 * 						FOOTER
 * ============================
 *
 */


footer{
	margin-top: 8rem;
	width: 100%;
}



/* 
 *
 * ============================
 * 					NEWS ITEMS
 * ============================
 *
 */

.news_items{
	align-items: stretch;
}

li.news_item{
	border: solid 1px white;
	padding-top: 1rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-bottom: 1rem;
	position: relative;
	margin-left: 0.25rem;
	margin-right: 0.25rem;
	margin-bottom: 0.5rem;
}

.news_marker{
	position: absolute;
	top: 0;
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	background-color: white;
}

h3.news_date,
.filter_options h2, 
.work_header span, 
h3.work_page_year,
.image_focus h3{
	font-family: 'Authentic-60';
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
	font-size: 0.9rem;
	line-height: 1.1;
}


.news_content{
	margin-top: 0.5rem;
}

.grid_sixth .news_content{
	display: none;
}

li.news_item .news_media_item{
	width: 50%;
	object-fit: contain;
	object-position: left;
	max-height: 6rem;
}

.filter_item, 
.news_content *, 
.concerts_content *, 
.work_list li, 
.archive_list li, 
.archive_audio_list li,
.archive_audio_list li:not(.work_header) * ,
footer *{
	font-size: 0.7rem;
	line-height: 0.9rem;
}


section.work_page_meta *,
.work_content p,
.about_section p,
.image_focus h2{
	font-size: 0.8rem;
	line-height: 1.4;
}

section.work_page_meta *{
	text-align: center;
}

.archive_audio_list li:not(.work_header) *{
	width: 60%;
}

.news_content *{
	width: 100%;
}

/* 
 *
 * ============================
 * 					INFORMATION
 * ============================
 *
 */


.grid_third.inactive{
	border-color: rgba(255,255,255,0.5);
	color: rgba(255,255,255,0.5);
}

.grid_third.inactive a{
	color: rgba(255,255,255,0.5);	
}

.about_section{
	background-color: black;
  box-sizing: border-box;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-bottom: 4rem;
  padding-top: 1rem;
}

.about_section, 
.work_content .work_text, 
.work_content .work_media{
	position: relative;
	padding-top: 2rem;
	margin: 0 auto;
	width: 80%;
	max-width: 25rem;
}

.work_content .work_text{
	background-color: black;
	color: white;
	margin-top: 1rem !important;
	margin-bottom: 2rem;
	box-sizing: border-box;
	padding: 0.5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.work_content .work_media{
	margin-top: 2rem;
	padding-top: 0;
}

@media(max-width: 1024px){
	.about_section, 
	.work_content .work_text, 
	.work_content .work_media{
		width: calc(100% - 0.5rem);
	}	
}


/* 
 *
 * ============================
 * 			UPCOMING CONCERTS
 * ============================
 *
 */

.concerts{
	margin-bottom: 2rem;
}


h3.concerts_info{
	font-size: 0.8rem;
	line-height: 1.2;
	font-family: 'Authentic-60';
	margin-top: 0.25rem;
	margin-bottom: 0.5rem;
}

h2 + h3.concerts_info{
	margin-top: 0.75rem;
}

h2#past_concerts{
	margin-top: 1rem;
	margin-bottom: 2rem;
	text-align: center;
}

.upcoming_concert, .past_concert{
	text-align: center;
	position: relative;
	padding: 0.5rem;
	padding-top: 2rem;
	min-height: 16rem;
	margin-left: 0.25rem;
	margin-right: 0.25rem;
}



.concert_items li:before{
	content: "";
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	box-sizing: border-box;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 1rem;
	border-style: solid;
	border-width: 0.45rem;
	background-color: transparent;
}

.concert_items li.upcoming_concert:before{ border-color: white; }
.concert_items li.past_concert:before{ border-color: lightgray;	}




.upcoming_concert{
	background-color: black;
	color: white;
}

.upcoming_concert a:not(.button){
	color: white;
	border-bottom: dashed 1px white;
}

.past_concert a:not(.button){
	color: white;
	border-bottom: dashed 1px white;
}

.upcoming_concert a.button{
	border: dashed 1px white;
}

.past_concert a.button{
	border: dashed 1px white;
}

.button_wrapper{
	display: block;
	text-align: center;
	width: 100%;
	margin-top: 1rem;
	margin-bottom: 0.75rem;
}

a.button{
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 0.5rem;
	font-size: 0.8rem;
}

.past_concert{
	box-sizing: border-box;
	border: solid 1px lightgray;
}



.upcoming_concert .concerts_content *{
	color: white;
	width: 100%;
}

.concerts_content{
	margin-top: 1.25rem;
	text-align: left;
}

.concerts_content p{
	font-size: 0.8rem;
	line-height: 1.2;
}

.concerts_content .external_link{
	margin-top: 0.5rem;
}



/* 
 *
 * ============================
 * 					WORKS PAGE
 * ============================
 *
 */

.filter_options, .work_list{
	margin-top: 2rem;
}

.filter_options ul li{
	margin-top: 0.25rem;
}

.filter_options ul, .filter_options h2, .work_list ul{
	width: calc(100% - 0.5rem);
	margin: 0 auto;
	
}

.filter_item{
 	display: inline-block;
 	padding-top: 0.25rem;
 	padding-bottom: 0.25rem;
 	padding-left: 0.5rem;
 	padding-right: 0.5rem;
 	box-sizing: border-box;
 	border: dashed 1px white;
 	cursor: pointer;
 	user-select: none;
}

.filter_item.active{
	background-color: white;
	color: black;
	border: dashed 1px white;
}

.work_item.active{
	display: block;
}

.work_item{
	display: none;
}

.work_list li,
.archive_list li, 
.archive_audio_list li{
	width: 100%;
	box-sizing: border-box;
}

.work_list li a,
.archive_list li a, 
.archive_audio_list li:not(.work_header){
	padding: 0.25rem;
	min-height: 4rem;
}

.work_list li{
	background-color: rgba(255,255,255,0.3);
}

.work_list li:nth-of-type(even),
.work_list li:nth-of-type(even) a{
	background-color: black;
	color: white;
}

.work_thumbnail img{
	width: 70%;
}

@media(max-width: 768px){
	.work_thumbnail img{ width: 98%; }	
}

.work_item span:nth-of-type(1),
.work_item span:nth-of-type(3),
.work_header span:nth-of-type(1),
.work_header span:nth-of-type(3){
	width: 16.66%;
	flex-basis: 16.66%;
}

.work_item span:nth-of-type(2),
.work_item span:nth-of-type(4),
.work_header span:nth-of-type(2),
.work_header span:nth-of-type(4){
	width: 33.33%;
	flex-basis: 33.33%;
}

@media(max-width: 768px){
	.work_item span:nth-of-type(1),
	.work_item span:nth-of-type(2),
	.work_header span:nth-of-type(1),
	.work_header span:nth-of-type(2){
		width: 50%;
		flex-basis: 50%;
	}

	.work_item span:nth-of-type(3),
	.work_item span:nth-of-type(4),
	.work_header span:nth-of-type(3),
	.work_header span:nth-of-type(4){
		display: none;
	}
}



/* 
 *
 * ============================
 * 					WORK PAGE
 * ============================
 *
 */


h3.work_page_year, h2.work_page_title{
	text-align: center;
}

h2.work_page_title{
	margin-bottom: 1rem;
}


section.work_page_meta{
	width: 50%;
	max-width: 20rem;
	margin: 0 auto;
	margin-bottom: 2rem;
}

@media(max-width: 768px){
	section.work_page_meta{
		width: calc(100% - 0.5rem);
	}	
}

.work main{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
}

.work header{
	flex-basis: 100vw;
}

main .work_content{
	border-top: solid 1px white;
	flex-basis: 50%;
	flex-grow: 1;
	box-sizing: border-box;
	padding-bottom: 4rem;
	color: white;
}

@media(max-width: 1024px){
	
	main .work_content{
		padding-bottom: 2rem;
	}
	
	main .work_content:not(:first-of-type){
		border-top: none;
		padding-bottom: 4rem;
	}
}


.work_carousel, .work_text, .work_media{
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.work_download{
	margin-top: 2rem;
	margin-bottom: 4rem;
}

.work_text img,
.work_text figure,
.work_text figure img,
.work_media img,
.work_media figure img,
figure.work_media img,
figure.work_media audio{
	width: 100%;
}


.work_text h1:first-child,
.work_text h2:first-child,
.work_text h3:first-child{
	margin-top: 0;
}

.work_text h1{
	margin-top: 1rem;
	margin-bottom: 0.25rem;
	text-align: center; 
}

.work_text h2{
	margin-top: 1rem;
	margin-bottom: 0.25rem;
}

.work_text h3{
	text-transform: uppercase;
	font-size: 0.7rem;
	line-height: 0.9rem;
	margin-top: 1rem;
	margin-bottom: 0.25rem;
}


.work_text p:not(:first-of-type){
	text-indent: 1rem;
}

.work_text h1 + p:not(:first-of-type),
.work_text h2 + p:not(:first-of-type),
.work_text h3 + p:not(:first-of-type){
	text-indent: 0;
}



section.work_carousel{
	display: block;
	width: calc(100% - 1rem);
	margin-left: auto;
	margin-right: auto;
	overflow-y: hidden;
	box-sizing: border-box;
	border: solid 1px white;
	padding-top: 1.5rem;
	padding-bottom: 1rem;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.carousel_item{
	box-sizing: border-box;
	width: 25vw;
	padding-left: 0.5rem;
	padding-left: 0.5rem;
	vertical-align: bottom;
  font-size: 0.7rem;
  line-height: 0.9rem;
  display: flex;
  flex-direction: column;
	justify-content: flex-end;
	align-items: end;
	height: 24rem;
	filter: saturate(0%);
	opacity: 0.8;
}


.carousel_item.is-selected{
	filter: saturate(100%);
	opacity: 1;
}

@media(max-width: 1024px){
	.carousel_item{
		height: 25rem;
		width: 50vw;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

@media(max-width: 768px){
	.carousel_item{
		height: 25rem;
		width: 100vw;
		padding-left: 0;
		padding-right: 0.5rem;
	}
}

.carousel_item img{
	width: 100%;
	height: 20rem;
	object-fit: contain;
	object-position: bottom left;
}

@media(max-width: 768px){
	.carousel_item img{
		object-position: bottom center;		
	}
}

.carousel_item h3{
	padding-top: 0.5rem;
	height: 3rem;
}

.carousel_item h3, figcaption{
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
	font-size: 0.7rem;
  line-height: 0.9rem;
  color: rgba(255,255,255,0.5);	
}

figcaption{
	padding-top: 0.25;
}


.flickity-button {
  background: transparent;
}
/* big previous & next buttons */
.flickity-prev-next-button {
  width: 1.5rem;
  height: 3.2rem;
  top: 0.5rem;
  border-radius: 0;
  transform: none;
  background-size: 96% !important;
	background-repeat: no-repeat !important;
}

@media(any-hover: hover){
	.flickity-prev-next-button:hover{
		background: transparent;
		opacity: 0.5;
	}
}

.flickity-prev-next-button.next{
	background-image: url('/assets/images/next-arrow.svg');
}

.flickity-prev-next-button.previous{
	background-image: url('/assets/images/prev-arrow.svg');
}

/* icon color */
.flickity-button-icon {
  display: none;
}
/* hide disabled button */
.flickity-button:disabled {
  display: none;
}

.work_download_link{
	display: block;
	color: white;
	box-sizing: border-box;
	margin: 0 auto;
	width: 20rem;
	max-width: 100%;
	padding: 1rem;
	text-align: center;
	border: dashed 1px white;
}

.sales_link{
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.work_download .caption{
	margin: 0 auto;
	margin-top: 0.25rem;
	width: 20rem;
	max-width: 100%;
	color: gray;
}


/* 
 *
 * ============================
 * 					ARCHIVE PAGE
 * ============================
 *
 */

.archive{
 	color: white;
}

.archive *{
 	color: white;
}

.archive .menu_item{
 	border-color: white !important;
}

.archive_photography, .archive_audio_list, .archive_list{
	margin: 0 auto;
	width: calc(100% - 0.5rem);
}


.archive .grid_third.inactive{
	border-color: rgba(255,255,255,0.5) !important;
	color: rgba(255,255,255,0.5);
}

.archive .grid_third.inactive a{
	color: rgba(255,255,255,0.5);	
}

/* VIDEO */

.archive_list, .archive_audio_list{
	margin-top: 2rem;
}

.archive_list a{
	width: 100%;
}

.archive_item:nth-of-type(even){
	background-color: white !important;
}

.archive_item:nth-of-type(even) *{
	color: black;
}

.archive_item span:nth-of-type(1){
	width: 16.66%;
	flex-basis: 16.66%;
}

.archive_item span:nth-of-type(2){
	width: 33.33%;
	flex-basis: 33.33%;
}

.archive_item span:nth-of-type(3){
	width: 50%;
	flex-basis: 50%;
}

.archive_audio_list audio{
	border-radius: 1rem;
	overflow: hidden;
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;	
}

@media(max-width: 768px){
	.archive_audio_list .archive_item span:nth-of-type(1), 
	.archive_audio_list .work_header span{
		display: none;
	}

	.archive_audio_list .archive_item span:nth-of-type(2),
	.archive_audio_list .archive_item span:nth-of-type(3){
		width: 100%;
		flex-basis: 100%;
		margin-top: 0.25rem;
		margin-bottom: 0.25rem;
	}

	.archive_item span:nth-of-type(1),
	.archive_item span:nth-of-type(2){
		width: 50%;
		flex-basis: 50%;		
	}

	.archive_item span:nth-of-type(3):not(.archive_audio){
		display: none;
	}
}

.archive_photography{
	margin-top: 4rem;
}


.image_file{
	flex-basis: calc(100%/7);
	margin-bottom: 1rem;
	cursor: pointer;
}

.image_file.right{
	text-align: right;
}

.image_file a{
	display: block;
}

.image_file img{
	width: 60%;
	/*filter: grayscale(100%) contrast(700%);*/
}

@media(max-width: 768px){
	.image_file{
		box-sizing: border-box;
		margin-left: 0.25rem;
		margin-right: 0.25rem;
		flex-basis: calc(25% - 0.5rem) !important;
	}

	.image_file.right, .image_file{
		text-align: center;
	}

	.image_file img{
		width: 100%;
	}
}

.image_focus{
	width: 100%;
	flex-basis: 100%;
	margin-top: 4rem;
	margin-bottom: 4rem;
}

.image_focus_content{
	position: relative;
	width: 66.66%;
	margin: 0 auto;
}

@media(max-width: 768px){
	.image_focus_content{
		width: 100%;
	}
}

.image_focus_content h3{
	color: gray;
}

.image_focus_content h2{
	margin-top: 0.5rem;
}

.primary_focus{
	position: relative;
	display: block;
	object-fit: contain;
	object-position: center;
	width: 100%;
}

.exit_icon{
	display: block;
	margin-left: calc(100% - 2.5rem);
	margin-bottom: -3rem;
	width: 2rem;
	height: 2rem;
}

@media(max-width: 768px){
	.exit_icon{
		margin-bottom: 0rem;
	}
}

.exit_line{
	width: 2.8rem;
	height: 2px;
	border-radius: 1px;
	background-color: white;
}

.exit_line.up{
	transform: rotate(-45deg);
}

.exit_line.down{
	transform: rotate(45deg);
}


/* 
 *
 * ============================
 *	 					FOOTER
 * ============================
 *
 */


footer{
	width: calc(100% - 0.5rem);
	margin: 0 auto;
	margin-top: 10rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	box-sizing: border-box;
	border-top: solid 1px white;
}

footer div{
	width: 16.66%;
	flex-basis: 16.66%;
}

footer div:nth-of-type(2){
	flex-basis: 66.66%;
	text-align: center;
}

footer div:nth-of-type(3){
	text-align: right;
}

@media(max-width: 1024px){
	footer{
		margin-top: 8rem;
	}
	footer div,
	footer div:nth-of-type(2),
	footer div:nth-of-type(3){
	flex-basis: 100%;
	text-align: left;
	margin-bottom: 0.5rem;
}

}

footer a{
	border-bottom: dashed 1px white;
	margin-right: 0.15rem;
	margin-left: 0.15rem;
}

footer img{
	object-fit: contain;
	object-position: top left;
	max-height: 5rem;
}

.archive footer a{
	border-bottom: dashed 1px white;
}

.archive footer{
	border-top: solid 1px white;
}