html, body {
	height: 100%;
	font-size: 1.1rem;
	font-weight: 200;
}


/* -------- HEADING STYLES --------  */

h1, h2, h3, h4, h5, h6 {
	font-family: 'Oswald', sans-serif;
	font-weight: 100;
    text-transform:uppercase;
}

h2 {
	font-size: 2.5rem;
	letter-spacing: -0.04em;
	color: #058D29 !important;
	font-family: 'Chango', sans-serif;

}

@media only screen and (max-width: 900px) {
	h2 {
		font-size: 2rem;
	}
}

@media only screen and (max-width: 640px) {
	h2 {
		font-size: 1.5rem;
	}
}


/*  -------- ELEMENT STYLES --------  */

p {
	line-height: 2;
}

a, a.link, a.visited, a.hover, a.active {
	color: #058D29;
	text-decoration: none;
}

blockquote {
	font-weight: 100;
	font-size: 1.8rem;
	line-height: 1.4;
	position: relative;
	margin: 0;
	padding: .5rem;
}

blockquote:before, blockquote:after {
	position: absolute;
	color: #f1efe6;
	font-size: 8rem;
	width: 4rem;
	height: 4rem;
}

blockquote:before {
	content: '“';
	left: -2rem;
	top: -2rem;
}

blockquote:after {
	content: '”';
	right: -2rem;
	bottom: 2rem;
}

cite {
	font-size: 1.2rem;
	line-height: 3;
	text-align: left;
}


/*  -------- SECTIONS STYLES --------  */

#home {
	/* SET WITH JS -> background-image: url(img/band-filter-vivid-2000w-A7203946.jpg);*/
	background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
	min-height:300px;
	/*height: 100vh;*/
}

#home-gradient {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background-image: linear-gradient(180deg, rgba(12, 12, 12, 0) 56%, #000000 94%);
}

#home h1 {
	width: 100%;
	text-align: center;
}

#home h1 img {
	width: 50% !important;
}

@media only screen and (max-width: 900px) {
	#home h1 img {
		width: 90% !important;
	}
}

#shows {
	background-image: url(/img/bg-web-dark-rovenimages.jpg);
	background-size: cover;
	background-color:#000;
}

#shows a, #shows a:link, #shows a:visited, #shows a:hover, #shows a:active {
	color: #333333;
	text-decoration: none;
}

.bit-widget .bit-offers {
	color: #058D29;
	background-color: #058D29;
}

#shows a.bit-button:link, #shows a.bit-button:visited, #shows a.bit-button:hover, #shows a.bit-button:active {
	color: #ffffff;
	text-decoration: none;
}

#about {
	position: relative;
	overflow: hidden;
}

#about::before {
	content: "";
	position: absolute;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	z-index: -1;
	background: url(img/plaid-light.jpg) 0 0 repeat;
	transform: rotate(-5deg);
}

#photocredit {
	color:#666;
	font-style: italic;
	font-size: 0.9rem;
}

#photocredit a:link, #photocredit a:visited, #photocredit a:hover, #photocredit a:active  {
	color:#666 !important;
}

#booking {
	position: relative;
	overflow: hidden;
}

#booking::before {
	content: "";
	position: absolute;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	z-index: -1;
	background: url(img/plaid-light.jpg) 0 0 repeat;
	transform: rotate(10deg);
}


/*  -------- ID STYLES --------  */

#bbtr-logo {
	max-width: 200px;
}


/*  -------- CLASS STYLES --------  */

.video-container {
	position: relative;
	padding-bottom: 56.25%;
  }
  
  .video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  }

h1.alt {
	font-family: 'Rubik Distressed', sans-serif;
	font-size: 3.5rem;
}

@media only screen and (max-width: 900px) {
	h1.alt {
		font-family: 'Rubik Distressed', sans-serif;
		font-size: 2.2rem;
	}
}

a.nav-link {
	color: #ffffff;
}

.navbar-nav a.active {
	color: #058D29 !important;
}

.navbar-fixed-top {
	top: -100px;
	opacity: 0;
}

.social-media-button {
	max-width: 90px;
	padding: 10px;
}

.navbar-toggler {
	background-color: #058D29;
}

.navbar-toggler-icon {
	color: #ffffff;
}

.nav-link:focus, .nav-link:hover {
	color: #058D29;
}


/*  -------- MEDIA QUERIES  --------  */

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

	.section {
		padding: 100px;
	}

	#video, #show, #about, #booking {
		min-height: 100vh;
	}

	.fullheight {
		min-height: 100vh;
	}

}

@media only screen and (min-width: 300px) and  (max-width: 992px) {
	
    #video, #about, #booking {
		padding: 60px 0;
	}
	
    #shows {
		padding: 0 !important;
	}

    #photos {
		padding: 60px 20px;
	}

}