@charset "utf-8";



body, html {

	height: 100%;

	width: 100%;

}

	

body {

	background-color: #000000;

	z-index: -2;

	color: white;

	font-size: 16px;

	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

	margin-left: 0px;

	margin-right: 0px;

	font-style: normal;

	font-weight: normal;

	/* [disabled]height: auto; */

}



* {

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

	text-decoration: none;

}



section {

	width: 100%;

	background-color: #393F4B;

	margin-left: 0px;

	padding-top: 5vh;

	height: auto;

	overflow-y: hidden;

	min-height: 100vh;

	margin-right: 0px;

}

h1, .flex-video-container, .flex-band-container  , .email{

	margin-left: 15%;

	margin-top: 0px;

	text-align: left;

	margin-right: auto;

}



h1  {

	font-size: 4em;

	vertical-align: baseline;

	font-family: trochut;

	font-style: normal;

	font-weight: 400;

	margin-bottom: 3vh;

}

.maps {

	background-color: rgba(221,221,221,1.00);

	padding-top: 0px;

	padding-right: 2px;

	padding-bottom: 2px;

	padding-left: 2px;

	border-radius: 5px;

	-webkit-box-shadow: 0px 0px #000000;

	box-shadow: 0px 0px #000000;

	margin-left: 9px;

}





h2 {

	font-family: gloria-hallelujah;

	font-style: normal;

	font-weight: 400;

	font-size: 1.6em;

	min-width: 32%;

}



h4 {
	font-weight: normal;
	margin-bottom: -5px;
	margin-top: 22px;


}

/* Flex Elements */



#news, .flex-band-container, .flex-video-container {

		display: flex;

		display: -webkit-flex;

}
/* logo */





.slider  {

	background-position: center 12%;

	background-size: 85% auto;

	z-index: -4;

	background-repeat: no-repeat;

	/* [disabled]background-clip: border-box; */

	background-attachment: fixed;

	width: 100%;

	background-origin: border-box;

	position: fixed;

	left: 0px;

	right: 0px;

	top: 0px;

	bottom: 0px;

	align-content: center;

	height: 80vh;

	margin-left: auto;

	margin-right: auto;

	margin-top: 0px;

	padding-bottom: 5%;

}

/* logo */





.slider  {

	background-image: url(/assets/Artboard%202.svg);

}





#home {

	width: 9%;

	height: 60px;

	background-position: left top;

	position: fixed;

	left: 0px;

	z-index: 0;

}





/*Header */



header {

	height: 10vh;

	width: 100%;

	position: fixed;

	top: 0;

	right: 0;

	left: 0;

	z-index: 41;

	}



header .social-media {

	float: right;

	z-index: 10;

}



header .social-media a  {

	color: #FFFFFF;

	opacity: 0.75;

	display: inline-block;

	height: 42px;

}

header .social-media a:hover   {

	opacity: 1;

}



.social-media ul li {

	display: inline-block;

}



header nav ul {

	list-style-type: none;

	margin-left: 0px;

	float: none;

	font-size: 1em;

	text-align: left;

	padding-left: 0px;

	padding-top: 0px;

}



nav ul a:hover   {

	color: #FFFF00;

	background-color: #3E4F6A;

}

nav ul a   {

	color: #FFFFFF;

	line-height: 3em;

	padding-left: 9px;

	padding-right: 9px;

	padding-bottom: 0px;

	text-decoration: none;

	display: block;

	border-left: 3px outset #282828;

	border-right: 3px inset #282828;

	border-bottom: 3px inset #282828;

	background-image: -webkit-linear-gradient(270deg,rgba(43,52,62,0.91) 0%,rgba(46,52,58,0.82) 49.74%,rgba(49,52,55,0.70) 98.96%);

	background-image: -moz-linear-gradient(270deg,rgba(43,52,62,0.91) 0%,rgba(46,52,58,0.82) 49.74%,rgba(49,52,55,0.70) 98.96%);

	background-image: -o-linear-gradient(270deg,rgba(43,52,62,0.91) 0%,rgba(46,52,58,0.82) 49.74%,rgba(49,52,55,0.70) 98.96%);

	background-image: linear-gradient(180deg,rgba(43,52,62,0.91) 0%,rgba(46,52,58,0.82) 49.74%,rgba(49,52,55,0.70) 98.96%);

	-webkit-box-shadow: 2px 0.5px 3px 1px hsla(67,4%,47%,0.35);

	box-shadow: 2px 0.5px 3px 1px hsla(67,4%,47%,0.35);

	margin-right: -0.1em;

	margin-left: 0.1em;

	border-top-style: inset;

	height: 3em;

	vertical-align: middle;

}

