/*Site styles: Organized from most common to most specific
Setting defaults for every page */
html {

}
body {
	margin: auto;
	padding: 0px;
	font-family: Arial, Helvetica, sans serif;
	font-size: .8em;
	background-color: #3A466E;
}

/*  GOOGLE FONT FOR NAV & HEADINGS  */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: bold;
  font-weight: 700;
  src: url('fonts/PTSansNarrow-Bold.ttf');
  src: local(''),
       url('../fonts/PTSansNarrow-Bold.ttf') format('truetype')
}

a {
	color: unset;
}

h1, h2, h3 {
	font-family: 'PT Sans Narrow', sans serif;
	font-weight: 900;
	margin: auto;
	line-height: 1.1em;
	 word-wrap:nowrap;
}
h1 {
	font-size: 3em;
}
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1em;
}
p {
	margin: auto;
}
hr {
	width: 85%;
	height: 3px;
	margin: 2vh auto;
	text-align: center;
}

.extralarge	{
	font-size: 30px;
	margin: 20px 0px 10px 0px;
}
.pink {
	color:#eb268f;
}
.orange {
	color:#f16625;
}
.center {
	text-align:center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.float-left {
	float:left;
}
.float-right {
	float:right;
}

/*  CONTAINER STYLES  */
.container {
	width: 99vw;
	height: auto;
	margin: auto;
}

#mainstage {
	width: 85vw;
	margin: auto 5vw;
	padding: 1vh 2.5vw;
}

/*  NAVIGATION  */
#navmenu {
	position: relative;
	width:100vw;
	height:40vh;
	background: url(assets/new_coverimage.jpg); 
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* Button styles */
.navbutton {
	display: inline-block;
	width: 48vw;
	height: 20vh;
	padding: 0px;
	margin: 0;
	text-shadow: 5px 7px #000;
}
#navhome:hover {
	background-color: rgba(235,0,141,.5);
}
#navreviews:hover {
	background-color: rgba(121,7,207,.5);
}
#navtheband:hover {
	background-color: rgba(255,128,0,.5);
}
#navcontact:hover {
	background-color: rgba(0,174,240,.5);
}

.navtext {
	font-family: 'PT Sans Narrow', sans serif;
	font-weight: 700;
	font-size: 7vw;
	color: #fff;
  white-space: nowrap;
	display: inline-block;
	margin: auto;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
}

#navlogo {
	width: 30vw;
	height: 40vh;
	position: absolute;
	margin: auto 35vw;
	padding: 0px;
	text-align: center;
}

#mbkbLogo {
	display: inline-block;
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20vw;
}
#navhome, #navtheband {
	float: left;
}
#navreviews, #navcontact {
	float: right;
}

/*  FOOTER  */
footer {
	width: 95vw;
	height: 6vh;
	margin: auto;
	padding: 0px 2.5vw;
	background-color:#AC0055;
	line-height: 25px;
	text-align: center;
	vertical-align: middle;
}
#footer-gigmasters {
	margin:10px auto 10px 20px;
	display:block;
	float:left;
	height:auto;
	width:150px;
}
.footer-social {
	float:right;
	display:block;
	width:30px;
	margin:10px 20px 10px auto;
}

/* STYLING FOR ALL COLLAPSIBLE ITEMS */
.wrap-collapsible {
  background:#fff;
  padding:16px 20px;
  border:1px solid #666;
  border-bottom:0px;
  border-radius:15px 15px 0px 0px;
}
.wrap-collapsible label {
  color: #000;
  font-size: 1.5em;
}
input[type='checkbox'] {
  display: none;
}

.lbl-toggle:hover {
  color: #EB268F;
}
.lbl-toggle::after {
  content: ' ';
  display: inline-block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid currentColor;
  vertical-align: middle;
  margin:0px 6px 0px 6px;
  transform: translateY(-2px);
  transition: transform .2s ease-out;
}
.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}
.collapsible-content {
  max-height: 0px;
  margin-bottom:0px;
  padding-bottom:0px;
  overflow-y: scroll;
  overflow-x:hidden;
  transition: max-height .25s ease-in-out;
}
.collapsible-content li {
  padding:10px;
  border-bottom:2px solid #aaa;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  clear:both;
  max-height:600px;
  margin-bottom:-16px;
}

.toggle:checked + .lbl-toggle {
}

.collapsible-content .content-inner {
  background:#fff;
}
.content-inner p {
	margin:0px;
}
.content-inner li {
	text-align:left;
}

/*  PLAYLISTS STYLES  */
.playlist {
	height:100%;
	background:#000033;
}
#playlist-wrapper {
  background-color:#fff;
  border-radius:7.5px;
  margin: 1vw auto 0px auto;
  padding: 1vh;
}
#playlist-wrapper table {
  width:100%;
  height:auto;
 	padding: 1vw;
}
#playlist-wrapper td {
  border-radius:15px;
  margin: 1vh auto;
}

