@charset "UTF-8";

:root {
	
  --ColorBlack:	#080808;
  --ColorWhite:	#f6f6f4;
	
  --SiteBGColor:var(--ColorBlack);
  --NavBGColor:var(--ColorBlack);
  --FooterBGColor:var(--ColorBlack);
  
  --AboutBGColor:var(--ColorBlack);
  --AboutColor:var(--ColorWhite);
  
  
  --SelectBGColor:transparent;
  
  --NavLinkColor:var(--ColorWhite);
  
  --BurgerColorOff:var(--ColorWhite);
  --BurgerColorOn:var(--ColorWhite);
  
  
  --TopHeaderLockY:30px;
  --BurgerLockY:32px;
  
  --Gutter:34px;
  --GutterTube:25px;
  --HalfGutter: 17px;

  --FullWidthPadding:calc(100% - (var(--Gutter)*2));
  --MaxWidth:1400px;

 --TubeOffsetTop:120px;

  
}


@media (max-width: 680px) {
	:root {
		--Gutter:20px;
		--GutterTube:25px;
	    --HalfGutter: 10px;
	}
}


#splash{
	width:100vw;
	height: 100vh;
	background-color: #000;
	display: block;
	position: relative;
	height: inherit;
}
#splash-logo{
	width:80%;
	max-width:300px;
	display: block;
	margin:0 auto;	
	
	text-align: center;
	display: block;
	position: absolute;
	-webkit-font-smoothing: antialiased;
	top:50%;
	 -ms-transform: translateY(-50%); /* IE 9 */
	   -webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
	transform: translateY(-50%);
	left:0;right:0;
	margin:0 auto;
}
#splash-logo img{
	width:100%;
}	

@media (max-width: 680px) {
	#splash-logo{
		width:80%;
		max-width:220px;
	}
}





/* @font-face {
	font-family: helvetica-now;
	src: url(/webfonts/Monotype-HelveticaNowDisplayBlack.otf) format("opentype");
	font-weight: 700;
	font-style: normal;
} */
@font-face {
	font-family: helvetica-now;
	src: url(/webfonts/Monotype-HelveticaNowDisplayMedium.otf) format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: helvetica-now;
	src: url(/webfonts/Monotype-HelveticaNowDisplayXBold.otf) format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}



body.off{
	overflow: hidden !important;
}
body.nocurse {
	cursor: none !important;
}
body.nocurse .pswp *{
	cursor: none !important;
}
body.nocurse .pswp__button{
	cursor: pointer !important;
}

*::-moz-selection {
	background: var(--SelectBGColor);
}

*::selection {
	background: var(--SelectBGColor);
}

#about-container *::-moz-selection {
	background: var(--SiteBGColor) !important;
	color:white;
}

#about-container *::selection {
	background:  var(--SiteBGColor) !important;
	color:white;
}



*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


html,body{
	margin: 0;
	padding: 0;
	width: 100%;
	height:100%;
	min-height: 100%;
	overflow: auto;
	background-color: var(--SiteBGColor);
	
	font-size: 16px;
	line-height: 22px;

	font-weight: 400;
	
	/* font-size: calc(1vw + 2px);
	letter-spacing: 0; */

	
	-webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: touch;
	font-family:helvetica-now, "Helvetica Neue", Helvetica, Arial;
	
	/* font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons; */
	color: #000;
	letter-spacing: 0.02em;
}


#page{
	position: relative;
}


/*desktop version */
body.nav_open #page{
	/* -webkit-transition: width 0.2s;
	transition: width 0.2s; 
	width:calc(100% - 250px); */
}
body.nav_open #box-schedule{
	/* width:0%;
	display:none; */
}


#master{
	height: 100%;
	width:100%;
	position: relative;
}

.pocket{
	opacity: 0;
	display: none;
}

/*  New CSS v2/3	*/

#nav{
	display: none;
}

