/* ==========================
   =   GENERAL              =
   ==========================  */
:root{
	--release_bg: hsl(270,100%,84%);
	--video_bg:   hsl(315,100%,80%);
	--artists_bg: hsl(  0,100%,76%);
	--ontour_bg:  hsl( 40,100%,72%);
	--media_bg:   hsl( 60,100%,73%);
	--blog_bg:    hsl(105,100%,78%);
	--bandcamp_bg:hsl(170,100%,82%);
	
	--release_fg: hsl(270,22%,22%);
	--video_fg:   hsl(315,22%,22%);
	--artists_fg: hsl(  0,22%,22%);
	--ontour_fg:  hsl( 40,22%,22%);
	--media_fg:   hsl( 60,22%,22%);
	--blog_fg:    hsl(105,22%,22%);
	
	--release_t:#000;
	--video_t:#000;
	--artists_t:hsl(  0,22%,22%);
	--media_t:#5d560e;
	--ontour_t:#1c4a1c;
	--blog_t:#000;
}


body {
	font: 1em Tahoma, Arial, Helvetica, sans-serif;
	color: #000000;
	background-color:#8cb6e8;
	margin: 0;
	padding: 0;
	overflow:hidden;
}

h1, h2 {
	font-size:100%;
	margin: 0px;
}

h3 {
	font-size:100%;
	font-weight:normal;
}

p {
	margin: 0;
	padding: 0;
}

blockquote {
	font-style: italic;	
}

/* = wordpress img alignment = */
   
img.alignright {float:right !important; clear:right;}
img.alignleft {float:right !important; clear:right;} /*{float:left !important}*/
img.aligncenter {float:right !important; clear:right;} /*{float:none !important; display: block !important; margin-left: auto !important; margin-right: auto !important;}*/
a img.alignright {float:right !important;clear:right;}
a img.alignleft {float:right !important; clear:right;} /*{float:left !important;}*/
a img.aligncenter {float:right !important; clear:right;} /*{float:none !important; display: block !important; margin-left: auto !important; margin-right: auto !important;}*/
a img.alignnone {float:right !important; clear:right;}
img.alignnone {float:right !important;clear:right;}
/* =   TOP BAR STRUCTURE    =  */
   
#header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;	
	z-index:100;
	transition: top 0.25s ease-in-out;
}

#header-container {
	width:100%;
    background-color:rgb(127, 157, 195);
	-moz-box-shadow: 0px 16px 25px -30px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 0px 16px 25px -30px rgba(0, 0, 0, 0.6);
	box-shadow: 0px 16px 25px -30px rgba(0, 0, 0, 0.6);
}

#header {
	width: 100%;
	height: 98px;
	margin: 0 auto;
	position: relative;
	overflow:hidden;
}

.header_logo{
  position:fixed;
  left:14px;
  height:98px;
  top:0px;
  cursor:pointer;
  opacity:1;
  transition:top 0.3s ease-in-out;
 }
 
 .nav-up {
  top: -150px !important;
}
 
#v-scroll-area{
	position:absolute;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
	padding-top:299px;
	width:100%;
	height:auto;
	top:0px;
	bottom:-98px;
	left:0;
	z-index:-2;
	background-image: linear-gradient(#7f9dc3, #8cb6e800);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
}

#v-scroll-area::-webkit-scrollbar-track-piece
{
   display:none;
}

#v-scroll-area::-webkit-scrollbar
{
	background: transparent;
	overflow: visible;
	width: 0px;
}
#v-scroll-area::-webkit-scrollbar-thumb
{
    background-color: #ffffffa0;
}

#loading_icon {
	position:fixed;
	z-index:127;
	right:20px;
	bottom:20px;
	display:inline; /* hidden; */
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/*  ======================
	= categories         =
	====================== */

.categories{
	position:relative;
	float:right;
	top:1em;
	left:-20em;
	padding-top:3em;
	margin:0;
	padding-right:10em;
	padding-bottom:10em;
	display:block;
	width:98px;
	overflow:hidden;
	z-index:99;
	transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg) translate3d(0,0,0);
	transform-origin:top;

}

.categories a{
	top:1em;
	display:block;
	position:relative;
	text-decoration:none;
	font-size:1em;
	font-weight:bold;
	padding-top:0.6em;
	padding-bottom:1em;
	padding-left:3.3em;
	width:11em;
	transform:rotate(40deg);
	-ms-transform:rotate(40deg);
	-webkit-transform:rotate(40deg) translate3d(0,0,0);
	transition: transform .2s;
}

