/* CSS RESET BEGIN (Andy Bell) */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  margin: 0;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* CSS RESET END */

/* WEB FONTS */

@font-face {
    font-family: 'Good Timing';
    src: url('webfonts/good_timing.woff2') format('woff2'),
        url('webfonts/good_timing.woff') format('woff');
    font-weight: 700;
    font-style: bold;
    font-display: auto;
}

/* INTRO VIDEO */

.topwrapper {
	margin: 0;
}

#sweat {
  width: 100%;
margin: 0;
}

/* FULL SCREEN PAUSE BUTTON */

#pauseBtn {
width: 100%;
aspect-ratio: 2.39 / 1;
position: absolute;
left: 0;
top: 0;
background: none;
border: none;
}

.overlay {
	width: 100%;
	aspect-ratio: 2.39 / 1;
	position: absolute;
	left: 0;
	top: 0;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
		background-size: 400% 400%;
		animation: gapgradient 7s ease infinite;
		  opacity: 0.2;
}

@keyframes gapgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* SECTIONS */

.content {
    width: 100%;
	margin: 0;
}

.innercontent {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 20px;
}

.widecontent {
	width: 100%;
	padding: 0;
	margin: 1em auto 180px;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px; }
	
.row6 {
	grid-template-rows: repeat(6, 1fr);
}	

.row2 {
	grid-template-rows: repeat(2, 1fr);
	margin-bottom: 0;
	
}	

	
	.posterbox {
	}
	
.widecontentimg {
	width: 100%;
	}

	img.wideimg {
		margin: 0 auto;
	}
	
	.longline {
		border-top: 1px solid #000;
		margin-top: 20px;
		padding: 20px;
		color: #fff;
		background-color: #000;
	}
	
/* SPECIAL SECTION */
	
	.sectionbannerwide {
		background-color: #000;
		height: 300px;
		text-align: center;
		margin: 20px 0 5px;
		padding: 10px 0;
	}
	
	.banner2 {
	}
	
	.rainbowbg {
		height: 100%;
		background-color: yellow;
		aspect-ratio: 1 / 1;
		background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
			background-size: 400% 400%;
			animation: gapgradient 7s ease infinite;
			  opacity: 1;
			  margin: 0 auto;
			  
	}
	
	.rainbowbg img {
		height: 100%;
	  margin: 0 auto;
		
	}
	
	
	.rainbowbg2 {
		height: 100%;
		background-color: yellow;
		aspect-ratio: 3.02423263 / 1;
		max-width: 100%;
		
		background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
			background-size: 400% 400%;
			animation: gapgradient 7s ease infinite;
			  opacity: 1;
			  margin: 0 auto;
			  
	}
	
	
	
	.rainbowbg2 img {
		height: 100%;
		max-width: 100%;
	  margin: 0 auto;
		
	}
	

	

/* TYPOGRAPHY */


p, ul, h2, h3, h4 {
	font-family: Helvetica, sans-serif;
	font-size: 18px;
}

h1 {
	font-family: "Good Timing";
	text-transform: uppercase;
	font-size: 84px;
	text-align: center;
	line-height: 0.8;
	margin: 15px auto 35px;
	letter-spacing: -7px;
}

h1.secondhead {
	letter-spacing: -3px;
	margin-top: 50px;
	
}

h2 {
	font-size: 24px;
	text-align: center;
	margin-top: 1.5em;
}

.socialicon {
	display: block;
	width: 70px;
	margin: 1.5em auto -2.3em;
}

h3 {
	margin-bottom: 0.75em;
}

h4 {
	display: inline-block;
	padding: 4px 5px 2px;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	background-color: #000;
}

.peevesheader h4 {
	background-color: #ff0000;
}

.centerblock {
	display: block;
	text-align: center;
	margin-top: -35px;
}

.player {
	margin: 0 auto;
	text-align: center;
	margin-top: 1em;
}

.emoji {
	font-size: 96px;
	text-align: center;
}

