/*
Theme Name: WNSR Waveform Responsive
Author: Nico Chilla + Vero Testa
Description: Improvements of Custom site for WNSR New School Radio
Version: 0.1.0.04.09.2021
Version: 0.1.1
Tags:
*/

div#footer {
    z-index: 8;
	color: #e42a1d;
    background: #000 !important;
    height: 60px;    
    margin-top: 15px;
    margin-right: 15px;
    padding: 10px;
    padding-right: 20px;
    padding-top: 5px;
    border-top: #e42a1d 1.5px solid;
    border-right: #e42a1d 1px solid;
/*     border-top: red 1px solid; */
    border-radius: 0 25px 0 0;
    /* border-radius: 0% 15% / 0% 43%; */
    /* border-bottom-left-radius: 0%; */
}

svg#icon--logo {
    width: 80px;
    filter: invert(1);
}

#footer span.logo {
    color: white;
    opacity: 1;
    float: right;
    font-size: x-large;
    margin: 15px 4%  auto auto;
}

span.copyright {
	display: inline-block;
    text-align: center;
    position: absolute;
    bottom: 40%;
    left: 0;
    right: 0;
/*     margin-left: auto; */
/*     margin-right: auto; */
/*     width: 300px; */
    font-family: neue-haas-unica,sans-serif;
    letter-spacing: .8px;
    opacity: .75;
}


:root{
  --redcomp:232,46,33;
  --tnsred:rgba(var(--redcomp),1);
  --exmarg:40px;
  --owidth:calc(100vw - var(--exmarg) * 2);
  --col:calc(var(--owidth) / 12);
  --background:white;
  --stickdist:20px;
  --browseheight:calc(var(--vh, 1vh) * 100);
  --svgoffset:calc(var(--vh, 1vh) * 23);
  --backheight:0;
  --showtracksize:0;
  --nonfoc:0;
  --adjustheight:0;
  --border:rgba(0,0,0,1);
}

html, body {
  overflow-x: hidden;
}
body{
  position:relative;
  /* min-height:2000px; */
}
div{
  position:relative;
}
#background{
  position:absolute;
  top:var(--browseheight);
  left:0;
  background-color: rgba(255,255,255,0.8);
  height:var(--backheight);
  width:100%;
  /* backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); */
}
canvas{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:var(--browseheight);
}
audio{
  position:fixed;
  top:50vh;
  left:20vw;
  width:60vw;
}
img{
  z-index:3;
}
.mobile{
  display:none;
}

/* typography-------------------- */
h1{
  font-family: neue-haas-unica,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 34px;
  line-height: 40px;
  z-index:3;
  position:relative;
}
p{
  font-family: neue-haas-unica,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 30px;
  z-index:2;
}
.logo{
  font-family: neue-display-ultra, sans-serif;
  font-weight: 700;
  color: var(--tnsred);
  cursor:pointer;
}
.emph{
  color: var(--tnsred);
}

/* partners ---------- */
#partners{
  z-index:10;
  padding-top:40px;
  padding-bottom:40px;
    display: inline-flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#partners .divider{
  z-index: -1;
}
#partners .divider div{
  border-bottom:1px solid black;
}
#partners .sec-head{
  margin-bottom:40px;
    flex-basis: 100%;
}

