/*!
Theme Name: Chaotic Rhythms
Author: Sylvana dAngelo
http://asmbly-line.design
Description: Chaotic Rhythms is an online exhibition featuring soundworks by Edzi’u, Helena Krobath, Brady Ciel Marks, Jeneen Frei Njootli and prOphecy sun. Curated by Freya Zinovieff and presented with Decoy Magazine.

*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Layout
	- Colors
	- Title Animation
# Base
	- Typography
	- Elements
## Artists
# Components
	- Navigation
	- Media
	- Accordion
## Accessibility

--------------------------------------------------------------*/


html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
}

main {
	display: block;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

a {
	background-color: transparent;
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

b,
strong {
	font-weight: bolder;
}


img {
	border-style: none;
}


/* Layout */

.logos{
	padding-bottom:6rem;
	display: block;
    height: 100px;
}

.logos img{
	max-height:50px;
	width:auto;
	padding-right:4rem;
	padding-top:1.25rem;
	display:inline-block;
	float:left;
}

.print-animation video{
	border:2px solid #000;
}

.artist-menu{
	min-height:300px;
}

.open-sesame{
	padding:0 !important;
	max-width:2rem;
	text-align:center !important;
	color:#fff;
	background-color:#000;
}

#main-wrapper{
	height:100vh;
	overflow:hidden;
}

.main-row{
	display:grid;
	grid-template-columns: 2fr 1fr;
}

.home-page-height{
	height:80vh;
	overflow:hidden;
}

.opening-text-wrapper{
	height:100%;
	overflow:auto;
}

.column-two-thirds{
	overflow:auto;

}

.column-one-third{
	color: #fff;
	border-left:2px solid #fff;
}

.grid-one-half{
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 2rem;
}

.column-one-half{

}

.artwork-text h1{
	color:#000;
}

.artwork-text h2{
	margin-bottom:0;
}

@media (max-width: 1000px){
.display-mobile .jeneen-work{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 15px;
    height: unset;
    text-align: center;
}

.center-mobile-grid{
	display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}


.jeneen-img-mobile img{
	max-width:120px;
	height:auto;
	border-radius: 50%;
	filter: gray; 
  	-webkit-filter: grayscale(1);
  	filter: grayscale(1); 
  	opacity:0.5;
}

.jeneen-img-mobile-current img{
  -webkit-filter: grayscale(0);
  	filter: none;
  	opacity:1;
}

}

@media (max-width: 330px){
	.mobile-work-navigation .dot {
    	height: 46px !important;
    	width: 46px !important;
	}
	.jeneen-img-mobile img {
    max-width: 95px !important;
	}
}

@media (max-width: 1000px) {

	.opening-text-wrapper-page.page-height {
	    height: unset !important;
	    overflow: unset !important;
	}

	.mobile-navigation-exhibition-page button:hover{
		color:#000 !important;
		background-color:#fff !important;
		border:0px !important;
	}

	.mobile-navigation-exhibition-page button:hover h1{
		color:#000 !important;
		background-color:#fff !important;
		border:0px !important;
	}

	.grid-one-half{
		grid-template-columns: 1fr;
	}
	.page-menu {
	    border-top: 2px solid #000;
	    padding-bottom: 6rem;
    padding-top: 2rem;
    background-color: #fff;
	}
	.main-row{
		display:grid;
		grid-template-columns: 1fr !important;
		background-color:#000;
	}
	.home-page-height {
    height: unset;
	}
	.column-one-third{
		border-left:0px;
	}
	.display-desktop{
		display:none !important;
	}

	.display-mobile{
		display:block !important;
	}
	.mobile-animation{
		padding:1rem;
	}
	.mobile-animation img{
		max-width:90vw;
	}
	.artist-navigation{
		padding-left: 1rem !important;
	    width: 83vw !important;
	}
	.jeneen-bar .artist-navigation {
	    text-align: left !important;
	}
	a.home-navigation .edziu_home{
		position:relative !important;
	}
	a.home-navigation .helena-krobath_home{
		position:relative !important;
		top:3rem !important;
	}
	a.home-navigation .brady-ciel-marks_home{
		position:relative !important;
		top: 4rem !important
	}
	a.home-navigation .jeneen-frei-njootl_home{
		position:relative !important;
		top: 5rem !important;
	}
	a.home-navigation .prOphecy-sun_home{
		position:relative !important;
		top: 6rem !important;
	}
	.artist-navigation h1{
		margin:0 !important;
		font-size: 2rem;
		line-height: 1;
	}

	a:hover .artist_home_navigation{
	color:#fff !important;
	background-color:#000 !important;
	}

	a:hover .artist_home_navigation h1{
	color:#fff !important;
	background-color:#000 !important;
	}
	
	.artist-menu {
		padding:0 1rem;
		height: 420px;
	}

	.print-animation img {
	    max-width: 85vw !important;
	    border: 2px solid #000;
	}

}

.too-long{
	padding-left:0.25rem !important; 
}

@media (max-width: 600px) { 
	.too-long{
		padding-left:3rem !important; 
	}
	.transcript-display-block {
	    padding: 2rem 1rem !important;
	}
}

.display-desktop{
	display:block;
}

.display-mobile{
	display:none;
}

.curatorial-button {
	background-color: #000;
	color:#fff;
	padding: 5px 0;
    border-radius: 0;
    width: 60px;
    transition:all linear 0.5s;
    font-size: 0.75rem;
	font-family: 'Fira Code', monospace;
	text-transform:uppercase;
	box-shadow:0 !important;
}

.artwork-row{
	width:100%;
	height:100vh;
	overflow:hidden;
}

.artwork-navigation-row{
	width:100%;
	position:fixed;
	top:0;
	z-index:99 !important;
}

.artwork-navigation h1{
    display: grid;
    grid-template-columns: 1fr 2fr;
    color:#000;
}

.artwork-navigation-row button.back-home{
	width:8.5%;
	border:0;
	border-radius: 2rem;
	cursor: pointer;
	margin-left:0.5rem;
	transition:all linear 0.25s;
}

.artwork-navigation-row button.back-home h1{
	color:#000;
}

.artwork-navigation-row button:hover.back-home h1{
	color:#fff;
}

.artwork-navigation-row button:hover.back-home {
	background-color:#000;
}

.artwork-navigation-row button:hover.accordion-navigation .artist-navigation{
	color:#fff;
}

.artwork-navigation-row button:hover.accordion-navigation .artwork-navigation h1{
	color:#fff;
}

.artwork-navigation-row button.accordion-navigation{
	border:0;
	border-radius:2rem;
	width:70%;
}

.artwork-navigation-row button.play-pause {
    width: 19.5%;
    border: 0;
    border-radius: 2rem;
    cursor: pointer;
    transition: all linear 0.25s;
    background-color:#efefef;
    display: inline-block;
}

.artwork-navigation-row button.play-pause h1{
	color:#000;
}

.artwork-navigation-row button:hover.play-pause h1{
	color:#fff;
}

.artwork-navigation-row button:hover.play-pause {
	background-color:#000;
}

.jeneen-bar button.accordion-navigation {
    border: 0;
    border-radius: 2rem;
    width: 50%;
}

.jeneen-bar h1 {
    display:grid;
    grid-template-columns: 1fr 1fr;
    color:#000;
}

.artwork-navigation h1.jeneen {
    grid-template-columns: 1fr 1fr !important;
}

.artwork-navigation-row button.disconnect:hover{
	background-color:#000;
}

.artwork-navigation-row button.disconnect:hover h1{
	color:#fff !important;
}

.disconnect h1{
	color:#000 !important;
}

.jeneen-bar-navigation button.accordion-navigation .artist-navigation:before{
	content: '\002B';
	float: left;
}

.jeneen-bar-navigation button.accordion-navigation.active .artist-navigation:after{
	content: '\2212';
	float: left;
}

.jeneen-bar-navigation button.play-pause-jeneen {
    width: 9%;
    border: 0;
    border-radius: 2rem;
    cursor: pointer;
    transition: all linear 0.25s;
    background-color:#efefef;
    display:inline-block !important;
}

.jeneen-bar-navigation button.back-home {
    width: 15% !important;
}

.jeneen-bar-navigation button.play-pause-jeneen h1{
	color:#000;
}

.jeneen-bar-navigation button:hover.play-pause-jeneen h1{
	color:#fff;
}

.jeneen-bar-navigation button:hover.play-pause-jeneen {
	background-color:#000;
}

.jeneen-bar-navigation button.image-new-position {
    width: 11%;
    border: 0;
    border-radius: 2rem;
    cursor: pointer;
    transition: all linear 0.25s;
    background-color:#efefef;
}

h1.engage-poetry {
	text-align:center;
	display:none;
}

h1.engage-poetry-on {
	text-align:center;
	display:block;
}

.jeneen-bar-navigation button#engage_poetry {
    width: 14% !important;
    border: 0;
    border-radius: 2rem;
    cursor: pointer;
    transition: all linear 0.25s;
    background-color: #efefef;
}