.peevesicon {
	text-align: center;
	width: 100px;
	margin: 0 auto 20px;
	fill: #000;
}


.tags {
	margin: 10px auto 0;
	text-align: center;
	
}

.genretag {
	display: inline-block;
	padding: 3px 6px;
	border: 1px solid;
	margin: 5px 5px 0 0;
	border-radius: 3px;
	font-family: Helvetica, sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	font-weight: 600;
}

img.inlineimg {
	margin: 40px auto -10px;
}

p.disclaimer {
	font-size: 12px;
	margin-top: 0;
	color: #cfcfcf;
}

/*

.hiphop {
	background-color: gray;
	border-color: #000;
	color: #fff;
}

.eurovision {
	background-color: pink;
	border-color: #ff0000;
}

.favelafunk {
	background-color: green;
	border-color: blue;
	color: #fff;
}

*/

/* EVENTS */

.events {
	width: 100%;
	padding: 0;
	margin: 20px auto 0;
}

ul.eventlist {
	list-style: none;
	padding: 0;
	
	
}

.eventdate {
	width: 75px;
	height: 75px;
	background-color: pink;
	padding: 20px 5px 5px 5px;
	text-align: center;	
	line-height: 0.8;
  display: inline-block;
  border-right: 1px solid #000;
  color: #fff;
  background-color: #000;
}

/*
li:nth-child(odd) .eventdate {
	color: #fb8cff !important;
}
*/

.eventdateinner {
	display: flex;
	height: 100%;
	  justify-content: center;
	  align-items: center;
}

.datestack {
}

li.eventitem {
	background-color: #9fc0c9;
	margin-bottom: 5px;
		background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
			background-size: 400% 400%;
			animation: eventgradientb 15s ease infinite;
			  opacity: 1;
	}

	@keyframes eventgradientb {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}

li.eventitem:nth-child(odd) {
	background-color: #d1d1d1;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
		background-size: 400% 400%;
		animation: eventgradient 15s ease infinite;
		  opacity: 1;
}

@keyframes eventgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
	


.eventdescription {
    display: inline-block;
	vertical-align: top;
	padding: 5px;
}

.day {
font-size: 44px;
display: block;
width: 100%;
}

.month {
	text-transform: uppercase;
	font-size: 20px;
	display: block;
	width: 100%;
margin-top: -10px;	
	
}

/* FLEX ROW */

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 1em auto;
}

.flex-item {
    flex: 1 1 calc(33.333% - 20px);
    box-sizing: border-box;
    padding: 0;
    background-color: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* NOTE */

img.overnote {
	margin-top: 60px;
}

.note {
	background: url('media/grunge_background_750b.webp'), #ffe969;
	background-size: cover;
	padding: 20px;
}

.note h2 {
	text-align: left;
	display: inline-block;
	background-color: #000;
	color: #fff;
	padding: 5px 7px 3px;
	margin: 0;
}

.cta {
	margin-top: 1em;
}

.cta p {
	display: inline;
	padding: 2px;
	background-color: #ffa02b;
}


/* SOCIALS */

.socialblock {
	margin: 0 auto 40px;
	text-align: center;
}

.socialblock svg {
	width: 50px;
}

.youtube, .youtube a {
	color: #ff0000;
}

.discord, .discord a {
	color: #5865F2;
}

.mastodon, .mastodon a {
	color: #858AFA;
}

.social a:hover {
	color: #000;
}

.longline .social a:hover {
	color: #fff;
}

/* IMAGE EFFECTS */

.glitch30-card {
position:relative;
width:100%;
height:100%;
overflow:hidden;
}

.glitch30-card img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
margin:0 !important;
}

.glitch30-r,
.glitch30-b {
position:absolute;
inset:0;
background-size:cover;
background-position:center;
opacity:0;
width: 100%;
height: 100%;
}