.categories a:hover{
	color:#fff !important;
	padding-left:3em;
	opacity:1;
}

.categories_selected{
}

.categories_music{
	background:var(--release_bg);
	color:var(--release_fg);
}
.categories_video{
	background:var(--video_bg);
	color:var(--video_fg);
}
.categories_blog{
	background:var(--blog_bg);
	color:var(--blog_fg);
}
.categories_media{
	background:var(--media_bg);
	color:var(--media_fg);
}
.categories_events{
	background:var(--ontour_bg);
	color:var(--ontour_fg);
}
.categories_bandcamp{
	background:var(--bandcamp_bg);
}
.categories_bandcamp img{
	height:2.2em;
	width:auto;
	margin-top:-0.3em;
	margin-left:-2.7em;
	margin-bottom:-0.3em;
	float:none;
	opacity:0.6;
}
.categories_bandcamp img:hover{
	opacity:1;
}
.categories_contact{
	background:#7f9dc3;
	color:#fff;
/*	height:99px;*/
}

.categories_artists{
	color:var(--artists_fg);
	background:var(--artists_bg);
}
.categories_blank{
	background:#84ACDC;
	display:none !important;
}

.categories_blank a:hover{
	top:14px;
	margin-left:7px !important; 
}

.categories_grayed{
	color:#888 !important;
}
.categories_grayed a:hover{
	color:#fff !important;
}

/* ==============  landscape =============== */
#landscape {
	display:block;
	position:fixed;
	bottom:-4px;
	z-index:-1;
	pointer-events: none;
}
#landscape img {
	position:fixed;
}

.layer1 {
	width:100%;
	bottom:-10px;
}
.layer2 {
	width:100%;
	bottom:-20px;
}
.layer3 {
	width:100%;
	bottom:-30px;
}
.layer4 {
	width:100%;
	bottom:-40px;
}

#cloud {
	display:block;
	position:fixed;
	pointer-events:auto;
}
#cloud img{
	position:relative;
	width:100%;
}
#cloud a {
	pointer-events:auto;
	display:block;
	width:6em;
	position:relative;
	transition: transform 2s;
}
#cloud a:hover{
 	transform: scale(1.1); 
	transition: transform 2s;
  }
/* ==================================
   =  post container id             =
   ================================== */

#content {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  grid-auto-flow: dense;
  padding-left: 20px;
  padding-right: 20px;
	padding-top:55px;
}

#contentwrap {
	width: 100%;
	padding-bottom:10000px;
	position: absolute;
	overflow:hidden;
	padding-top:55px;
}


/* ====================================================
   = 												  =
   = DIFFERENT TYPES OF POST BOXES START HERE         =
   =												  =
   ==================================================== */

/* ===================================================================================== POST BOX
*/
.post_box {
	grid-column:span 1;
	grid-row:span 18;
	background-color:var(--blog_bg);
	padding:0.8em;
	padding-top:0.4em;
	padding-bottom:0.4em;
    align-self: start;
}

.post_box p{
	text-align:justify;
	line-height:160%;
	color:var(--blog_t);
	margin-bottom:1.3em;
}

.post_box a{
	text-decoration:none;
	color:#589;
}

.post_box a:hover{
	color:#9cd;
} 

.post_box h1, h2{
	color:var(--blog_fg);	
	margin-bottom:15px;
	font-size:1em;
}

.post_box h1 {	
	font-size:3em;
}

.post_box h1 a{
	color:#222;
	border-bottom: none;
}

.post_box h1 a:hover {
	color:var(--blog_fg);
	border-bottom: none;
}

.post_box img{
	float:right;
	width: calc(100% + 1.6em);
	position: relative;
	left:0.8em;
	margin-bottom:1em;
}
.post_box iframe{
	float:right;
	width: calc(100% + 1.6em);
	position: relative;
	left:0.8em;
	margin-bottom:1em;
}
.post_box_type_label {
	float:right;
	font-size:0.8em;
	color:var(--blog_fg);
}
.post_box_type_label a{
	font-weight:bold;
	text-decoration:none;
	border-bottom:none;
	color:var(--blog_fg);
}
.post_box_type_label a:hover{
	color:#111;
}