#nav_mobile{
	/* width:250px;
	right:-250px; */
	
	width:100%;
	right:-100%;
	
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);

	
	background-color: rgba(39,39,39,.9);
	background-color: rgba(0,0,0,.9);
	
	position: fixed;
	z-index: 9000;
	top:0px;
	
	/* 	display: none; */
	pointer-events: none;
	opacity:1;
	
	/* -webkit-transition: all 0.3s;
	transition: all 0.3s; */ 
}



#nav_mobile.active{
	pointer-events: all;
    overflow-y: scroll;
    opacity: 1;
    pointer-events: all !important;
    display: block;
	
    transform: translateY(0px);
}

#nav_mobile_links{
	z-index: 2001;
  padding-left:30px;
  position: absolute;
  top: var(--Gutter);
  right:100px;
  
  width:100%;
  width:auto;
}


#schedule{
	z-index: 2000;
	position: absolute;
	
	color:white;
	width:96%;
	margin:0 auto;
	height: auto;
	/* top:150px;
	min-height: calc(100vh - 150px); */
	min-height: 100vh;
	left:0;
	right:0;
}

#schedule-override{
	display: block;position: relative;	
	width:90%;
	height:auto;
	margin:0 auto;
	padding-top:50px;
	padding-bottom:100px;
}
#schedule-override img{
	width:100%;
	margin:0 auto;
	display: block;position: relative;	
}

#schedule-override-mobile img{
	width:100%;
	margin:0 auto;
	display: block;position: relative;	
}


.sched-week{
	width:100%;
	height:auto;
}


.sched-nav-holder{
	margin:0 auto;
	display: block;
	position: relative;
	width: 100%;
	max-width: 460px;
	min-height: 30px;
}
.sched-nav-holder .padder{
	width:10%;
	float:left;
	display: block;
	position: relative;
	min-height: 30px;
	width:0px;
}


.sched-nav{

	/* max-width:300px; */
	list-style: none;
	margin:0;padding:0px;
	position: relative; display: block;
	height: 30px;

	
	/* width:calc(90% - 20px);
	
 */	
 	display: block;
	margin:0 auto;
	margin-bottom:10px;
	width:80%;
	/* make 90% on mobile */
}


.sched-nav li{
	min-height: 30px;
	text-align: center;
	font-size:14px;
	font-weight: 500;
	
	list-style: none;
	float:left; position: relative; display: block;
	margin:0;padding:0px;
	width:calc(100% / 7);
}
.sched-nav li a{
	text-transform: uppercase;
	color:white;
	width:100%;
	display: block;
	pointer-events: all;
	padding:0 !important;
	/* text-align: center !important;	 */
	text-align: center;
}

.sched-nav li a:hover{
	opacity: .6;	
}

.sched-nav li a.locked{
	opacity: .25;
	pointer-events: none;
	
}
.sched-nav li a.present{
	
}
.sched-nav li a.past{
	opacity: .25;
	pointer-events: none;
}
.sched-nav li a.future{	
}





#schedule-mobile.off{
	display: none;
}

.sched-days{
	position: relative;
}


.sched-day{
	display: none;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
}

.sched-day.active{
	display: block;
}

/* transform-origin: top right;
  right:0;
  top:0;
  transform: rotate(-90deg) translateY(-100%); */

.sched-header{
	
	width:10%;
	min-height: 400px;
	float:left;display: block; position: relative;
	color:white;
	text-transform: uppercase;
	margin:0 auto;
}
.sched-header h2{
	position: absolute;
	font-weight: 500;
	font-size: 45px;
	line-height: 45px;
	
	//text-align: right;
	//width: 450px;
	/* width: 400px;
	height: 70px; */
	background: none;	
	

	transform-origin: top right;
  right:-12px;
  top:-38px;
  transform: rotate(-90deg) translateY(-100%) scale(1,.7);
	
	color: white;
	-webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: white;
	letter-spacing: 5px;
}

.sched-day ul, .sched-day li{
	list-style: none;
	padding:0;
	margin:0;
	text-transform: uppercase;
}
.sched-day ul{

	margin-left: 20px;
	width:calc(90% - 20px);
	float:left;display: block; position: relative;
}
.sched-day li{
	min-height: 20px;
}
.sched-day li .sched-time{
	display:block;
	float:left;
	width:60px;
	text-align: center;
	text-align: left;
}

