:root {
    --c1: #DAFB24;
    /* --c2: #BCB29C; */
  }
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, .tile.text time, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;	padding: 0;	border: 0; 	outline: 0; 	vertical-align: baseline;}
    :focus {	outline: 0; } ol, ul {list-style: none;} a {text-decoration:none} .clear{clear:both} *{box-sizing: border-box;}
.clearfix:after { content: ""; display: table; clear: both;}
a {color:white}
h1 {font-family: "Space Grotesk", sans-serif; font-style: normal; font-size: 6.2em; font-weight: 400; margin-top: 0.2em; margin-bottom: 0.4em; line-height: 1em;}
h2 {font-family: "Space Grotesk", sans-serif; font-style: normal; font-size: 3.7em; font-weight: 400; line-height: 1.2em; margin-top: 0.2em; margin-bottom: 0.4em;}
h3 {font-family: "Space Grotesk", sans-serif; font-style: normal; font-size: 1.8em; line-height: 1.3em; font-weight: 200; margin-top: 0em; margin-bottom: 0.7em;}
h4 {font-family: "Space Grotesk", sans-serif; font-size: 1em; font-weight: 700; margin-bottom: 0.4em; text-transform: uppercase; line-height: 1.4em;}
h5 {font-family: "Space Grotesk", sans-serif; color:#A2A2A2; font-size: 0.7em; font-weight: 500; text-transform: uppercase; margin-bottom: 0.8em; line-height: 1.2em;}
.row { position: relative; } .col {float:left; width: 50%;}
a {
    display: inline-block; width: auto;;
  }

body, html {height:100%;}
/*html{-webkit-text-size-adjust: none;}*/ /*stop font resizse ios - better to have in in media queries*/ 
/*::-webkit-scrollbar { display: none; }*/
html {height:100% }
section {overflow:auto}

img {color:transparent; display: block;}

body { font-family: "heebo", serif; font-weight: normal; font-style: normal; font-size: 20px; font-size: 1.1vw;  line-height: 1.5em; background-color: #000; color:#fff;  height:100%;  }

::-moz-selection { background: #e6e1b0; color:black }
::selection { background: #e6e1b0; color:black } 


main {background-color:black}
main.home {margin-top: -3.2em; position: relative; z-index: 0;}
p { font-size: 0.8em; padding-right: 22%; font-weight: 300; line-height: 1.6em; color: #ccc; margin-bottom: 2.2em;}
.container {width: 90%; margin: 0 auto; position: relative;}


/*nav*/
.topbar { height: 3.2em;  position: relative;}
.topbar .logo { padding-top: 0.2em; display: block; margin: 0 0 0 1.8em; width: 7.1em; z-index: 1; position: fixed;}
.nav-cont {  position: absolute; right: 3em; top: 1em; margin-left: 2.3em; margin-top: 0.18em; }

.nav-cont li {float:left; letter-spacing: 0.0em; margin: 0 0 0 4em; font-size: 1.05em; position: relative;}
.nav-cont li a {font-weight: 700; letter-spacing: 0.1em; color: #d8d8d8;}
.nav-cont li a:hover {color:var(--c1)}

.sidekick {width: 1.4em; position: fixed; bottom: 2.2em; right: 2%; z-index:10; filter: invert(1);} 
.sidekick .socs {width: 80%;}
.sidekick .socs img {width:100%; float:none; padding:.3em 0}
.sidekick .line {width: 0.7px; height: 5em; background-color: #000; margin: 0.5em 0.6em;}
.sidekick p { font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; transform: rotate(-90deg); width: 9.8em; height: auto; margin-left: -4.1em; margin-top: 6em; text-align: right; color:#000}


/*menu mobile*/

.menu {width:100%; height:100%; color:black; background:var(--c1); position:fixed; top:0; left:0; text-align: center;  display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.5s,  visibility 0s 0.5s; z-index:100;  }
.menu .nav-cont {display:block; position:static; }
.menu {flex-direction: column; font-size: 2em;}
.menu .logo {width: 8em;  margin-bottom: 2em;}
.open-menu { opacity: 1;  visibility: visible; transition: opacity 0.5s; }
.nav-mob a {font-family: "Space Grotesk", serif; font-weight: 500; font-size: 4.6vh; text-align: center; display: block; line-height: 1.3em;color:black; text-transform: uppercase;}

nav {  font-size: 1.2em;
  color: #eff2f7;
  line-height: 1.6em; }
.nav-show {opacity:1; transform:translateY(0)}    
nav a{color:#eff2f7; transition:color 0.2s; cursor:pointer; font-weight:800}
nav a:hover{color:red}

/*intro*/
.intro { top:0; height: 100vh; align-items: center; color: white; overflow: hidden; z-index: 1; position: relative;}
.intro .bg {height: 100vh; width: 100%; object-fit: cover; pointer-events: none; }
.intro .video {position: absolute; left:0; top: 50%; transform: translateY(-50%); width: 100%; filter: brightness(0.5);}
.intro-text {position: absolute; z-index: 2; top: 50%; left:20%; transform: translateY(-50%); }
.intro-text h1 {text-transform: uppercase; font-size: 1.4em; font-weight: 600; margin-bottom: 1em; }
.intro-text p {margin-top: 1em;}
.intro .logo {width: 30vw;}
.intro .arr {width: 3em;} 

#player-cont {position: fixed; bottom: 5px; left:5px; width: 100%; z-index: 20; filter: invert(1);}
#player-cont .sc_player_container1 .myButton_play {background-color: transparent;}
/* #player-cont .track-title {display: none;}
.srp_player_boxed .srp_player_grid {background: none;}
.iron-audioplayer .srp_player_boxed {background: none;} */



/*events*/
.events-section { padding: 0em 0 8em;}
.events-left {width: 17%; float: left;}
.events-left h5 {}
.events-section table {width:82%; border-collapse: collapse;}
.events-section table tr {border-bottom: 1px solid #373737; position: relative;}
.events-section table tr:first-child {border-top:1px solid #373737 ;}
.events-section td {vertical-align: top; padding: 2.4em 0 0;}
.events-section tr td:first-child {width: 3.6em; padding-top: 2.1em; font-weight: 300;}
/* .events-section tr:hover {border-bottom:2px solid var(--c1);} */
.events .date { width:0%; font-weight: 200; font-size: 3em; vertical-align: top; line-height: 1em; margin-top: -.05em;}
.events .month {font-size: 0.8em; font-weight: 300; font-family: "space grotesk";}
.events .venue {font-size: 1em; font-weight: 400; font-family: "space grotesk"; color: var(--c1);}
.events .event-link img{transition: all 0.2s ease  ;}
.events .event-link:hover img{transform: translate(5px, -5px);}
.arr1 {width: 0.7em; margin-top: 0.3em; float: right; margin-left: 0.8em;}
.events-section table tr::after { content: ""; position: absolute; left: 0; bottom: -0.5px; width: 0%; height: 2px; background: var(--c1); transition: width 0.5s ease-in-out;}
.events-section table tr:hover::after { width: 100%;}

.gallery {padding-top: 4em;}
.gallery .square {width: 46.65%;float:left; overflow: hidden; margin-right: 1%; height: 27.8em; margin-bottom: 1vw;}
.gallery .square img {width: 100%; filter:saturate(0%);  display:block; /* transition: filter 0.2s ease-in-out; */}
.gallery .square:hover img{filter: saturate(80%);}
.gallery .square:nth-child(4n) {margin-right: 0;}

.separator {width: 100%; height: 1px; background-color: #373737;;}

.bio-section {padding: 7em 0; overflow: auto;}
.bio-col1 {width: 17%; float: left;}
.bio-col2 {width: 34%; padding-right: 7%; float: left;}
.bio-col3 {width: 40%; float: left;}

.releases-section {padding: 7em 0; overflow: auto;}
.releases-cont .releases-section:not(:first-child) h5 {visibility: hidden;}
.releases-col1 {width: 17%; float: left;}
.releases-col2 {width: 34%; padding-right: 7%; float: left;}
.releases-col2 img {width: 100%; height: auto; filter: saturate(0);}
.releases-col2:hover img { filter: saturate(1)}
.releases-col3 {width: 40%; float: left;}

.opening-hours tr td:first-child {padding-right: 1em;}

.stale-menu {width:50%; margin-top: 2em;}