.partner{
  --partnersize:calc(var(--col) * 2);
/*   --partnersize: calc(var(--col)*2.25); */
  vertical-align: top;
  display:inline-block;
  width:var(--partnersize);
    margin-left: calc(var(--col) / 4);
    margin-right: calc(var(--col) / 2);
  margin-bottom:40px;
  cursor:alias;
}
.partner .underline{
  cursor:alias;
}
.partner img{
/*   width:100%; */
/*   vertical-align: top; */
	    max-width: 100%; 
    max-height: 100%; 
    vertical-align: middle; 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
a.partner p {
    text-align: center;
    font-weight: 600;
    font-size: 19px;
    text-decoration-line: none;
    transition: all 0.6s;
}
a.partner:hover p {
    filter: drop-shadow(0px 0px 1px var(--tnsred));
    color: var(--tnsred);
    /* border: 1px var(--tnsred) solid; */
    text-decoration-line: underline;
    text-underline-position: under;
    transition: all 0.6s;
}
.img-wrapper{
  width:var(--partnersize);
  height:var(--partnersize);
/*   overflow:hidden; */
	
    overflow: visible;
  margin-bottom:10px;
    transition: all .6s;
}

a.partner:hover .img-wrapper {
    transition: all .2s;
    filter: saturate(.75);
}

a.partner:hover .img-wrapper img {
    border-radius: 25% 0 25% 0;
/*     border-radius: 10%; */
    /*         box-shadow: inset 0px 0px 5px 7px #000; */
    border: 1px var(--tnsred) solid;
    filter: drop-shadow(0px 0px 11px var(--tnsred));
    transition: all .2s;
}

a.partner .img-wrapper img {
    border: 1px #ffffff00 solid;
    border-radius: 0%;
    transition: all .6s;
}






/* containers------------ */
.landing{
  width:100vw;
  height:var(--browseheight);
  /* border-bottom:1px solid black; */
}
.events-landing{
  width:100vw;
/*   height:calc(var(--browseheight)/2); */
	height: calc(var(--browseheight)*2/3);
}
.content{
  width:calc(var(--col) * 10);
  margin-left:calc(var(--col) + var(--exmarg));
  min-height:100px;
  /* border-right:1px solid black; */
  /* background-color: rgba(255,255,255,0.8); */
}

.colophon{
  background-color:rgba(255,255,255,0.9);
  padding:var(--exmarg);
  padding-right:calc(var(--exmarg) + var(--col));
  padding-bottom:calc(var(--exmarg)/2);
}
.colophon p{
  text-align: right;
}
.colophon a{
  display:inline-block;
  cursor:alias !important;
}

.divider{
  position:absolute;
  height:100%;
  width:calc(100vw - var(--exmarg) - var(--col));
  background-color: rgba(255,255,255,0.8);
  bottom:0px;
  padding-left: 100vw;
  margin-left: -100vw;
  left:calc(-1*(var(--col) + var(--exmarg)));
  z-index:0;
  pointer-events: none;
}
.divider div{
  position:absolute;
  bottom:0px;
  right: 0;
  height:100%;
  width:100%;
  /* border-right:1px solid black; */
  border-bottom:2px solid rgba(0,0,0,0);
}

/* landing text ------------------*/
#describe{
  width:calc(var(--col) * 11);
  margin-left:var(--exmarg);
  margin-top:var(--exmarg);
  position:absolute;
  top:0;
  left:0;
  widows: 2;
  orphans: 2;
}
.menu{
  display:inline;
  white-space: nowrap;
}
.section-link{
  margin-right: 10px;
  color:black;
  cursor:pointer;
  transition: all 0.3s;
}
.section-link::before{
/*   content:'→'; */
  content:'\00a0 \00a0 ▢ \00a0';
  color:var(--tnsred); 
	filter: none;
  transition: all 0.3s;
}
a[href^="mailto"]:hover,
.section-link:hover::before {
  color:var(--tnsred); 
    transition: all 0.3s;
	border-bottom: 0px #ffffff00 solid;
    filter: drop-shadow(0px 0px 2px var(--tnsred)) !important;
}

.bio{
  transition:opacity 0.3s;
}

/* navigation bar ----------------*/
#nav{
  z-index: 20;
  width:100vw;
/*   background-color: rgba(255,255,255,0); */
  background-color: rgba(255,255,255,0.1);
  transition:background-color 0.1s;
  padding:20px;
  padding-left:var(--exmarg);
  padding-right:var(--exmarg);
  position:fixed;
  top:0px;
  left:0;
}

svg[style^="position: fixed"] + div#nav{
    background: #ffffff;
    transition: all .1s;
}


svg[style^="position: fixed"] + div#nav span{
/*     background: #ffffff; */
/*     transition: all .1s; */
	transition: opacity 1s ease-in;
}
 

#nav > h1 {
    margin-top: -30px;
    background: white;
    box-shadow: 0 -10px 10px 13px #fff;
    transition: all .2s ease-in-out;
}