.k01 {
	background-image:url("media/kickflip01.webp");
}
.k02 {
	background-image:url("media/kickflip02.webp");
}
.k03 {
	background-image:url("media/kickflip03.webp");
}
.k04 {
	background-image:url("media/kickflip04.webp");
}
.k05 {
	background-image:url("media/kickflip05.webp");
}
.k06 {
	background-image:url("media/kickflip06.webp");
}
.k07 {
	background-image:url("media/kickflip07.webp");
}
.k08 {
	background-image:url("media/kickflip08.webp");
}
.k09 {
	background-image:url("media/kickflip09.webp");
}
.k10 {
	background-image:url("media/kickflip10.webp");
}
.k11 {
	background-image:url("media/kickflip11.webp");
}
.k12 {
	background-image:url("media/kickflip12.webp");
}
.k13 {
	background-image:url("media/kickflip13.webp");
}
.k14 {
	background-image:url("media/kickflip14.webp");
}
.k15 {
	background-image:url("media/kickflip15.webp");
}
.k16 {
	background-image:url("media/kickflip16.webp");
}
.k17 {
	background-image:url("media/kickflip17.webp");
}
.k18 {
	background-image:url("media/kickflip18.webp");
}
.k19 {
	background-image:url("media/kickflip19.webp");
}
.k20 {
	background-image:url("media/kickflip20.webp");
}
.k21 {
	background-image:url("media/kickflip21.webp");
}
.k22 {
	background-image:url("media/kickflip22.webp");
}
.k23 {
	background-image:url("media/kickflip23.webp");
}
.k24 {
	background-image:url("media/kickflip24.webp");
}
.k25 {
	background-image:url("media/kickflip25.webp");
}
.k26 {
	background-image:url("media/kickflip26.webp");
}
.k27 {
	background-image:url("media/kickflip27.webp");
}
.k28 {
	background-image:url("media/kickflip28.webp");
}
.k29 {
	background-image:url("media/kickflip29.webp");
}
.k30 {
	background-image:url("media/kickflip30.webp");
}
.k31 {
	background-image:url("media/kickflip31.webp");
}
.k32 {
	background-image:url("media/kickflip32.webp");
}
.k33 {
	background-image:url("media/kickflip33.webp");
}
.k34 {
	background-image:url("media/kickflip34.webp");
}
.k35 {
	background-image:url("media/kickflip35.webp");
}
.k36 {
	background-image:url("media/kickflip36.webp");
}
.k37 {
	background-image:url("media/kickflip37.webp");
}
.k38 {
	background-image:url("media/kickflip38.webp");
}
.k39 {
	background-image:url("media/kickflip39.webp");
}
.k40 {
	background-image:url("media/kickflip40.webp");
}

.k00 {
	background-image:url("media/dj_gap_placeholder.webp");
}

.s01 {
	background-image:url("media/special01.webp");
}
.s02 {
	background-image:url("media/special02.webp");
}
.s03 {
	background-image:url("media/special03.webp");
}
.s04 {
	background-image:url("media/special04.webp");
}
.s05 {
	background-image:url("media/special05.webp");
}
.s06 {
	background-image:url("media/special06.webp");
}
.s07 {
	background-image:url("media/special07.webp");
}
.s08 {
	background-image:url("media/special08.webp");
}
.s09 {
	background-image:url("media/special09.webp");
}
.s10 {
	background-image:url("media/special10.webp");
}
.s11 {
	background-image:url("media/special11.webp");
}
.s12 {
	background-image:url("media/special12.webp");
}
.s13 {
	background-image:url("media/special13.webp");
}
.s14 {
	background-image:url("media/special14.webp");
}
.s15 {
	background-image:url("media/special15.webp");
}
.s16 {
	background-image:url("media/special16.webp");
}
.s17 {
	background-image:url("media/special17.webp");
}
.s18 {
	background-image:url("media/special18.webp");
}
.s19 {
	background-image:url("media/special19.webp");
}
.s20 {
	background-image:url("media/special20.webp");
}
.s21 {
	background-image:url("media/special21.webp");
}
.s22 {
	background-image:url("media/special22.webp");
}
.s23 {
	background-image:url("media/special23.webp");
}
.s24 {
	background-image:url("media/special24.webp");
}
.s25 {
	background-image:url("media/special25.webp");
}
.s26 {
	background-image:url("media/special26.webp");
}
.s27 {
	background-image:url("media/special27.webp");
}
.s28 {
	background-image:url("media/special28.webp");
}
.s29 {
	background-image:url("media/special29.webp");
}
.s30 {
	background-image:url("media/special30.webp");
}
.s31 {
	background-image:url("media/special31.webp");
}
.s00 {
	background-image:url("media/dj_gap_placeholder.webp");
}