.sched-day li .sched-show{

	font-weight: 600;
	display:block;
	float:left;
	
	width:auto;
	margin-left:2px;
	width:calc(100% - 62px);
	
}
.sched-day li{
	pointer-events: none;
	font-size:.8em;
	font-size:1em;
	line-height: 1.9em;
	text-align: left;
	margin-bottom:10px;
}





#nav_mobile  a{
	display: inline-block;
	font-family: "Helvetica Neue", Helvetica, Arial;
	font-weight: 600;
	letter-spacing: 0px;

	color:var(--NavLinkColor);
	padding:5px;
	text-align: left;
	/* width:100%; */
	margin:0 auto;
	
	font-size:.858em;
	
	float:left;
	margin-right:16px;
}

#nav_mobile  a:hover{
	color:#999;
}

#nm_social_links{
	display: none;
  position: absolute;
  bottom: 30px;
  width:100%;
  padding-left:20px;
  padding-bottom:0px;
}
#nm_social_links a{
	text-align: left;
	font-size:13px;
	line-height:13px; 
	padding:0px;
}




#header{
	width:100%;
	height:var(--TubeOffsetTop);
	position: absolute;
	/* z-index: 9110; */
	left:0;
	right:0;
	margin:0 auto;
}

#logo{
	z-index: 9210;
	position: absolute;
	width:200px;
	min-height:60px;
	/* left:34px; */
	left:25px;
	top:var(--TopHeaderLockY);
}
#logo svg, #logo img{
	width:100%;	
}



#burger{
	pointer-events: all;
	z-index: 9069;
	cursor: pointer;
	display: block;
	position: absolute;
	right:3%;
	right:var(--Gutter);
	top:var(--BurgerLockY);
	width:36px;
	height:36px;
	
	width:34px;
	height:34px;
	
	opacity: 1;
}


/* #burger .png_lines, #burger .png_x{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	width:100%;
	height:100%;
	display: block;
	position: absolute;
	top:0px;
	left:0px;
}

#burger .png_lines{
	background-image:url('/images/Headstream_tools_HAMBURGER.png');
}
#burger .png_x{
	opacity: 0;
	background-image:url('/images/Headstream_tools_CLOSE_X.png');
}

#burger.active .png_lines{
	opacity: 0;
}
#burger.active .png_x{
	opacity: 1;
} */






#burger div{
	width:100%;
	height:2px;
	border-radius:0px;
	margin-bottom: 7px;
	background-color: var(--BurgerColorOff);
	pointer-events: none;
	/* -webkit-transition: all 0.2s;
	transition: all 0.2s; */ 
}

#burger div:nth-child(1){
	
}


#burger div:nth-child(2){

}

#burger div:nth-child(3){
}

#burger.active div:nth-child(1){
	transform: rotate(45deg);
	margin-top:9.5px;
	background-color: var(--BurgerColorOn);
}
#burger.active div:nth-child(2){
	display: none;
}

#burger.active div:nth-child(3){
	transform: rotate(-45deg);
	background-color: var(--BurgerColorOn);
	margin-top: -9.5px;
}
#burger.active div{
	
} 


.content{
	height:calc(100vh - 60px);
	overflow-y:auto;
}

.pocket_content{
	/* height:calc(100vh - 60px); */
	padding-top:80px;
	padding-bottom:60px;
}



.head-scene{
	width:100%;
	height:auto;
	/* height: 100vh; */
	display: block;
	position: relative;
}


.head-sec{
	width:100%;
	min-height: 40vh;
	height:auto;
	position: relative;
}


.head-scene2{
	width:100%;
	height: 50vh;
	display: block;
	position: relative;
}

.tmpTitle{
	font-size:35px;
	padding:30px;
}




#box-landing{ 
	z-index: 100;
	position: relative;
	width:100%;
	/* max-width:1800px; */
	margin:0 auto;
	display: block;

	height: auto;
	min-height: 100vh;
}