.jeneen-bar-navigation button#engage_poetry h1{
	color:#000;
}

.jeneen-bar-navigation button:hover#engage_poetry h1{
	color:#fff;
}

.jeneen-bar-navigation button:hover#engage_poetry {
	background-color:#000;
}

.jeneen-bar-navigation button.image-new-position h1{
	color:#000;
}

.jeneen-bar-navigation button:hover.image-new-position h1{
	color:#fff;
}

.jeneen-bar-navigation button:hover.image-new-position {
	background-color:#000;
}

.jeneen-bar-navigation button.accordion-navigation.active .artist-navigation:before{
	content: '';
}

.jeneen-bar-navigation button.accordion-navigation.active:after{
	content: '';
}

.jeneen-bar-navigation button.accordion-navigation .artist-navigation{
	color:#000;
}

.jeneen-bar-navigation{
	width:100%;
	position:fixed;
	top:0;
	z-index:99 !important;
}

.jeneen-bar-navigation button.back-home{
	width:8.5%;
	border:0;
	border-radius: 2rem;
	cursor: pointer;
	margin-left:0.5rem;
	transition:all linear 0.25s;
}

.jeneen-bar-navigation button.back-home h1{
	color:#000;
}

.jeneen-bar-navigation button:hover.back-home h1{
	color:#fff;
}

.jeneen-bar-navigation button:hover.back-home {
	background-color:#000;
}

.jeneen-bar-navigation button:hover.accordion-navigation .artist-navigation{
	color:#fff;
}

.jeneen-bar-navigation button:hover.accordion-navigation .artwork-navigation h1{
	color:#fff;
}

.jeneen-bar-navigation button.accordion-navigation{
	border:0;
	border-radius:2rem;
	width:48%;
}

button.pausePlay{
	background-color:#000;
}
button.pausePlay h1{
	background-color:#fff;
}


.artwork-navigation-row button.accordion-navigation .artist-navigation{
	color:#000;
}

.artwork-navigation-row button.accordion-navigation .artist-navigation:before{
	content: '\002B';
	float: left;
    padding-right: 2rem;
}

.artwork-navigation-row button.accordion-navigation.active .artist-navigation:after{
	content: '\2212';
	float: left;
    padding-right: 2rem;
}

.artwork-navigation-row button.accordion-navigation.active .artist-navigation:before{
	content: '';
}

.artwork-navigation-row button.accordion-navigation.active:after{
	content: '';
}

.artist-info{
	background-color:#fff;
	border-radius: 2rem;
    height: 86vh;
    overflow: scroll;
    padding-bottom: 1rem;
}

.artist-info .page-menu button h1{
	text-align:left;
	color:#000;
	display: inline-block;
	padding-left:1rem;
}

.artist-info .page-menu button{
	background-color:#fff;
	color:#000;
	text-align: left;
}

.artist-info .page-menu button{
	background-color:#fff;
	color:#000;
}

.artist-info .page-menu button:hover{
	background-color:#000;
}

.artist-info .page-menu button:hover h1{
	color:#fff;
}

.home-menu button h1{
	text-align:left;
	color:#fff;
	display: inline-block;
	padding-left:3rem;
}