svg[style^="position: fixed"] + div#nav > h1 {
    margin-top: 0px !important;
    background: #ffffff00;
    box-shadow: 0 0 0 0 #ffffff00;
    transition: all .2s ease-in-out;
}
.break{
  height:0px;
}
.logo.fixed{
  margin-right: 10px;
}
.fixed{
  opacity:0;	
  pointer-events: none;
/*   transition: opacity 1s 1s ease-in; */
  transition: all .5s ease-in;
}

.scroll{
  /* transition:opacity 0.3s; */
}

/* episode section --------------*/
.episode{
  display:flex;
  flex-flow:row nowrap;
  justify-content: space-between;
  /* padding-bottom: var(--exmarg); */
}
.seekbar{
  margin-top:20px;
  /* position:absolute;
  top:0;
  left:0; */
}

#abovethefold{
  position:absolute;
  width:calc(var(--col) * 10);
  transform:translateY(-100%);
  top:calc(var(--exmarg) / 1.6 * -1);
  /* widows: 2;
  orphans: 2; */
}

	div#about > .twocol > .col > p,
div#abovethefold + .desc {
    margin-left: calc(var(--col) /2);
    text-align: justify;
}

.player-head{
  margin-left: 40px;
}
#playtoggle{
  display:inline;
  left:-40px;
  /* margin-right:40px; */
}
#playtoggle svg{
  position:absolute;
  top:50%;
  transform:translate(0%, -50%);
  height:30px;
  fill:var(--tnsred);
  cursor:pointer;
}
.episode img{
  width:calc(var(--col) * 3);
  height:calc(var(--col) * 3);
  display:inline-block;
  vertical-align: top;

}
.episode .desc{
  box-sizing: border-box;
  width:calc(var(--col) * 5);
  display:inline-block;
  vertical-align: top;
  /* margin-top:20px; */
  margin-right:var(--col);
  margin-bottom:20px;
}

.underline{
/*   border-bottom:1px solid var(--tnsred); */
  cursor:pointer;
}

.togglesummary{
  white-space: nowrap;
  margin-left:10px;
  /* color:rgba(0,0,0,0.3); */
  cursor: pointer;
  /* text-decoration-line: underline; */
}
span.togglesummary  {
    display: block;
    color: #e82e21;
    font-family: 'neue-display-ultra';
    font-size: x-small;
    letter-spacing: -.2px;
    border: none;
    transition: all .3s; 
    opacity: 0.45;
}
span.togglesummary:hover {
    transition: all .3s;
    opacity: 0.8;
}
.showmoreshows{
  margin-top:10px;
  margin-bottom:30px;
  /* display:inline-block; */
  display:none;
}
.w-contain{
  position:relative;
}
.w-contain .divider{
  z-index:-1;
}



#stream{
  display:flex;
  flex-flow: column wrap;
  /* padding-bottom: 20px; */
}
.allepisodes .divider div{
  border-bottom: 1px solid var(--border);
}

#focus{
  height:var(--showtracksize, auto);
  max-height:inherit;
}
#focus.allepisodes{
  padding-bottom: 40px;
}
.showbox{
	min-height: 360px;
  height:var(--nonfoc);
}
/* .showbox:last-child{
  height:calc(var(--col) * 2 + 20px);
} */
.sector{
  min-width:100%;
  display:flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  /* border-bottom:1px solid black; */
  padding-bottom:40px;
  transition: height 0.3s;
  overflow:visible;
}
.show-not-showing{
  display:none !important;
}
#shows{
  height:120px;
}

#shows h1{
  position:absolute;
  bottom:40px;
}

.tracklist{
  position:relative;
  order:2;
  padding-left:20px;
  min-width:calc(7 * var(--col));
  max-width:calc(7 * var(--col));
  box-sizing: border-box;
  padding-bottom:3px;
  height:-moz-fit-content;
  height:fit-content;
}
.sector:not(#focus) .expander{
  display:block;
}
.allepisodes{
  padding-bottom:20px;
  height: 100px;
}

.expander{
  width:100%;
  /* position:absolute;
  bottom:0; */
  /* right:0; */
  display:block;
  border-bottom:1px solid black;
  padding-top:7px;
  padding-bottom:7px;
}
.expbutton{
  width:100%;
  cursor:pointer;
  pointer-events: all !important;
    color: #e82e21;
    font-family: 'neue-display-ultra';
    font-size: small;
    letter-spacing: -.2px;
/* 	transition: all	.3s;  */
/* 	animation: changeLetter .3s linear infinite alternate; */
  opacity:0.65;
}