#tubebounds{
	position: relative;
	width:100%;
	height:auto;
	margin:0 auto;
	/* align this top to whatever the bottom of the logo height is */
	top: var(--TubeOffsetTop);
	/* double the top height */
	height:calc(100vh - (var(--TubeOffsetTop)*2) );
}
#tubebounds.extrafit{
	padding-bottom: 80px;
}

#tubebounds.padded{
	width:calc(100% - (var(--GutterTube)*2) );
}

#tubebox{
	background-color: black;
	position:relative;
	margin:0 auto;
}

#tubebox iframe{
	width:100%;
	height:100%;
	position: absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	z-index: 2000;
}
#tubebox iframe.off{
	display: none;
	pointer-events: none;	
}
#bumpers{
	opacity: 1;
	background-color: blue;
	width:100%;
	height:100%;
	position: absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	z-index: 2000;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
#bumper_video{
	width:100%;
	height:100%;
	position: absolute;
	left:0px;top:0px;
	right:0px;bottom:0px;	
}

#bumpers.off{
	display: none;
	pointer-events: none;	
}

#bumpers .message{
	color:white;
	font-size:1.8em;
	text-align: center;
	width:100%;	
	text-transform: uppercase;
}
#bumpers .message strong{
	display: block;	
	padding-top:14px;
}


.sched-col1{
	width:100%;
}

.sched .item{
	text-transform: uppercase;
	font-weight: 600;
	color:#ccc;	
	font-size:14px;
	letter-spacing: -0.03em;
	line-height: 16px;
	text-align: center;
}



#box-stereo{
	width:100%;
	height:var(--TubeOffsetTop);
	margin:0 auto;
}
#box-stereo .tagline{
	width:100%;
	font-size:14px;
	color:white;
	text-align: center;
	letter-spacing: 10px;
	padding-top:var(--Gutter);
		
}

#box-mobile-extra{
	width:calc(100% - (var(--GutterTube)*2) );
	display: none;
	min-height: 200px;
	height:auto;
	font-size:16px;
	margin:0 auto;
	color:white;
}













#about-section{
	background-color: var(--AboutBGColor);
	color: var(--AboutColor);
}


#footer{
	opacity: 0;
	width:100%;
	float:left;
	height: auto;
	min-height: 60px;
	background-color: var(--FooterBGColor);
	color:#fff;
}

#footer .copyright{
	float:left;	
}

#flinks{
	/* width:94%; */
	width:var(--FullWidthPadding);
	margin:0 auto;
	font-size:14px;
	font-weight: 400;
}

#flinks .splitter{
	display: none;	
}

#flinks-right{
	/* min-height: 50px; */
	position: relative;
	float:right;
	display: block;
	font-weight: 400;
}

#social-links{
	position: relative;
	float:left;
	padding: 0;
	margin: 0;
}

#flinks-left{
	/* min-height: 50px; */
	position: relative;
	float:left;
	display: block;
	margin: 0;
	padding: 0;
}
#social-links li{
	list-style-type: none;
	margin:0;
	padding:0;
	float:left;
	margin-right:20px;
}
#social-links li:last-child{
	margin-right:0px;
}
#social-links a{
	display: block;
	position: relative;
	color:white;
}
#social-links a svg{
	width:100%;
	max-width:18px;	
}
#social-links a svg *{
	fill:white;
}	
#social-links a:hover svg *{
	fill:#ccc;
}




#about-container{
	width:var(--FullWidthPadding);
	margin:0 auto;
	padding-top:80px;
}
.relbox{
	position: relative;
	display: block;
	min-height: 10px;
}



#ab-left{
	min-height: 150px;
	/* width:calc(60% - var(--HalfGutter));
	margin-right:var(--HalfGutter); */
	width:100%;
	
	float:left;
	position: relative;
	height: auto;
	display: block;
}
#ab-right{
	min-height: 150px; 
	display: none;
	/* width: calc(40% - var(--HalfGutter));
	margin-left: var(--HalfGutter); */
	
	
	float: left;
	position: relative;
	height: auto;
	display: block;
	height: 0px;
	padding-bottom: 32%;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