.home-menu button{
	background-color:#000;
	color:#fff;
	text-align: left;
	border:0px;
	border-radius: 50px;
    width: 100%;
    transition:all linear 0.25s;
}

.home-menu button{
	background-color:#000;
	color:#fff;
}

.home-menu button:hover{
	background-color:#fff;
}

.home-menu button:hover h1{
	color:#000;
}

.artist-info .column-two-thirds{
	padding:2rem;
}

.artist-info .page-menu{
	top:0;
}

.artist-info .dot{
	margin:0 1rem;
}

.read-transcript-wrapper{
	padding: 0 4rem 6rem;
}

.transcript-display-none{
	display:none;
}

.transcript-display-block{
	display:block;
	padding:2rem;
	border:1px solid #000;
}

.transcripts button{
	padding:0.5rem 0;
	background-color:transparent;
	border:0px;
	font-family: 'Fira Code', monospace;
	text-transform:uppercase;
	font-size:1.25rem;
}

.transcripts button:hover{
	text-decoration:underline;
}

/* Colors */

.black-background{
	background-color:#000;
}

.red-background{
	background-color:#ed0833;
}

.gold-background{
	background-color:#db8a1c;
}

.blue-background{
	background-color:#301fd9;
}

.magenta-background{
	background-color:#d4179e;
}

.white-background{
	background-color:#fff;
}

.about-us-body{
	max-width: 700px;
    margin: 0 auto;
}

.artist-interviews-body{
	max-width: 700px;
    margin: 0 auto;
}

.curatorial{
	max-width: 700px;
    margin: 0 auto;
}

.curatorial p{
	line-height: 1.5;
}

.curatorial a{
	color:#000;
	text-decoration:none;
}

.curatorial p a{
	text-decoration:underline !important;
}

.curatorial a:hover{
	text-decoration:underline;
}

.curatorial h2{
	margin:0;
	padding-right: 1rem;
}

.quote-section-left{
	display:grid;
	grid-template-columns: 1fr 1.75fr;
	grid-column-gap: 1rem;
}

.quote-section-right{
	display:grid;
	grid-template-columns: 1.75fr 1fr;
	grid-column-gap: 1rem;
}

@media only screen and (max-width: 600px){
	.quote-section-left{
		display:block;
	}

	.quote-section-right{
		display:block;
	}

}

.quote-section-inner{
	padding-top: 1rem;
    border-top: 1px solid #000;
    margin-top: 1em;
}

.curatorial-quote h1{
	font-weight:bold;
	font-size: 1.25rem;
    line-height: 1.3;
}

.curatorial h3{
	text-transform: uppercase;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom:0.5rem;
}

.mobile-number{
	display:grid;
	grid-template-columns: 1fr 4fr;
	grid-column-gap: 0.5rem;
}

.about-us-body a{
	text-decoration:underline;
}

h1.notation {
	font-size: 0.75rem !important;
}

span.notation {
	font-size: 0.75rem;
	font-family: 'Fira Code', monospace;
	text-transform:uppercase;
}

.bib{
	display:flex;
}

.bib h1{
	margin-top:1.5rem;
}

.curatorial-menu {
  position: fixed;
  bottom:5rem;
  left:2rem;
  display: inline-block;
  transition:all linear 0.5s;
}

#show-index-new{
	position:fixed;
	bottom:4rem;
	left:2rem;
}

@media (max-width: 600px){
	.curatorial-dropdown {
    width: 350px !important;
	}
	.jeneen-img-mobile img{
		max-width:100px;
	}
	.page-menu{
		position:relative !important;
	}
	.read-transcript-wrapper {
	    padding: 0 1rem 6rem;
	}
}

@media (max-width: 375px){
	.curatorial-dropdown {
    width: 300px !important;
	}
}

button:hover .curatorial-dropdown{
	display:block;
}

.curatorial-dropdown {
  display: none;
    position: absolute;
    width: 400px;
    z-index: 1;
    color: #000;
    transition: all linear 0.5s;
    text-align: center;
    top: -330px;
    background-color: #fff;
    border: 2px solid #000;
}

.curatorial-dropdown a {
  	color: black;
    padding: 12px 1rem;
    text-decoration: none;
    display: block;
    background-color: #fff;
    color: #000 !important;
    transition: all linear 0.5s;
    text-align: left;
}

.curatorial-dropdown a:hover {
	background-color: #000 ;
	color:#fff !important;
	text-decoration:underline;
}

.curatorial-menu:hover .curatorial-dropdown {display: block;}



@media (max-width: 1000px) {
	.jeneen-bar h1 {
	    grid-template-columns: 1fr !important;
	}
	.jeneen-bar-navigation button#engage_poetry {
	    width: 20% !important;
	}
	.jeneen-bar-navigation button.back-home {
	    width: 11.5% !important;
	}
	.artwork-navigation-row button.back-home{
		width:50% !important;
		margin-left: 0 !important;
    	text-align: center;
	}
	.artwork-navigation-row button.back-home.jf{
		width:50% !important;
		margin-left: 0 !important;
    	text-align: center;
	}
	.artwork-navigation-row button.play-pause {
	    width: 48% !important;
	    margin-left: 0 !important;
	    text-align: center;
	}
	.artwork-navigation-row button.disconnect {
	    width: 50% !important;
	    text-align: center;
	    float: right;
	    border: 0;
	    border-radius: 2rem;
	    cursor: pointer;
	    transition: all linear 0.25s;
	    background-color: #efefef;
	}
	.artwork-navigation-row button.accordion-navigation{
		width:100% !important;
	}
	.artwork-navigation-row button.strike-through {
    	width: 49.5% !important;
	}
	.artwork-navigation-row button.play-pause-jeneen {
	    width: 48% !important;
	}
	.artwork-navigation-row button.image-new-position {
	    width: 36% !important;
	}
}

@media (max-width:375px){
	.logos img {
		max-height: 55px;
	    padding-right: 0;
	}
	.artist-menu {
	    padding: 0;
	}
	.opening-text {
	    padding: 2rem 1rem 4rem !important;
	}
	.opening-text-artist-interviews {
	    padding: 2rem 1rem 0 !important;
	}

}

