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


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


#main {
	width: 100%;
	padding-top: 220px;
	
}
	
#mailingList {
	float: left;
	width: 45%;
	text-align: left;
	vertical-align: text-top;
	margin-left: 5%;
}
	
#socialMeeja {
	text-align: right;
	height: 29px;
	float: right;
	width: 50%;
	margin-right: 5%;
}

#bannerText {
	letter-spacing: 200%;
	margin-top: -15px;
	padding-right: 16px;
	padding-left: 16px;	
}

#menuBar {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	visibility: visible;
}

#main_video {
	width: 75%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: 100%;
}
#mainText {
	
}
#one {
	width: 100%;
	background-image: url(../images/charlieWeb1024.jpg);
	background-repeat: no-repeat;
	background-position: center 80px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	max-width: 1024px;
}

#seven {
	color: #f4f2ec;
	background-image: url(../images/Charlie-Dore14_Colorcopy1024.jpg);
	background-size: cover;
	-moz-background-size: cover;  /* Firefox 3.6 */
	background-position: center 100px;  /* Internet Explorer 7/8 */
	background-repeat: no-repeat;
	width: 100%;
	height: 1024px;
}

#moreText {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
}

/*Create a horizontal list with spacing*/
li {
	display:inline-block;
	float: left;
}

/*Style for menu links*/
li a {
	display: block;
	height: 34px;
	text-align: center;
	font: 'BrandonGrotesque-Bold', "Trebuchet Bold", "Myriad Pro", "Arial", sans-serif;
	color: #f4f2ec;
	background-color: rgba(00, 03, 10, 0.8);
	text-decoration: none;
	padding-right: 16px;
	padding-left: 16px;
	letter-spacing: 0.1em;
}
	
li:hover a {
	background: #af2200;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font: 16px 'BrandonGrotesque-Bold', "Trebuchet Bold", "Myriad Pro", "Arial", sans-serif;
	color: #58575c;
	text-decoration: none;
	text-align: center;
	padding: 5px 0;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}
	ul {
		position: static;
		display: none;
	}


	/*Make all menu links full width*/
	ul li, li a {
	width: 100%;
	text-align: center;
	padding: 0px;
	line-height: 34px;
	}
	
	.show-menu {
		display:block;
	}
	
A.class1:link  {color: #f4f2ec;text-decoration: none;}
A.class1:visited {color: #f4f2ec;text-decoration: none;}
A.class1:hover {color: #dd483e;text-decoration: none;}
A.class1:active {color: #f4f2ec;text-decoration: none;}

A.class2:link  {color: #ffffff;text-decoration: none;}
A.class2:visited {color: #ffffff;text-decoration: none;}
A.class2:hover {color: #dd483e;text-decoration: none;}
A.class2:active {color: #ffffff;text-decoration: none;}
	
	
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: auto;
	overflow: hidden;
	max-width: 100%;
}
#textWall {
	width: 100%;
	display: inline-block;
	clear: both;
	height: 25px;
}
 .embed-container iframe,
 .embed-container object,
 .embed-container embed {
    position: absolute;
    top: 0;
    left: -3px;
    width: 100%;
    height: 100%;
    z-index: 10;
}	
	
#footer {
	clear: both;
	background-image: none;
}
#footText1 {
	text-align: center;
	width: 80%;
	display: inline-block;
	margin-left: 10%;
}
#footText2 {
	text-align: center;
	width: 80%;
	display: inline-block;
	margin-left: 10%;
}
	
#footText3 {
	text-align: center;
	width: 80%;
	display: inline-block;
	margin-left: 10%;
}
	
#music_col1 {
	text-align: left;
	float: left;
	width: 33%;
	max-width: 235px !important;
	min-width: 220px !important;
	color: #f4f2ec;
}

#songbox {
	float: left;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	width: 60%;
	padding-left: 2%;
}
#music_player {
	width: 75%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 40px;
	margin-left: auto;
	height: 100%;
}

}

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

.whiteText {
	font-family: 'BrandonGrotesque',"Trebuchet MS", "Myriad Pro", "Arial", sans-serif;
	font-size: 13px;
	line-height: 15px;
	color: #ffffff;
	letter-spacing: 0.03em;
}
#music_player {
	width: 80%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 40px;
	margin-left: auto;
	height: 100%;
	text-align: center;
}
#music_col1 {
	float: none;
	text-align: left;
	width: 60%;
	max-width: 235px !important;
	min-width: 220px !important;
	color: #f4f2ec;
	margin-right: auto;
	margin-left: auto;
}

#songbox {
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
	width: 100%;
	padding-left: 8%;
	float: none;
}

.date1 {
	float: left;
	width: 18%;
	font-size: 14px;
}

.event1 {
	float: left;
	width: 68%;
	font-size: 14px;
}

#event2 {
	float: left;
    width: 100%;
    font-size: 14px;
}

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