@charset "utf-8";
/* CSS Document */

@-ms-viewport{
	width: device-width;
}

@font-face {
    font-family: 'uphe';
    src: url('fonts/uphe-webfont.woff2') format('woff2'),
         url('fonts/uphe-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
	font-family: 'bebas';
	src: url('fonts/bebasneue-webfont.eot');
	src: url('fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/bebasneue-webfont.woff') format('woff'),
		 url('fonts/bebasneue-webfont.ttf') format('truetype'),
		 url('fonts/bebasneue-webfont.svg#bebas') format('svg');
	font-weight: normal; font-style: normal;
}

@font-face {
    font-family: 'abeez';
    src: url('fonts/abeezee-regular-webfont.woff2') format('woff2'),
         url('fonts/abeezee-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html {
    position: relative;
    min-height: 100%;
}

body {
	font-family: abeez;
	font-size: 80%;
	margin: 52px 0px 32px 0px;
	background-color: #000;
	background-image: url(images/background_pat.jpg);
	background-position: center top;
}

#shows {
	font-family: bebas;
}

#home {
	background-image: none;
	background-position: center top;
	background-size: 100%;
}

a img {border: 0;}

img.imgfit {width: 85%;}

.staticvid {width: 375px; height: 211px;}

/* container divs */

#navcontainer {
	margin: 0 auto;
	width: 100%;
	background-color: #000;
	background-color: rgba(0,0,0,0.9);
	position: fixed;
	top: 0;
	z-index: 99;
}

#navcontainer a {text-decoration: none; color: #fff;}
#navcontainer a:hover {color: #00ffff;}

#header, #headermusic, #headershows, #headercontact, #headercf, #textheader, #headercontest, #headercontest2019 {
	position: relative;
	background-color: #000;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-top: -52px;
	width: 100%;
	border-bottom: solid 5px #000;
}

.headtext, .headtext2, .headtext3 {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	font-family: bebas;
	color: #ffffff;
	text-align: center;
	text-shadow: 3px 3px #d5001c;
}

.headtext {top: 270px; font-size: 50px;}
.headtext2 {top: 320px; font-size: 30px;}
.headtext3 {top: 67px; font-size: 30px;}

#headermusic {background-image: url(images/headshows450_2019.jpg); height: 450px;}
#headercontact {background-image: url(images/headshows450_2018.jpg); height: 450px;}
#headershows {background-image: url(images/headshows450_2020.jpg); height: 450px;}
#headercf {background-image: url(images/headcf450.jpg); height: 450px; background-color: #1a9ab5;}
#headercontest {background-image: url(images/headcontest350.jpg); height: 350px; background-color: #b7ab94;}
#headercontest2019 {background-image: url(images/headcontest2019.jpg); height: 350px;}

#textheader {height: 134px; background-color: #1a9ab5;}

#footer {
	background-color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	text-align: center;
	width: 100%;
	padding: 10px 0px;
	position: absolute;
    left: 0;
    bottom: 0;
}

.itemscontainer,
#container,
#musiccontainer,
#mixcontainer,
#showscontainer,
#contactcontainer,
.cfcontainer {
	margin: 0 auto;
	max-width: 1830px;
	z-index: 97;
	}

#container {text-align: center; padding: 0% 0% 2% 0%;}

div.itemscontainer {max-width: 1400px; padding: 2%; margin: 0 auto; overflow: hidden;}

div.bannerscontainer {max-width: 1600px; padding: 2% 1% 2% 1%; margin: 0 auto;}

div.banner {width: 49%; float: left; margin: 0.5%; position: relative;}

#mixcontainer {padding-bottom: 25px;}

#showscontainer {padding: 0.2% 0%;}

#videoscontainer {
	height: 720px;
	width: 100%;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: center;
	background-color: rgba(0,0,0,0.6)
}

#videoframe {
	width: 1150px;
	margin: 0 auto;
	padding: 70px 0px 0px 0px;
	background-image: url(images/vidpl.png);
	background-repeat: no-repeat;
	background-position: top right;
}

/* clear fix */

#container:after,
.showsbanners:after,
.bannerscontainer div:after,
.bannerscontainer:after,
.itemscontainer:after,
#musiccontainer:after,
#mixcontainer:after,
#navcontainer:after,
#showscontainer:after,
#contactcontainer:after,
.cfcontainer:after {
	content: '';
	display: block;
	clear: both;
}

/* text and links */