/* ===================================================================================== ON TOUR BOX
*/

.on_tour_box {
	grid-column:span 1;
	grid-row:span 1;
	background-color:var(--ontour_bg);
	color:var(--ontour_t);
    align-self: start;
	font-weight:bold;
	text-transform:capitalize;
}
.rocketnumbernine  .on_tour_box a {
	text-transform:none;
}
.on_tour_box h1{
	padding:0.8em;
	padding-top:0.4em;
	font-size:0.8em;
	color:var(--ontour_fg);
	font-weight:normal;
	text-transform:uppercase !important;
}

.on_tour_box h1 a{
	text-decoration:none;
	color:var(--ontour_fg);
}

.on_tour_box h1 a:hover{
	color:#00000080;
}
.on_tour_box h3 {
		padding:0.8em;
		padding-top:0;
		padding-bottom:0.4em;
		margin:0;
	font-size:0.8em;
		display:inline-block;
}

.on_tour_box a{
	text-decoration:none;
	font-weight:bold;
	color:var(--ontour_fg);
}

.on_tour_box a:hover {
	color:#236022;
}

.on_tour_box img, a img{
	width: calc(100% + 1.6em);
	position: relative;
	left:0.8em;
	margin-bottom:0.4em;
	margin-top:0.4em;
	float:right;
}

.on_tour_box_ticket_link p{
	display:block;
	float:right;
	text-align:right;
	margin:0px;
	padding:0.8em;
	padding-bottom:0.4em;
	padding-top:0;
	font-size:0.8em;
}

.on_tour_box_ticket_link p a{
	color:var(--ontour_fg);
}

.on_tour_box_ticket_link p a:hover{
	color:#00000080;
}

.historic {
	opacity:0.7;
}
.historic:hover{
	opacity:1;
}
.historic p{
	padding-bottom:0;
}
.historic img{
	height:auto;
	margin-bottom:0;
	padding-bottom:0;
}
.cancelled {
	opacity:0.7;
}
.cancelled h3{
	text-decoration:line-through;
}
/* =================================================================================== EVENT NEWS BOX
*/
.event_news_box {
	grid-column:span 1;
	grid-row:span 20;
	background-color:var(--ontour_bg);
	color:var(--ontour_t);
    align-self: start;
	padding:0.8em;
	padding-top:0.4em;
	padding-bottom:0.4em;
}
.event_news_box p {
	padding-bottom:0.4em;
	padding-top:0,4em;
	line-height:130%;
}
.event_news_type_label{
	font-size:0.8em;
	color:var(--ontour_fg);
	font-weight:normal;
	text-transform:uppercase !important;
}

.event_news_type_label a{
	text-decoration:none;
	color:var(--ontour_fg);
}

.event_news_type_label a:hover{
	color:#00000080;
}
.event_news_box h1 {
		padding-bottom:0.4em;
		margin:0;
	font-size:2em;
		display:inline-block;
}
.event_news_box h3 {
		padding:0.8em;
		padding-top:0;
		padding-bottom:0.4em;
		margin:0;
	font-size:0.8em;
		display:inline-block;
}

.event_news_box a{
	text-decoration:none;
	font-weight:bold;
	color:var(--ontour_fg);
}

.event_news_box a:hover {
	color:#236022;
}

.event_news_box img, a img{
	width: calc(100% + 1.6em);
	position: relative;
	left:0.8em;
	margin-bottom:0.4em;
	margin-top:0.4em;
}

.event_news_box_ticket_link p{
	display:block;
	float:right;
	text-align:right;
	margin:0px;
	padding:0.8em;
	padding-bottom:0.4em;
	padding-top:0;
	font-size:0.8em;
}

.event_news_box_ticket_link p a{
	color:var(--ontour_fg);
}

.event_news_box_ticket_link p a:hover{
	color:#00000080;
}


/* ===================================================================================== VIDEO BOX
*/

.video_box {
  grid-column:span 1;
  grid-row:span 6;
	background-color:var(--video_bg);
	color:var(--video_t);
    align-self: start;
	padding:0.8em;
	padding-top:0.4em;
	padding-bottom:0.4em;
	text-align:justify;
}	
.video_box p{
	line-height:1.3em;
	padding-top:1em;
}

.video_box a{
	text-decoration:none;
	color:#444;
}

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