@media (max-width:325px){
	.logos img {
	    max-height: 45px;
	    padding-right: 0;
	}
	.artist-menu {
	    height: 470px;
	}
	.page-menu button h1 {
	    padding-left: 2rem !important;
	}
	.mobile-navigation-exhibition-page button{
		padding:0.1rem;
	}

}

@media (max-width: 835px){
	.jeneen-bar-navigation button.accordion-navigation {
	    width: 52% !important;
	}
	.jeneen-bar-navigation button.accordion-navigation .artist-navigation:before {
	    padding-right: 2rem;
	}
	.jeneen-bar-navigation button#engage_poetry {
	    width: 24% !important;
	}
}

@media (max-width: 735px){
	.jeneen-bar-navigation button.play-pause-jeneen{
	    display:none !important;
	}
	.jeneen-bar-navigation button.back-home {
	    width: 15% !important;
	}
	.jeneen-bar-navigation button#engage_poetry {
    	width: 28% !important;
	}

}

@media (max-width: 600px){
	.jeneen-bar-navigation button.back-home {
	    width: 48% !important;
	}
	.jeneen-bar-navigation button#engage_poetry {
    	width: 48% !important;
	}
	.jeneen-bar-navigation button.accordion-navigation {
	    width: 98% !important;
	}
	.artist-info .column-two-thirds {
	    padding: 1rem !important;
	}
	.opening-text-artist-interviews {
	    padding: 2rem 1rem 0 !important;
	}

	.audio-canvas {
	    margin: 0 2rem 2rem 2rem !important;
	    height: 40vh !important;
	}
	button.edziu-play:hover h1::after{
		content:"Edzi’u" !important;
	}
	button.helena-play:hover h1::after{
		content:"Helena Krobath" !important;
	}
	button.brady-play:hover h1::after{
		content:"Brady Ciel Marks" !important;
	}
	button.jeneen-play:hover h1::after{
		content:"Jeneen Frei Njootl" !important;
	}
	button.prOphecy-play:hover h1::after{
		content:"prOphecy sun" !important;
	}
	.artist-interview-grid {
	    padding: 0 1rem 2rem !important;
	}

	#interview-canvas {
	    margin-left: 5% !important;
    	margin-bottom: 10%;
	}

}

@media (max-width: 520px){

	.interview_track {
	    grid-template-columns: 2.5fr 1fr !important;
	}


	}

@media (max-width: 380px){

	.interview_track h1{
	    font-size:1rem !important;
	}


	}

@media (max-width: 335px){

	.interview_track h1{
	    font-size:0.8rem !important;
	}


	}

/* Artist Interviews */

.artist-interview-grid{
	padding: 2.8rem 1rem 2rem 4rem;
}

.opening-text-artist-interviews {
    padding: 2rem 4rem 0;
}

.artist-interview-grid button:hover h1{
	color:#fff;
}

.artist-interview-grid button:active h1{
	color:#fff;
}

.artist-interview-grid button {
	text-align:left;
    display: block;
    width: 100%;
    border: 0px;
    cursor: pointer;
    background-color: #fff;
    border-radius: 2rem;
    color: #000;
    transition: all linear 0.25s;
}

.artist-interview-grid button.track:hover {
    background-color: #000 !important;
    border-radius: 2rem;
    color: #fff !important;
    text-align:center;
}

.artist-interview-grid button.track:active {
    background-color: #000 !important;
    color: #fff !important;
    text-align:center;
}

.artist-interview-grid button.active-interview {
    background-color: #000 !important;
    color: #fff !important;
    text-align:center !important;
}

.artist-interview-grid button.active-interview h1{
    color: #fff !important;
}

button.edziu-play h1::after{
	content:"Edzi'u";
}

button.edziu-play:hover h1::after{
	content:"Play";
}

h1.edziu-pause{
	color:#fff !important;
}

h1.edziu-pause:hover {
	color:#fff !important;
}

button.helena-play h1::after{
	content:"Helena Krobath";
}

button.helena-play:hover h1::after{
	content:"Play";
}

h1.helena-pause{
	color:#fff !important;
}

h1.helena-pause:hover {
	color:#fff !important;
}

button.brady-play h1::after{
	content:"Brady Ciel Marks";
}

button.brady-play:hover h1::after{
	content:"Play";
}

h1.brady-pause{
	color:#fff !important;
}

h1.brady-pause:hover {
	color:#fff !important;
}

button.jeneen-play h1::after{
	content:"Jeneen Frei Njootl";
}

button.jeneen-play:hover h1::after{
	content:"Play";
}

h1.jeneen-pause{
	color:#fff !important;
}

h1.jeneen-pause:hover {
	color:#fff !important;
}

button.prOphecy-play h1::after{
	content:"prOphecy sun";
}

button.prOphecy-play:hover h1::after{
	content:"Play";
}

h1.prOphecy-pause{
	color:#fff !important;
}

h1.prOphecy-pause:hover {
	color:#fff !important;
}

.audio-canvas{
	margin:0 4rem 2rem 4rem;
	height:25vh;
	background-color:#000;
}

.interview_track {
	display:grid !important;
	grid-template-columns: 3fr 1fr;
}

#interview-canvas{
    width:90%;
    height:100px;
    transform: rotate(-180deg);
    margin-left: 8%;
    border-radius: 50px;
}





/* Title Animation */

@media (prefers-reduced-motion) {
  .animation {
    animation-name: dissolve;
  }
  .animation-reduced-motion{
  	display:block !important;
  }
  .animation-motion{
  	display:none !important;
  }
}

@media screen and (prefers-reduced-motion: reduce) { 
   .animation {
    animation-name: dissolve;
  }
  .animation-reduced-motion{
  	display:block !important;
  }
  .animation-motion{
  	display:none !important;
  }
}

.animation-reduced-motion{
  	display:none;
  }
.animation-motion{
  	display:block;
  }

.overflow-hidden{
	overflow:hidden;
	max-height: 100%;
    width: auto;
}

