body.reversed{

   xbackground: rgb(0, 31, 44);
	background: #cccc99;
   color: #000;
	
   
}


.hide-for-screens{
	
   position: absolute;
   left:     -10000px;
   top:      auto;
   width:    1px;
   height:   1px;
   overflow: hidden;
}

@media print, screen and (min-width: 40em) {
	body {
	  font-size: 120%;
	}
}

@media print, screen and (min-width: 64em) {
	body {
	  font-size: 140%;
	}
}



/***********

   PLYR

************/

:root,
.jsplayer{
	--plyr-color-main: #00b3ff;
	--plyr-focus-visible-color: #00364D;
	--plyr-control-toggle-checked-background: #00b3ff;
	
	--plyr-video-background: rgba(138, 138, 138, 1);
	--plyr-badge-background: #ffffff;
	--plyr-badge-border-radius: 0px;
	
	--plyr-captions-background: rgba(0, 0, 0, 0.8);
	--plyr-captions-text-color: #ffffff;
	--plyr-control-icon-size: 18px;
	--plyr-control-spacing: 10px;
	--plyr-control-padding: 7px;
	--plyr-control-radius: 0px;
	
	--plyr-audio-controls-background: rgba( 0,0,0,0);
	--plyr-audio-control-color: #000;
	--plyr-audio-control-color-hover: #000;
	--plyr-audio-control-background-hover:  #ffffff;
	
	--plyr-range-thumb-height: 20px;
	--plyr-range-thumb-background: #fff;
	--plyr-range-thumb-shadow:		0 1px 1px rgba(215, 26, 18, 0.15), 0 0 0 1px rgba(215, 26, 18, 0.2);
	--plyr-range-thumb-active-shadow-width: 3px;
	--plyr-range-track-height: 10px;
	--plyr-range-fill-background: #000;
	--plyr-audio-range-track-background: rgba(0, 0, 0, 0.25);
	--plyr-audio-range-thumb-active-shadow-color: rgba(215, 26, 18, 0.1);

	--plyr-font-size-base: 15px;
	--plyr-font-size-small: 13px;
	--plyr-font-size-large: 18px;
	--plyr-font-size-xlarge: 21px;
	--plyr-font-size-time: 21px;
	--plyr-font-size-badge: 20px;
	
	
	--plyr-video-controls-background: rgba( 255,255,255,0);
	--plyr-video-control-color: #fff;
	--plyr-video-control-color-hover: #000;
	--plyr-video-control-background-hover:  #ffffff;

	margin-bottom: 5px;
}


/*****************************************************************************

	AUDIO TRACKS / STEMS

******************************************************************************/ 

section.stems-elements{
   height:  auto !important;
   width: 100%;
	
	min-height: 100vh;

   max-height: auto !important;
   max-width: 100%;
   
   overflow-y: scroll !important;
   overflow-x: scroll !important;
}


div.audiotracks{
	list-style:none;
	margin-top: 2em;
}

div.audiotracks div.cell {
	xwidth:47.5%;
	xfloat: left;
	padding-bottom: 0.75em;
	
}

div.audiotracks div.cell:first-child {
	xwidth:47.5%;

}

div.audiotracks div.cell span{
	text-align:left;
	padding-top: 8px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
	font-size: 0.75em;

}


@media print, screen and (min-width: 40em) {
	
	div.audiotracks div.cell span{
		width: 100%;
	}
	
	div.audiotracks div.cell span{
		display: block;
		float: left;
		width: 27.5%;
		text-align:right;
	}

	div.audiotracks .plyr{
		margin-left: 30%;
		margin-right: 0%;
	
	}
}

@media print, screen and (min-width: 64em) {
	
	div.audiotracks div.cell span{
		display: block;
		width: 100%;
		text-align:left;
	}

	div.audiotracks .plyr{
		margin-left: 10%;
		margin-right: 0%;
	
	}

}

@media print, screen and (min-width: 75em) {
	
	div.audiotracks div.cell span{
		display: block;
		float: left;
		width: 27.5%;
		text-align:right;
	}

	div.audiotracks .plyr{
		margin-left: 30%;
		margin-right: 0%;
	
	}

}


/******************************************************************

   VIDEO PLAYER for PULSES

*******************************************************************/

.left-description{
	
	width: 60%;
	float: left;
}

.right-description{
	
	width: 33%;
	margin-left: 66%;
}


#pulses-video{
	margin-left: 0%;
	margin-right: 0%;
	height: 100%;
	width: 100%;
	
}

.padd-below{
	margin-bottom: 3em;
	
}


