/************************** GLOBAL **************************/

@media screen and (max-width:985px){
	body{ font-size: 60%;}
}

@media screen and (max-width:840px){
	body{ font-size: 57.5%;}
}
@media screen and (max-width:720px){
	body{ font-size: 55%;}

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

}
@media screen and (max-width:600px){
	body{ font-size: 52.5%;}
}
@media screen and (max-width:565px){
	body{ font-size: 50%;}
}
@media screen and (max-width:475px){
	body{ font-size: 47.5%;}
}
@media screen and (max-width:390px){

}
@media screen and (max-width:320px){
	body{ font-size: 45%;}	
}


	
/*************************** NAVIGATION ***************************/

@media screen and (min-width:985px){

#brand {display:inline;}
#header #brand { width: 20%;  float: left;} 
#header #brand h2 {float: left; padding-left: 20px; padding-top: 15px;}
#nav{display:inline; position:absolute; z-index:9998; right:10px; top: 0px;}
#header #desktopnav { margin: 10px auto; font-style: normal;  font-weight: 300; padding-left:20px; float: right; display:inline;} 
#header #desktopnav ul { clear:both; display: inline; }
#header #desktopnav li { display: block; float: left; list-style: none; }
#header #desktopnav li a { color: #ffffff; display: block; margin: 0 1px 0 1px; font-size:2em !important;  padding: 5px 20px 15px 0px; text-align: center; letter-spacing:3px; text-transform:uppercase; text-decoration: none;  }
#menuIcon{ display: none;}
#header #desktopnav li a:hover, #nav li a.current { color:#00aeef; }
#header #desktopnav li.menu-home {background-color:transparent; }
#header #desktopnav li.menu-home a {display:block !important;  display: block; text-indent:-9999px; background-image:url('/_assets/images/content_logo.png?v=2'); width:232px !important; height:34px; background-position:center top; background-repeat:no-repeat;}
#header #desktopnav li.menu-contacts{padding-right:0px !important;}
#header #desktopnav li.menu-homeLink{display:none;}

#nav { display: none;}
}


@media screen and (max-width:985px){
	#desktopnav{ display:none;}
	#header #nav { width:740px; }
	#nav{display:none;}
	#header{ width:100% !important; height:auto;   background-position:center 10px; background-repeat:no-repeat;}
	#menuIcon{ position:absolute; top:0px; display:block; cursor:pointer; background-image:url('http://www.vesselsband.com/wp-content/themes/VESSELS2017/assets/images/menu-icon.png'); background-repeat:no-repeat; background-position:center left; width:55px; height:55px; top:0px; right:0px;}
	#header #nav { background-color:rgba(1,1,1, 0.88); background-repeat:no-repeat; background-position: center 10px; position:fixed; top:0px; width:100%; bottom:0px; margin: 0px 0px 0px 0px;  padding-left:0px; } 
	#header #nav ul { display: block; padding-top:140px; padding-bottom:80px;  }
	#header #nav li { display: block; float: none; list-style: none; }
	#header #nav li a { color: #ee2757; display: block; margin: 0 1px 0 1px; font-size:4.0em !important;  padding: 5px 9px 5px 9px; text-align: center; text-transform:uppercase; text-decoration: none; }
	#header #nav li a:hover, #nav li a.current { color:#ed2a47; }
	#brand { display: none}
	
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px){ 
    #header {
    	/* background-color: black; background-image:url('/_assets/images/content_logo.png?v=2');  */
    	background-repeat:no-repeat; background-position:center 10px; background-size: 65%; height: 55px; }
    #menuTitle{display: none;}
	
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { 

    #header #nav ul {  text-align:center; }
    #header #nav li { display: inline-block; margin-right: -0.25em; width:auto;  list-style: none; background-color:#171f21;}
    #NOheader #nav li a { color: #d3d5d6; display: block; margin: 0 1px 0 1px; font-size:2em !important;  padding: 5px 9px 5px 9px; text-align: center; text-transform:uppercase; text-decoration: none; }
}

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