.glitch30-r{
mix-blend-mode:screen;
filter:drop-shadow(-4px 0 #ff0000);
}

.glitch30-b{
mix-blend-mode:screen;
filter:drop-shadow(4px 0 #00ffff);
}

.glitch30-slices{
position:absolute;
inset:0;
background-image:
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 10px,
rgba(0,255,255,.15) 11px,
transparent 13px
);
opacity:0;
}

.glitch30-card:hover .glitch30-r,
.glitch30-card:hover .glitch30-b{
opacity:.9;
animation:glitchShift 0.6s infinite steps(2);
}

.glitch30-card:hover .glitch30-slices{
opacity:1;
animation:glitchLines 0.5s infinite linear;
}

@keyframes glitchShift{
0%{transform:translate(0);}
25%{transform:translate(-6px,0);}
50%{transform:translate(6px,0);}
75%{transform:translate(-4px,0);}
100%{transform:translate(0);}
}

@keyframes glitchLines{
0%{transform:translateY(0);}
100%{transform:translateY(12px);}
}

/* EQUALIZER */

.equalizer {
  display: block;
  margin-top: 100px;
  width:150px;
  background-color: transparent;
  border: 0;
  padding:0.5em;
  position: relative;
  transition: opacity 0.5s ease;
  margin: 0 auto;
}

.equalizer span{
  display: inline-block;
  width: 30px;
  background-color: #000;
  position: absolute;
  bottom: 0;
}

@keyframes shorteq{
  0% {height: 100px}
  50% {height: 50px}
  100% {height: 100px}
}
@-webkit-keyframes shorteq{
  0% {height: 100px}
  50% {height: 50px}
  100% {height: 100px}
}

@keyframes talleq{
  0% {height: 150px}
  50% {height: 80px}
  100% {height: 150px}
}
@-webkit-keyframes talleq{
  0% {height: 150px}
  50% {height: 50px}
  100% {height: 150px}
}

.eq1{
  height: 130px;
  left: 0;
  animation-name: shorteq;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  -webkit-animation-name: shorteq;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinite;
  animation-delay: 0s;
}

.eq2{
  height: 150px;
  left: 60px;
  animation-name: talleq;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-delay: 0.17s;
  -webkit-animation-name: talleq;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinite;
  animation-delay: 0.17s;
}

.eq3{
  height: 130px;
  left: 120px;
  animation-name: shorteq;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-delay: 0.34s;
  -webkit-animation-name: shorteq;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinite;
  animation-delay: 0.34s;
}

.aisvg {
	
	fill-rule: nonzero;
}

.aisvg1 {
	fill-rule: evenodd;
	clip-rule: evenodd;
	stroke-linejoin: round;
	stroke-miterlimit: 2;
}

/* SLIM SCREENS */

@media (max-width: 700px) {
	
	h1.secondhead {
		font-size: 40px;
		letter-spacing: 0px;
		margin-top: 50px;
	
	}
	
  .flex-item {
    flex: 100%;
	padding: 0;
  }
  .widecontent {
  	width: 100%;
  	padding: 0;
  	margin: 1em auto 180px;
  	display: grid;
  	grid-template-columns: repeat(3, 1fr);
  	grid-column-gap: 0px;
  	grid-row-gap: 0px; }
	
	.row6 {
	  	grid-template-rows: repeat(12, 1fr);
	}
	.row2 {
	  	grid-template-rows: repeat(4, 1fr);
	}
  
}