.expbutton:hover{
	transition: all	.3s;
  opacity:0.95;
}
#focus .expbutton{
  width:100px; 
    transition: all .3s, font-size 0s;
}

.expbutton::before{
  content:'+\00a0tracklist';
    background-color: rgb(255 255 255 / 5%);
	border-radius: 0; 
    transition: all .3s, background-color  0s;
/*   	animation: changeLetter .3s linear infinite alternate; */
}
#focus .expbutton::before{ 
/*     content: '\00a0✕\00a0';  */
/*     content: '\00a0⮿\00a0';   */
/*     content: '\00a0\2BBF\00a0';   */
/* 	content: '\00a0×\00a0'; */
/* 	content: '\00a0X\00a0'; */
/*     font-size: x-large;  */
    content: '\00a0\00a0x\00a0\00a0';
    font-size: larger;
    min-height: 33%;
    min-width: 33%;
    display: inline-block;
	background-color: rgba(0,0,0,0.2); 
    opacity: 0.85 !important;
    border-radius: 80% 80% 80% 0;
    transition: all .3s, background-color  1s;
/*     transition: all .3s, font-size  0s; */
/* 	animation: changeLetter .3s linear infinite alternate; */
}
.pageflip{
  position:absolute;
  top:7px;
  right:10px;
  height:100%;
}
.pageflip span{
  cursor:pointer;
  display:inline;
    transition: all 0.4s ease;
}
.pageflip > span:not(.noflip):hover {
	  color: #e82e21c2;
    transition: all 0.4s ease;
}
.noflip{
  opacity:0.5;
  pointer-events:none;
}


.newest-header{
  order:1;
  /* font-weight:600; */
  min-width:calc(2 * var(--col));
  max-width:calc(2 * var(--col));
  padding-top:7px;
}
.sector img{
  order:1;
  min-width:calc(2 * var(--col));
  max-width:calc(2 * var(--col));
  height:calc(2 * var(--col));
}

.show-title{
  font-weight:600;
  margin-bottom:7px;
}
.ep-preview{
  position:relative;
  background-color: rgba(255,255,255,0.8);
  display:none;
  border-bottom:1px solid black;
  padding-top:7px;
  padding-bottom:7px;
  padding-right: 10px;
  transition:opacity 0.3s;
  padding-right: 110px;
  /* text-indent:20px; */
}
.ep-preview::first-line{
  /* text-indent: 0px; */
}
.showlab{
  font-style: normal !important;
  color:rgba(0,0,0,0.3);
  font-weight: 300;

}

.date{
  display:flex;
/*   flex-flow: column nowrap; */
/*   justify-content: flex-end; */
  position:absolute;
/*   bottom:7px; */
/*   right:10px; */
/*   font-weight: 300; */
/*   color:black !important; */
  font-style:normal !important;
  color:rgba(0,0,0,0.5);
	
    top: 5px;
    right: 2px;
    font-weight: 600;
    color: rgba(0,0,0,0.5);
    font-family: 'neue';
    font-size: .6em;
}
.epshowing{
  display:block;
}
/* 
.epshowing::before {
    content: '► ';
    margin-right:6px;
    font-size:15px;
    vertical-align:top;
    font-style: normal !important;
} */

.epshowing::before {
    content: '► ';
    width: 16px;
    max-width: 16px !important;
    height: 26px;
    display: inline-block;
    margin-top: -6px;
    margin-right: 6px;
    padding: 0px 2px 0px 3px !important;
    font-size: 15px;
    font-style: normal !important;
    vertical-align: text-bottom;
}
.sel-preview{
  color:var(--tnsred);
}
.sector:not(#focus) .ep-preview{
  opacity:0;
  pointer-events: none;
}
.sector:not(#focus) .tracklist{
  pointer-events: none;
}

.show-expand{
  display:none;
}
#focus .show-expand{
  display:inherit;
}