#ab-media{
	width:100%;
	height: auto;
	min-height:150px;
}


#ab-video{
	
	/* background-color: #000; */
	display: block; float:left; position: relative;
	height:0;
	width:30%;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding-bottom:53.5%;
}
#ab-video a.toggleMute{

	text-transform: uppercase;
	position: absolute;
	top:8px;
	left:8px;
	width:20px;
	height:20px;
	color:white;
	
	z-index: 9999;
}
#ab-video a.toggleMute:hover{
	opacity: .6;	
}
#ab-video a.toggleMute svg{
	width:100%;
	max-width:16px;	
}
#ab-video a.toggleMute svg *{
	fill:white;	
}

#ab-video video{
	z-index: 800;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#ab-photos{
	overflow: hidden;
	width:calc(70% - var(--Gutter));
	height: 0px;
	padding-bottom:53.5%;
	margin-left:var(--Gutter);
	display: block; float:left; position: relative;
}



.swiper-container {
position: absolute !important;
left:0;
top:0;
width: 100%;
height: 100%;
}

.swiper-slide {
  
  
text-align: center;
font-size: 18px;
background: #fff;

/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
background-repeat: no-repeat;
 background-position: center center;
  background-size: cover;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.swiper-button-next, .swiper-button-prev{
  color:white !important;
}

:root {
	--swiper-navigation-size: 30px !important;
}

#about-section p{
	padding:0;
	margin:0;
}
#about-top p, #ab-footer p{
	max-width: 100%;
}
.about-part1{
	display: inline-block;
	padding-top:var(--Gutter);
}

.about-part1XX{
	column-count: 2;
	column-gap:var(--Gutter);
	/* -webkit-margin-after: -100px; */
}

#about-top p{
	display: inline-block;
	padding-bottom:var(--HalfGutter);
	-webkit-column-break-inside: avoid;
	  page-break-inside: avoid;
		   break-inside: avoid;
	/* vertical-align: top;
	display: inline-block;
	-webkit-padding-after: 0;
	clear:both; */
}

#about-top{
	padding-top:var(--Gutter);
	padding-bottom:var(--Gutter);
}
#ab-footer{
	padding-top:var(--Gutter);
	padding-bottom:var(--Gutter);
}
#ab-headstream-logo{
	width:60%;
	max-width:240px;
}
#ab-headstream-logo img{
	width:100%;
}
#ab-headstream-logo * {

}

#ab-headstream-logo svg{
	width:100%;
}



#residents-section{
	padding-top:160px;
	padding-top:130px;
	margin-bottom:60px;
}
#residents-container{
	display: block; 
	position: relative;
	min-height: 50vh;
	width:var(--FullWidthPadding);
	height:auto;
	margin:auto;
}
#res-grid{
	width:100%;
	max-width:var(--MaxWidth);
	margin:0 auto;
	position: relative;
	display: grid;
	grid-template-columns:repeat(4, 1fr);
    column-gap: 20px; 
}



#res-grid .item{
	color:#fff;
	font-size:16px;
	line-height: 25px;
	font-weight: bold;
	
	height: auto;
	display: block;
	position: relative;
	float:left;
	width:100%;
	/* margin-left:10px;
	margin-right:10px; */
	margin-bottom:30px;
}



#res-grid .item .name{
	padding:6px;
	color:white;
	position: absolute;
	top:6px;
	left:6px;	
	z-index: 200;
}

#res-grid .genres{
	list-style: none;
	padding:0px;
	margin:0px;
}

#res-grid .genres li{
	padding:0px;
	margin:0px;
	background-color: blue;
	color:white;
	font-size:10px;
	text-transform: uppercase;
	float:left;
	margin-right:5px;
	padding-left:5px;
	padding-right:5px;
	list-style: none;
}

#res-grid .item{

}

