h1 { font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px; } h3 { font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px; } p { font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } blockquote { font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size: 21px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 30px; } pre { font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18.5714px; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}




body {
	line-height: 1;
	/*margin: 0 0 100px;*/
	width: 100%;
	/*background: #5a6777;*/
	
}
.white-container {
	/*background: #fff;*/
}

a {
	color: #000;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}




#wrapper {
	width: 100%;
    
}


video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
	z-index: -1;
}

.header-home img {
	width: 100%;
	height: auto;
}

.header {
	width: 100%;
	height: auto;
	overflow:hidden;
	position: relative;
	background: url('../images/headers/bg1.jpg') #000;
}


.header-biography {
	width: 100%;
	height: 600px;
	background: url('../images/headers/biography.jpg') #000;
	overflow:hidden;
}




.header-berklee {
	width: 100%;
	height: 600px;
	background: url('../images/headers/berklee.jpg') #000;
	overflow:hidden;
}


.header-symfaunic {
	width: 100%;
	height: 600px;
	background: url('../images/headers/biography.jpg') #000;
	overflow:hidden;
}

.header-tippytopper {
	width: 100%;
	height: 600px;
	background: url('../images/headers/biography.jpg') #000;
	overflow:hidden;
}

.header-waterfallofmystery {
	width: 100%;
	height: 600px;
	background: url('../images/headers/biography.jpg') #000;
	overflow:hidden;
}

.header-starlight {
	width: 100%;
	height: 600px;
	background: url('../images/headers/biography.jpg') #000;
	overflow:hidden;
}


.header-talesofanorthblood {
	width: 100%;
	height: 600px;
	background: url('../images/headers/biography.jpg') #000;
	overflow:hidden;
}



.header-music {
	width: 100%;
	height: 1040px;
	background: url('../images/headers/music.jpg') #000;
	overflow:hidden;
}





.header-artists {
	width: 100%;
	height: 800px;
	background: url('../images/headers/music.jpg') #000;
	overflow:hidden;
}




.header-scores {
	width: 100%;
	height: 1040px;
	background: url('../images/headers/scores.jpg') no-repeat #000;
	overflow:hidden;
}






.header-contact {
	width: 100%;
	height: 400px;
	background: url('../images/headers/contact.jpg') no-repeat #000;
	overflow:hidden;
}





.ul_links li  {
	padding-bottom: 10px;
	font-size: 16px;
}


/* Navigation Bar */
#nav {
	height: 45px;
	background: #000;
	border-bottom: 1px solid #3a3a3c;
	width: 100%;overflow: inherit;
}

#nav ul, #nav-reels ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
	width: 100%;
	overflow: hidden;
}

#nav li, #nav-reels li {
	float: left;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 17px;overflow: hidden;
	
}

#nav li a, #nav-reels li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none; 
}

#nav-reels {
	height: 40%;
	background: #000;
	border-bottom: 1px solid #3a3a3c;
	width: 100%;
}
#nav-reels li a {
	
}
#reelsNav li {
	font-size: 1.5vh;
	/*font-size: 98%;*/
	padding: 0vh 0vh;
	position:relative;
}

/* Change the link color to #111 (black) on hover */
#nav li a:hover {
  background-color: #000;
}














#black-bar {
	width: 100%;
	background: #000; /* 3a3a3c */
	min-height: 100%;
	color: white;
	margin-bottom: 8px;
	overflow:auto;
	
}

.black-bar {
	width: 100%;
	background: #111; /* 3a3a3c */
	min-height: 100%;
	color: white;
	margin-bottom: 8px;
	overflow:auto;
	
}

#main-bar {
	width: 100%;
	background: #000;
	border-top: 1px solid #3a3a3c;
	border-bottom: 1px solid #3a3a3c;
	text-align: center;
	height: 4%;
	color: white;
	margin-bottom: 8px;
	
	clear: both;
}

.block-border {
	border: 1apx solid #000;
}
#main-section img, #col-33 {
	/*border-radius: 50%;*/
}
#main-section #main-bar {
	width: 99.2%;
	
} 

html, body {
  height: 100%;
  margin: 0;
}
body {
	/*background: url("../images/main_bg.jpg");*/
}
.main-width {
	width: 100%;
	position:absoluste;
	left: 0;
}
#main-section {
	
	width: 65%;
	margin: 0 auto;

	
	
	
}


#container {
	margin: 0 auto;
	min-height: 100%;
	margin-bottom: -210px; /* SAME AS FOOTER, MAIN-SECTION AFTER HEIGHT, but NEGATIVE */
}
#container::after {
	content: "";
	display: block;
}
#footer, #container::after  {
	height: 210px; /* SAME AS MAIN-SECTION MARGIN BOTTONM, BUT + */
}
#footer {
	background-color: #3a3a3c;
  	width: 100%;
	clear: both;
	
  
}

#col-left {
	width: 42%;
	margin: 0 auto;
	
	text-align: left;
	border: 0px solid white;
	float: left;
}
#col-right {
	width: 27%;
	border: 0px solid white;
	float: left;
	color: white;
	margin: 0 auto;
	
	margin-top: 5%;
	text-align: center;
}