/* about styling------------- */
#about{
  padding-top:40px;
  padding-bottom:40px;
  z-index:10;
}
.twocol{
  margin-top:40px;
  width:100%;
  display:flex;
  flex-flow:row nowrap;
  z-index:10;
  justify-content: space-between;
}
.col{
  min-width: calc(4 * var(--col));
  max-width: calc(4 * var(--col));
  min-height: 50px;
}
.col:first-child{
  max-width: calc(5 * var(--col));
  /* margin-right: var(--col); */
}

/* #about a */
#about a[href^="mailto"]:not(:hover) {
    border-bottom: 1px solid var(--tnsred); 
    transition: all 0.3s;
}

#about strong{
  font-weight:600;
}

#about .divider div{
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}




div#about .col + .col {
    margin-top: 3%;
}

div#about .col + .col p a {
    color: #e82e21;
    font-family: 'neue-display-ultra';
    font-weight: bold;
    font-size: small;
    letter-spacing: -.2px;
    text-decoration-line: none;
}

div#about .col + .col p:hover a {
    text-decoration-line: underline;
    text-decoration-color: var(--tnsred);
    filter: drop-shadow(0px 0px 1px var(--tnsred));
    color: var(--tnsred);
    transition: all 0.6s;
}

iframe {
    overflow: scroll;
    width: 105%;
    height: var(--browseheight);
    /*     height: 1072px; */
    margin-top: -83%;
    margin-left: 38%;
    /* margin-right: -41%; */
    /* float: right; */
    z-index: -1 !important;
    padding-bottom: 4%;
    border-bottom: 2px var(--tnsred) solid;
    border-left: 1px var(--tnsred) solid;
    opacity: 0.65;
    transition: all 0.6s;
}

iframe:hover {
/*     filter: drop-shadow(0px 0px 2px var(--tnsred)); */
    opacity: 1;
    transition: all 0.2s;
}

/* svg wave ------------------ */
#wave{
  left:0;
  position:absolute;
  width:100%;
  top:0;
  /* margin-top:20%; */
  height:calc(var(--vh, 1vh) * 80);
  top:var(--svgoffset);
  pointer-events: none;
  box-sizing: border-box;
}
#wave path{
  fill:none;
  stroke-width:3px;
  stroke-linejoin:round;
  stroke-linecap:round;
  pointer-events: visibleStroke;
  stroke-opacity:1;
  transition:stroke-opacity 0.3s;
  stroke:#E82E21;
}







/* media queries --------------*/

@media (max-width:1200px){
  .episode .desc{
    width:calc(var(--col) * 6);
  }
}

@media (max-width:1000px){
  .twocol{
    flex-flow: column nowrap;
  }
  .col{
    max-width:100%;
    margin-bottom: 20px;
  }
  .col:first-child{
    max-width: 100%;
  }

  .partner{
/*     --partnersize:calc(var(--col)*3); */
    --partnersize:calc(var(--col)*2.25);
  }


}
@media(max-width:800px){
  .showlab{
    display:none;
  }
}