.jsvideoplayer{
	--plyr-color-main: #00b3ff;
	--plyr-focus-visible-color: #00b3ff;
	--plyr-control-toggle-checked-background: #00b3ff;
	
	--plyr-video-background: rgba(138, 138, 138, 1);
	--plyr-badge-background: #ffffff;
	--plyr-badge-border-radius: 0px;
	
	--plyr-captions-background: rgba(0, 0, 0, 0.8);
	--plyr-captions-text-color: #ffffff;
	--plyr-control-icon-size: 18px;
	--plyr-control-spacing: 10px;
	--plyr-control-padding: 7px;
	--plyr-control-radius: 0px;
	
	--plyr-video-controls-background: rgba( 255,255,255,0);
	--plyr-video-control-color: #fff;
	--plyr-video-control-color-hover: #cccc99;
	--plyr-video-control-background-hover:  #ffffff;
	
	--plyr-range-thumb-height: 20px;
	--plyr-range-thumb-background: #fff;
	--plyr-range-thumb-shadow:		0 1px 1px rgba(215, 26, 18, 0.15), 0 0 0 1px rgba(215, 26, 18, 0.2);
	--plyr-range-thumb-active-shadow-width: 3px;
	--plyr-range-track-height: 10px;
	--plyr-range-fill-background: #ffffff;
	--plyr-video-range-track-background: rgba(255, 255, 255, 0.25);
	--plyr-video-range-thumb-active-shadow-color: rgba(215, 26, 18, 0.1);

	--plyr-font-size-base: 15px;
	--plyr-font-size-small: 13px;
	--plyr-font-size-large: 18px;
	--plyr-font-size-xlarge: 21px;
	--plyr-font-size-time: 21px;
	--plyr-font-size-badge: 20px;
	
	--plyr-menu-color: #000;

}


.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before {
    background: #333333 !important;
    
}


.video-player .plyr__control--overlaid svg {
	color: rgba(138, 138, 138, 1);
}

.video-player .plyr__control--overlaid:hover svg {
	color: rgb(204, 204, 153);
}*/


/***********

   SCROLL SNAPPED EDITION

************/


#popup-survey-intro{
   background-color: rgb(94, 126, 255);
   padding: 30px 0;
   margin-top: -1em;
   margin-left: -3em;
   margin-right: -3em;
   margin-bottom: 1.5em;

   min-height: 3em;
   text-align: center;
   
   font-size: 2.5vw;
   
   cursor: pointer;

  height: auto;
  overflow: hidden;
  position: relative;
}



html.scroll-snap { /* body won't work ¯\_(ツ)_/¯ */
	height: 100vh;
	width: 100vw;
	overflow-y: scroll;
	scroll-snap-type: y proximity;

  font-size: 1.25em;
}

section.scroll-snap-element {
  height: 100vh;
  width: 100vw;
  scroll-snap-align: start;
  
  
  
  
}

section.scroll-snap-element.padding {

   padding: 3em;

}

section.scroll-snap-element.padding a{

   text-decoration: underline;
   color: rgba( 255,255,255, 0.75 );
   
}

section.scroll-snap-element.padding a:hover{

   text-decoration: underline;
   color: white;
}






/**********************************************************************

LIBRARY

***************************************************************************
*/




body.library .menu-icon::after, body.reversed .menu-icon::after {

  background: #fefefe;
  -webkit-box-shadow: 0 10px 0 #fefefe, 0 20px 0 #fefefe;
          box-shadow: 0 10px 0 #fefefe, 0 20px 0 #fefefe;
  content: ''; }
body.library .menu-icon::after, body.reversed .menu-icon:hover::after {
  background: #cacaca;
  -webkit-box-shadow: 0 10px 0 #cacaca, 0 20px 0 #cacaca;
          box-shadow: 0 10px 0 #cacaca, 0 20px 0 #cacaca; }


body.library, section.library{
   background: #000;
   
}



section.library.full{
   height: 100%;
   width: 100%;

   max-height: 100%;
   max-width: 100%;
   
   overflow-y: scroll !important;
   overflow-x: scroll !important;
}

body.library .grid-margin-x {
margin-left: 0rem;
margin-right: 0rem;
}

section.library td {
   
   xwhite-space: nowrap;
   xoverflow: hidden;
   xtext-overflow: ellipsis;
}


#dataTables_info{
   display: none;
   
}


table td.file-type{
   text-transform: uppercase;
   
}

tbody th, tbody td, table.dataTable tbody td {
   color: #fff;
}

tbody tr:hover, tbody tr:hover td, tbody tr:hover td a, table.dataTable tbody td:hover {
   color: #000;
}



table td a{
  color: #FFF;
}