.chaotic-row{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.rhythms-row{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.picard_engage{
	width:100vW;
	height:100vh;
	background-color:#000;
	z-index:999;
	position:absolute;
	top:0;
	left:0;
	overflow: hidden;
}

.center_picard {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

button.engage{
	background-color:transparent !important;
	border:0px !important;
	color: #fff;
}

button.engage h1{
	font-size:4rem;
	color:#fff;
	padding:0 4rem;
}

button:hover.engage h1{
	text-decoration:underline !important;
}

.closeAndPlay{
	display:none !important;
}

.closeAndPlaySingle{
	display:none !important;
}

.close-animation{
	width:200px;
	animation: cicleGrow 1s;
	animation-iteration-count: infinite;
	animation-delay: 0.15s;
	opacity:0.15;
}
@keyframes cicleGrow {
  from {
    transform: scale(0.15);
    opacity:0.15;
    width:200px;
  }
  to {
    transform: scale(1);
    opacity:0;
    width:1200px;
  }
}


#canvas-top {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 50%;
	-webkit-filter: url("#goo");
    filter: url("#goo");
}

.speaker-one{
	background-image: linear-gradient( #06436D, #0B165E );
}

#canvas-middle {
	position: fixed;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 55%;
	transform: rotate(-180deg);
	z-index:9;
}

.speaker-two{
	background-image: linear-gradient( #352A73, #0B165E );
}

#canvas-bottom {
	position: fixed;
	left: -1px;
    bottom: 0;
    width: calc(100% + 1px);
	height: 50%;
	transform: rotate(-180deg);
	box-shadow:none !important;
	border:0 !important;
}

.speaker-one-repeat{
	background-image: linear-gradient( #352A73, #0B165E );
}



.jeneen-work {
  overflow: hidden;
  width: 100%;
  height: 90vh;
}

.jeneen-img {
  position: absolute;
  width: 350px;
  height: 500px;
}

.jeneen-img img{
	max-width:350px;
	height:auto;
	border-radius: 50%;
}



#one {
  z-index: 4;
}

#two {
  z-index: 5;
}

#three {
  z-index: 2;
}

#four {
  z-index: 3;
}

#five {
  z-index: 6;
}

#six {
  z-index: 1;
}

.display-desktop-jf{
  	display:inline-block;
  }

@media only screen and (max-width: 1400px) {
  .jeneen-img {
	  position: absolute;
	  width: 250px;
	  height: 400px;
	}

	.jeneen-img img{
		max-width:250px;
		height:auto;
	}
}

.prOphecy-sun_container{
	z-index:8;
}

.TR1-background{
	/*background-image: linear-gradient(180deg, #f08597, #f16a8b 85%, #b8cab0);*/
  background-image: url('./imgs/Untitled-1.png');
  background-position: center;
  background-size: 100% auto;
  cursor: url('./imgs/space.png') 15 15, move;
}

.TR2-background{
	/*background-image: linear-gradient(180deg, #b8cab0, #c688b1 25%, #969fe0 );*/
	background-image: url('./imgs/Untitled-2.png');
  background-position: center;
  background-size: 100% auto;
  cursor: url('./imgs/strawberry.png') 15 15, move;
}

.TR3-background{
	/*background-image: linear-gradient(180deg, #969fe0, #b8cab0 80% );*/
	background-image: url('./imgs/Untitled-3.png');
  background-position: center;
  background-size: 100% auto;
  cursor: url('./imgs/adventure.png') 15 15, move;
}

.TRfullStop-background{
	background-image: linear-gradient( #ed565d 45%, #b89d92);
}

.TR4-background{
	/*background-image: linear-gradient( #b2b19c 75%, #333);*/
	background-image: url('./imgs/Untitled-4.png');
  background-position: center;
  background-size: 100% auto;
  cursor: url('./imgs/flame.png') 15 15, move;
}

.helena-krobath-work .track-four, .helena-krobath-work .track-two, .helena-krobath-work .track-three{
	height:24.25vh;
	width:100vw;
	font-size:25vh;
	text-align:center;
}

.helena-krobath-work .track-one{
	height:27.25vh;
	width:100vw;
	font-size:25vh;
	text-align:center;
}

.helena-krobath-work .TRfullStop-background{
	height:5vh;
	width:100vw;
}

.image-new-position{
	display:inline-block;
}

@media (max-width: 770px){

.image-new-position{
	display:none;
}

.TR1-background{
  background-size: cover !important;
}

.TR2-background{
	background-size: cover !important;
}

.TR3-background{
	background-size: cover !important;
}


.TR4-background{
	background-size: cover !important;
}

.helena-krobath-work .track-two, .helena-krobath-work .track-three{
	height:12vh;
}

.helena-krobath-work .track-one{
	height:12vh;
}

.helena-krobath-work .track-four{
	height:12vh;
}

	.helena-krobath-work{
		height: 100%;
	    width: auto;
	    background-color: #181818;
	    padding-top: 9rem;
	}



.print-animation video {
    max-width: 85vw !important;
    width: auto;
}

.text-animation {
    font-size: 1.25rem !important;
    left: 14vw !important;
}



}

.edzu_i-body{
	height:100vh;
	width:100vw;
}
.edzu_i-body .artwork-row{
	z-index: 99;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none !important;
}

#backgroundMobile{
  background: url('./imgs/edziu_background.jpeg') no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  width: auto;
}

#backgroundDesktop{
  background: url('./imgs/edziu_background_sml.jpg') no-repeat center center fixed;
  background-size: cover;
  height: 100vh;
  width: auto;
  z-index:9;
}

.background-sections{
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	z-index:9;
	height:100vh;
	width:100vw;
}

#backgroundOne{
  background-image: url('./imgs/edziu_background01.jpg');
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% auto;
  height: 100%;
  width: auto;
}

.non-saturate{
	filter:saturate(1) !important;
	animation: fade 2s linear;
	animation-direction: alternate, reverse;
	box-shadow: 80px 80px 80px 80px rgba(0,0,0, 0.01) inset;
}

@keyframes fade {
  0%,100% { filter:saturate(1) }
  50% { filter:saturate(0.1) }
}