.video_box h1, h2{
	color:#000;
	font-size:2.5em;
	text-align:left;
}

.video_box h1 {
	position:relative;
}
.video_box h1 a{
	color:#000;
}

.video_box h1 a:hover {
	color:#666;
}

.video_box img{
	width: calc(100% + 1.6em);
	position: relative;
	left:0.8em;	
}

.video_box iframe{
	width: calc(100% + 1.6em);
	position: relative;
	left:-0.8em;	
}

.video_box_type_label {
	font-size:0.8em;
	width:100%;
	text-align:right;
	display:inline-block;
	color:var(--video_fg);
}
.video_box_type_label a{
	font-weight:bold;
	text-decoration:none;
	border-bottom:none;
	color:var(--video_fg);
}

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

/* ===================================================================================== MEDIA BOX
*/
.media_box {
	grid-column:span 1;
	grid-row:span 2;
	background-color:var(--media_bg); 
    align-self: start;
	color:var(--media_t);
	padding:0.8em;
	padding-top:0.4em;
	padding-bottom:0.4em;
}

.media_box h1 {
	text-transform:uppercase;
	display:inline-block;
	font-size:0.8em;
	color:var(--media_fg);
	font-weight:normal;
}

.media_box a{
	text-decoration:none;
	font-weight:bold;
	color:var(--media_t);
}

.media_box a:hover{
	color:#888;
}
.media_box h1 a{
	font-weight:bold;
}

.media_box h1 a:hover{
	color:#ffffffa0;
}
.media_box p{
	font-size:0.8em;
	margin:0;
	padding:0;
	display:inline;
	float:right;
	text-align:right;
	width:100%;
}
.media_box h3 {

}

.media_box img{
	width: calc(100% + 2em);
	position: relative;
	float:none;
	left:1em;
	padding-bottom:1em;
}

.media_box iframe{
	width: calc(100% + 2em);
	position: relative;
	left:-1em;
	padding-bottom:1em;
}

.media_quote {
	text-align:center;
	font-size:1em;
	font-style:italic;
	vertical-align:top;
	padding-top:0.4em;
	padding-bottom:0;
	color:#000;
}

.media_separator{
	display:inline-block;
	height:1px;
	width:100%;
}

/* ===================================================================================== RELEASE BOX
*/
.release_box {
    grid-column:span 1;
    grid-row:span 18;
    align-self: start;
	background-color:var(--release_bg);
	color:var(--release_t);
	padding:0.8em;
	padding-bottom:0;
}

.release_box p{
	text-align:justify;
	position:relative;
	font-size:1em;
	margin-top:15px;
	margin-bottom:1.6em;
	line-height:130%;
}
.release_box a{
	text-decoration:none;
	color:var(--release_fg);
}
.release_box a:hover{
	color:var(--release_t);
}

.release_box h1, h2{
	color:var(--release_fg);
	font-size:3em;
	line-height:121%;
	display:inline;
}

.release_box h1 a{
	color:var(--release_fg);
}

.release_box h1 a:hover {
	color:var(--release_fg);
}

.release_box img{
	float:right;
	position: relative;
	left:0.8em;
	width:calc(100% + 1.6em);
	margin-left:0;
	margin-bottom:0.8em;
}

.release_box iframe{
	float:right;
	clear:right;
	width: calc(100% + 1.6em) !important;
	position: relative;
	left:0.8em;
	margin-top:-0.8em;
	margin-left:0;
	z-index:99;
}
	
.release_box_type_label {
	color:var(--release_fg);
	font-size:0.8em;
	position:relative;
	display:block;
	top:-0.4em;
}
.release_box_type_label a{
	font-weight:bold;
}

.release_box_type_label a:hover{
	color:var(--release_fg);
}
/* ====================================================== minirelease */
.mini_release {
	grid-column:span 1;
	grid-row:span 2;
	height:1w;
	overflow:hidden;
	padding:0em;
}
.mini_release img{
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	position:relative;
	margin:0;
}
.mini_release h1{
	padding:0.4em;
}
.mini_release a{
	display:block;
	background-color:#fff;
	font-weight:bold;
	text-decoration:none;
	border:none;
	color:var(--release_fg);;
}
.mini_release a:hover{
	background-color:var(--release_bg);
}
.mini_artist {
	grid-column:span 1;
	grid-row:span 2;
	height:1w;
	overflow:hidden;
	padding:0em;
}
.mini_artist img{
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	position:relative;
	margin:0;
}
.mini_artist h1{
	padding:0.4em;
}
.mini_artist a{
	display:block;
	background-color:#fff;
	font-weight:bold;
	text-decoration:none;
	border:none;
	color:var(--artists_fg);;
}
.mini_artist a:hover{
	background-color:var(--artists_bg);
}
.video_box_mini {
	grid-column:span 2;
	grid-row:span 2;
	padding-top:56.25%;
	position:relative;

}

