/** 
Styles for BandGallery Directive
Created by Daniel Eckelt
Date: 12.September 2014;
**/


/* ________BAND________ */
.band {
	position: relative;
	background-attachment: fixed;
	-webkit-background-attachment: fixed;
	-moz-background-attachment: fixed;
	background-color: black;
	/*background-position: center center;*/
        background-position: top center;
	-webkit-background-size: cover;
	background-size: cover;
	box-shadow: 0 0 10px rgba(0,0,0,.25) inset;
	text-align: center;
	overflow: hidden;
}

h1.band-heading {
	color: #f7f9e0;
	text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
	font: 300 100%/1.5 "Open Sans", "Helvetica",sans-serif;
	font-size: 30pt;
	margin: 0;
	padding-top: 5em;
}

p.band-description {
	color: #e6e8e8;
	text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
	font: "Open Sans", "Helvetica",sans-serif;
	margin-top: 10px;
	margin-bottom: 10px;
}


/* ________OVERLAY________ */
.overlayBtn {
	position: absolute;

	-moz-box-shadow: 2px -1px 6px 0px rgba(20,20,20,0.5);
	-webkit-box-shadow: 2px -1px 6px 0px rgba(20,20,20,0.5);
	box-shadow: 2px -1px 6px 0px rgba(20,20,20,0.5);
	background-color:transparent;

	-webkit-border-top-right-radius:42px;
	-webkit-border-top-left-radius:42px;
	border-top-right-radius:42px;
	border-top-left-radius:42px;

	-webkit-border-bottom-left-radius:42px;
	-webkit-border-bottom-right-radius:42px;
	border-bottom-right-radius:42px;
	border-bottom-left-radius:42px;

	-moz-border-radius-topright:42px;
	-moz-border-radius-topleft:42px;
	-moz-border-radius-bottomright:42px;
	-moz-border-radius-bottomleft:42px;
	text-indent:0px;
	border:2px solid #dcdcdc;
	display:inline-block;
	color: #eff2e5;
	font-family:Arial;
	font-size:15px;
	font-style:normal;
	height:46px;
	line-height:40px;
	width:60px;
	text-decoration:none;
	text-align:center;
	text-shadow: 2px -1px 4px #1b1a1c;
	transition: all 0.25s;
}

.overlayBtn.prevBtn {
	top: 14px;
	right: 8px;
	-moz-transform: rotate(270deg) scale(0.8);
	-ms-transform: rotate(270deg) scale(0.8);
	-o-transform: rotate(270deg) scale(0.8);
	-webkit-transform: rotate(270deg) scale(0.8);
	transform: rotate(270deg) scale(0.8);
} 

.overlayBtn.nextBtn {
	bottom: 14px;
	right: 8px;
	-moz-transform: rotate(90deg) scale(0.8);
	-ms-transform: rotate(90deg) scale(0.8);
	-o-transform: rotate(90deg) scale(0.8);
	-webkit-transform: rotate(90deg) scale(0.8);
	transform: rotate(90deg) scale(0.8);
}

.goTopBtn {
	bottom: -20px;
	right: 0;
	-moz-transform: rotate(270deg) scale(0.8);
	-ms-transform: rotate(270deg) scale(0.8);
	-o-transform: rotate(270deg) scale(0.8);
	-webkit-transform: rotate(270deg) scale(0.8);
	transform: rotate(270deg) scale(0.8);
	background-color: rgba(71, 70, 70, 0.8);
	font-weight: bold;
	height:74px;
	line-height:40px;
	width:94px;
}

.overlayBtn:hover {
	-moz-box-shadow: 2px -1px 30px 0px rgba(20,20,20,0.6);
	-webkit-box-shadow: 2px -1px 30px -5px rgba(20,20,20,0.6);
	box-shadow: 2px -1px 30px 0px rgba(20,20,20,0.6);
	text-shadow: 0px 0px 4px rgba(200,200,200,0.8);
	background-color: rgba(255, 255, 255, 0.1);
}

.overlayBtn:focus {
	outline: none;
}

.goTopBtn:hover {
	bottom: 5px;
	color: rgba(133, 133, 133, 0.8);
}

.pageNr {
	font-size: 1.5em;
	color: white;
	opacity: 0.25;
	text-shadow: 2px 2px 2px black;
	position: absolute;
	bottom: 0.25em;
	left: 0.75em;
}


/* ________RESPONSIVE_DESIGN________ */
@media (max-width: 640px) {
	h1.band-heading, p.band-description {
		padding-top: 2em;
		margin: 0;
	}
}