table td a:hover{
   color: #000;
   text-decoration: underline;   
}

table td a:active, table td a:focus{
  color: #FFF;
  text-decoration: underline;
}

td a:focus{
   color: #FFF !important;
   text-decoration: underline;
}


table td a:focus{
   color: #FFF;
   text-decoration: underline;
}


table.hover thead tr:hover {
  background-color: #333; 
}


.dataTables_wrapper .dataTables_filter {
    /* float: right; */
    /* text-align: right; */
  float: none;
  text-align: left;
  max-width: 50%;
}

.dataTables_wrapper .dataTables_filter input {
   color: #fff;
   border-radius: 0;
   margin-left: 10px;
   
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
   color: #ccc;
}

#subtitle-display{
   
   position: absolute;
   z-index: 10;
   text-align: center;
   width: 100%;
   bottom: 2em;
   font-size: 2em;
   
}



/* ========================================================================

IMAGE GRID

================================================================================= */

.images{
   padding: 3em;
}

#image-grid .cell{
   margin: 2em 0 ;
   padding: 0 3em;
}

#image-grid .cell .image-wrapper{
   background: #030319;
   position: relative;
   vertical-align: middle;
}

#image-grid .cell .image-wrapper img{
   
   opacity: 0;
   z-index: 1;
   width: 100%;
   
}


#image-grid .cell .image-wrapper span{

   position: absolute;

   width: 100%;
   top: 50%;
   transform: translateY(-50%);

   display: block;
   align-items: center;
   justify-content: center;
   text-align: center;
   
   margin-top: auto;
   margin-bottom: auto;

   font-family:'Atkinson Hyperlegible', "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   color: #Fff;

   line-height: 1em;
   text-align:justify;

   padding: 0px 40px;
   z-index: 9;
   
   max-height: calc(100% - 80px);
   
   
   overflow: hidden;
   text-overflow: ellipsis;

   font-size: 4vw;

   text-overflow: ellipsis;
   

   
} 




@media only screen and (max-width: 40em) { /* small */

   #image-grid .cell .image-wrapper span{
      font-size: 3vw;
   
   }

}
@media only screen and (min-width: 40.063em) { /* medium */

   #image-grid .cell .image-wrapper span{
      font-size: 3vw;
   
   }

}

@media only screen and (min-width: 64.063em) { /* large */
   #image-grid .cell .image-wrapper span{
      font-size: 1.75vw;
   }

}


/* ========================================================================

IMAGE BLOCK

================================================================================= */

.single-image{
   padding: 3em;
   position: relative;
   height: 100vh;
   width: 100vw;
}

#image-block .cell{
   margin: 2em 0 ;
   padding: 0 3em;
   text-align: center;
}

#image-block .cell .image-wrapper{
   background: #FFFFFF;
   xbackground: #030319;
   position: relative;
   vertical-align: middle;
   text-align: center;   
   position: inline-block
}

#image-block .cell .image-wrapper img{
   
   opacity: 0.5 ;
   z-index: 1;
   max-height: 80vh;
   width: auto;
   
}


#image-block .cell .image-wrapper span{

   position: relative;
   width: 100%;
   top: 50%;
   transform: translateY(-50%);

   display: block;
   align-items: center;
   justify-content: center;
   text-align: center;
   
   margin-top: auto;
   margin-bottom: auto;

   font-family:'Atkinson Hyperlegible', "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   color: #Fff;

   line-height: 1em;
   text-align:justify;

   padding: 0px 40px;
   z-index: 9;
   
   xmax-height: calc(100% - 80px);
   
   overflow: hidden;
   text-overflow: ellipsis;

   font-size: 4vw;
   text-overflow: ellipsis;
   
} 




@media only screen and (max-width: 40em) { /* small */

   #image-block .cell .image-wrapper span{
      font-size: 3vw;
   
   }

}
@media only screen and (min-width: 40.063em) { /* medium */

   #image-block .cell .image-wrapper span{
      font-size: 3vw;
   
   }

}

@media only screen and (min-width: 64.063em) { /* large */
   #image-block .cell .image-wrapper span{
      font-size: 1.75vw;
   }

}


/* ========================================================================

INDIVIDUAL ALT IMAGE

================================================================================= */

.alt-image-container{
   padding: 3rem;
   text-align: center;
   width: 100%;
   height: 100%;
}


.alt-image-container .alt-image-wrapper{
   background: #030319;
   position: relative;
   vertical-align: middle;
   
   max-height: calc( 100vh - 6rem );
   display: inline-block;
   width: -moz-fit-content;
     width: fit-content;
   margin: auto;
   
}