@media(max-width:768px){
  .colophon{
    padding-right:var(--exmarg);
  }
  .sector img{
    min-width:calc(var(--col)*3);
    max-width:calc(var(--col)*3);
    height:calc(var(--col)*3);
  }
  .newest-header{
    min-width:calc(var(--col)*3);
    max-width:calc(var(--col)*3);
  }
  .tracklist{
    min-width:calc(9*var(--col));
    max-width:calc(9*var(--col));
  }
  .divider{
    left:calc(-1*var(--exmarg));
    width:calc(100vw);
  }
  #nav{
    width:var(--owidth);
  }
  :root{
    --svgoffset:calc(var(--vh, 1vh) * 20);
    --exmarg:30px;
  }
  #describe{
    width:var(--owidth);
  }
  .menu{
    white-space: normal;
  }
  .content{
    width:var(--owidth);
    margin-left: var(--exmarg);
  }
  .bio{
    margin-right:0;
    width:100%;
  }
  #abovethefold{
    width:var(--owidth);
  }


  h1{
    font-size:30px;
    line-height: 36px;
  }
  .mobile{
    display:inherit;
  }
  .desktop{
    display:none;
  }

  #about{
    flex-flow: column nowrap;
  }
  #about p{
    order:2;
    width:100%;
  }
  #about img{
    order:1;
    min-width:100%;
    max-width:100%;
    padding-bottom:20px;
  }
}
@media(max-width:650px){



  .nextflip{
    margin-left: 10px;
  }
  .episode{
    flex-flow: column nowrap;
  }
  .episode img{
    width:calc(var(--col) * 10);
    margin-left:var(--col);
    height:inherit;
    order:1;
    margin-bottom:20px;
  }
  .partner{
    --partnersize:100%;
  }
  .img-wrapper{
    width:calc(var(--col)*7);
    height:calc(var(--col)*7);
    margin-left:calc(2 * var(--col));
    margin-bottom:20px;
  }


  .episode .desc{
    width:var(--owidth);
    order:2;
  }
  .episode img{
    width:100%;
    margin-left:0px;
  }
  .sector{
    flex-flow:column nowrap;
  }
  .sector img{
    margin-left:calc(2 * var(--col));
    min-width:calc(var(--col)*7);
    max-width:calc(var(--col)*7);
    height:calc(var(--col)*7);
  }
  .newest-header{
    min-width:var(--owidth);
    max-width:var(--owidth);
  }
  .tracklist{
    min-width:var(--owidth);
    max-width:var(--owidth);
    padding-left:0px;
    padding-top:20px;
  }
  .show-info .show-title{
    display:block;
    padding-right: 20px;
  }
  .show-info .show-desc{
    display:block;
    padding-right: 20px;
  }

  .showbox{
    height:var(--nonfoc);
  }

	
	h1 {
		line-height: 125% !important;
	}
	span.bio {
		font-size: 60%;
		line-height: 150% !important;
		vertical-align: middle;
		/* max-height: 29% !important; */
		/* display: inline-block; */
		position: relative;
	}

	span.bio + br {
		margin-top: -15px !important;
		display: block !important;
		content: '';
	}

	.content.episode {
		margin-top: -30%;
	}
	span.menu.scroll { 
		margin-top: -5%;
		margin-left: -5%;
		width: 125% !important;
		display: inline-block;
	}


	div#footer { 
		padding-bottom: 12%;
	}

	span.copyright {
		bottom: 15%;
		opacity: .64;
	}

	.twocol {
    margin-top: 5%;
}
}




@media(max-width:500px){
  .sdesktop{
    display:none;
  }
  h1{
    font-size:22px;
    line-height: 28px;
  }
  p{
    font-size:19px;
    line-height: 26px;
  }
  :root{
    --svgoffset:calc(var(--vh, 1vh) * 20);
  }
  .date{
    display:none;
  }
  .ep-preview{
    padding-right:20px 
  }
  #wave path{
    stroke-width:2px;
  }
	
	

svg[style^="position: fixed"] + div#nav span{ 
    font-size: 75%;
}
 
span.section-link
/* span.menu.fixed span.section-link */
	{
    font-size: 70%;
	transition: all .3s;
}

span.logo.fixed {
    font-size: 70%;
    margin-right: 0px;
    margin-left: -7% !important;
/*         transition: all .3s, opacity 0s; */

}

	span.logo:not(.scroll){ 
    	margin-left:  0px;
    	transition: all .3s, opacity .1s;

	}
	
	 span.menu.fixed span.section-link
	/* span.menu.scroll span.section-link */
	{
		/*     font-size: 90% !important; */
    	margin-right: 0px;
		/* 	transition: all .3s; */
		transition: all .3s, opacity 0s;
    }

    span.menu.fixed span.section-link::before {
       margin-right: -1.5%;
	}

	span.menu.scroll span.section-link:first-child::before  {
       margin-left: -1.7%;
	}

	#nav{
	padding-top: 2%;
	padding-bottom: 3%;
		transition: all .3s ease-in-out;
	
	}
	

	
	div#about > .twocol > .col > p,
	div#abovethefold + .desc {
/*     	padding-right: calc(var(--col) /2); */
/* 			text-align: left; */
		 
    width: 90%;
	}
	 
	#nav > h1 {
		margin-top: -40px;
		width: 110%;
	}
	

	
	
}
/* } */  
/* 	@500px */




