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

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

h1 {
	font: 48px 'BrandonGrotesque-Black', "Trebuchet MS", "Myriad Pro", sans-serif;
	letter-spacing: 0.4em;
	word-spacing: -0.2em;
}
.redText {
	font-size: 22px;
	line-height: 28px;
	color: #dd483e;
	letter-spacing: 0.02em;
}
.whiteText {
	font-size: 11px;
	line-height: 15px;
	letter-spacing: 0.03em;
}
	
#one{
	width: 100%;
	background-image: url(../images/charlieWeb800.jpg);
	background-repeat: no-repeat;
	background-position: center 100px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	max-width: 1024px;
}

}

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

p {
	line-height: 18px;
}
	
#newsbox {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap:25px;
	-moz-column-gap:25px;
	column-gap:25px;
	text-align: left;
	font-family: 'BrandonGrotesque-Light', "Trebuchet MS", "Myriad Pro", "Arial", sans-serif;
	font-size: 14px;
	color: #f4f2ec;
	margin-top: 30px;
}

#mainText {
		
}
.whiteText {
	font-size: 10px;
	line-height: 15px;
	letter-spacing: 0.03em;
}

#main_live {
	width: 90%;
	min-width: 90%;
}
#main_contact {
	width: 90%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 90px;
	text-align: center;
}


}

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

#playing_cdBox {
	width: 100%;
	max-width: 244px;
	min-width: 180px;
	text-align: left;
	background-image: url(../images/blank.png);
	background-repeat: no-repeat;
	margin-bottom: 10px;
}


.live1 {
	width: 100%;
	text-align: left;
	height: 65px;
	line-height: 14pt;
	margin-top: 12px;
}
	
#live2 {
	width: 100%;
	text-align: left;
	border-top-width: thin;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #cab072;
	height: 80px;
	padding-top: 6px;
}

#col_1 {
	margin-top: 0;
	margin-right: 10%;
}

#fatea {
	float: left;
	width: 160px;
	margin-left: 6%;
}
	
#one{
	width: 100%;
	background-image: url(../images/charlieWeb800.jpg);
	background-repeat: no-repeat;
	background-position: center 100px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	max-width: 1024px;
}

}

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


#seven{
	color: #f4f2ec;
	background-image: url(../images/Charlie-Dore14_Colorcopy640.jpg);
	background-size: cover;
	-moz-background-size: cover;
	background-position: center 100px;
	background-repeat: no-repeat;
	width: 100%;
	height: 640px;
}
}

@media screen and (max-width: 595px) {
	
h1 {
	font: 40px 'BrandonGrotesque-Black', "Trebuchet MS", "Myriad Pro", sans-serif;
	letter-spacing: 0.3em;
	word-spacing: -0.2em;
}

#col_1 {
	margin-top: 100px;
	margin-right: 2%;
	width: 33%;
}

#fatea {
	margin-top: 100px;
	float: left;
	width: 150px;
	margin-left: 6%;
}

#main {
	width: 100%;
	height: 1383px;
	padding-top: 100px;
}
#topLogo {
	height: 90px;
	padding-top: 20px;
}
	
}

@media screen and (max-width: 548px) {
	
body {
	font-family: 'BrandonGrotesque-Light', "Trebuchet MS", "Arial", sans-serif;
	font-size: 12px;
}

	
#mainText {
	font-size: 17px;
}

.boldandRust {
	letter-spacing: 0.25em;
	color: #dd483e;
	font-family: 'BrandonGrotesque-Black', "Trebuchet MS", "Arial", sans-serif;
	font-size: 16px;
	line-height: 8px;
}
#songbox {
	padding-left: 5%;
}
	
#mailingList {
	float: left;
	width: 28%;
	min-width: 180px !important;
	text-align: left;
	vertical-align: text-top;
	margin-left: 3%;
}

}

@media only screen and (max-width: 480px) {
	
#topLogo {
	height: 90px;
	padding-top: 20px;
}
h1 {
	font: 36px 'BrandonGrotesque-Black', "Trebuchet MS", "Myriad Pro", sans-serif;
	letter-spacing: 0.22em;
	word-spacing: -0.2em;
	margin-right: -4%;
}
#fatea {
	margin-top: 100px;
	float: left;
	width: 135px;
	margin-left: 2%;
}
	
#col_1 {
	margin-top: 100px;
	margin-right: 2%;
	width: 33%;
}

#one{
	width: 100%;
	background-image: url(../images/charlieWeb480.jpg);
	background-position: center 100px;
}
	
#bannerText {
	letter-spacing: 200%;
	margin-top: -15px;
	padding-right: 16px;
	padding-left: 16px;
}
	
#mailingList {
	float: left;
	width: 28%;
	min-width: 180px !important;
	text-align: left;
	vertical-align: text-top;
	margin-left: 3%;
}
	