#backgroundTwo {
	background-image: url('./imgs/edziu_background02.jpg');
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% auto;
  height: 100%;
  width: auto;
}

#backgroundThree {
	background-image: url('./imgs/edziu_background03.jpg');
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% auto;
  height: 100%;
    width: auto;
}

#backgroundFour {
	background-image: url('./imgs/edziu_background04.jpg');
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% auto;
  height: 100%;
    width: auto;
}

#edzi_u-grid.work{
	display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.print-animation{
	width:50vw;
	width:auto;
}

.print-animation video{
	max-width:50vw;
	width:auto;
}

.text-animation {
	color: #000;
    font-family: "Courier New", monospace;
    font-size: 2.5rem;
    position: fixed;
    left: 29vw ;
    max-width: 400px;
    letter-spacing: -1px;
    line-height: 1;
}

.poem {display: none;}

@media (max-width: 350px){
	.text-animation {
	    font-size: 1.25rem !important;
	}
}


/* Base
--------------------------------------------- */

body {
	font-family: 'Helvetica', sans-serif;
}

h1 {
	color: #fff;
	font-family: 'Fira Code', monospace;
	text-transform:uppercase;
	font-weight:300;
	font-size:1.25rem;
}

h2 {
	font-family: 'Helvetica', sans-serif;
	font-stretch: expanded;
	font-weight:300;
	font-size:3rem;
}

p {
	font-family: 'Helvetica', sans-serif;
	color: #000;
}

a{
	text-decoration:none;
}

a:visited{
	color:inherit;
}


/* Artists
--------------------------------------------- */


/* Componants
--------------------------------------------- */

/* Navigation */

@media (max-width: 1000px){

	.artist-interview-grid {
	    padding: 0 4rem 200px;
	}

	.image-new-position {
	    display: none;
	}

	.name-of-artwork-mobile h1{
		font-size:1rem;
		color:#fff;
		padding:0;
	}

	#main-wrapper {
	    height: unset;
	}
	.column-two-thirds.mobile-height{
		overflow:unset !important;
	}
	.opening-text-row.mobile-scroll{
		height:100vh;
		overflow:auto;
	}
	.column-two-thirds.mobile-height{
		overflow:unset !important;
	}
	.artist-info .column-two-thirds{
		height:100% !important;
		padding-bottom:4rem !important;
	}
	.page-menu.page button {
	    width: 90%;
	    margin-left: 0.5rem;
	}
	.column-two-thirds.page-mobile-scroll{
		height:100%;
	}
	.artwork-text h1{
		color:#000;
		margin-top:0;
	}
	.artwork-text h2{
		color:#000;
		margin-bottom:0.5rem;
	}
	.mobile-work-navigation-grid button{
		background-color:transparent;
		border:0;
		padding: 0px;
	}
}

.mobile-work-navigation{
	position:fixed;
	bottom:2rem;
	width:100%;
}

.mobile-work-navigation .dot{
	height:50px;
	width:50px;
	margin: 0 auto;
	border: 3px solid #000000;
}

.mobile-work-navigation-grid{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.interviews-fixed{
	position:fixed !important;
}

.page-menu button{
	display:block;
	width:100%;
	border:0px;
	cursor: pointer;
	background-color:#fff;
	border-radius:2rem;
	color:#000;
	transition: all linear 0.25s;
}

.page-menu button.current-page{
	border:2px solid #000;
}

.page-menu button:hover{
	background-color:#000;
	color:#fff;
}

.page-menu button h1{
	text-align:left;
	padding-left:3rem;
	color:#000;
}

.page-menu button:hover h1{
	color:#fff;
}

.opening-text-wrapper.page-height{
	height:100vh;
	overflow:hidden;
}

.opening-text-wrapper-page.page-height{
	height:100vh;
	overflow:hidden;
}

.opening-text-wrapper-page .opening-text{
	color:#000;
}

.opening-text-wrapper-page .opening-text p{
	color:#000;
}

.column-one-third.page-navigation{
	color:#000;
}

.opening-text-row.page-scroll{
	height:100%;
	overflow:auto;
}

.artist_home_navigation {
	display:grid;
	grid-template-columns: 3fr 1fr 2fr;
	column-gap: 2rem;
	color:#000;
}

.name-of-artwork{
	text-align:center;
}

.artist-navigation{
	padding-left:2rem;
	color:#fff;
}

.artist-navigation h1{
	display:inline-block;
}

.dot {
  	height: 0.625rem;
    width: 0.625rem;
    background-color: #000000;
    border-radius: 50%;
    display: inline-block;
    border: 1.5px solid #fff;
    margin-right: 1rem;
}

#mobileNote{
	width: 80vw;
    height: 230%;
    background-color: transparent;
    z-index: 9999;
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: #fff;
    background-color:#000;
}

@media only screen and (min-width: 600px) {
    #mobileNote {
      height: auto;
      overflow: visible;
    }
  }

.centerMobileNote{
	padding:1rem;
	margin:1rem;
	background-color: #000;
	height: 100vh;
}

.centerMobileNote button{
	color:#fff;
	background-color:#000;
	border:0;
	box-shadow: 0;
	text-align:right;
	padding-bottom:1rem;
	width:100%;
}

a.home-navigation .prOphecy-sun_home {
	position:fixed;
	top:14rem;
	width:100vw;
	background-color:transparent;
	color: #fff;
	border-radius:2rem;
	z-index:999;
	left:0;
	transition:all linear 0.25s;
	} 
a.home-navigation .prOphecy-sun_home .name-of-artwork h1{
	color:transparent;
}

a.home-navigation .prOphecy-sun_home .duration h1{
	color:transparent;
}

a:hover.home-navigation .prOphecy-sun_home .name-of-artwork h1{
	color:#000;
}

a:hover.home-navigation .prOphecy-sun_home .duration h1{
	color:#000;
}

a:hover.home-navigation .prOphecy-sun_home{
	background-color:#fff;
}

a:hover.home-navigation .prOphecy-sun_home h1{
	color:#000;
} 