#playlist-wrapper ul {
  list-style-type:none;
  margin-left:-40px;
}
#playlist-wrapper p {
	margin: .5vh auto;
}
.playlist .lbl-toggle {
  display:block;
  background-color:#fff;
  height:30px;
  margin:0px auto 0px auto;
  padding:6px;
  border-width:2px solid #bbb;
  font-weight: bolder;
  font-family: inherit;
  font-size: inherit;
  text-align: inherit;
  line-height:30px;
  text-align:center;
  vertical-align:middle;
  color: #F16625;  
  transition: all 0.25s ease-out;
  border:2px #ccc;
}
.playlist table {
	width:90%;
	text-align:center;
	padding: 20px;
	margin:30px auto 10px auto;
}
.playlist td {
/*	line-height:40px;
*/}
.playlist ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
}
.playlist li {
	display:block;
	padding:10px;
	}
.easy {
	color:green;
	background:#cceecc;
}
.medium {
	color:#0033ff;
	background:#c6d4ff;
}
.hard {
	color:red;
	background:#ffccdd;
}
.tablink {
  background-color: #ccc;
  color: #000;
  float: left;
  border-radius:10px 10px 0px 0px;
  outline: none;
  padding: 15px 25px 15px 25px;
  font-size: 1em;
}
.tablink:hover {
  background-color: #ccc;
  font-weight:bolder;
  color:#eb268f;
}
.tabcontent {
  color: white;
  display: none;
  padding: 49px 0px 100px 0px;
}
#defaultOpen {
	display:block;
	background-color:#fff;
}
.spotify {
	float:right;
}
.spotify img {
	width:20px;
	height:20px;
}

/*   YouTube iframe styling   */
#youtube-promo {
	display: inline-block;
	width: 80vw;
	height: 46vw;
	border:3px solid white;
	margin: 2vh 2.5vw;
}

.band-photo {
	margin:30px 0px 30px 0px;
}
.band-photo h1 {
	font-size: x-large;
}
.band-photo img {
	max-width:80%;
	height:auto;
	border:3px solid #fff;
}

.bulletlist {
  margin:0px 15px;
}
.bulletlist ul {
  list-style: none; /* Remove default bullets */
  overflow:visible; 
}
.bulletlist li {
  margin:0px 0px 10px 0px;
  line-height:1.2em;
  display:inline-block;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: wrap;
 }

.bulletlist ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #EB268F; /* Change the color */
  font-size:x-large;
  font-weight: bolder; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
  vertical-align:middle;
}
.disclosure-link{
	float:right;
	color:#eb268f;
	line-height:2em;
}

#bandinfo img {
	display: block;
	width:85vw;
	margin:1vh auto;
}

/*  SOCIAKL LINKS  */
#thebash {
	width:auto;
	height:1em;
	margin: 0 .5vw -.5vh .5vw;
}
.socialmedallion {
	max-width:10%;
	height:auto;
	padding: 0 2%;
}

/*  REVIEWS  */
#reviews-page {
	width: 85vw;
	margin: auto 5vw;
	padding: 1vh 2.5vw;
}

/*  WEDDING LINKS STYLING  */
#wedding-links {
	width:90vw;
	height:auto;
}
#wedding-links img {
	width: 140px;
}
#wedding-links, #wedding-links li {
	display:inline-block;
	text-align: center;
}
#wedding-links ul {
	text-align: center;
}
#wedding-links li {
	text-align: center;
	display: inline-block;
	margin:0 20px 0 20px;
}

blockquote {
	text-align: justify;
	padding:10px 0px 10px 0px;
	font-size: 1.1em;
	line-height:1.5em;
}

blockquote:before,
blockquote:after {
	content: '"' ;
	color:#A173E5;
	font-size:2.6em;
	vertical-align: text-top;
}

cite{
	float:right;
	color:#fff;
	line-height:2em;
}
cite:before {
	content: '– ' ;
}

/*WHO WE ARE PAGE STYLES*/
#who-are-we {
	width: 55vw;
	margin: auto 5vw;
	padding: 1vh 15vw;
}
#who-are-we h2 {
	margin:0px;
}
.who-are-we p {
	margin:0px;
}
.who-are-we li {
	padding-bottom:10px;
}
.band-member {
	width:100%;
	padding:20px 0px;
	clear:both;
}
.band-member p {
  background:none;
  padding:0px;
 	word-break: normal;
	font-size: 1.1em;
	line-height:1.5em;
}
.name {
	color: #7B441C;
	text-transform:uppercase;
	padding:0px;
	padding-bottom:2px;
}
.artist-photo {
	display:block;
	height:auto;
	margin:0px auto 0px auto;
}
.artist-photo-right {
	float:right;
	clear:left;
	max-width:300px;
	max-height:200px;
	padding:5px 0px 5px 10px;
}
.artist-photo-left {
	float:left;
	clear:right;
	max-width:300px;
	max-height:200px;
	padding:5px 10px 5px 0px;
}

#rtl{
    unicode-bidi: bidi-override;
    direction: rtl;
}