#res-grid .item img{
	z-index: 100;
	position: relative;
	opacity: 0;
	width:100%;	
}

 /* lazy load here  */
#res-grid img:not(.initial) {
	transition: opacity 0.25s;
}
#res-grid img.initial,
#res-grid img.loaded,
#res-grid img.error {
	opacity:1;
}
#res-grid img:not([src]) {
	visibility: hidden;
}



/* 
BREAK 1400 Out of bounds large
breakpoint3
--------------------- 
*/

@media (min-width: 1400px) {
	#nav_mobile  a{
		font-size:1em;
	}	
}

/* 
BREAK 960
breakpoint2
--------------------- 
*/
@media (max-width:960px) {
	
	
	#res-grid{
		grid-template-columns:repeat(3, 1fr);
		column-gap: 20px;
	}

	
	#schedule{
		display: none;	
	}
	
	#nav_mobile{
		background-color: rgba(0,0,0,.9);
	}
	#nav_mobile_links{
	  padding-left:20px;
	  position: absolute;
	  top: 18%;
	  right:auto;
	  width:100%;
	}
	#nav_mobile  a{
		width:100%;
		float:none;
		font-size:2em;
		line-height: 1.3em;
		margin-bottom: 0px;
	}
	
	
	#header{
		width:100%;
	}
	#box-stereo{
		height:50px;
	}
	#box-stereo .tagline{
		font-size:11px;	
		letter-spacing: 6px;
	}
	
	
		
	#box-mobile-extra{
		display: block;
		margin-top:calc(var(--TubeOffsetTop) + var(--GutterTube));
	}	 
	#box-landing{ 
		position: relative;display: block;
		min-height:100%;
		height:auto;	
	}
	#tubebounds{
		position: relative;display: block;
		width:100%;
		height:auto;
		margin:0 auto;
	
		/* double the top height */
		height:auto; 
	}
	#tubebox{
		position: relative;
		display: block;
		padding-top:56.25%;
		width:100%;
		height:0px;
	}
	
	#sched-tagline{
		font-size:32px;
	}
	
	#ab-left{
		width:100%;
		margin-right:0;
	}
	#ab-right{
		width:100%;
		margin-left:0;
		margin-top:30px;
	}
	
	#about-top p, #ab-footer p{
		max-width: 100%;
	}
	#ab-right{
		min-height: 600px;
	}
	:root {
		--swiper-navigation-size: 22px !important;
	}
	

	
	
	#mobile-obi{
		height:100%;
		display: block;
	}
	#desktop-obi{
		display: none;
	}
	
	
	
	.boxHeight{
		min-height:auto;
		height:auto;
	}
	
	
	#box-duo{
		float:left;
		width:100%;
		margin-left:0px;
	}

	
	#tubebox{
		position: relative;
		top:auto;
		-webkit-transform: none; /* Safari and Chrome */
	   -moz-transform: none; /* Firefox */
		-ms-transform: none; /* IE 9 */
		 -o-transform: none; /* Opera */
			transform: none;
		left:0;right:0;
	}
	
	#box-schedule{
		width:100%;	
		height:auto;
	}
	
	#calendy{
		padding-top:20px;
		margin-left:0%;
		max-width:100%;
		position: relative;
			top:auto;
		-webkit-transform: none; /* Safari and Chrome */
		   -moz-transform: none; /* Firefox */
			-ms-transform: none; /* IE 9 */
			 -o-transform: none; /* Opera */
				transform: none;
				margin-bottom:50px;
	}
	
	.calendypad{
		padding:0px;
		margin:0;
		padding-bottom:10px;
	}
	
}