a.home-navigation .jeneen-frei-njootl_home {
	position:fixed;
	top:11rem;
	width:100vw;
	background-color:transparent;
	color: #fff;
	border-radius:2rem;
	z-index:999;
	left:0;
	transition:all linear 0.25s;
	} 
a.home-navigation .jeneen-frei-njootl_home .name-of-artwork h1{
	color:transparent;
}

a.home-navigation .jeneen-frei-njootl_home .duration h1{
	color:transparent;
}

a:hover.home-navigation .jeneen-frei-njootl_home .name-of-artwork h1{
	color:#000;
}

a:hover.home-navigation .jeneen-frei-njootl_home .duration h1{
	color:#000;
}

a:hover.home-navigation .jeneen-frei-njootl_home{
	background-color:#fff;
}

a:hover.home-navigation .jeneen-frei-njootl_home h1{
	color:#000;
} 


a.home-navigation .brady-ciel-marks_home {
	position:fixed;
	top:8rem;
	width:100vw;
	background-color:transparent;
	color: #fff;
	border-radius:2rem;
	z-index:999;
	left:0;
	transition:all linear 0.25s;
	}
a.home-navigation .brady-ciel-marks_home .name-of-artwork h1{
	color:transparent;
}

a.home-navigation .brady-ciel-marks_home .duration h1{
	color:transparent;
}

a:hover.home-navigation .brady-ciel-marks_home .name-of-artwork h1{
	color:#000;
}

a:hover.home-navigation .brady-ciel-marks_home .duration h1{
	color:#000;
}

a:hover.home-navigation .brady-ciel-marks_home{
	background-color:#fff;
}

a:hover.home-navigation .brady-ciel-marks_home h1{
	color:#000;
} 


a.home-navigation .helena-krobath_home{
	position:fixed;
	top:5rem;
	width:100vw;
	background-color:transparent;
	color: #fff;
	border-radius:2rem;
	z-index:999;
	left:0;
	transition:all linear 0.25s;
	} 
a.home-navigation .helena-krobath_home .name-of-artwork h1{
	color:transparent;
}

a.home-navigation .helena-krobath_home .duration h1{
	color:transparent;
}

a:hover.home-navigation .helena-krobath_home .name-of-artwork h1{
	color:#000;
}

a:hover.home-navigation .helena-krobath_home .duration h1{
	color:#000;
}

a:hover.home-navigation .helena-krobath_home{
	background-color:#fff;
}

a:hover.home-navigation .helena-krobath_home h1{
	color:#000;
}


a.home-navigation .edziu_home{
	position:fixed;
	top:2rem;
	width:100vw;
	background-color:transparent;
	color: #fff;
	border-radius:2rem;
	z-index:999;
	left:0;
	transition:all linear 0.25s;
}

a.home-navigation .edziu_home .name-of-artwork h1{
	color:transparent;
}

a.home-navigation .edziu_home .duration h1{
	color:transparent;
}

a:hover.home-navigation .edziu_home .name-of-artwork h1{
	color:#000;
}

a:hover.home-navigation .edziu_home .duration h1{
	color:#000;
}

a:hover.home-navigation .edziu_home{
	background-color:#fff;
}

a:hover.home-navigation .edziu_home h1{
	color:#000;
}

.page .dot{
	background-color:#fff;
	border: 1.5px solid #000;
}

.page h1{
	color:#000;
}


a.page-navigation .prOphecy-sun_home {
	position:fixed;
	top:14rem;
	width:100vw;
	background-color:transparent;
	color: #000;
	border-radius:2rem;
	z-index:999;
	left:0;
	transition:all linear 0.25s;
	} 
a.page-navigation .prOphecy-sun_home .name-of-artwork h1{
	color:transparent;
}

a.page-navigation .prOphecy-sun_home .duration h1{
	color:transparent;
}

a:hover.page-navigation .prOphecy-sun_home .name-of-artwork h1{
	color:#fff;
}

a:hover.page-navigation .prOphecy-sun_home .duration h1{
	color:#fff;
}

a:hover.page-navigation .prOphecy-sun_home{
	background-color:#000;
}

a:hover.page-navigation .prOphecy-sun_home h1{
	color:#fff;
} 


a.page-navigation .jeneen-frei-njootl_home {
	position:fixed;
	top:11rem;
	width:100vw;
	background-color:transparent;
	color: #000;
	border-radius:2rem;
	z-index:999;
	left:0;
	transition:all linear 0.25s;
	} 
a.page-navigation .jeneen-frei-njootl_home .name-of-artwork h1{
	color:transparent;
}

a.page-navigation .jeneen-frei-njootl_home .duration h1{
	color:transparent;
}

a:hover.page-navigation .jeneen-frei-njootl_home .name-of-artwork h1{
	color:#fff;
}

a:hover.page-navigation .jeneen-frei-njootl_home .duration h1{
	color:#fff;
}

a:hover.page-navigation .jeneen-frei-njootl_home{
	background-color:#000;
}

a:hover.page-navigation .jeneen-frei-njootl_home h1{
	color:#fff;
} 


a.page-navigation .brady-ciel-marks_home {
	position:fixed;
	top:8rem;
	width:100vw;
	background-color:transparent;
	color: #000;
	border-radius:2rem;
	z-index:999;
	left:0;
	transition:all linear 0.25s;
	}
a.page-navigation .brady-ciel-marks_home .name-of-artwork h1{
	color:transparent;
}

a.page-navigation .brady-ciel-marks_home .duration h1{
	color:transparent;
}

a:hover.page-navigation .brady-ciel-marks_home .name-of-artwork h1{
	color:#fff;
}

a:hover.page-navigation .brady-ciel-marks_home .duration h1{
	color:#fff;
}

a:hover.page-navigation .brady-ciel-marks_home{
	background-color:#000;
}

a:hover.page-navigation .brady-ciel-marks_home h1{
	color:#fff;
} 


a.page-navigation .helena-krobath_home{
	position:fixed;
	top:5rem;
	width:100vw;
	background-color:transparent;
	color: #000;
	border-radius:2rem;
	z-index:999;
	left:0;
	transition:all linear 0.25s;
	} 