.alt-image-container .alt-image-wrapper img{
   
   opacity: 0;
   z-index: 1;
   max-height: calc( 100vh - 6rem );
   width: auto;
   margin: auto;
   
}


.alt-image-container .alt-image-wrapper span{

   position: absolute;
   display: none;
   max-width: 100%;
   top: 50%;
   transform: translateY(-50%);

   display: block;
   align-items: center;
   justify-content: center;
   margin-top: auto;
   margin-bottom: auto;

   font-family:'Atkinson Hyperlegible', "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   color: #Fff;

   line-height: 1em;
   text-align: center;
   text-align:justify;

   padding: 0px 40px;
   z-index: 9;
   
   max-height: calc(100% - 80px);
   overflow: hidden;
   font-size: 4vw;
   text-overflow: ellipsis;
   
} 



/* ========================================================================

INDIVIDUAL LIBRARY ENTRY

================================================================================= */



.video-container { position: relative; padding-bottom: 52.25%; padding-top: 30px;  height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { 
   position: absolute; top: 0; left: 0; 
   width: 100%; 
   height: 100%; 
}




/* ========================================================================

Chroma Clock

================================================================================= */

.chromaclock-container{
	overflow: hidden;
	position: relative;
   scroll-snap-align: start;
   height: 100vh;
   width: 100vw;
	display: block;
	
}
.screen-of-death{
	position: absolute;
	top: -200vh;
	left: 0vw;
   background: #000;
   height: 500vh;
   width: 100vw;
	overflow: hidden;
}

.chromaclock-top, .chromaclock-bottom{
	position: absolute;
	display: block;
	width: 50%;
	height: 20vw;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}


.chromaclock-top{
	top: -15vw;
}

.chromaclock-bottom{
	bottom: -15vw;

}

  
  
/* ========================================================================

	MENU 

 ================================================================================= */
  

.menu-icon{
  position: fixed;
  bottom: 10%;
  right: 7.5%;

  width: 30px !important;
  height: 30px !important;

  z-index: 99;


  width: 40px;
  height: 40px;
border-radius: 50%;
  background-color: #ff0000;
  box-shadow:
    0 0 10px 5px #ff0000,  /* inner white */
    0 0 16px 5px #ff00ff, /* middle magenta */
    0 0 23px 8px #ff0000; /* outer cyan */
  
/*     inset 0 0 50px #fff,
    inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px #f0f,
    10px 0 80px #0ff;
*/
  
  animation: breathe 3s linear infinite;
}

.menu-icon{
	display: none;
}


@keyframes breathe {
0% {
 box-shadow: 
  0 0 2px 3px #ff0000,  /* inner white */
  0 0 4px 3px #ff00ff, /* middle magenta */
  0 0 5px 4px #ff0000; /* outer cyan */
}
50% {
 box-shadow: 
  0 0 10px 5px #ff0000,  /* inner white */
  0 0 16px 5px #ff00ff, /* middle magenta */
  0 0 23px 8px #ff0000; /* outer cyan */
}
100% {
 box-shadow: 
  0 0 2px 3px #ff0000,  /* inner white */
  0 0 4px 3px #ff00ff, /* middle magenta */
  0 0 5px 4px #ff0000; /* outer cyan */
}

}


.menu-icon::after {
display: none;
 height: 1px;

 content: ''; 

}
.menu-icon:hover::after {
}

.close-button.small {
 font-size: 3em; }


.close-button, .close-button.medium {
 font-size: 3em;
}

.close-button{
	position: absolute;
	right: 1rem;
	top: auto;
	font-size: 2em;
	line-height: 1;
	height: 20px;
	
   bottom: 17px;
   right: 45px;
	
	
}

#off-canvas{


  z-index: 11;

  
  -webkit-box-shadow: 0 0 0 transparent !important;
  box-shadow:  0 0 0 transparent  !important;
  
  width: 50% !important;
  
  background: transparent  !important;
  background-color transparent !important;
  
  padding: 0em;
  text-align: right;
    
}

.off-canvas{
   background: transparent  !important;
   background-color transparent !important;
   -webkit-box-shadow: 0 0 0 transparent !important;
   box-shadow:  0 0 0 transparent  !important;
   text-align: right;
	
	position: fixed;
   bottom: 10%;
   right: 5%;
	height: auto;
	
	
}

.position-right {
   width: 50% !important;
	
}


.off-canvas .vertical{
	position: absolute;
	bottom: 45px;
	right: 37.5px;
	overflow: none;
   text-align: right;
}


#offCanvas a{
  font-family:'Atkinson Hyperlegible', "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 1.5em;
  color: #fff;
  background: #000;
  display: inline-block;
  margin-bottom: 1.5em;
  
  
}