#col-16 {
	width: 15.5%;
	margin-right: .5%;
	float: left;
	padding-top: .4%;
	padding-bottom: .4%;
	/*padding-left: .4%;*/
}

#col-20 {
	width: 19.5%;
	margin-right: .5%;
	float: left;
	padding-top: .4%;
	padding-bottom: .4%;
	/*padding-left: .4%;*/
}

.col-25 {
	width: 25%;
	padding-top: .4%;
	padding-bottom: .4%;
	margin: 0 auto;
	float: left;
	
	
	/*padding-left: .4%;*/
}


.col-50 {
	width: 50%;
	padding-top: .4%;
	padding-bottom: .4%;
	margin: 0 auto;
	float: left;
	
	
	/*padding-left: .4%;*/
}

#col-33 {
	width: 32.5%;
	margin-right: .83%;
	float: left;
	padding-top: .4%;
	padding-bottom: .4%;
	/*padding-left: .4%;*/
}

#col-80 {
	width: 80%;
	padding-top: .4%;
	padding-bottom: .4%;
	margin: 0 auto;
}
#col-100 {
	width: 100%;
	padding-top: .4%;
	padding-bottom: .4%;
	margin: 0 auto;
}


#col-50 {
	width: 50%;
	padding-top: .4%;
	padding-bottom: .4%;
	margin: 0 auto;
	float: left;
	
	
	/*padding-left: .4%;*/
}



.black_col {
	background: #111;
	color: #F8F8F8;
}
.red_col {
	background: #9f3547;
}
.blue_col {
	background: #5a6777;
}
.tan_col {
	background: #b09a51;
}



#clear {
	clear: both;
}
.tn img {
	width: 5px;
}
.super-text {
	font-family: 'Franklin Gothic Medium Cond', arial;
	letter-spacing: 1px;
	font-size: 20px;
}

.works_img  {
	
	width: 100%;
}
.text-center {
	text-align: center;
}
#main-bar h1 {
	font-family: 'Franklin Gothic Medium Cond', arial;
	letter-spacing: 1px;
	font-size: 24px;
	text-transform: uppercase;
	padding-top: .3%; 
}

#main-bar a, a:visited, a:hover {
	color: #F8F8F8;
	text-decoration: none;
	border: none;
}

.text-p {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	line-height: 27px; 
	font-size: 15px;
}
#main-bar h1 {
	/*height: auto;*/
}
h2 {
	font-family: 'Franklin Gothic Medium Cond', arial;
	letter-spacing: 1px;
	font-size: 22px;
	
	text-transform: uppercase;
	padding-top: .3%;
}


h3 {
	font-family: 'Franklin Gothic Medium Cond', arial;
	letter-spacing: 1px;
	font-size: 19px;
	
	text-transform: uppercase;
	padding-top: .3%;
}
blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;;
}
blockquote p {
  display: inline;
	font-style: italic
}




.home-comments blockquote {
  background: #EEE;
	color:#222;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.1em 6px;
  quotes: "\201C""\201D""\2018""\2019";
}
.home-comments blockquote:before {
  content: open-quote;
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;;
}
.home-comments blockquote p {
  display: inline;
	font-style: italic;
	font-size: 0.8em;
	line-height: 1.6em;
		
}
.home-comments blockquote a {
	color: #000;
}



.text-padding {
	padding: 10px;
}
.w-100 {
	width: 100%;
}

.img-100 img {
	width: 100%;
	height: 100%;
}









/* Home Tavs */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}








/*h1 {
   width: 100%; 
   text-align: center; 
   border-image: url(../images/b1.jpg"); 
   line-height: 0.1em;
} 

*/






hr {
    display: block;
margin-left: auto;
margin-right: auto;

/*background:url(../images/nav1.jpg);*/
border-bottom:1px solid;
border-color: #000;
clear:both;
	margin-bottom: 25px;
	line-height: 2px;
}



.no-hr-img {
    display: block;
margin-left: auto;
margin-right: auto;
height:16px;
background: no-repeat;
border:0;
border-color: #000;
clear:both;
	margin-bottom: 25px;
	line-height: 5px;
}






.navButton:hover {
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
}













#r-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  
}

#r-nav li {
  float: left;
	
}

#r-nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
#r-nav li a:hover {
  background-color: #111;
}







.alt-border {
	border: 1px solid #5a6777;
}



.text-description {
	font-family: Verdana;
	color: #EFEFEF;
	padding: 4px;
	margin-left: 8px;
}





.mobile-col {
	display: none;
}




@media only screen and (max-width: 999px) {
  #footer {
    background: #000;
	  position: relative;
	  
	  
  }
	#main-section {
	width: 95%;
	
	
	
	
	}
	.home-comments p {
		font-size: 11px;
	}
	.comments-mobile {
		
	}
	.header-scores {
	width: 100%;
	height: 1040px;
	background: url('../images/headers/mobile/scores.jpg') no-repeat #000;
	overflow:hidden;
	}
	.header-music {
	width: 100%;
	height: 1040px;
	background: url('../images/headers/mobile/music.jpg') #000;
	overflow:hidden;
}
	.mobile-col {
	display: block;
}
}