#socialMeeja {
	text-align: right;
	height: 29px;
	float: right;
	width: 42%;
	margin-right: 3%;
}

#menuBar {
	background-color: #04030b;
	width: 100%;
}

#seven{
	color: #f4f2ec;
	background-image: url(../images/Charlie-Dore14_Colorcopy640.jpg);
	background-size: cover;
	-moz-background-size: cover;
	background-position: center 150px;
	background-repeat: no-repeat;
	width: 100%;
	height: 640px;
}

	ul {
		position: static;
		display: none;
	}
	
	/*Make all menu links full width*/
	ul li, li a {
	width: 100%;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}
	
#newsbox {
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
}

#main_video {
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: 100%;
}
	
#moreText {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}		

#mainText {
}

#col_2 {
	float: right;
	width: 50%;
	text-align: left;
}

#main {
	width: 100%;
	height: 1383px;
	padding-top: 100px;
}

#three{
	background:#04030b;
	color: #f4f2ec;	
	visibility: visible;
	height: 2200px;
}
#four{
	width: 100%;
	color: #f4f2ec;
	background-color: #04030b;
	display: block;
}
#main_music {
	width: 244px;
	height: auto;
}
#cdBox {
	width: 244px;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
}
#cdBox2 {
	width: 244px;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
}
#cdBox3 {
	width: 244px;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
}
#cdBox4 {
	width: 244px;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
}
#cdBox5 {
	width: 244px;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
}
#cdBox6 {
	width: 244px;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
}


#act2 {
	float: right;
	text-align: right;
	font: 12px 'BrandonGrotesque', "Trebuchet MS", "Myriad Pro", "Arial", sans-serif;
}
	
}

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

#one{
	width: 100%;
	background-image: url(../images/charlieWeb480.jpg);
	background-position: center 100px;
}	
	
.date1 {
	float: left;
	width: 14%;
	font-size: 13px;
	line-height: 13px;
}

.event1 {
	float: left;
	width: 70%;
	font-size: 13px;
	line-height: 18px;
}

#event2 {
	float: left;
    width: 100%;
    font-size: 13px;
	line-height: 18px;
}
	
.act1 {
	float: right;
	text-align: right;
	font: 14px 'BrandonGrotesque', "Trebuchet MS", "Myriad Pro", "Arial", sans-serif;
	line-height: 17px;
	width: 15%;
}	
	
}

@media only screen and (max-width: 375px) {
	
h1 {
	font: 28px 'BrandonGrotesque-Black', "Trebuchet MS", "Myriad Pro", sans-serif;
	letter-spacing: 0.25em;
	word-spacing: -0.2em;
}
	
#one{
	width: 100%;
	background-image: url(../images/charlieWeb375.jpg);
	background-position: center 100px;
}

#seven{
	color: #f4f2ec;
	background-image: url(../images/Charlie-Dore14_Colorcopy640.jpg);
	background-position: center 150px;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	max-width: 320px;
}
#topLogo {
	height: 70px;
	padding-top: 20px;
}

#col_1 {
	margin-top: 70px;
	margin-right: 2%;
	width: 40%;
}
#fatea {
	margin-top: 50px;
	float: left;
	width: 70px;
	margin-right: 6%;
}
	
.date1 {
	float: left;
	width: 14%;
	font-size: 13px;
	line-height: 18px;
}

.event1 {
	float: left;
	width: 70%;
	font-size: 13px;
	line-height: 18px;
}

.act1 {
	float: right;
	text-align: right;
	font: 14px 'BrandonGrotesque', "Trebuchet MS", "Myriad Pro", "Arial", sans-serif;
	line-height: 14px;
	width: 15%;
}
	
}


@media only screen and (max-width: 360px) {
	
#mailingList {
	float: left;
	width: 22%;
	min-width: 168px !important;
	text-align: left;
	vertical-align: text-top;
	margin-left: 2%;
}
#socialMeeja {
	text-align: right;
	height: 29px;
	float: right;
	width: 44%;
	margin-right: 2%;
}	
	
	
}

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

#one{
	width: 100%;
	background-image: url(../images/charlieWeb320x2.jpg);
	background-position: center -40px;
}
	
#col_1 {
	margin-top: 70px;
	margin-right: 2%;
	width: 40%;
}
	
.largerWhite {
	font-family: 'BrandonGrotesque-Bold',"Trebuchet MS", "Myriad Pro", "Arial", sans-serif;
	font-size: 1.2em;
	line-height: 2.2em;
	color: #ffffff;
	text-shadow: 2px 2px 2px black;
	letter-spacing: 0.1em;
}
	
#mailingList {
	float: left;
	width: 19%;
	min-width: 147px !important;
	text-align: left;
	vertical-align: text-top;
	margin-left: 1%;
}
#socialMeeja {
	text-align: right;
	height: 29px;
	float: right;
	width: 49%;
	margin-right: 1%;
}	
}