#offCanvas .menu a, #offCanvas .menu .button{
  padding: 0;
  margin: 0;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: bold;
  display: inline-block;
  padding: 0 7px;
  
  
}

#offCanvas li{
   margin: 2px 0px;

}


#offCanvas a:hover, a:active, a:focus{
  xcolor: rgb(204, 204, 153);
  color: #E8E81C;
  background: #000;
  text-decoration: underline;
}




#offCanvas .menu .active > a {
   background: transparent;
   color: #111;
}

/*
#offCanvas .sidebar-about h1{
   display:table-caption;
   font-size: 4vw;
   line-height: 1.2;
   font-family:'Atkinson Hyperlegible', "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   
   
}

#offCanvas p.rights{
  margin-top: 1em;
  font-size: 0.8em;
  color: #929292;
  font-family:'Atkinson Hyperlegible', "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;

}
*/



/* ========================================================================

  SURVEY

  ================================================================================= */
  


  
  
  

/***********

   SCROLL SNAPPED EDITION

************/

.aligned-text{
	padding-bottom: 4em;
	margin-bottom: 4em;
}

.aligned-text h2,
.aligned-text h3,
.aligned-text h4,
.aligned-textp
{
	color: #000;
	
}

.aligned-text h2,
.aligned-text h3,
.aligned-text h4{
	margin: 2em 0 1em;
	
}

.aligned-text p{
	margin-left: 33%;
	
}





/**********************************************************************

COUNTDOWN

***************************************************************************
*/	



.countdown-text {
    position: absolute;
    left: 0%;
	 right: 0;
    top: 50%;

	z-index: 11;

    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
	 
	 text-align: left;
    
	 xfont-size: 1.5em;
	 padding-left: 4em;
	 padding-right: 2em;
	 color: #000;
}


.countdown-text h2{
 font-weight: bold;
 margin: 1em 0 2em;
	
}

.countdown-text span{
	padding: 0;
	margin: 0;
	line-height: 0.9;
	letter-spacing: 0.3em;
}


	
@media print, screen and (min-width: 40em) {
	
}

@media print, screen and (min-width: 64em) {
	.countdown-text .content{
	 margin-left: 33%;
	}	
}




/***********

   ABOUT TEXT

************/

.about-text{
	padding-bottom: 4em;
	margin-bottom: 4em;
}

.about-text h2,
.about-text h3,
.about-text h4,
.about-text p
{
   letter-spacing: 0.1em; 
	color: #000;
	
}

.about-text h2,
.about-text h3,
.about-text h4{
	margin: 2em 0 1em;
	
}

.about-text h2{
	font-weight: bold;
   margin: 3em 0 2em;
	
}

.about-text h3{
	font-weight: bold;
   margin: 3em 0 2em;
	
}

.about-text p{
   font-family:  'Atkinson Hyperlegible', "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

.about-text p a{
	color: #000 !important;
}

.about-text p:last-child{
   padding-bottom: 4em;
	
}


	
@media print, screen and (min-width: 40em) {
	
}

@media print, screen and (min-width: 64em) {
	.about-text p{
		margin-left: 33%;
	}
}



/* ========================================================================

INDIVIDUAL JOURNAL ENTRY

================================================================================= */



section.scroll-snap-element.journal {

   background: #fefefe;
   color: #0a0a0a;
	position: relative;
	overflow: hidden;
	
}
section.scroll-snap-element.journal a{
	color: #000;
}
section.scroll-snap-element.journal a:hover{
	color: #cccc99;
}

#journal-wrapper{
   position: absolute;
	overflow: hidden;
	display: block;
	bottom: 5em;
	left: 3em;
	right: 3em;
	top: 0%;
	height: calc( 100% - 5em );
	
}

@media print, screen and (min-width: 40em) {
	
}

@media print, screen and (min-width: 64em) {

}

#journal-type{
    position: absolute;
    bottom: 0%;

}

#journal-more{
   position: absolute;
	bottom: 3em;
}


#journal-more:focus{
   color: #FFF;
   text-decoration: underline;
}


.post-title, .post-title a{
   color: #000;
   font-size: 100%;

   margin-top: 2rem;
   margin-bottom: 2rem;
   
}

.page, .post {
	
}

.page {
	margin: 4em;
}



.page a{

   text-decoration: underline;
   color: #000;
}
.page a:hover{

   text-decoration: underline;
   color: #0000FF;
}

.posts a{
   
   text-decoration: none;

}



/***********

   MANAGE SIZING

************/


.about-text a:focus{
   color: #FFF !important;
   text-decoration: underline;
}