a.page-navigation .helena-krobath_home .name-of-artwork h1{
	color:transparent;
}

a.page-navigation .helena-krobath_home .duration h1{
	color:transparent;
}

a:hover.page-navigation .helena-krobath_home .name-of-artwork h1{
	color:#fff;
}

a:hover.page-navigation .helena-krobath_home .duration h1{
	color:#fff;
}

a:hover.page-navigation .helena-krobath_home{
	background-color:#000;
}

a:hover.page-navigation .helena-krobath_home h1{
	color:#fff;
}


a.page-navigation .edziu_home{
	position:fixed;
	top:2rem;
	width:100vw;
	background-color:transparent;
	color: #000;
	border-radius:2rem;
	z-index:999;
	left:0;
	transition:all linear 0.25s;
}

a.page-navigation .edziu_home .name-of-artwork h1{
	color:transparent;
}

a.page-navigation .edziu_home .duration h1{
	color:transparent;
}

a:hover.page-navigation .edziu_home .name-of-artwork h1{
	color:#fff;
}

a:hover.page-navigation .edziu_home .duration h1{
	color:#fff;
}

a:hover.page-navigation .edziu_home{
	background-color:#000;
}

a:hover.page-navigation .edziu_home h1{
	color:#fff;
}







a:hover.home-navigation .artist-navigation{
	color: #000;
}

a:hover.home-navigation .dot {
    background-color: #fff;
    border: 1.5px solid #000;
}

a:hover.home-navigation .name-of-artwork{
	color:#000;
}

a:hover.home-navigation .duration{
	color:#000;
}

.non-responsive{
	position:fixed;
	top:0;
	height:35vh;
	width:70vw;
	z-index:99999;
}

.exhibition-mobile button {
    border: 0;
    background-color: #fff !important;
    color: #000 !important;
    padding: 1rem;
    border-radius: 1.75rem;
    width: 96vw;
    margin-left: 0.5rem;
}
.exhibition-mobile button h1{
	margin:0;
	color:#000;
}

.exhibition-mobile button.accordion-navigation:before{
	position:relative !important;
	color:#000 !important;
	float:left;
	left: 1rem;
    top: 0.85rem;
}

.mobile-navigation-exhibition button {
    border: 2px solid #fff;
    background-color: transparent;
    color: #000 !important;
    padding: 1rem;
    border-radius: 1.75rem;
    width: 96vw;
    margin-left: 0.5rem;
    background-color:#fff;
}
.mobile-navigation-exhibition button h1{
	margin:0;
	color: #000;
}

.mobile-navigation-exhibition button.accordion-navigation h1{
	color:#fff !important;
}

.mobile-navigation-exhibition button.accordion-navigation:before{
	position:relative !important;
	color:#fff !important;
	float:left;
	left: 1rem;
    top: 0.85rem;
}

.mobile-navigation-exhibition button.accordion-navigation{
	background-color:#000;
	color:#fff;
}


.mobile-navigation-exhibition-page{
	border-bottom:1px solid #000;
	padding-bottom:0.5rem;
}

.mobile-navigation-exhibition-page button {
    border: 2px solid #fff;
    background-color: #fff;
    color: #000;
    padding: 0.5rem;
    border-radius: 1.75rem;
    width: 96vw;
    margin-left: 0.5rem;
    text-align: left;
}
.mobile-navigation-exhibition-page button h1{
	margin:0;
	color:#000;
}

.mobile-navigation-exhibition-page button.accordion-navigation:before{
	position:relative !important;
	color:#fff !important;
	float:left;
	left: 1rem;
    top: 0.85rem;
}

.mobile-navigation-exhibition-page button:hover {
    border: 2px solid #000;
    background-color: #000;
    color: #fff !important;
}
.mobile-navigation-exhibition-page button:hover h1{
	color:#fff;
}

.mobile-navigation-exhibition-page button:hover.accordion-navigation:before{
	color:#fff !important;
}

.index-menu{
	padding-bottom:2rem;
}

.index-menu button {
    background-color: #000 !important;
    color: #fff !important;
    text-align:left;
    padding-left:2rem;
    width:100%;
    border-color:#000;
}

.index-menu button.current-page {
    border:1px solid #fff;
    border-radius: 1.75rem;
}


.mobile-navigation button{
	border:0px;
	background-color:#fff !important;
	color:#000 !important;
	padding:1rem;
	border-radius:1.75rem;
	width:96vw;
}
.mobile-navigation button h1{
	margin:0;
	color:#000 !important;
	max-width: 90vw;
    float: left;
    padding-left: 3rem;
}

.mobile-navigation button.accordion-navigation:before{
	position:relative !important;
	color:#000 !important;
	float:left;
	left: 1rem;
    top: 0.85rem;
}

.main-row.mobile-navigation{
	padding-bottom:2rem;
	padding-left: 0.5rem;
}


/* Accordion */

.opening-text-wrapper{
	background-color:#000;
	color:#fff;
}

.opening-text{
	color:#fff;
	padding:2rem 2rem 4rem;
}

@media screen and (max-width: 1400px) and (min-width: 1000px){
	.opening-text{
		color:#fff;
		padding:0 2rem 4rem;
	}
}

.opening-text h2{
	margin-top:0 !important;
	margin-bottom:1rem !important;
}

.opening-text p{
	color:#fff;
	line-height: 1.3;
}

#accordion-wrapper button{
	width:100%;
	border:0;
	position:relative;
}

#accordion-wrapper h2{
	color:#fff;
}

button h2{
	max-width: 90%;
    text-align:left;
    padding-left:6.5rem;
}

.accordion-body{
	padding:2rem 4rem;
	background-color: #fff;
}

button.accordion-navigation {
    color: white;
    cursor: pointer;
    transition: 0.4s;
}

button.accordion-navigation:hover {
    background-color: #000;
}

/*
button.accordion-navigation:before {
    content: '\002B';
    color: white;
    position: absolute;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 4rem;
    font-size:1.5rem;
}

button.accordion-navigation.active:before {
    content: "\2212";
}
*/

.accordion {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}



/* Accessibility
--------------------------------------------- */