h1 {font-size: 2em; margin: 2% 0% 1% 0%;}
h2 {font-weight: normal; font-size: 1.6em; margin: 0% 0% 1% 0%;}
h1, h2 {color: #ccc; text-align: center; text-transform: uppercase;}

h3 {font-family: Arial, Helvetica, sans-serif; color: #666; margin: 5px; font-size: 1em; text-align: center; font-weight: bold; font-style: italic;}

h4 {font-family: Arial, Helvetica, sans-serif; color: #fff; margin: 25px; font-size: 1.5em; text-align: center;}

h5, h6 {font-family: bebas; color: #fff; font-weight: normal; text-shadow: 3px 3px 0px rgba(0, 0, 0, 1);}
h5 {font-size: 6em; margin: 3% 0% 0% 0%;}
h6 {font-size: 26px; margin: 0;}

p {color: #fff; margin: 10px 0px; font-size: 1.2em;}

a {color: #00ffff; margin: 0;}
a:hover {color: #fff;}
a:active {color: #00ffff;}

a.biglink {font-size: 1.6em;}

/* navigation */

#navlist {margin: 10px 10px 10px 1%; list-style-type: none; padding: 0; text-transform: uppercase; font-family: bebas;}
#navlist li {display: inline;}

hr {
    border: 0;
    height: 1px;
	margin: 0.7em 0em;
    background: #fff;
    background-image: linear-gradient(to right, #fff, #fff, #333);
}

#navlist a {margin-right: 1.2%; font-size: 26px; line-height: 32px;}

img.smicon {margin: 0px 0px 0px 8px; width: 32px; float: right;}

#navicon {display: none;}

#navmobile {
	position: absolute;
	top: 62px;
	left: 10px;
	padding: 20px;
	background-color: #000;
	box-shadow: 0px 0px 55px #000;
	display: none;
	z-index: 98;
}

#navmobile a {font-family: bebas; margin-right: 15px; font-size: 1.4em; line-height: 1.4em; color: #fff; text-decoration: none;}
#navmobile a:hover {color: #00ffff;}

#moblogo {display: none;}

/* shows */

div.showssubh {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
	color: #fff;
	text-align: left;
	margin: 1%;
}

div.showsbanners {width: 90%; max-width: 1500px; margin: 1% auto 1% auto;}

img.bannerleft, .bannerright {width: 49%; max-width: 700px; display: block;}
img.bannerleft {float: left; padding-right: 1%;}
img.bannerright {float: right; padding-left: 1%;}


.date, .city, .venue, .tickets {
	text-transform: lowercase;
	background-color: #000;
	background-color: rgba(0,0,0,0.8);
	color: #fff;
	font-size: 2em;
	padding: 1%;
	margin: 0.3%;
	overflow: hidden;
	float: left;
}

#hdate, #hcity, #hvenue, #htickets, .hnote, .hnote2 {
	font-size: 0.9em;
	font-family: Arial, Helvetica, sans-serif;
	color: #999;
	padding: 0% 1%;
	margin: 0.6% 0.3% 0% 0.3%;
	overflow: hidden;
	float: left;
}

.hnote, .hnote2 {background-color: #000; background-color: rgba(0,0,0,0.7); width: 97%; border-color: #999; border-style: solid;}
.hnote {padding: 0.3%; margin: 0% 1% 1.5% 2%; border-width: 0px 0px 1px 2px;}
.hnote2 {padding: 0.3%; margin: 1.5% 2% 0% 1%; border-width: 1px 0px 0px 2px;}

.date, #hdate {width: 10%;}
.city, #hcity {width: 30%;}
.venue, #hvenue {width: 34.6%;} /* padding is 10.4% */
.tickets, #htickets {width: 15%;}

/* videos */

#videos {background-image: url(images/background_videos.jpg); background-position: bottom center;} /* body ID */

#youtube {width: 1100px; height: 619px;	box-shadow: 0px 0px 100px #666;}

/* music */

div.albumbox {
	float: left;
	padding: 0% 1%;
	margin: 1% 0.5% 0% 0.5%;
	width: 13.666%;
}

div.albumbox--width2 {width: 30.332%;} /* isotope */

div.mixbox {
	float: left;
	padding: 0.3% 1% 0.3% 1%;
	margin: 1% 0.5% 0% 0.5%;
	width: 11.285%;
}

div.mixbox p {
	color: #fff;
	font-size: 1.2em;
	line-height: 2em;
}

div.mixbox, div.albumbox {
	background-color: #000;
	background-color: rgba(0,0,0,0.5);
	box-shadow: 0px 0px 5px #000;
	text-align: center;
}

div.albumbox-sizer { /* isotope */
	width: 13.666%;
	display: none;
}

div.buybar {
	width: auto;
	margin: 10px auto 0px auto;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
}

div.buybar:after { /* clear fix */
	content: '';
	display: block;
	clear: both;
}

img.buy_vinyl {width: 17%; margin: 0% 2% 0% 0%; max-width: 44px; max-height: 30px;}
img.buy_cd {width: 13%; margin: 0% 2%; max-width: 32px; max-height: 30px;}
img.buy_itunes {width: 26%; margin: 0% 2%; max-width: 65px; max-height: 30px;}
img.buy_amazon {width: 28%; margin: 0% 0% 0% 2%; max-width: 70px; max-height: 30px;}

img.albumart {width: 100%;}

p.albumtitle {
	text-align: center;
	font-size: 1em;
	text-transform: uppercase;
	color: #ccc;
}

p.tracklist {
	color: #ccc;
	font-size: 0.9em;
	font-family: Arial, Helvetica, sans-serif;
	margin: 5px 5px 15px 5px;
}

a.download {
	color: #fff;
	font-size: 1.2em;
	line-height: 2em;
	text-decoration: underline;
}

a.download:hover {
	color: #00ffff;
}

#digital {
	text-align: center;
	margin: 1% 3% 3% 3%;
}

img.digilogo {
	height: 30px;
	width: auto;
	margin: 0% 0.5%;
	opacity: 0.4;
    filter: alpha(opacity=40);
}

img.digilogo:hover {
	opacity: 1;
    filter: alpha(opacity=100);
}

/* contact and cf */

div.thirdbox, .thirdbox-alt, .halfbox, .tallbox, .fullbox, .nobgbox {
	float: left;
	padding: 2%;
	margin: 1% 0.5% 0% 0.5%;
	background-color: #000;
	background-color: rgba(0,0,0,0.5);
	text-align: center;
}

div.thirdbox, .thirdbox-alt {width: 28.333%; height: 160px;}
div.halfbox {height: 160px;}
div.halfbox, .tallbox, .nobgbox {width: 45%;}
div.fullbox {width: 95%;}

div.tallbox {text-align: center; height: auto;}
div.fullbox, .nobgbox {height: auto;}
div.nobgbox {text-align: left;}
div.nobgbox {background-color: transparent !important;}
div.thirdbox-alt {height: 550px !important;}

p.bio {font-size: 1.4em; margin: 0px 0px 20px 0px; text-align: justify;}

p.question {font-size: 1.6em; font-style: italic; color: #ccc; margin: 0px;}

div.photopress {margin: 5% 0%; background-color: #000; text-align: center;}
img.pressimg {width: 90%; padding: 5% 5% 0% 5%;}
p.imginfo {padding: 3% 0%; margin: 0;}
a.imglink {color: #00ffff;}

div.listemail {float: right; height: 28px;}
div.listemail p {margin: 0;}
div.listsubmit {float: right; height: 22px;}
.email {background-color: #fff; border: 2px solid #00ffff; padding: 0; margin: 0; width: 200px; height: 18px;}
#listsubscribe {background-image: url(images/subscribe.gif); background-repeat: no-repeat; background-color: transparent; height: 22px; width: 86px; border: 0; margin: 0; padding: 0; text-indent: -999em;}

#listform {margin: 3% auto; width: 280px;}
#listform:after {content: ''; display: block; clear: both;}

/* home and services  */

#ho_listdiv {max-width: 580px; margin: 50px auto 100px auto; padding: 10px; background-color: #161616;}

div.ho_listemail {float: right; height: 38px;}
div.ho_listemail p {font-size: 26px; font-family: bebas;}
div.ho_listsubmit {float: right; height: 28px; margin: 10px 0px 0px 0px;}
.ho_email {background-color: #fff; border: 3px solid #666; padding: 0; margin: 0; width: 330px; height: 26px; font-family: bebas; font-size: 22px;}
#ho_listsubscribe {background-image: url(images/submit_gray.gif); background-repeat: no-repeat; background-color: transparent; height: 22px; width: 86px; border: 0; margin: 0; padding: 0; text-indent: -999em;}

#ho_listform {margin: 10px auto 0px auto; width: 420px;}
#ho_listform:after {content: ''; display: block; clear: both;}

div.imghome {margin: 50px auto 0px auto; text-align: center; max-width: 1000px;}
div.imghome img {width: 90%;}

#imghometop {margin-top: 100px;}

#contactdiv {max-width: 800px; margin: 50px auto 0px auto;}
#contactdiv img {height: 30px; background-color: #161616; padding: 10px; margin: 3px;}

/* podcast */

#podbox {
	padding: 2%;
	margin: 1% auto 0% auto;
	width: 60%;
	text-align: left;
	height: auto;
}

div.podep {
	float: left;
	padding: 2%;
	margin: 1% 0.5% 4% 0.5%;
	background-color: #000;
	background-color: rgba(0,0,0,0.5);
	text-align: center;
	border-width: 2px 0px 2px 0px;
	border-color: #666;
	border-style: solid;
	width: 95%;
}

#podart {width: 30%; float: left; text-align: right;}
#podart img {width: 75%;}

#podinfo {width: 64%; padding: 0% 3% 0% 3%; float: right;}
#podinfo h1, #podinfo h2, #podinfo p {text-align: left; margin: 0% 0% 3% 0%;}

.notediv {background-color: #121212; margin: 1% 0% 0% 0%; padding: 1%; color: #fff;}
.notediv a {text-decoration: none;}
.notediv p {margin: 0% 0% 1% 0%; padding: 0; font-size: 1em; text-transform: uppercase;}
.notediv ul {list-style-type: none; padding: 0; margin: 0;}
.notediv li {display: inline; padding: 1%; text-transform: uppercase;}

.break {display: none;}

#podbox:after {
	content: '';
	display: block;
	clear: both;
}

/* store */

.indielink a {
	white-space: nowrap;
	font-family: bebas;
	background-color: #fff;
	color: #000;
	font-size: 3.2em;
	line-height: 1.4em;
	padding: 0% 1%;
}

.indielink {text-align: center; margin: 30px 0px 62px 0px;}

.indielink a:hover {
	color: #00ffff;
	background-color: #000;
}

div.bannerscontainer div img {width: 100%;}

div.item {position: relative; width: 33.333%; float: left;}
div.item img {width: 90%; padding: 5%;}
div.item:hover {transform: scale(1.05);}

div.art {position: relative; width: 33.33%; float: left;}
div.art img {width: 90%; padding: 5%;}

div.item p, div.art p {
	position: absolute;
	bottom: 5%;
	left: 10%;
	font-family: bebas;
	font-size: 1.8em;
	line-height: 1.2em;
	padding: 0% 2%;
	text-transform: uppercase;
	background-color: #111;
}

div.banner p {
	position: absolute;
	bottom: 5%;
	left: 10%;
	font-family: bebas;
	font-size: 2.8em;
	line-height: 1.2em;
	padding: 0% 2%;
	text-transform: uppercase;
	background-color: #000;
}


div.item p:hover, div.banner p:hover {
	color: #00ffff;
	}

@media only screen
and (max-width: 1900px) {

#musiccontainer {max-width: 1525px;}
div.albumbox {width: 17%;}
div.albumbox-sizer {width: 17%;}
div.albumbox--width2 {width: 37%;}

#mixcontainer {max-width: 1525px;}
div.mixbox {width: 13.666%;}

div.storecontainer {text-align: left;}

}

@media only screen
and (max-width: 1679px) {

#musiccontainer {max-width: 1220px;}
div.albumbox {width: 22%;}
div.albumbox-sizer {width: 22%;}

#mixcontainer {max-width: 1220px;}
div.mixbox {width: 17%;}

div.banner p {font-size: 1.8em;}

}

@media only screen
and (max-width: 1365px) {

#musiccontainer {max-width: 915px;}
div.albumbox {width: 30.333%;}
div.albumbox-sizer {width: 33.333%;}

#mixcontainer {max-width: 915px;}
div.mixbox {width: 22%;}

#videoscontainer {height: 506px;}
#videoframe {width: 800px;}
#youtube {width: 720px; height: 405px;}

div.thirdbox {width: 45%;}
div.thirdbox-alt {width: 95%; height: auto !important;}

img.imgfit {width: 50%;}

div.item {width: 50%;}
div.art {width: 50%}
div.item p, div.art p {font-size: 1.4em;}

}

@media only screen
and (max-width: 1279px) {
		
#navlist a {font-size: 18px; margin-right: 0.5%}

img.smicon {margin: 4px 0px 0px 5px; width: 24px;}

.date, .city, .venue, .tickets {font-size: 1.5em; white-space: nowrap; overflow: hidden;}

#podbox {width: 90%;}
#podbox h2, .podinfo h2 {font-size: 1.2em;}

}

@media only screen
and (max-width: 839px) {
	
.hnote, .hnote2 {font-size: 0.7em;}

#header, #headershows, #headercontact, #headerstore, #headercontest, #headercontest2019 {display: none;}

#headercf {height: 200px; background-size: 400px 200px; background-image: url(images/headcf_mobile.jpg);}

#textheader {height: 105px;}
.headtext3 {top: 54px; font-size: 26px;}

.headtext {font-size: 30px;}

#home {background-position: top left;}

#ho_listdiv {background-color: rgba(0, 0, 0, 0.8); padding: 2% 0%;}

div.ho_listemail {height: 38px;}
div.ho_listemail p {font-size: 26px;}
.ho_email {width: 140px; height: 26px; font-family: Arial, Arial, Helvetica, sans-serif; font-size: 22px;}

#ho_listform {width: 280px;}

#contactdiv {max-width: 400px;}
#contactdiv img {height: 16px;}

#navicon {float: left; height: 32px; margin: 10px 10px 10px 20px; display: block;}
#moblogo {display: block; height: 32px; padding: 10px 0px; margin: 0 auto; position: relative; right: 30px;}

#navlist {display: none;}
img.smicon {display: none;}

#musiccontainer {max-width: 610px;}
div.albumbox {width: 47%;}
div.albumbox-sizer {width: 50%;}

#mixcontainer {max-width: 610px;}
div.mixbox {width: 30.333%;}

img.digilogo {height: 22px; width: auto;}

div.showssubh {font-size: 1.2em;}

img.bannerleft, .bannerright {width: 100%;}
img.bannerleft {float: none !important; padding-right: 0%; padding-top: 1%;}
img.bannerright {float: none !important; padding-left: 0%; padding-top: 1%;}

.date, .city, .venue, .tickets {font-size: 1.2em; white-space: nowrap; overflow: hidden;}
#hdate, #hcity, #hvenue, #htickets {font-size: 0.6em;}

#videoscontainer {height: 315px; position: static; margin: 72px 0px 0px 0px; overflow: hidden;}
#videoframe {width: 460px;}
#youtube {width: 400px; height: 225px;}

div.halfbox, .tallbox, .nobgbox {width: 95%; height: auto;}

h2 {font-size: 1.2em}

p {font-size: 1em}

p.bio {font-size: 1em; margin: 0px 0px 10px 0px;}

div.banner {width: 90%; margin: 2% 5%;}
div.banner p {font-size: 2em;}

div.item {width: 50%;}
div.item p, div.art p {font-size: 1.2em;}

#podbox {width: 95%;}
#podart {width: 100%; text-align: center;}
#podart img {width: 50%; background-color: red;}

#podinfo {width: 96%; padding: 2% 2% 0% 2%; float: right;}
#podinfo h1, #podinfo h2, #podinfo p {text-align: center; margin: 0% 0% 2% 0%;}
#podbox h2, .podinfo h2 {font-size: 1.1em;}
#podinfo h1 {display: none;}
.break {display: block;}

}

@media only screen
and (max-width: 640px) {
	
div.imghome img {width: 80%;}
	
.date, .city, .venue, .tickets {font-size: 1em; white-space: nowrap; overflow: hidden;}

#musiccontainer {max-width: none; margin: 3% 3%;}
div.albumbox {width: 97%; margin: 0% 0% 3% 0%;}
div.albumbox-sizer {width: 100%;}

#mixcontainer {max-width: none; margin: 3% 3%;}
div.mixbox {width: 47%; margin: 1% 0.5% 3% 0.5%;}

#videoscontainer {height: 239px;}
#videoframe {padding: 0px 0px 0px 0px; width: 260px; background: none;}
#youtube {width: 200px; height: 113px;}

div.thirdbox {width: 95%; height: auto;}

div.banner p {font-size: 1em;}

div.item {width: 50%;}
div.item p, div.art p {font-size: 1.4em;}

.indielink a {font-size: 2em;}

#textheader {height: 90px;}
.headtext3 {top: 48px; font-size: 22px;}

.headtext {font-size: 18px;}

}

@media only screen
and (max-width: 400px) {

#moblogo {display: none;}
	
}