/* 
BREAK 680
--------------------- 
*/
@media (max-width: 680px) {
	
	#bumpers .message{
		font-size:1em;	
	}
	#bumpers .message strong{
		padding-top:1px;
	}
	
	#res-grid{
		grid-template-columns:repeat(2, 1fr);
		column-gap: 20px;
	}
	
	.sched-nav{
		width:90%;	
	}

	.sched li{
		font-size: .8em;	
		margin-bottom:8px;
	}
	
	#burger{
		/* top:calc(var(--Gutter) - 6px); */
		right:26px;
	}
	
	
	#box-mobile-extra{
		display: block;
		margin-top:calc(var(--TubeOffsetTop) + 10px);
	}	
	
	
	#sched-tagline{
		bottom:18px;
	}
	
	#ab-video{
		width:100%;
		padding-bottom: 177.77%;
	}
	#ab-photos{
		width:100%;
		margin:0;
		margin-top:var(--Gutter);
		padding-bottom: 75%;
	}
	#ab-video a.toggleMute{
		left:10px;
		top:10px;
		bottom:auto;	
	}
	#about-container{
		padding-top:70px;	
	}
	
	#nav_mobile{
		right:-100%;
	}
	
	.head-scene{
		height: auto;
	}
	


	#nav_mobile{
		width:100%;
	}


	#sublinks a{
		display: none;
		font-size:16px;
		padding-right:19px;
	}

	#sublinks a.active{
		padding-bottom: 0px;
		display: inline-block;
	}
	
	#nav_mobile .links a.subtoggle{
		font-size:11px;
		color:#999;
	}

}

/* 
BREAK 500px 
specials
--------------------- 
*/
@media (max-width: 500px) {
	
	#box-stereo .tagline{
		font-size:8px;	
		letter-spacing: 3px;
	}
}












.clearer{
	clear:both;
	height:0px;
}

.hide{
	display: none;
}

a{
	display:inline-block;
	text-decoration: none;
	color:#000;
	-webkit-transition: all 0.1s;
	transition: all 0.1s;
	cursor: pointer;
}
.vert-prep{
	display: block;
	position: relative;
	height: inherit;
}
.vert{
	text-align: center;
	display: block;
	position: absolute;
	-webkit-font-smoothing: antialiased;
	top:50%;
	 -ms-transform: translateY(-50%); /* IE 9 */
   	-webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
    transform: translateY(-50%);
    left:0;right:0;
    margin:0 auto;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none !important;
}





/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */

/* pswp = photoswipe */
.pswp {
  display: none;
  position: absolute;
  width:100vw;
  height: calc(100% - 160px);
  left: 0px;
  top: 80px;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 1500;
  -webkit-text-size-adjust: 100%;
  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  -webkit-backface-visibility: hidden;
  outline: none; }
  .pswp * {
	-webkit-box-sizing: border-box;
			box-sizing: border-box; }
  .pswp img {
	max-width: none; }

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  opacity: 0.001;
  will-change: opacity;
  /* for open/close transition */
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
		  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--open {
  display: block; }

.pswp--zoom-allowed .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.pswp--zoomed-in .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab; }

.pswp--dragging .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing; }

/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg2{
	position: fixed;
	left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0,0,0,.6);
}
.pswp__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* background: #fff; */
  opacity: 0;
  -webkit-transform: translateZ(0);
		  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: opacity; }

.pswp__scroll-wrap {
  position: absolute;
  left: %;
  top: 0%;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.pswp__container,
.pswp__zoom-wrap {
  -ms-touch-action: none;
  touch-action: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
	  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; }

.pswp__zoom-wrap {
  position: absolute;
  width: 100%;
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  /* for open/close transition */
  -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
		  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp__bg {
  will-change: opacity;
  /* for open/close transition */
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
		  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
  -webkit-transition: none;
  transition: none; }

.pswp__container,
.pswp__zoom-wrap {
  -webkit-backface-visibility: hidden; }

.pswp__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden; }

.pswp__img {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0; }

/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
  -webkit-backface-visibility: hidden; }

/*
	div element that matches size of large image
	large image loads on top of it
*/
.pswp__img--placeholder--blank {
  background: #222; }

.pswp--ie .pswp__img {
  width: 100% !important;
  height: auto !important;
  left: 0;
  top: 0; }

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  margin-top: -8px;
  color: #CCC; }

.pswp__error-msg a {
  color: #CCC;
  text-decoration: underline; }









html {
	visibility: visible;
	opacity: 1;
}