@media(max-height:500px){
  :root{
    --browseheight:500px;
  }
}
@media(hover:hover){
  /* on desktops and all screens where hovering is possible */
  .section-link:hover{
/*     text-decoration-line: underline; */
/*     text-decoration-color: var(--tnsred); */
	  
    filter: drop-shadow(0px 0px 1px var(--tnsred));
	  color: var(--tnsred);
    transition: all 0.6s;
  }
  .show:not(#focused){
    cursor:pointer;
  }
  .show:not(#focused):hover p{
    text-decoration-line: underline;
  }
  .ep-preview{
/*     font-style: normal; */
/* 	  color: #bac; */
	  color: #000;
    transition: all 0.4s ease;
  }
  .ep-preview:hover{
    cursor:pointer;
/*     font-style:italic; */
	  color: #e82e21c2;
    transition: all 0.4s ease;
  }
  .icons a:hover{
/*     color:rgba(0,0,0,1); */
	  color: #e82e21c2;
    filter: drop-shadow(0px 0px 1px var(--tnsred));
  }
	

}

/* clear styles on seekbar */
input[type=range]{
    background-color: rgba(255,255,255,0) !important;
    margin:0;
    margin-top:20px;
    width:100%;
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    margin-top: 4px;
    height: 1px;
    background-color: black;
}

input[type=range]::-webkit-slider-thumb {
    cursor:grab;

    height:10px;
    margin-top:-4px;
    border-radius: 50%;
    width:10px;
    background-color: var(--tnsred);
    -webkit-appearance: none;
    border: none;

}
input[type=range]::-webkit-slider-thumb:active{
  cursor:grabbing;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  margin-top: 4px;
  height: 1px;
  background-color:black;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}

/** FF*/
input[type="range"]::-moz-range-progress {
  background-color:black;
}
input[type="range"]::-moz-range-track {
  background-color:black;
}
input[type="range"]::-moz-range-thumb{
  cursor:grab;
  height:10px;
  margin-top:-4px;
  border-radius: 50%;
  width:10px;
  background-color: var(--tnsred);
  -webkit-appearance: none;
  border: none;
}
input[type="range"]::-moz-range-thumb:active{
  cursor:grabbing;
}

/* icon typeface */
@font-face {
  font-family: 'feed-icons';
  src: url('https://nchilla.github.io/wnsr-new-school-radio/assets/iconfont/icons.eot?24732877');
  src: url('https://nchilla.github.io/wnsr-new-school-radio/assets/iconfont/icons.eot?24732877#iefix') format('embedded-opentype'),
       url('https://nchilla.github.io/wnsr-new-school-radio/assets/iconfont/icons.woff?24732877') format('woff'),
       url('https://nchilla.github.io/wnsr-new-school-radio/assets/iconfont/icons.ttf?24732877') format('truetype'),
       url('https://nchilla.github.io/wnsr-new-school-radio/assets/iconfont/icons.svg?24732877#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
.icons{
  font-family:feed-icons;
  display:inline-block;
  font-size: 18px;
  font-weight: normal !important;
  font-style: normal !important;
  color:rgba(0,0,0,0.5);
  pointer-events: all;
}

span.show-title span.icons {
    position: absolute;
    padding-top: 2px;
}

.icons a{
  display:inline-block;
  margin-left: 10px;
  cursor:alias;
}
.icon-spotify:before { content: '\e800'; } /* '' */
.icon-apple:before { content: ' \e802'; } /* '' */
.icon-stitcher:before { content: ' \e803'; } /* '' */
.icon-rss:before { content: ' \f09e'; } /* '' */



div.content#events{
/*     margin-top: calc((-1.3)/4*var(--browseheight)); */
    margin-bottom: calc(1/5*var(--browseheight));
}

a.event img, a.event p, a.event span {
    margin: 0 auto;
    display: block;
    text-align: center;
}

#shows h1,
h1.sec-head {
    font-family: 'neue-display-ultra';
    font-weight: bolder;
    
    font-size: 28px;
    letter-spacing: -.8px;
}

.sector.allepisodes  p.newest-header {
    text-align: right;
    border-top: 1px black solid;
    border-right: 1px rgb(255 255 255 / 0) solid;
    padding-right: 0px;
    transition: all .9s;
}
.sector.allepisodes  p.newest-header:hover  { 
    border-top: 1px var(--tnsred) solid;
    border-right: 1px var(--tnsred) solid;
    padding-right: 68px;  
    transition: all .2s;
}
/* .sector.allepisodes  p.tracklist {  */
/*     margin-right: 4px !important; */
/* } */
.sector.allepisodes span.show-info { 
    margin-top: 37px;
}
 

 div#focus.allepisodes.sector{ 
    height: calc(var(--showtracksize) /1.5) !important;
    overflow: hidden; 
    transition: all .75s .1s;
}

 div#focus.allepisodes.sector:hover {
    height: calc(100% + 10px) !important;
    transition: all .2s; 
}
 