#header #nav ul {
    display: block;
    padding-top: 0px; 
    padding-bottom: 0px; 
}




@media screen and (min-width:481px){

#homepage #bannerContainer #logoContainer {
    display: block;
}

}

/************************************** FOOTER **************************************/
@media screen and (max-width:1200px){	
	#footer .footer-logos{margin:0px 20px 0px 20px;}
	#footer #footer-copyright{padding-right: 20px;}
}

/*************************** HOME PAGE ***************************/

@media screen and (max-width:985px){	
	#homepage .latestInnerContainer .news1 .mainImageContainer, #homepage .latestInnerContainer .news1 .newsContentContainer{margin-left:8px; }
	#homepage .latestInnerContainer .news3 .mainImageContainer, #homepage .latestInnerContainer .news3 .newsContentContainer{margin-right:8px; }
}
@media screen and (max-width:800px){
	.latestInnerContainer .shortStoryContainer .mainImageContainer{border:1px solid #81827c; min-height:5%; max-height:178px;}
}
@media screen and (max-width:750px){

 #homepage .videosPhotosContainer .videoGalleryContainer .thumbGalleryContainer .videoOverlay {display: block; position: absolute; text-align: center;color: #FFF;width: 100%;background-color: rgba(0,0,0,0.1);height: 100%; padding-top:25%; }
	#homepage .videosPhotosContainer .videoGalleryContainer .thumbGalleryContainer .videoOverlay i{font-size:8em;}

	#homepage .videosPhotosContainer .videosPhotosInnerContainer .videoGalleryContainer .thumbGalleryContainer{margin-left:0px;}

}
@media screen and (max-width:600px){	
	#homepage .latestContainer{margin-top:0px;} 
	
     #homepage .latestInnerContainer .shortStoryContainer{ float:none; width:100%; clear:both; margin-bottom:10px;}
	 .latestInnerContainer .optionalClear{clear:both;}
	 .latestInnerContainer .newsImageContainer{ float:left; width:40%; margin:0px 0px 0px 0px !important;}

	 .latestInnerContainer .shortStoryContainer .newsContentContainer{ float:left; width:55%; margin:0px 0px 0px 0px !important; }
	 .latestInnerContainer .shortStoryContainer .contentText{display:none;}
	 .latestInnerContainer .subjectTitle{ font-size:2.8em; } 
	.latestInnerContainer .newsContentContainer { padding:0px 3px 3px 3px;}
	 .loadNextStoryContainer{ height:30px;}
	 .latestInnerContainer .news1 .mainImageContainer, #homepage .latestInnerContainer .news1 .newsContentContainer,
	 .latestInnerContainer .news4 .mainImageContainer, #homepage .latestInnerContainer .news4 .newsContentContainer{margin:0px 4px 0px 4px;}
	 .latestInnerContainer .news2 .mainImageContainer, #homepage .latestInnerContainer .news2 .newsContentContainer,
	 .latestInnerContainer .news5 .mainImageContainer, #homepage .latestInnerContainer .news5 .newsContentContainer{margin:0px 4px 0px 4px; }
	 .latestInnerContainer .news3 .mainImageContainer, #homepage .latestInnerContainer .news3 .newsContentContainer,
	 .latestInnerContainer .news6 .newsImageContainer, #homepage .latestInnerContainer .news6 .newsContentContainer{margin:0px 4px 0px 4px; }	

	.latestInnerContainer .dateText{font-size:1.7em;}
	.latestInnerContainer .loadNextStoryContainer {padding-top:20px;}
	.latestInnerContainer .loadNextStory{ width:100%; font-size:1.7em;  clear:both;}
	.loadNextStoryContainer a{ padding:3px 40px 3px 40px; }
	#homepage .latestInnerContainer .newsContentContainer { padding:0px 3px 0px 3px;}


.showsContainer .showsInnerContainer{margin:0px auto 0px auto; padding:20px 0px 20px 0px; text-align:left; max-width:985px;}
.showsContainer .s_dateblock{width:20%; float:left; }
.showsContainer .s_day{ padding-right:5px; font-size:6.0em; line-height:40px; text-transform:uppercase; color:#969696;}
.showsContainer .s_month{ font-size:3em; padding-left:5px; line-height:1.1em; text-transform:uppercase; color:#969696;}

.showsContainer .s_details{ width:80%; float:left; }
.showsContainer .artistName{ width:80%;  font-size:2.4em; float:left; line-height:30px; color:#9e988b;  font-style: normal; font-weight: 300;}
.showsContainer .artistName .artistDetails { margin:5px 10px 0px 5px;} 
.showsContainer .artistName .artistDetailsMore{ margin:0px 20px 0px 15px;} 

.showsContainer .s_venue{color:#c4c4c4;  text-transform:uppercase; }
.showsContainer .s_where{ width:42%;  font-size:2.2em; float:left; font-style: normal; font-weight: 300;  line-height:25px; color:#969696;}
.showsContainer .s_where .location{ padding:5px 0px 0px 0px; } 

.showsContainer .s_tickets{ float:left; padding-left:50px; width:80%; font-size:2.3em; color:#d66b8c;padding-top:10px; padding-left:5px; padding-bottom:10px; text-align:left;}
.showsContainer .moreInfo{ font-size:0.5em; line-height:1em;  margin-left:15px; margin-right:25px;  color:#d66b8c;}

.showsContainer .s_tickets a:link, .showsContainer .s_tickets a:visited{ color:#d66b8c; }
.showsContainer .venueMap {height:200px; clear:both; background-image:url('/_assets/images/loader.gif'); background-repeat:no-repeat; background-position:center center;}
.showsContainer .s_item .additionalDetails {display:none; padding-top:10px; clear:both;}
.showsContainer .s_item .hideAdditionalDetails{float:left; width:13%; height:33px; display:block;  cursor:pointer; background-image:url('/_assets/images/up_arrow.png?v=4'); background-repeat:no-repeat; background-position:center center;}
.showsContainer .s_item .hideAdditionalDetails span{height:33px; display: block; text-indent: -99999px;}
.showsContainer .s_item .venueAddressContainer{float:left; width:43%; }
.showsContainer .s_item .venueAddressHeader{float:left; width:80px; margin-left:12px; font-size:1.8em; color:#d66b8c;}
.showsContainer .s_item .venueAddress{float:left; width:60%; font-size:1.8em; color:#c4c4c4;}
.showsContainer .venueClear{clear:both; height:20px;}
.showsContainer .s_item .websiteDirectionsContainer {float:left; width:25%; font-size:1.7em; }
.showsContainer .s_item .getDirections a, .s_item .getDirections a:active{color:#d66b8c;}
.showsContainer .s_item .websiteURL a, .s_item .websiteURL a:active{color:#d66b8c;}

 
.showsContainer .s_item .shareShowsContainer{float:right; padding-right:10px; }
.showsContainer .additionalDetails{display:none; clear:both;}
	
 #homepage .videosPhotosContainer .videoGalleryContainer .thumbGalleryContainer .videoOverlay {display: block; position: absolute; text-align: center;color: #FFF;width: 100%;background-color: rgba(0,0,0,0.1);height: 100%; padding-top:25%; }
	#homepage .videosPhotosContainer .videoGalleryContainer .thumbGalleryContainer .videoOverlay i{font-size:6em;}

	#homepage .videosPhotosContainer .videosPhotosInnerContainer .videoGalleryContainer .thumbGalleryContainer{margin-left:0px;}
}

/* iPad styles */
@media only screen and (min-device-width:768px) and (max-device-width:1024px)  { 
	#homepage #bannerContainer{  background-attachment:scroll !important; height:97% !important; }
	#homepage .showsContainer .showsHeaderContainer{background-attachment:scroll !important; 	background-position: 50% -120px !important; } 
}


@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { 
	/*#bannerContainer {background-image:url('/_assets/images/content_logo.png?v=2');   background-repeat:no-repeat; background-position:center 10px;}*/
   #homepage .showsContainer .showsHeaderContainer{background-attachment:scroll !important; background-position: 50% -10px !important; } 
   #homepage .showsContainer .showsHeaderContainer{padding-top:50px !important; padding-bottom:50px !important;  }
   #homepage .videosPhotosContainer .videoGalleryContainer .thumbGalleryContainer .videoOverlay {display: block; position: absolute; text-align: center;color: #FFF;width: 100%;background-color: rgba(0,0,0,0.1);height: 100%; padding-top:25%; }
	#homepage .videosPhotosContainer .videoGalleryContainer .thumbGalleryContainer .videoOverlay i{font-size:6em;}
	#homepage .videosPhotosContainer .videosPhotosInnerContainer .videoGalleryContainer .thumbGalleryContainer{margin-left:0px;}
	#homepage #bannerContainer #logoContainer {display: none;}
}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
	#homepage #backgroundContainer{ min-height: 400px;}
	#homepage #bannerContainer{   height:120% !important; }
	
}


@media screen and (min-width : 820px){ 
	#homepage #backgroundContainer{background-size: 140% !important;}
}


@media screen and (max-width : 568px){ 
	#homepage #bannerContainer .innerCell img{ padding-bottom: 20px !important; }
	#homepage #backgroundContainer{ background-image:url('http://www.vesselsband.com/wp-content/uploads/2017/06/Vessels_bg_mobile-copy.jpg'); background-position: center 60% !important; }
	#homepage #title img{max-width: 80%;}
}


/************************** HOME BANNER **************************/

@media screen and (max-width:840px){
	body{ font-size: 57.5%;}
}
@media screen and (max-width:720px){
	body{ font-size: 55%;}
}	
@media screen and (max-width:640px){

}
@media screen and (max-width:600px){
	body{ font-size: 52.5%;}
}
@media screen and (max-width:565px){
	body{ font-size: 50%;}
}
@media screen and (max-width:475px){
	body{ font-size: 47.5%;}
}
@media screen and (max-width:390px){

}
@media screen and (max-width:320px){
	body{ font-size: 45%;}	
}

/*************************** NEWS ***************************/

@media screen and (max-width:1230px){
	#pg-news .latestContainer{padding: 0px;}
}

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

	#pg-news .latestInnerContainer .shortStoryContainer .mainImageContainer{ float:left; width:40%; margin:0px 0px 10px 0px !important;}
	
	#pg-news .latestContainer{margin-top:0px;} 
	
	#pg-news .latestInnerContainer .shortStoryContainer{ float:none; width:100%; clear:both; margin-bottom:10px;}
	#pg-news .latestInnerContainer .optionalClear{clear:both;}
	#pg-news .latestInnerContainer .newsImageContainer{ float:left; width:40%; margin:0px 0px 0px 0px !important;}

	#pg-news .latestInnerContainer .StoryContainer .newsContentContainer{ float:none; width:100%; margin:0px 0px 0px 0px !important; padding: 10px 0px 0px 0px;}
	#pg-news .latestInnerContainer .newsContentContainer .contentText{padding: 0px 2% 0px 2%;}
	#pg-news .latestInnerContainer .newsContentContainer .subjectTitle{ padding-left: 10px; font-size:2.8em; } 
	#pg-news .latestInnerContainer .dateText{padding-left: 10px; font-size:1.7em;}
	#pg-news .latestInnerContainer .newsContentContainer { padding:0px 3px 3px 3px;}
	
	#pg-news .latestInnerContainer .storyContainer .mainImageContainer{ float:none; width:100%; margin:0px 0px 10px 0px !important; border-left: 0px solid #000; border-right: 0px solid #000;}

}

@media only screen and (max-device-width : 568px) { 
	#pg-news .latestInnerContainer .newsContentContainer .contentText{font-size: 2.6em;}
	#pg-news .latestInnerContainer .dateText{padding-left: 10px; font-size:1.8em;}

}




/*************************** SHOWS ***************************/

/*
@media screen and (max-width:1060px){	
	.showsContainer .s_dateblock{width:15%; }
	.showsContainer .s_dateblock .s_year{font-size: 1.8em;}
	.showsContainer .s_details{ width:68% ; }	
	.showsContainer .s_tickets{ float:left; width:15%; }	
}	

@media screen and (max-width:865px){	
	.showsContainer .artistName{ width:100%; left:none; line-height:25px;}
	.showsContainer .s_where{ width:100%; left:none; margin:0px 0px 0px 0px;  font-size:2em; line-height:15px;}	
}





@media screen and (max-width:804px){	
	.s_item .s_dateblock{width:17%; }
	.s_item .s_details{ width:65% ; }	
	.s_item .s_tickets{ float:left; width:17%; }
	.s_item .artistName{width:100%; left:none; line-height:25px;}
	.s_item .artistName .artistDetails { margin:0px 0px 0px 10px;}
	.s_item .artistName .artistDetailsMore{ margin:0px 0px 0px 10px;}
	.s_item .artistName .moreInfo{ font-size:18px; margin-left:10px;}
	.s_item .s_where{ width:100%; left:none; margin:0px 0px 0px 5px;  font-size:2em; line-height:15px;}	
}
*/

@media screen and (max-width:985px){	
	#shows .dateSelect{margin-right:10px;}
	.s_item .s_dateblock{width:15%; }
	.s_item .s_details{ width:67% ; }	
	.s_item .s_tickets{ float:left; width:18%; }		
}



@media screen and (max-width:840px){	
	.s_item .s_dateblock{width:15%; }
	.s_item .s_details{ width:67% ; }	
	.s_item .s_tickets{ float:left; width:18%; }	
	.s_item .s_day{  line-height:50px; }
	
}	


@media screen and (max-width:720px){	
	.s_item .s_dateblock{width:16%; }
	.s_item .s_details{ width:65%; }	

	#shows .artistName .artistDetails { margin:0px 20px 0px 15px;} 	
	.s_item .s_day{ padding-right:2px; font-size:5.0em;  }
	.s_item .s_month{padding-top:3px; font-size:3.0em; line-height:30px; }
	#shows .s_where .location{ padding:0px 0px 0px 0px; } 
	.s_item .s_where{ font-size:2.5em; }	
	.s_item .s_tickets{ float:left; width:10%; }	
	
}

@media screen and (max-width:600px){
	.s_item .s_dateblock{width:19%; }
	.s_item .artistName{ width:100%; left:none; line-height:25px;}
	#shows .artistName .artistDetails { margin:0px 0px 0px 10px;} 
	#shows .artistName .artistDetailsMore{ margin:0px 0px 0px 10px;} 
	#shows .moreInfo{ font-size:18px; margin-left:10px;}		
	.s_item .s_where{ width:100%; left:none; margin:0px 0px 0px 0px;  font-size:2em; line-height:15px;}	
	#shows .s_details{ width:63%; }
	.s_item .s_year{font-size:2.0em; line-height:20px; }
	#shows .s_tickets{  width:10%; padding-top:25px;}
	.s_item .s_tickets{ float:left; width:10%; }	
	
}

@media screen and (max-width:565px){	
	#shows .s_dateblock{width:18%; }
	#shows .s_details{ width:62%; }
	#shows .artistName .artistDetails { margin:0px 20px 0px 10px;} 	
	#shows #artistSelect{ width:280px;}
	
}

@media screen and (max-width:475px){
	#shows .s_day{ float:none; padding-right:2px; font-size:8.0em; line-height:55px; }
	#shows .s_month{padding-top:0px; padding-right:3px; font-size:2.2em; line-height:20px; float:left;}
	#shows .s_year{font-size:2.2em; line-height:20px; }
	#shows .artistName .artistDetails { margin:0px 0px 0px 10px;} 
	#shows .artistName .artistDetailsMore{ margin:0px 0px 0px 10px;} 
	#shows .moreInfo{ font-size:18px; margin-left:10px;}	
	#shows .s_details{ width:61%; }
	#shows .s_tickets{  width:10%;}
	#shows #artistSelect{ width:250px; }
}	

@media screen and (max-width:390px){
	#shows .s_details{ width:59%; }
	#shows .s_tickets{  width:22%; font-size:11px;}
	#shows #artistSelect{ width:230px; }
	
}

@media screen and (max-width:320px){
	#shows .s_details{ width:57%; }
	#shows .s_tickets{  width:24%; font-size:11px;}
	#shows .s_item, #shows .noShows{ padding:10px 10px 10px 10px;}
	#shows .s_tickets .button{padding:5px 3px 5px 3px;}
	#shows #artistSelect{ width:160px; }
}	



/*************************** MUSIC ***************************/

@media screen and (max-width:650px){
	#releasesMain .releaseContainer{margin-bottom:20px; width:32%;}
}

@media screen and (max-width:480px){
	#releasesMain .releaseContainer{margin-bottom:20px; width:49%;}
}

/*************************** MUSIC DETAILS ***************************/

@media screen and (min-width:1000px){
	#releases .releaseRow{padding-bottom:15px;}
}


@media screen and (max-width:620px){
	#releases #backButton{display:none;}
	#releases #artistSidebar{width:100%; margin:0px 0px 10px 0px;}
	#releases #releaseContent{width:100%; margin:0px 0px 10px 0px; position:relative;}
	#releases .headerText{ font-size:2.7em; line-height:50px; text-align:center; color:#f6f5f4; text-transform: uppercase;}
	#releases .numCol{font-size:2em;}
	#releases .nameCol{font-size:2em;}
	#releases .timeCol{font-size:2em;}
}


/*************************** VIDEOS ***************************/

@media screen and (max-width:775px){
	#homepage .videosPhotosHeaderContainer{padding-top:20px;}
	#videos #container .videoGalleryContainer {margin: 0px; width:33.3%; display: inline-block; margin-right: -0.25em; vertical-align:top;}
	#videos #container .videoGalleryContainer img{width:100%; border-top: 10px solid #000; border-bottom: 10px solid #000;}
	#videos #container .videoGalleryContainer .thumbGalleryContainer{margin: 0px 7px 10px 7px;}
	#videos #container .videoGalleryContainer .videoCaptionContainer {padding: 0px 7px 10px 7px;}
}

@media screen and (max-width:500px){
	#videos #container .videoGalleryContainer {margin: 0px; width:50%; display: inline-block; margin-right: -0.25em; vertical-align:top;}
	#videos #container .videoGalleryContainer img{width:100%; border-top: 10px solid #000; border-bottom: 10px solid #000;}
	#videos #container .videoGalleryContainer .thumbGalleryContainer{margin: 0px 7px 10px 7px;}
	#videos #container .videoGalleryContainer .videoCaptionContainer {padding: 0px 7px 10px 7px;}
}

/*************************** SHOP ***************************/

@media screen and (max-width:775px){
	#homepage .shopGalleryContainer {width: 33%;}
	#homepage .shopContainer .shopInnerContainer .shopGalleryContainer .shopNameContainer{display: none;}
	#homepage .shopContainer .shopInnerContainer .shopGalleryContainer .shopPriceContainer{display: none;}
	#homepage .shopContainer .shopInnerContainer .shopGalleryContainer .shopThumbContainer {padding-bottom:7px;}
	#homepage .shopInnerContainer .shopHeaderContainer {padding-top:20px;}
}


/*************************** SIGNUP ***************************/

@media screen and (max-width:775px){
	#homepage .signupContactContainer .signupInnerContainer{ width:100%; padding: 0px;}
	.signUpContainer{padding-right:0px;}
	#homepage .signupContactContainer .signupHeaderContainer{text-align: center;}
}

/*************************** CONTACT ***************************/

@media screen and (max-width:775px){
	#homepage .signupContactContainer .contactContainer{ width:100%;}
	.contactContentContainer{border-left: 0px; padding-left: 0px; }
	#homepage .signupContactContainer .ContactHeaderContainer{display: block; text-align: center; padding-left: 0px; }
	.contactContainer .col1{width:50%; text-align: right; padding-right: 5px;}

}