nav  {

	float: left;

	z-index: 10;

	margin-top: 5vh;

	height: auto;

}



/*News */



#news {

	overflow-y: hidden;

	margin-left: 15%;

	justify-content: space-between;

	padding-bottom: 25px;

	min-height: 20vh;

	-webkit-justify-content: space-between;

	margin-right: 15%;

}



#news h3 {

	color: #C1EC1E;

	font-family: gloria-hallelujah;

	font-style: normal;

	font-weight: 400;

	font-size: 1.4em;

	line-height: 2em;

	margin-bottom: 4px;

}



#news a {

	color: rgba(63,109,155,1.00);

	text-decoration: underline;

}



#news a:hover  {

	text-decoration: underline;

	color: #c1ec1e;

}





.content {

	height: auto;

	background-color: hsla(0,0%,15%,0.90);

	text-align: left;

	margin-left: 0px;

	margin-right: 0px;

	position: static;

	width: 100%;

	margin-top: 80vh;

	}



/* Music */



#music {

	background-image: -webkit-linear-gradient(270deg,rgba(57,63,75,1.00) 10.88%,rgba(6,10,14,1.00) 61.66%,rgba(0,0,0,1.00) 99.49%);

	background-image: -moz-linear-gradient(270deg,rgba(57,63,75,1.00) 10.88%,rgba(6,10,14,1.00) 61.66%,rgba(0,0,0,1.00) 99.49%);

	background-image: -o-linear-gradient(270deg,rgba(57,63,75,1.00) 10.88%,rgba(6,10,14,1.00) 61.66%,rgba(0,0,0,1.00) 99.49%);

	background-image: linear-gradient(180deg,rgba(57,63,75,1.00) 10.88%,rgba(6,10,14,1.00) 61.66%,rgba(0,0,0,1.00) 99.49%);

	z-index: 3;

	width: 100%;

}

	

.player  {

	margin-left: 15%;

	margin-right: auto;

	border-color: #000000;

	padding-bottom: 20px;

	margin-top: 9vh;

	display: block;

	max-width: 800px;

	width: 70%;

	height: auto;

}





/* Shows */



.showsLayer2 {

	background-image: url(assets/band2BW.jpg);

	background-size: cover;

	opacity: 1;

	z-index: 3;

	background-repeat: no-repeat;

	background-position: left top;

	height: auto;

	background-origin: border-box;

	background-clip: border-box;

	background-color: #000000;

	overflow-y: auto;

	min-height: 100vh;

}



.gigs {
	background-color: hsla(0,0%,15%,0.90);
	margin-top: 23vh;
	border-radius: 8px;
	border: medium groove rgba(118,118,118,1.00);
	text-align: left;
	margin-right: auto;
	width: 70%;
	margin-left: auto;
	max-width: 800px;
	margin-bottom: 1em;
	padding-bottom: 1em;
	padding-left: 0px;

}



.show {

	display: flex;

	justify-content: space-between;

	align-content: center;	

	height: auto;

	padding-top: 10px;

	padding-left: 10px;

    }

#shows .date {

	font-family: gloria-hallelujah;

	font-style: normal;

	font-weight: 400;



























	font-size: 1.em;

	line-height: 28px;

	color: #C1EC1E;

	flex: 1 1 193;

}

.date  {









	font-size: 1.em;
	flex: 1 1 200px;

}

.club, .city  {
	flex: 1 1 100px;

}
.cover  {
	flex: 1 88px;

}











/* Band */



#band {

	width: 100%;

	background-color: hsla(0,0%,0%,1.00);

	

}

.flex-band-container  {

	overflow-y: visible;

	width: 70%;

	max-width: 899px;

	height: auto;

	min-height: 80vh;

	margin-left: auto;

	margin-right: auto;

	padding-right: 0px;

	padding-bottom: 12px;

	flex-flow: row wrap;

	-webkit-flex-flow: row wrap;

	justify-content: space-around;

	-webkit-justify-content: space-around;

	align-content: space-around;

	-webkit-align-content: space-around;

}