.sector.allepisodes  p.tracklist {
    margin-right: 4px !important;
/*     transition: all .6s; */
    border-left: 1px rgb(255 255 255 / 0) solid;
    height: auto !important;
    min-height: 12px;
/*     height: calc(var(--showtracksize, auto)) !important; */
/*     height: calc(var(--showtracksize) /1.5) !important; */
    overflow: hidden; 
    transition: all .75s .1s;
}
.sector.allepisodes:hover  p.tracklist {
    margin-right: 5px !important;
/*     margin-left -2px; */
/*     border-left: 1px #b2b2b2 solid; */
/*     transition: all .2s; */
/*     height: calc(var(--showtracksize, auto) + 10px) !important; */
    height: calc(100% + 10px) !important;
    transition: all .2s; 
}



/*  div.allepisodes.sector .tracklist::before{ */
 div#focus#focus.allepisodes.sector .tracklist::before{
         content: '';
         bottom: -5px;
         left: -15px;
         width: 120%;
         height: 30%;
         position: absolute;
         box-shadow: 0px -20px 20px 8px #fff inset;
         z-index: 8;
         transition: all .2s;
}	
 div#focus.allepisodes.sector:hover .tracklist::before{
/*  div.allepisodes.sector:hover .tracklist::before{ */
  box-shadow: 0px -20px 0px 0px #ffffff00 inset !important
    transition: all .2s !important
}

.sector.allepisodes:hover p.newest-header{
    opacity: .65;
    border-top: 1px var(--tnsred) solid;
    border-right: 1px var(--tnsred) solid;
    padding-right: 52px;
    transition: all .2s;
}


.sector.allepisodes:hover p.newest-header:hover {
    opacity: .95;
    color: #000;
    border-color: #000 !important;
    transition: all .2s;
}

.showlab {
/*     color: #e82e21; */
    color: rgb(0 0 0 / 69%);
    font-family: 'neue-display-ultra';
    font-size: x-small;
    letter-spacing: -.3px;
    font-weight: bold;
    opacity: 0.66;
}

.showlab:hover {
/*     text-decoration: underline; */
    /* letter-spacing: initial; */
/*     opacity: 0.9; */
}

/* p.tracklist > span.ep-preview:hover { */
    /* color: rgb(0 0 0 / 75%); */
    /* letter-spacing: .2px; */
    /* transition: all 0.4s ease; */
/* } */

span.ep-preview:hover {
    color: rgb(0 0 0 / 85%);
    font-weight: 600;
    letter-spacing: .1px;
    /* text-decoration: underline 1px grey; */
    /* border-right: red 1px solid; */
    transition: all 0.4s ease;
}
span.ep-preview:hover::before {
/*     color: #e82e21; */
/*     background: #b2b2b2; */
/*     border-radius: 0 50% 50% 0; */
    padding-left: 3px;
    opacity: 0.6;
    transition: all 0.4s ease;
}


span.ep-preview:hover .showlab {
/*     letter-spacing: initial; */
    letter-spacing: -.3px;
    opacity: 0.9;
}
    

span.ep-preview:hover {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}


svg#play:hover {
 filter: drop-shadow(1px 1px 4px red);
    color: var(--tnsred);
    transition: all 0.2s;
}
svg#play{
    transition: all 0.6s;
     filter: drop-shadow(0px 0px 0px #ffffff00;

}


span.fixed {
        transition: all .3s, opacity 0s;
}