@import 'http://fonts.googleapis.com/css?family=Roboto:400,700,300';


body { 	
    margin:0px;
    padding:0px;
	background-image:url(../images/Page_2014_Bg.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	background-attachment:fixed;
	font-size:18px !important;
	font-family:'Roboto', Verdana, Geneva, sans-serif  !important;
     }

.TopBannerBg {
	max-width: 100%;
	height: auto;
	max-height:210px;
	/*background-image:url(../images/Banner_2014_Bg.jpg);
	background-color:#000;
	background-position:top center;
    background-repeat:no-repeat;
	background-attachment:fixed;*/
	text-align:center;
	visibility:visible;
	margin-top:70px;
    }
    @media only screen and (max-width: 500px) {.TopBannerBg { height:80px; margin-top:60px; margin-bottom:0px;} }
    @media only screen and (max-width: 420px) {.TopBannerBg { visibility:hidden; height:0px;} }

img {max-width: 100%; height: auto;}

.cd-main-content {
  /* you need to assign a min-height to the main content so that the children can inherit it*/
  height: 100%;
  position: relative;
  z-index: 1;
}

/*--------------------------------------------*/
/*Texts*/
p {
	color:#fff; 
	margin-top:1rem; 
	margin-bottom:1rem;
	line-height:1.3;
	}
    @media only screen and (max-width: 980px) {p { }}
	@media only screen and (max-width: 800px) {p { }}
	@media only screen and (max-width: 500px) {p { text-align:center;}}
	@media only screen and (max-width: 375px) {p { }}
	
/*Link*/
a {color:#FF9;}
a:active { text-decoration:underline;}
a:hover { text-decoration:none;}

a:hover > div {
  /*background-color: #cc9933 !important; */
  background-color: rgba(204, 153, 51, 0.50) !important;
  border-radius:10px;
}

.underline { text-decoration:underline !important;}

/*Headers*/
h1 {color:#cc9933; }
h2 {color:#FFE600; }
h3 {color:#99cc33; }
h4 {color:#FFF; }

h1{
	font-size:150%;
	margin-top:1rem;
	margin-bottom:1rem;
	text-transform:uppercase;
	}	
h2{
	font-size:125%;
	margin-top:1rem;
	margin-bottom:1rem;
	text-transform:uppercase;
	}
h3{
	font-size:110%;
	margin-top:1rem;
	margin-bottom:1rem;
	}
h4{
	font-size:100%;
	margin-top:1rem;
	margin-bottom:1rem;
	}

@media only screen and (max-width: 500px) {h1, h2, h3, h4 { text-align:center;}}

hr { margin-top:1rem; margin-bottom:1rem; max-width:100%;}

/*--------------------------------------------*/
/*Content*/
.ContentDiv {
	max-width: 1170px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	padding-left:1rem;
	padding-right:1rem;
   }
   @media only screen and (max-width: 800px) {.ContentDiv {width: 100%; padding:0;}}
   
.ContentDiv::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}   

/*--------------------------------------------*/
.content-wrapper {
	  border-radius:10px 10px 0 0; 
	  background-color: rgba(0, 0, 0, 0.80);
	  padding:1rem !important;
	  margin-bottom:1rem;
	}
	@media only screen and (max-width: 800px) {.content-wrapper { }}
	.content-wrapper h1, h2, h3, h4, p {margin-left:0rem;margin-right:0rem;}
	

.inner-wrapper {
	margin-top: 2%;
	margin-bottom: 2%;
	text-align:center;
	}	
	
.AvailableNow_Band {
	background-image:url(../images/pic_main_AvailableNow.jpg); 
	background-position:top center; 
	background-repeat:no-repeat; 
	background-size:auto !important; 
	height:60px; 
	text-align:center; 
	border-radius:10px 10px 0 0;
	}
	
.Disco_Bg-Outcast {
	background-image: url(../images/pic_main_Bg.jpg); 
	background-position: top center;
	background-repeat:no-repeat; 
	background-size:auto !important; 
	background-attachment: fixed; 
	/*border:solid; 
	border-width:thin; 
	border-color:#FFE600; */
	border-radius:10px ;
	margin:0.5rem;
	}
.Disco_Bg-WOI {
	background-image: url(../images/pic_main_Bg_WOI.jpg); 
	background-position: top center;
	background-repeat:no-repeat; 
	background-size:auto !important; 
	background-attachment: fixed; 
	/*border:solid; 
	border-width:thin; 
	border-color:#cc3333; */
	border-radius:10px ;
	margin:0.5rem;
	}	
.Disco_Bg-PPA {
	background-image: url(../images/pic_main_Bg_PPA.jpg); 
	background-position: top center;
	background-repeat:no-repeat; 
	background-size:auto !important; 
	background-attachment: fixed; 
	/*border:solid; 
	border-width:thin; 
	border-color:#99cc66; */
	border-radius:10px ;
	margin:0.5rem;
	}	
.Disco_Bg-FFTS {
	background-image: url(../images/pic_main_Bg_FFTS.jpg); 
	background-position: top center;
	background-repeat:no-repeat; 
	background-size:auto !important; 
	background-attachment: fixed; 
	/*border:solid; 
	border-width:thin; 
	border-color:#efe241; */
	border-radius:10px ;
	margin:0.5rem;
	}
	
.Red_Bg {
	text-align:center; 
	/*background-color: rgba(178, 48, 48, 0.60);*/ 
	background-color: rgba(204, 153, 51, 0.40) !important;
	border-radius:10px 10px 0 0;
	margin-left:0.5rem;
	margin-right:0.5rem;	
	}					
		
.Quote_yellow {
	font-style:italic !important;
	color:#FFE600;
	text-align:center !important;
	}		
		
/*Home*/
.content-section-HomePic {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	}	
.content-section-HomePic > img {
	max-width: 1170px;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	}	
	@media only screen and (max-width: 980px) {.content-section-HomePic > img {width: 100%;}}
    @media only screen and (max-width: 800px) {.content-section-HomePic > img {width: 100%;}}
    @media only screen and (max-width: 500px) {.content-section-HomePic > img {width: 100%;}}
    @media only screen and (max-width: 375px) {.content-section-HomePic > img {width: 100%;}}	

/*Responsive Colomns*/	
.content-section-1 {
	display: inline-block;
	vertical-align: top;
	width: 46%;
	padding:1%;
	}	
	@media only screen and (max-width: 980px) {.content-section-1 {width: 49%;}}
    @media only screen and (max-width: 800px) {.content-section-1 {width: 49%; }}
    @media only screen and (max-width: 675px) {.content-section-1 {width: 100%; }}
	@media only screen and (max-width: 500px) {.content-section-1 {width: 100%; }}
    @media only screen and (max-width: 375px) {.content-section-1 {width: 100%; }}
	
.content-section-1 > img {
	width:100%;
	max-width:400px;
	}	
	@media only screen and (max-width: 800px) {.content-section-1 > img {width: 95%; }}
	@media only screen and (max-width: 500px) {.content-section-1 > img {width: 100%; }}
	
.content-section-1 h3 { font-weight:bold; margin:0;}
.content-section-1 p {  margin-bottom:10px;}
	
.content-section-2 {
	display: inline-block;
	vertical-align: top;
	width: 49%;
	padding:1%;
	}
	@media only screen and (max-width: 980px) {.content-section-2 {width: 49%;}}
    @media only screen and (max-width: 800px) {.content-section-2 {width: 49%; }}
	@media only screen and (max-width: 675px) {.content-section-2 {width: 100%; }}
    @media only screen and (max-width: 500px) {.content-section-2 {width: 100%; margin-top:20px; padding:0%;}}
    @media only screen and (max-width: 375px) {.content-section-2 {width: 100%; }}
.content-section-2 > img {
	width:100%;
	max-width:400px;
	}		
.content-section-2 h1,h2,h3 { 
    font-weight:bold;
	padding-left:0 !important; 
	}
	@media only screen and (max-width: 800px) {
		.content-section-2 h1,h2,h3 {
			padding-left:0 !important;
			margin-top:0 !important;}
			}
    @media only screen and (max-width: 500px) {
		.content-section-2 h1,h2,h3 {
			text-align:center;}
			}
			
.content-section-2 p, ul { text-align:left;}
	@media only screen and (max-width: 500px) {.content-section-2 p, ul {padding-left:0; text-align:center;}}
	
.content-section-2 label:before { margin-left:20px;}
	@media only screen and (max-width: 800px) {.content-section-2 label:before { margin-left:0px;}}

.content-section-4 {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	}	
	@media only screen and (max-width: 965px) {.content-section-4 {width: 100%;}}
    @media only screen and (max-width: 800px) {.content-section-4 {width: 100%;}}
    @media only screen and (max-width: 500px) {.content-section-4 {width: 100%; text-align:center;}}
    @media only screen and (max-width: 375px) {.content-section-4 {width: 100%; text-align:center;}}
	
.content-section-4 > a img{
	max-width: 250px;
	width: 22%;
	margin:auto;
	margin:1%;
	}	
	@media only screen and (max-width: 980px) {.content-section-4 > a img {width: 22%;}}
    @media only screen and (max-width: 800px) {.content-section-4 > a img {width: 22%;margin:1%;}}
    @media only screen and (max-width: 500px) {.content-section-4 > a img {width: 40%;margin-bottom:20px;}}
	@media only screen and (max-width: 375px) {.content-section-4 > a img {width: 45%; }}
    @media only screen and (max-width: 375px) {.content-section-4 > a img {}}
	
/*Responsive Merch*/	
.content-section-Web {
	display: inline-block;
	vertical-align: top;
	text-align:center;
	width: 48%;
	padding:1%;
	margin-bottom:1rem;
	border-radius:10px;
	background-color:rgba(0, 0, 0, 1.00);
	}	
	@media only screen and (max-width: 980px) {.content-section-Web {width: 47%;}}
    @media only screen and (max-width: 800px) {.content-section-Web {width: 46%;}}
    @media only screen and (max-width: 500px) {.content-section-Web {width: 48%; text-align:center; }}
    @media only screen and (max-width: 375px) {.content-section-Web {width: 98%; text-align:center; }}
.content-section-Web > img {
	max-width: 100%;
	border-radius:10px 10px 0 0;
	}	
	@media only screen and (max-width: 980px) {.content-section-Web > img {width: 100%;}}
    @media only screen and (max-width: 800px) {.content-section-Web > img {width: 100%;}}
    @media only screen and (max-width: 500px) {.content-section-Web > img {width: 100%;}}
    @media only screen and (max-width: 375px) {.content-section-Web > img {width: 100%;}}	
	
.content-section-Web > div h3 { 
    font-size:85%;
	margin-bottom:20px;
	margin-top: 10px;
	}		
		
.content-section-Web-2 {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	margin-top:5px;
	margin-bottom:10px;
	color:#FFF;
	}
	@media only screen and (max-width: 980px) {.content-section-Web-2 {width: 100%;}}
    @media only screen and (max-width: 800px) {.content-section-Web-2 {width: 100%;}}
    @media only screen and (max-width: 500px) {.content-section-Web-2 {width: 100%; text-align:center;}}
    @media only screen and (max-width: 375px) {.content-section-Web-2 {width: 100%; text-align:center;}}	
	
.content-first-instructions { margin-top:0px;}
.content-first-instructions p { margin-top:-10px; margin-bottom:10px; font-size:90%;} 
.content-first-instructions li { font-size:90%;margin-bottom:4px;}
	
/*Pic suite Vid*/	
.content-section-Vid {
	display: inline-block;
	vertical-align: top;
	text-align:center;
	width: 24%; 
	margin:auto;
	margin-bottom:1.0rem;
	padding:6px;
	border-radius:10px;
	}	
	@media only screen and (max-width: 980px) {.content-section-Vid {width: 24%;}}
    @media only screen and (max-width: 800px) {.content-section-Vid {width: 24%; min-height: 165px;}}
    @media only screen and (max-width: 500px) {.content-section-Vid {width: 47%; text-align:center;}}
    @media only screen and (max-width: 375px) {.content-section-Vid {width: 90%; text-align:center;}}
	
.content-section-Vid > img {
	max-width: 275px;
	width:100%;
	margin-bottom:5px;
	}	
	@media only screen and (max-width: 965px) {.content-section-Vid > img {width: 100%;}}
    @media only screen and (max-width: 800px) {.content-section-Vid > img {width: 100%;}}
    @media only screen and (max-width: 500px) {.content-section-Vid > img {width: 100%;}}
    @media only screen and (max-width: 375px) {.content-section-Vid > img {width: 100%;}}	
	
.content-section-Vid > div a:hover {
	text-decoration:underline;
	}	
	
.content-section-Vid-2 {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	min-height:25px;
	}
	@media only screen and (max-width: 965px) {.content-section-Vid-2 {width: 100%;}}
    @media only screen and (max-width: 800px) {.content-section-Vid-2 {width: 100%;}}
    @media only screen and (max-width: 500px) {.content-section-Vid-2 {width: 100%; text-align:center;}}
    @media only screen and (max-width: 375px) {.content-section-Vid-2 {width: 100%; text-align:center;min-height:20px;}}	
	.content-section-Vid-2 > p {
		padding-top:0px;
		margin:0;
		font-size:75% !important;
	}	
			
/*--------------------------------------------*/		
.MusicCredits {
    margin-left: auto;
    margin-right: auto;
	margin-top:2rem;
	text-align:left;
	font-weight:normal;
	text-transform:none;
	padding:0.5rem;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, .50);
   } 	
   .MusicCredits p {
	   font-size:80%;
	   margin:5px;
	   margin-bottom:7px;
   } 
   
.Credits-section-1 {
	display: inline-block;
	vertical-align: top;
	width: 49%;
	}	
	@media only screen and (max-width: 980px) {.Credits-section-1 {width: 49%;}}
    @media only screen and (max-width: 800px) {.Credits-section-1 {width: 49%; }}
    @media only screen and (max-width: 675px) {.Credits-section-1 {width: 100%; }}
	@media only screen and (max-width: 500px) {.Credits-section-1 {width: 100%; }}
    @media only screen and (max-width: 375px) {.Credits-section-1 {width: 100%; }}  	
		
.Credits-section-2 {
	display: inline-block;
	vertical-align: top;
	width: 49%;
	}	
	@media only screen and (max-width: 980px) {.Credits-section-2 {width: 49%;}}
    @media only screen and (max-width: 800px) {.Credits-section-2 {width: 49%; }}
    @media only screen and (max-width: 675px) {.Credits-section-2 {width: 100%; }}
	@media only screen and (max-width: 500px) {.Credits-section-2 {width: 100%; }}
    @media only screen and (max-width: 375px) {.Credits-section-2 {width: 100%; }}  		
		
/*--------------------------------------------*/
/* CTA */

	.cta_container {
		background-color: rgba(32, 58, 71, 0.85);
		padding: 1.5rem 0.4rem 1rem 0.4rem;
		text-align: center;
		border-radius: 6px;
		min-height:330px;
		}
		@media only screen and (max-width: 500px) {.cta_container {min-height:260px; margin-bottom:40px;  padding-bottom:25px; }}
		
	.cta_container p { font-size:80%; margin-bottom:20px;}
		

/*--------------------------------------------*/		
/* Form */
form {
	color: #FFF;
	padding: 0.5em 0 1em 0;
	border-radius: 6px;
	}
	form h2, form h3, form h4, form h5, form h6 {
		color: #FFF;
	}
	form p { margin-bottom:25px;}
	form form {
		margin: 0 auto;
		max-width: 100%;
		width: 25em;
	}
	form input[type="submit"],
	form input[type="reset"],
	form input[type="button"],
	form .button {
		box-shadow: none;
		background: #fff;
		color: #000;
		font-size:0.75rem;
		border-radius: 6px;
		font-weight: 600;
		padding:0.50rem 1.00rem;
		cursor:pointer;
	}
	form input[type="text"],
	form input[type="password"],
	form input[type="email"],
	form select,
	form textarea {
		color: #ffffff;
		font-family: sans-serif;
		background: rgba(255, 255, 255, 0.25);
		border: 0;
		border-radius: 6px;
		height: 3em;
		width:80%;
		padding:10px 10px; 
		margin-bottom:20px;
		margin-left:auto;
		margin-right:auto;
		font-size:1.0rem;
	}
	@media only screen and (max-width: 500px) {form input[type="text"],
	form input[type="password"],
	form input[type="email"],
	form select,
	form textarea {
		color: #ffffff;
		font-family: sans-serif;
		background: rgba(255, 255, 255, 0.15);
		border: 0;
		border-radius: 6px;
		height: 3em;
		width:90%;
		padding:10px 10px; 
		margin-bottom:20px;
		font-size:1.0rem;
	}
	}
	form input[type="text"]:focus,
	form input[type="password"]:focus,
	form input[type="email"]:focus,
	form select:focus,
	form textarea:focus {
		box-shadow: inset 0 0 0 2px #fff;
	}
	form ::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.75) !important;}
	form :-moz-placeholder {color: rgba(255, 255, 255, 0.75) !important;}
	form ::-moz-placeholder {color: rgba(255, 255, 255, 0.75) !important;}
	form :-ms-input-placeholder {color: rgba(255, 255, 255, 0.75) !important;}
	form .formerize-placeholder {color: rgba(255, 255, 255, 0.75) !important;}
	
	form label { font-size:75%;}
	
/*/ Form */
		
/*--------------------------------------------*/
/*Lists*/	
.ul_content { 
    margin-top:5px; 
	margin-bottom:20px; 
	padding:0; 
	list-style:decimal;
	}
	@media only screen and (max-width: 500px) { .ul_content {padding:0; }	}
.li_content { 
   margin-left:auto; 
   margin-right:auto; 
   padding:0 0 0 0px; 
   line-height:1.5em; 
   color:#fff;
   list-style-position:inside;
   }
 
 .ul_content2 { 
    margin-top:5px; 
	margin-bottom:20px; 
	margin-left:15px; 
	padding:0; 
	list-style:disc;
	}
	@media only screen and (max-width: 500px) { .ul_content2 {}}  
   
	
/*--------------------------------------------*/		
/* Responsive video Controls */
video {
  width: 100%    !important;
  height: auto   !important;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top:0;
	height: 0;
	
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding:10px;
}	
/* /Responsive video Controls */		
		
	
/*--------------------------------------------*/
/*Sound Cloud*/	
.SoundCloud {padding:0.5rem; text-align:center; z-index:0;}
@media only screen and (max-width: 500px) {.SoundCloud {text-align:center; z-index:0; }}
.SoundCloud> p { text-align:center; margin:0; font-size:80%;}

/*--------------------------------------------*/
/*Bandsintown*/	
.BandsintownTxt {
	font-size:12px !important;
	color:#FFF;
	width:100%;
	padding-left: 5px;
	}
    @media only screen and (max-width: 500px) {.BandsintownTxt {font-size:10px;}}
    @media only screen and (max-width: 375px) {.BandsintownTxt {font-size:8px !important;width:100%;}}
	
	.BandsintownTxt div {
	font-size:14px !important;
	}
	@media only screen and (max-width: 375px) {.BandsintownTxt div {font-size:10px !important;}}
	@media only screen and (max-width: 375px) {.BandsintownTxt div {font-size:9px !important;}}

/*--------------------------------------------*/

.Contact_Button {
	box-shadow: none;
	background: #fff;
	color: #000;
	border-radius: 6px;
	font-weight:bold;
	padding:10px 50px;
}

.Order_Section {
	border-radius:10px;
	background-color: rgba(0, 0, 0, 0.70);
	padding-top:1rem;
	padding-left:0.5rem;
	padding-right:0.5rem;
	margin:auto;
	}
	.Order_Section > p  {
	padding-left: 1%;
	padding-bottom:0;
	}

.Order_Button_Container {width: 150px; padding:0; padding-top:0 !important; padding-bottom:0 !important;}
@media only screen and (max-width: 800px) {.Order_Button_Container { width: 140px;}}
@media only screen and (max-width: 500px) {.Order_Button_Container { width: 170px; margin:auto;}}


.Order_Button_Container > h1,h2,h3,h4 {margin-bottom:1rem; padding:0;}
@media only screen and (max-width: 500px) {.Order_Button_Container > h1,h2,h3,h4 { text-align:center;}}

.Order_Button {
	box-shadow: none;
	background: #fff;
	color: #000;
	border-radius: 6px;
	font-weight:bold;
	padding:10px 25px;
	font-size:75%;
	text-align:center;
}

a:hover .Order_Button {
  background-color:#090 !important;
  border-radius: 6px;
  color:#FF0;
}


.BackTopL { 
    text-align:left;
	margin-top:10px;
	padding-left:2rem;
	}
	.BackTopL a {font-size:75%; text-decoration:none !important;color:#ff0 !important;}
	
.BackTopR { 
    text-align: right;
	margin-top:10px;
	padding-right:2rem;
	
	}
	.BackTopR a {font-size:75%; text-decoration:none !important;color:#ff0 !important;}


/*--------------------------------------------*/
/*Footer*/
#bottom {
	position: relative;
	margin: 0;
	text-align: center;
	padding:0;
/*box-shadow: inset 0 1px 0 0 #cc9933;
background-image:url(../images/opacity.png);
	background-position:bottom center;
    background-repeat:repeat;
	background-attachment:fixed;*/
}
#bottom > div {background-color: rgba(0, 0, 0, 0.80);}}	
	
.FooterCopy{
	font-size:8px;
	font-weight:normal;
	text-transform:uppercase;
	font-weight:bold;
	color:#fff;
	margin-top:1rem;
	padding-bottom:1rem;
	margin-left:2%;
	margin-right:2%;
	text-align:center;
	}
	@media only screen and (max-width: 500px) {.FooterCopy {font-size:8px;}}
    @media only screen and (max-width: 375px) {.FooterCopy {font-size:8px;}}
	.FooterCopy a{
		color:#fff;
	}
	.FooterCopy a:hover{
		color:#fff;
		text-decoration: underline;
		font-weight:bold;
	}	

	
.FooterAdd{
	font-size:8px;
	font-weight:normal;
	text-transform:uppercase;
	font-weight:bold;
	color:#fff;
	margin-top:1rem;
	padding-bottom:1rem;
	margin-left:2%;
	margin-right:2%;
	text-align:center;
	}
	.FooterAdd a{
		color:#fff;
	}
	.FooterAdd a:hover{
		color:#fff;
		text-decoration: underline;
		font-weight:bold;
	}