/*background image*/
#bg-img{
	display: block;
  	position: relative;
}

/*bg image layer to make it half transparent  */
#bg-img::after {
  content: "";
  background-image: url(../images/bg3.jpg);
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

/*###################################*/
/*mixed  formatting */
.centered{
	text-align: center;
}
.left{
	text-align: left;
}


h1 {
	font-size: 50px;
	font-weight: bold;
}
h2, h3, h4 {
	font-weight: bold;
}

a{
	color: black;

}
a:hover, a:focus{
	color: #E74C3C;
}

.page-title{
	color: #E74C3C;
}
/* img in grey boxes */
.img-section{
	max-width: 300px;
	max-height: 125px;
}

/*###################################*/
/*Navigation bar*/

band-nav .list-inline>li { /*make space between items */
	padding: 5px 10px;
}
 
band-nav .list-inline>li> a {
	font-size: large;
}

/*not sure why hover and focus don't work with the directive*/
#bandNav .list-inline>li>a:hover { /* red when hover */
  color: #E74C3C;
  
} 
#bandNav .list-inline>li>a:focus{ /* red when on that page.  */
	color: #E74C3C;
}

.red-text{
	color: #E74C3C;
} 

band-nav .list-inline .dropdown-menu{ /*  */
	background-color: #424949;
	
}
band-nav .list-inline .dropdown-menu>li>a{ /* red of the dropdown menu */
	color: #9d9d9d;
}

band-nav .list-inline .dropdown-menu>li>a:hover{ /* Highlight dropdown when hover */
	color: #E74C3C;
	background-color: #424949;
}

/*Doesn't work using directive instead of id*/
#bandNav .list-inline>.open>a,  /* first level stays red when opening dropdown */
#bandNav .list-inline>.open>a:focus, 
#bandNav .list-inline>.open>a:hover {
	color: #E74C3C;
}


band-nav .navbar-brand {
  padding: 0;
}
band-nav .navbar-brand>img { /* logo */
  height: 100%;
  padding: 1px; 
  margin-right: 100px;
  width: auto;
}

footer .list-inline>li, footer .list-inline>li>a{
	padding: 0;
	display: inline;
	color: #9d9d9d;
}

#copyright {
	padding-top: 10px;
}
/*###################################*/
/*social media buttons in navigation bar
Grey buy default. colored when hovering */
.socmed{
	padding: 10px 2px;
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray; /* IE 6-9 */
}

.socmed:hover{
	-webkit-filter: none;
   -moz-filter: none;
   -ms-filter: none;
   filter: none;
}


/*###################################*/
/*carousel home page*/

.carousel{
	padding-bottom: 20px;
	overflow:hidden;
	border-radius: 15px;
}

.carousel img{
	    margin-right: auto;
		margin-left: auto;
		width: 100%;
	    max-height: 400px;
	    opacity: 1;
	    border-radius: 5px

}
.carousel-caption{ /* Text centered in the slide */
	padding-bottom: 80px;
	text-shadow: 2px 2px #212121;

}
.carousel-control.left, .carousel-control.right { /* Remove grey area on the sides */
    background-image: none;
    opacity: 1;
}

/* Fade transition for carousel items */
.carousel-fade  .carousel-inner .item {
            transition-property: opacity;
        }
 .carousel-fade .carousel-inner .item,
 .carousel-fade .carousel-inner .active.left,
 .carousel-fade .carousel-inner.active.right {
            opacity: 0.3;
        }
.carousel-fade .carousel-inner .active, 
.carousel-fade .carousel-inner .next.left, 
.carousel-fade .carousel-inner .prev.right {
            opacity: 1;
        }
    
.carousel-fade .carousel-control {
        z-index: 2;
    }




/*###################################*/
/* Grey info boxes */
.box1 {
	background-color: #E5E7E9;
	border-radius: 10px;
	opacity: 0.9;
	padding: 10px;
	margin: 10px 5px;
	text-align: center;
	color: #000;
	box-shadow: 10px 10px 25px #888888;
}
.box3 {
	background-color: #E5E7E9;
	border-radius: 5px;
	opacity: 0.95;
	padding: 15px;
	margin: 10px 5px;
	color: #000;
	box-shadow: 10px 10px 25px #888888;

}