.video_box_mini iframe{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
}

.widedivider {
	grid-column: 1/-1;
	grid-row:span 3;
	height:0;
	padding:0;
	margin:0;
}
.artistdivider {
	grid-column:1/-1;
	grid-row:span 1;
	height:0;
	padding:0;
	margin:0;
}	
/* ============================================================ artist info as a post ====== */
.artist_info_box {
	grid-column: 1/-1; /*span 1;*/
	grid-row:span 6;
	display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7em, 1fr)); /*1fr;*/
    grid-gap: 0px;
 /*   grid-auto-flow: dense;*/
	background-color:var(--artists_bg);
	padding:0;
    align-self: start;
}
.artist_info_box img {
	display:inline-block;
	width:calc(100% + 0.4em);
	height:auto;
	transition: transform .2s;
	margin:-0.2em;
	padding:0;
	left:0;
}
.artist_info_box img:hover{
	transform: scale(1.1);
}

.artist_info_box a{
	display:inline-block;
	grid-row:span 3;
	width:1fr;
	text-transform:lowercase;
	text-decoration:none;
	font-weight:bold;
	color:var(--artists_t);
	padding:0.2em;
}
.artist_info_box h5{
	grid-column:1/-1;
	grid-row:span 2;
	color:var(--artists_fg);
	display:inline-block;
	padding:0.4em;
	font-weight:bold;
	font-size:100%;
}
.artist_info_box .linkrow{
	grid-column:1/-1;
	display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7em, 1fr)); /*1fr;*/
    grid-gap: 0px;

}
.artist_info_box h5 a{
	color:var(--artists_fg);
	text-transform:none;
	width:auto;
	padding:0;
	margin:0;
}
 .artist_info_box a:hover{
	color:#000;
}
.artist_info_box a.textlink{
	grid-row:span 1;
}
/* HIDEABLE CONTENT, SIZE MODIFIERS ============ */
.tall {
  grid-row:span 5;
}
.wide {
  grid-column:span 1;
}
.hideable {
	height:auto;
}

/* media queries for smaller screens */

@media only screen and (min-width: 32em) {
  #content, #futurecontent{ 
    grid-template-columns: 1fr 1fr;
  }
  .on_tour_box, .media_box{
	grid-column:span 1;
  }
  .wide, .post_box, .release_box, .video_box, .event_news_box, .wide3{
    grid-column:span 2;
  }
  .release_box img{
	  width:calc(100% + 0.8em);
	  margin-left:0;
	  margin-bottom:0.8em;
  }
   .release_box iframe{
	  width:calc(100% + 0.8em) !important;
	  margin-left:0;
	  margin-bottom:0.8em;
  }
}

@media only screen and (min-width: 48em) {
  #content, #futurecontent{ 
    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
  }
  .on_tour_box, .media_box{
	grid-column:span 1;
  }
  .event_news_box, .wide{
    grid-column:span 2;
  }
  .post_box, .release_box, .video_box, .wide3{
    grid-column:span 3;
  }
  .post_box h1 {	font-size:500%; }
  .release_box img{
	width: calc(50% + 0.8em);
	margin-left:0.8em;
  }
  .release_box iframe{
	width: calc(50% + 0.8em) !important;
	margin-left:0.8em;
  }
   #v-scroll-area::-webkit-scrollbar{
	width: 17px;
  }
}

/*shrink header and remove categories on phone screens */
@media only screen and (max-width:32em) {
	.categories{display:none;}
	.header_logo{height:auto; width:calc(80% - 40px);}
	#header{ height:calc(((80vw - 40px) * 0.356) + 2px); }
	#content{ padding-top:calc(((80vw - 40px) * 0.356) + 2px);}
	#contentwrap{ padding-top:0;}
	.release_box h1, h2{ font-size:300%; }
	.video_box_mini { grid-column:span 1; }
}