/* styles.css */

/* S.Rankin Mar 18 2019 */
/* ***************************************************** */
/* layout */
/* @viewport {width: 980px;} */

#conductor, #newDirector {display:none;}

*{box-sizing:border-box;}
body {
	width:980px;
	overflow-x: hidden;
	padding:0px;
	margin: 0px auto;
	/* background-image: url("../images/beethoven_ms.jpg"); */
	background-color: rgb(20,20,20);
}
/* ***************************************************** */
header {
	position:fixed;
	top:0;
	width:inherit;
	z-index: 98;
	background-color: black; /* change to match banner color */
	/* change height to percentage so that banner shrinks on smaller screens, */
	/* exposing background-color */
}
#header-image {
	display: block;
	width:inherit; /* ! */
	margin:0px auto;
}
/* ***************************************************** */
nav {
	display:flex;
	flex-direction: row;
	justify-content:space-around;
	background-color: #531282;
	position: fixed;
	top:196px;
	height:40px;
	width:inherit;
	color:white;
	z-index: 99;
}
span#info{
	font-weight: 900;
	font-size: 15pt;
}
/* ***************************************************** */
div.content {
	display: block;
	position:relative;
	top:235px;
	left:0px;
	height:100%;
	width:inherit;
 	overflow:hidden;
	margin:0px;
	padding:0px;
	background-color: aquamarine;
	z-index: 97;
}
#home{ /* div.content on home page */
	height: 1387px;
	background-color: black;
}
#next-event-img{
	width:inherit;
}
#next-concert{
  background-color: white;
  color: blue;
  display: block;
  filter: drop-shadow(5px 5px 5px #222);
  font-family: sans-serif;
  font-size: 53pt;
  font-weight: bold;
  margin: 0 auto;
  position: fixed;
  text-align: center;
  top: 410px;
  transform: rotate(-20deg);
  width: 980px;
  z-index: 200;
}
}
#about{ /* div.content on about page */
	/* height: 1150px; */
}
#buy-tickets {
	top: 234px;
	overflow: hidden;
/* 	height: 1510px; */
	background-color:white;
}
#trybooking{
	position: relative;
	top: -121px;
	width: inherit;
	height: 3000px;
	overflow-y: hidden;
	background-color: white;
/* color #feb400 matches buttons in #trybooking content */
	margin: 0px;
}
.about-image {
	width:300px;
}
.about-image-wrapper {
	float: right;
	margin-top: 50px;
	margin-left: 15px;
/* 	color:white; */
/* 	background-color: black; */
}
figure {
	display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 20px;
margin-inline-end: 0px;
}
figcaption{
	text-align: center;
}
.gallery-image {
	height: 160px;
	width:initial;
	padding:3px 1px;
}
.about-content {
	padding: 0px 20px;
	background-color: initial;
}
#gallery {
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
	padding:5px;
	background-color: black;
}
.justify-right {
	text-align:right;
	padding-right: 10px;
}
/* ***************************************************** */
a {
	color:white;
	font-size: 24px;
	font-weight: bold;
	text-decoration: none;
}
hr{
	width: 90%;
}
/* ***************************************************** */
footer.page-footer{
	margin-top: 10px;
	text-align: center;
	padding-bottom: 10px;
}
#home-page-footer{
	display: block;
	position: relative;
	top: 190px;
	z-index: 101;
}
#about-footer{
	display: block;
	z-index: 101;
}
#buy-footer{
	display: block;
/* 	position: relative; */
/* 	top: -1540px; */
	z-index: 101;
}
#gallery-footer{
	width: 50%;
	color: white;
	text-align: center;
	margin: auto;
}
#contact-footer{
	display: block;
	position: relative;
	top: 185px;
	z-index: 101;
}
/* ***************************************************** */
/* Concert closed */

#june-30{ /* home-page-overprint */
	display: block;
	width: 90%;
	margin: 0px auto;
	position: relative;
	top: -897px;
	transform: rotate(-20deg);
	filter: drop-shadow(5px 5px 5px #222);
}
/*
What is Specificity?
* If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.
* Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element.
* The universal selector (*) has low specificity, while ID selectors are highly specific!
* Every selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector:
* Inline styles - An inline style is attached directly to the element to be styled. Example: <h1 style="color: #ffffff;">.
* IDs - An ID is a unique identifier for the page elements, such as #navbar.
* Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
* Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.

How to Calculate Specificity?
Memorize how to calculate specificity!

Start at 0,
add 1000 for style attribute,
add 100 for each ID,
add 10 for each attribute, class or pseudo-class,
add 1 for each element name or pseudo-element.
*/