.bio  {

	line-height: 1.15em;

	white-space: normal;

	text-align: left;

	margin-bottom: 8px;

	flex: 1 1 300px;

	-webkit-flex: 1 1 300px;

}



.bio li {

	list-style-type: square;

	list-style-position: outside;

}



.pic2 {

	background-size: cover;

	background-image: url(assets/band1BW.jpg);

	background-position: right top;

	display: none;

}



.bio-pic {
	visibility: visible;
	background-image: url(assets/bandBio.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 28%;
	background-clip: padding-box;
	background-origin: padding-box;
	opacity: 0.85;
	min-height: 300px;
	flex: 2 1 100%;
	-webkit-flex: 2 1 100%;
	order: 1;
	-webkit-order: 1;
	margin-top: 1em;
	margin-bottom: 1em;

}

.mariah {

	order: 2;

	-webkit-order: 2;

}	



.marcus {

	order: 3;

	-webkit-order: 3;

}

.kyle {

	order: 4;

	-webkit-order: 4;

}

.caleb {

	order: 5;

	-webkit-order: 5;

}





/*Videos */



.flex-video-container  {

	width: 78%;

	height: auto;

	min-height: 80vh;

	flex-flow: row wrap;

	-webkit-flex-flow: row wrap;

	justify-content: center;

	-webkit-justify-content: center;

	

	align-content: center;

	-webkit-align-content: center;

	max-width: 899px;

	padding-bottom: 12px;

	margin-left: auto;

	margin-right: auto;

	

	

}

#videos {

	background-position: 14% 18%;

	background-size: 262px auto;

	background-repeat: no-repeat;

}



/*Contact */



#contact {

	margin-left: auto;

	margin-right: auto;

	width: 100%;

	text-align: center;

	padding-top: 5vh;

	height: 82vh;

}



.email {

	font-size: 1.1em;

	text-align: left;

}

.email a {

	text-decoration: none;

	color: #C1EC1E;

	float: left;

}

.email a:hover {

	border-bottom: 1px solid #C1EC1E;

}





/* Footer */



footer {

	height: auto;

	padding-top: 14px;

	padding-bottom: 40px;

	min-height: 18vh;

	width: 100%;

	background-color: #363636;

	display: flex;

	flex-flow: row wrap;

	-webkit-flex-flow: row wrap;

	align-items: center;

	-webkit-align-items: center;

	justify-content: center;

	-webkit-justify-content: center;

		}



.footer-credits  ,   .footer-social-media  {

	line-height: 6px;

	font-size: 12px;

	width: 250px;

	height: 60px;

	padding-top: 8px;

	padding-bottom: 4px;

}



.text {

	margin-left: 5%;

}

.facebook {

	width: 200px;

	height: 20px;

	margin-bottom: 12px;

	padding-top: 2px;

	margin-top: 0px;

}



button:hover {

	-webkit-box-shadow: 0px 0px 0px 1px rgba(215,228,74,1.00);

	box-shadow: 0px 0px 0px 1px rgba(215,228,74,1.00);

	background-color: rgba(134,134,134,1.00);

}



.band {

	flex: 1 1 auto;

	padding-bottom: 8px;

	display: flex;

	align-items: center;

	-webkit-flex: 1 1 auto;

	-webkit-align-items: center;

}



.left {

	padding-right: 8px;

	width: 100%;

}

button   {

	border-radius: 6px;

	border: thin solid rgba(47,47,47,1.00);

	min-width: 60px;

	height: 2em;

	margin-left: 10px;

	color: rgba(100,100,100,1.00);

	display: none;

}



.right {

	padding-left: 11px;

	width: 100%;

}

.last-spacer {

	border-bottom-color: #D7EB0B;

	border-bottom-style: none;

	padding-top: 1em;

	padding-bottom: 1em;

	border-top-style: double;

	margin-top: 1em;

}

#videos iframe  , .video3{

	width: 426px;

	height: 240px;

	border: 5px outset hsla(255,29%,3%,1.00);

	-webkit-box-shadow: 0px 5px 9px 1px hsla(0,1%,14%,0.87);

	box-shadow: 0px 5px 9px 1px hsla(0,1%,14%,0.87);

	margin-right: 9px;

	margin-top: 6px;

}