/*big img in page */
.img1{
	max-height: 250px; 
	border-radius: 5px;	
}

/* subscribe to newsletter call to action box*/
#newsletter {
	display: block;
    position: relative;
    
}
/*  */
#newsletter::after { /* layer to make it transparent */
	background-image: url(../images/email.png);
	background-repeat: no-repeat;
	background-position: right;
	content: "";
  	opacity: 0.3;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: -1;     
}


/* call to action box - red*/
.box2 {
	border-radius: 10px;
	border: 2px solid #E74C3C;
	opacity: 0.9;
	padding: 10px;
	margin: 10px 5px;
	text-align: left;
	color: #000;
	box-shadow: 10px 10px 5px #641E16;
	background-color: #F3EBEA;
}

.clear{
	clear: both;
}

/*###################################*/
/* All forms */
.form-control.ng-touched{
	border: 1px solid #3498DB;
}
.form-control.ng-invalid {
  border: 1px solid #cc0000;
}
.form-control.ng-valid {
  border: 1px solid #009933;
}
.form-control.ng-pristine{
border: 1px solid #ccc;
}

.error{
	color: #cc0000;
}

/* Form Contact Us */

#form-contactus-success, #form-bookus-success, #form-newsletter-success{
	color: #009933;
}

#form-contactus textarea, #form-bookus textarea{
      width: 300px;
      height: 200px;
      display: inline-block;

 }

#form-contactus input, #form-bookus input {
	width: 300px; 
	display: inline-block;
}

#form-contactus label, #form-bookus label{
	width: 100px;
	display: inline-block;
}	
#label-comments, #label-comments1{
	vertical-align: top;
	width: 200px;
}

#contactus h3{
	text-align: center;
}


/*newsletter form */
#form-newsletter input{
	width: 200px; 
	display: inline-block;
	
}
#form-newsletter label{
	width: 100px;
	display: inline-block;
}



/*###################################*/
/* Audio Player */
#tracklist{
	font-size: 20px;
	list-style: none;
}

#audio-player{
	text-align: left;
}

#video-player video{
	max-width: 500px;
}
#song-cover{
	float: right;
	max-height: 150px;
	max-width: 150px;
}

/*###################################*/
/*Map Contact Us */

.map-container {
    position: relative;
}
 
.zoom-controls {
    position: absolute;
    top: 1em;
    left: 0.6em;
}
 
.zoom-button {
    padding: 4px 8px;
    opacity: 0.8;
}

/*###################################*/
/*iTunes Seach section */

#itunes-search{
	border: 1px solid #E74C3C;
	/*border-radius: 10px;*/
	background-color: #e6e6e6;
	opacity: 0.9;
	padding: 10px;
	margin: 10px 5px;
	text-align: center;
	box-shadow: 10px 10px 25px #888888;
}

#itunes-header{
	font-size: 22px;
	font-weight: bold;
	text-decoration: underline;
	text-align: center;
	padding-bottom: 20px

}
#itunes-results td{
	padding: 5px;
	font-size: 16px;
}

@media screen and (max-width: 699px) and (min-width: 620px) {
    .itunes-search-img {
        width: 50%;
    }
    #itunes-results td{
		font-size: 14px;
	}
	#itunes-header{
		font-size: 18px;
	}

}

@media screen and (max-width: 999px) and (min-width: 691px) {
	band-nav .list-inline > li > a {
		font-size: medium;
	}
	.carousel-caption h1 {
		font-size: 35px;
	}
	.carousel-caption h2 {
		font-size: 20px;
	}


}

@media screen and (max-width: 690px) and (min-width: 550px) {
	.carousel-caption h1 {
		font-size: 25px;
	}
	.carousel-caption h2 {
		font-size: 15px;
	}
}
@media screen and (max-width: 549px) {
	.carousel-caption h1 {
		font-size: 15px;
	}

	.carousel-caption h2 {
		font-size: 10px;
	}
}