H1, H2 {
    text-transform: capitalize;
}

.pad10 { margin-bottom: 10px; } /* adds 10px padding between rows with div class 'row bottom10' */
.pad30 { margin-bottom: 30px; } /* adds 30px padding between rows with div class 'row bottom30' */

img {
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=3, OffY=3,
  Color='#444')";
  filter: url(#drop-shadow);
  -webkit-filter: drop-shadow(3px 3px 3px rgba(68,68,68, 1));
  filter: drop-shadow(3px 3px 3px rgba(68,68,68, 1));
}

.album-header { 
box-shadow: inset  0 -5px 10px  rgba(0,0,0,0.3); /* option for inner shadow*/
filter:  drop-shadow(0px 5px 10px  rgba(120,120,120,0.9)); } /* gives slight shadow between top pg image and content */
  
.modal-header, .modal-body {color: black}

img.modalimg {
	width: 144px;
	float: right;
	clear: right; 
    margin: 2px;
}

img.smartphoneimg { width:108px; padding: 2px;}

.img-thumbnail { margin-bottom: 10px; } /*adds 10px margin below album covers in discography on tablets */

.img-responsive { min-width: 100%; } /* forces discography images to fill width */

p.clear {
    clear: both;
}

.small {font-variant-caps: small-caps;}
.allsmall {font-variant-caps: all-small-caps;}
.smallcaps {font-variant: small-caps;}

blockquote {
	font-size: 14px; border: none; margin:0;
} /*customized to match body size, remove border, reduce padding */

.tagline {
	text-align: right;
	position: relative;
	top: 275px;
} /* this moves the page title to the bottom right of the top image */

.date,
.year {
  font-family: Oswald;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

.date {
  font-size: 30px;
}

.year {
  font-size: 14px;
}

pre {
  color: inherit;
  background-color: transparent;
  border: 0px
} /* this makes tourdates background same color as page */

img.thumb { width:72px;float:left;
    margin-right: 10px;
	margin-bottom:4px;
}

img.floatLeft {
    float: left;
    margin: 2px;
}

img.floatLeftClear {
    float: left;
    clear: left; 
    margin: 2px;
}

img.floatRight {
    float: right; 
    margin: 2px;
}

img.floatRightClear {
    float: right;
    clear: right; 
    margin: 2px;
}

img.right144px { width:50%; max-width:144px; 
    float: right;
    clear: right; 
    margin: 5px;
}

img.right144pxnoclear { width:50%; max-width:144px; 
    float: right;
    margin: 5px;
}

img.left144px { width:50%; max-width:144px; 
    float: left; 
    margin: 5px;
}

img.magcov { width:50%; max-width:200px; 
    float: right;
    clear: right; 
    margin: 5px;
}

img.magcovleft { width:50%; max-width:200px; 
    float: left;
    clear: left; 
    margin: 5px;
}

img.magcovnoclear { width:50%; max-width:200px; 
    float: right;
    margin: 5px;
}

img.right300px { width:100%; max-width:410px; 
    float: right;
    clear: right; 
    margin: 5px; 
} /* this used to be max-width: 350px */

img.left300px { width:100%; max-width:410px; 
    float: left;
    clear: left; 
    margin: 5px;
	margin-right: 10px;
}

.coloredbox {border-style:outset;border-color:silver;border-width:2px; margin:5px; padding:5px;}

.embed-responsive {
    margin-bottom: 10px; /* my customization, adds gap between stacked youtube videos in album pages */
}

ul { /* removes indentation of unordered lists */
  padding-left: 1.2em; 
}

ol { /* lessens indentation of ordered lists */
  padding-left: 2em; 
}

.hovereffect {
width:100%;
height:auto;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
  box-shadow: 3px 3px 5px rgba(68,68,68, 1); /* my customization */
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}

.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
/*background:rgba(0,0,0,0.6);*/
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}

.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
font-size: 11px; /* added this myself to make 'button' text smaller */
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:10px 0 0; /*original setting was 50px but limited to only two lines of links */
padding:7px 14px;
}

.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}

.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}

.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}





 /* Style the tab */
div.tab {
    overflow: hidden;
    border: 0px solid #ccc; /* was 1px */
    background-color: rgba(192,192,192,0.0); /* was #f1f1f1; */
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: rgba(192,192,192,0.3); /* was inherit; */
    float: justify;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: rgba(192,192,192,0.5); /* was #ddd; */
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: rgba(192,192,192,0.8); /* #ccc; */
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 0px; /* was 6px 12px */
    border: 0px solid #ccc; /* was 1px */
    border-top: none;
}


/* make google custom search text black */
input.gsc-input {color:#000000;}