.video3 {

	background-image: url(Assets/You%20Tube3.svg);

	background-repeat: no-repeat;

	background-size: cover;

	background-position: 0% 0%;

	background-color: rgba(255,211,78,1.00);

	width: 426px;

	height: 239px;

}

.maps a {

	color: rgba(91,132,213,1.00);

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-size: small;

}

.maps:hover {

	background-color: #E9E9E9;

	-webkit-box-shadow: 0px 0px 0px 1px #D7E44A;

	box-shadow: 0px 0px 0px 1px #D7E44A;

	margin-left: 8px;

}
.oldGigs .show {
	padding-top: 0px;
}
#shows .oldGigs .date {
	color: #FFFFFF;
}
#shows .newGigs     {
	color: #C1EC1E;
}

































@media screen and (max-width:1045px)

{



/* Shows Medium */



.showsLayer2 {

	width: 100%;

	background-size: 80% auto;

	background-position: 75% 26%;

}

.gigs {

	margin-left: 15%;

	width: 80%;

}

.flex-video-container {

	margin-left: auto;

	margin-right: auto;

	width: 70%;

}

.bio-pic {
	visibility: visible;
	background-image: url(assets/bandBio.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 14%;
	background-clip: padding-box;
	background-origin: padding-box;
	opacity: 0.85;
	min-height: 220px;
	flex: 2 1 100%;
	-webkit-flex: 2 1 100%;
	order: 1;
	-webkit-order: 1;

}
.slider  {

	height: 80vh;

	opacity: 1;

	background-position: center 25%;

	background-size: 80% 76%;



}



















}



/* Small Styles */



@media screen and (max-width:767px)

     { 



.content {

	margin-top: 10vh;

}



h1 {

	font-size: 3em;

	margin-left: auto;

}



h2 {

	font-size:1.4em; 

}



nav {

	

	display: none;

}
.slider  {

	background-attachment: scroll;

	position: static;

	height: 55vh;

	opacity: 1;

	background-position: center 50%;

}



#news {

	flex-flow: column;

	min-height: 35vh;

	margin-bottom: 13px;

	width: 90%;

	justify-content: center;

	-webkit-justify-content: center;

	-webkit-flex-flow: column;

}

h1, .player, .gigs  , .email      , #news , .flex-video-container{

	margin-left: 5%;

}

.showsLayer2 {

	background-size: 90% auto;

	background-position: 49% 26%;

	margin-left: 0%;

}



/* makes club name go on 2 lines */

.club { flex: 1 1 100px;

}

.player, .gigs {

	width: 90%;

}

.flex-video-container {

	width: 90%;

	margin-left: auto;

	margin-right: auto;

}







}





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



.showsLayer2 {

	background-image: none;

	}



.content {

	margin-top: 0vh;

	}

.gigs {

	background-color: hsla(0,0%,14%,0.40);

	margin-top: 2vh;

}
.show  {
	flex-direction: column;
	flex: 1 1 50px;

}



#videos iframe {

	width: 350px;

	height: 200px;

}

.bio-pic {
	visibility: visible;
	background-image: url(assets/bandBio.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	background-clip: padding-box;
	background-origin: padding-box;
	opacity: 0.85;
	min-height: 125px;
	flex: 2 1 100%;
	-webkit-flex: 2 1 100%;
	order: 1;
	-webkit-order: 1;

}
.cover {
	flex: 1 1 1em;
}
.newGigs .cover  {
	margin-bottom: 9px;

}
h4 {

}














}



@media screen and (orientation:landscape) and (max-width:767px){



#news {

	height: 100vh;

}
.slider  {

	height: 100vh;

}

}





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

.slider {

	height: 65vh;

}



}





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

#news {

	height: 50vh;

}
.slider  {

	height: 50vh;

	opacity: 1;

}

.flex-band-container , .flex-video-container{

	width: auto;

	margin-left: 5%;

}

#videos iframe {

	width: 300px;

	height: 169px;

}





}



.show {

	display: flex;

	justify-content: space-between;

	align-content: center;

	padding-top: 10px;

	padding-left: 10px;

    }


.club, .city  { 

	flex: 1 1 160px;

}



@media (max-width:1275px){

.slider {

	background-size: 95% auto;

}









}



@media (max-width:1690px){

.slider {

	background-size: 85% auto;

}





}