@font-face {
    font-family: BrokenGround;
    src: url('fonts/electric-boots.regular.ttf');
}
*{
	box-sizing:border-box;
	font-family: 'Source Sans Pro';
	color: white;
	line-height: 1;
}
body{
	background: #dddddd;
	margin: 0px;
	font-weight: 400;
}
header{
	height: 400px;
	border-bottom: 1px solid #888888;
	box-shadow: 0px 1px 3px #888888;
	position: relative;
	overflow: hidden;
}
.banner{
	position: absolute;
	height: 100%;
	width: 100%;
	transition: all .5s;
	left: 100%;
	background-size: cover;
}
#banner1{
	background-image: url('../images/banner1.jpg');
	background-position: 0% 45%;
	left: 0%;
}
#banner2{
	background-image: url('../images/banner2.jpg');
	background-position: 0% 25%;
}
#banner3{
	background-image: url('../images/banner3.jpg');
	background-position: 0% 55%;
}
#banner4{
	background-image: url('../images/banner4.jpg');
	background-position: 0% 35%;
}
#banner5{
	background-image: url('../images/banner5.jpg');
	background-position: 0% 30%;
}
#banner6{
	background-image: url('../images/banner6.jpg');
	background-position: 0% 30%;
}
#banner7{
	background-image: url('../images/banner7.jpg');
	background-position: 0% 35%;
}
#banner8{
	background-image: url('../images/banner8.jpg');
	background-position: 0% 40%;
}
#banner9{
	background-image: url('../images/banner9.jpg');
	background-position: 0% 55%;
}
.arrow-control{
	width: 50px;
	height: 50px;
	background: white;
	border-radius: 25px;
	margin: 0px 15px;
	z-index: 10;
	position: relative;
	top: 33%;
	opacity: 0;
	transition: opacity .3s;
	cursor: pointer;
}
.arrow-control:hover{
	background: #222222;
}
.arrow-control:hover .arrow{
	border-color: white;
}
header:hover .arrow-control{
	opacity: .7;
}
.arrow{
	width: 20px;
	height: 20px;
	border-left: 7px solid #606060;
	border-bottom: 7px solid #606060;
}
#arrow-left{
	transform: rotate(45deg);
	margin: 15px 17.5px;
}
#arrow-right{
	transform: rotate(225deg);
		margin: 15px 12.5px;
}
#dots{
	position: absolute;
	bottom: 0px;
	opacity: .9;
	transition: opacity .3s;
}
.dot{
	height: 12px;
	width: 12px;
	background: rgba(255,255,255,.7);
	border-radius: 10px;
	margin: 0px 3px 10px 3px;
	display: inline-block;
}
.featured-dot{
	background: rgb(100,180,255);
}
main{
	padding: 14px 7px 7px 7px;
	overflow: hidden;
}
h1{
	margin: 0px 0px 20px 0px;
	padding: 0px 20px;
	background: #222222;
	font-size: 24px;
	z-index: 2;
	position: relative;
	display: inline-block;
	font-weight: 400;
}
h2{
	margin: 10px;
	font-size: 18px;
}
p{
	margin: 0px;
	padding: 10px 0px;
}
a{
	color: rgb(80,180,255);
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
button{
	border:none;
	background: rgb(80,180,255);
	color: white;
	border-radius: 4px;
	font-size: 16px;
	width: 50%;
	min-width: 200px;
	padding: 10px;
	cursor: pointer;
	margin: 20px auto 0px auto;
	display: block;
}
button:hover{
	color: #222222;
}
img{
	vertical-align: middle;
}
.center{
	text-align: center;
}
.left{
float: left;
}
.right{
float: right;
}
.hidden{
display:none;
}
.w100{
	width: 100%;
}
.w50{
width: 50%;
}
.w33{
width: 33.333%;
}
#title {
	background: rgba(0,0,0,.75);
	padding: 10px;
	box-shadow: 0px 2px 5px black;
	position: relative;
	z-index: 10;
}
#title img{
	height: 40px;
	margin: 5px 25px;
}
.column{
	float: left;
	padding: 0px 7px;
}
.widget{
	background: #222222;
	padding: 15px 0px;
	border-radius: 8px;
	box-shadow: 1px 1px 3px #444444;
	position: relative;
	margin-bottom: 14px;
}
.line-mask{
background: linear-gradient(to right, #222222 5%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 85%, #222222 95%);
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 20px
}
.line{
	border-top: 1.5px solid white;
	position: relative;
	top: 13px;
	z-index: 1;
}
.widget-body{
	padding: 0px 25px;
}
#gigs, #music{
	height: 500px;
}
#merch{
	height: 353px;
}
#shows{
	height: 350px;
	overflow-y: scroll;
}
.show{
	padding-bottom: 15px;
}
.date{
	float: left;
	font-weight: 600;
	width: 38px;
	text-align: center;
}
.month{
	background: #cc0000;
	padding: 2px 0px;
	font-size: 12px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	box-shadow: 0px 1px 2px #444444;
	position: relative;
	z-index: 2;
}
.day{
	background: white;
	color: #444444;
	font-size: 20px;
	padding: 2px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}
.show-details{
	margin-left: 50px;
	padding-bottom: 2px;
}
.show-details div{
	padding-bottom: 1px;
}
.show-details a{
	font-size: 18px;
}
.divider{
	border-left: 1px solid #888888;
	height: 16px;
	display: inline-block;
	margin: 0px 10px 0px 15px;
	position: relative;
	top: 3px;
}
.past{
display:none;
}
#album-art{
	width: 100%;
	max-width: 300px;
  border: 2px solid white;
	border-radius: 10px;
}
#music a img{
	margin: 3px;
	border-radius: 8px;
	width: 34px;
	box-shadow: 1px 1px 3px #444444;
}
#music a:hover{
	text-decoration: none;
}
#merch img{
	width: 100%;
	max-width: 220px;
}
#footer p{
	color: #222222;
}
.gold{
	color: rgb(255,180,100);
}
#facebook{
	width: 20px;
	height: 20px;
	background-image: url('../images/facebook.png');
	background-size: cover;
	display: inline-block;
	margin-left: 5px;
	position: relative;
	top: 5px;
}
#facebook:hover{
	background-image: url('../images/facebook_blue.png');
}
.ui-loader{
	display:none;
}
@media screen and (max-width: 980px) {
  header {
		height: 300px
  }
	.w33{
    width: 100%;
  }
	main, .column{
		padding: 0px;
	}
	.widget{
		height: auto !important;
		margin: 0px;
		border-radius: 0px;
		border-bottom: 5px solid #606060;
	}
	#title img{
		height: 25px;
		margin: 5px 20px;
	}
	header:hover .arrow-control{
		opacity: 0;
	}
	.dot{
		width: 7px;
		height: 7px;
	}
	#shows{
		height: auto;
	}
	#footer{
		background: #222222;
	}
	#footer p{
		color: white;
	}
}
@media screen and (max-width: 525px) {
	header {
		height: 200px
  }
	#title img{
		height: 15px;
		margin: 5px 10px;
	}
}