html {
	scroll-padding-top: 56px !important;
}

body {
	padding-top: 56px;
}

/* fix rounded corners on original logo and/or add to new logo */
#mcb_logo, .logo {
	border-bottom-left-radius: 2rem !important;
	border-bottom-right-radius: 2rem !important;
}

#onecolumn {
	list-style: none;
	max-width: 400px;
	padding: 0;
}

#onecolumn {
	margin: 0;
}

#onecolumn h2 {
	display: block;
	margin-top: 1rem;
	font-size:calc(1.375rem + 1.5vw);
	font-weight:300;
	line-height:1.2
}

@media (min-width:1200px){
	#onecolumn h2 {
		font-size:2.5rem;
	}
}

#onecolumn em {
	display: block;
	font-size: 1.1rem;
	font-weight:200;
}

#onecolumn p {
	display: block;
	font-size: 1.3rem;
	font-weight:300;
	margin: 0;
}

.imgr {
	display: none;
	float: left;
	padding: 0 1rem 1rem 0;
}

h5.card-title {
	padding: 0 !important;
}

.acb {
	margin-bottom: 16px !important;
}

a {
		text-decoration:underline;
		color: #b4b4b4 !important;
}

a:link {
/*	transition: 0.25s; */
}

a:visited {
}

a:hover {
	color: #e1e2e2 !important;
}

a:active {
	color: #3c3b6e !important;
}

.my-divider {
	border-top: 3px solid #474747;
}

.navbar-brand, .navbar-brand.active {
	color: #ffffff8c !important;
	/* Adding an Alpha Value to CSS Hex Codes for subtle transparency */
	transition: 2.5s;
}

.navbar-brand:hover, .navbar-brand.active:hover {
	color: #ffffff !important;
	transition: 0.25s;
}

.btn-primary, .nav-link {
	margin: 0.375rem 0 !important;
	padding: 17px 0.75rem !important;
	background-image: linear-gradient(#4d5256, #3a3f44 60%, #34383d) !important;
	color: #b4b4b4 !important;
	filter: none;
}

#navbarNavDropdown .nav-link {
	padding: 0.5rem 1rem;
	margin: 0 !important;
	background-image: none !important;
}

#navbarNavDropdown .nav-link:hover {
	background-image: linear-gradient(#b22234, #a01e2e 60%, #8e1b29) !important;
	color: #ffffff !important;
}

a.btn-primary {
	font-weight: bold;
}

.btn-primary:hover, .dropdown-item:hover, .nav-link:hover {
	background-image: linear-gradient(#b22234, #a01e2e 60%, #8e1b29) !important;
	color: #ffffff !important;
}

.btn-primary:active, .dropdown-item:active, .nav-link:active {
	background-image: linear-gradient(#3c3b6e, #363563 60%, #302f58) !important;
	color: #ffffff !important;
}

.nav-link.active {
	color: #ffffff !important;
	font-weight: bold;
}

.list-group-item {
	padding: 0.5rem 1rem;
	padding: 16px 1rem;
}

.dropdown-item {
	padding: 0.25rem 1rem;
	padding: 9px 1rem;
}

a.dropdown-item.active {
	background-image: linear-gradient(#b22234, #a01e2e 60%, #8e1b29) !important;
	color: #ffffff !important;
}

/* Play Along */

#wrapper {
	max-width: 100% !important;
	margin: 1rem 0 !important;
}

.audiojs {
	max-width: 100% !important;
	box-shadow: none !important;
	margin-bottom: 1rem !important;
	border: 2px solid #272b30 !important;
	background-image: linear-gradient(#3a3f44, #383c40 60%, #272b30) !important;

}

.play-pause {
	padding: 4px 0 0 !important;
/*	border-right: 1px solid  !important; */
}

p.play {
}

.songlist ol {
  list-style: none;
  counter-reset: mcb 0;
}

.songlist li {
	position: relative;
	  margin: 0;
	  padding-left: 3rem; /* Indent from number to content */
		/* Use the counter-increment property to increase the value of the counter */
		counter-increment: mcb 1;
		/* Now each time a div.songlist li element appears, the mcb variable increases by one. */
}

li.playing a, .songlist li.playing::before, .songlist li.playing:hover::before {
	font-weight: 600;
}


.songlist li, .songlist li a, a.page-link {
/* 	padding: 0.5rem 1rem; /* list-item-group default */
	text-decoration: none;
	color: #b4b4b4 !important;
}

.songlist li:hover a {
	color: #e1e2e2 !important;
}

/* the css counter number... */
.songlist li.playing::before, .songlist li:hover::before {
	color: #b4b4b4 !important;
}

/* the css counter number... */
.songlist li.playing::before, .songlist li.playing:hover::before {
	color: #ffffff !important;
}

/* Cascading order is important here and always */
/* Use #e1e2e2 #b22234 #a01e2e and #8e1b29 as hex codes for certain playlists (permanent colors) */
.songlist li.playing,
.songlist li.playing:hover {
	color: #e1e2e2 !important;
  background-color: #b22234 !important;
	background-image: linear-gradient(#b22234, #a01e2e 60%, #8e1b29) !important;
  }

/* for title only... this is separate from ^ so there's no double bg */
.songlist li.playing a,
.songlist li.playing:hover a {
	color: #ffffff !important;
	}

.songlist li:first-child, .songlist li:last-child {
}

.songlist li::before {
	/* display the css counter number */
	/* Use the :before pseudo-element with the content property and counter() function to display the css counter number */
	/* content: counter(mcb) ". "; use a dot */
	/* content: counter(mcb) "- "; use a dash */
	/* content: counter(mcb); or leave it as just a number */
	position: absolute;
  top: 30px;
  left: 0;
  transform: translateY(-50%);
	content: counter(mcb) ". ";
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-block;
  line-height: 2.5rem;
	color: #b4b4b4  !important;
  text-align: center;
  margin-right: 0.5rem;
	/* Also, you can add content/text/icons after the number i.e. 1. Item or 1 - Item */
	/* content: counter(mcb) ". "; */
	/* Just like counter-reset, you can define an offset for the counter-increment property. */
	/* In this example, counter-reset sets mcb to 0.
	Each time the counter-increment is called, the value of mcb increases by 2, so, you’ll see numbers as 2, 4, and 6. * */
	/* counter-increment: mcb 2; */
}

.songlist ol ol li::before {
  background: #DE51FF;
}

.songlist ol ol ol li::before {
  background: #EE9EFF;
}

.songlist li:hover {
	background-image: linear-gradient(#b22234, #a01e2e 60%, #8e1b29) !important;
}

.songlist li:hover::before {
	color: #e1e2e2  !important;
}

#Arrangements li::after {
/*	content: '🌱'; */
}

#Arrangements li:hover::after {
	content: ''; /* musical note */
}

#Arrangements li.playing:hover::after, #Arrangements li.playing::after {
	content: ''; /* trumpet */
}

#Arrangements li.playing,
#Arrangements li.playing:hover {
	color: #e1e2e2 !important;
	background-color: #b22234 !important;
	background-image: linear-gradient(#b22234, #a01e2e 60%, #8e1b29) !important;
}

/* the icon before the css counter number is actually pseudo class :after */
.songlist li::after {
	position: absolute;
	top: 0.75rem;
	left: -1.5rem;
	width: 1rem;
	height: 1rem;
	line-height: 1rem;
	font-size: 1.5rem;
	color: #cc0000 !important; /* Feb. red for ♥ */
	color: #0F9D58 !important; /* Mar. green for ☘ */
	color: #b4b4b4 !important;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
	padding: 0;
	margin: 0px;
	content: '🌞'; /* Aug */
	content: '😃'; /* Sep */
	content: '🎃'; /* Oct */
	content: '🦃'; /* Nov */
	content: '❄'; /* Dec */
	content: '⛄'; /* Jan */
	content: '❤'; /* Feb */
	content: '🍀'; /* Mar */
	content: '🐣'; /* Apr */
	content: '🌻'; /* May */
	content: '🎺';
	content: '♫';
	content: '';
}

/* the icon before the css counter number is actually pseudo class :after */
.songlist li:hover::after {
	position: absolute;
	top: 1.25rem;
	left: -1.5rem;
	width: 1rem;
	height: 1rem;
	line-height: 1rem;
	font-size: 1.5rem;
	color: #e1e2e2 !important;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
	padding: 0;
	margin: 0px;
	content: '♫';
}

/* the icon before the css counter number is actually pseudo class :after */
.songlist li.playing::after, .songlist li.playing:hover::after {
	position: absolute;
	top: 1.25rem;
	left: -1.5rem;
	width: 1rem;
	height: 1rem;
	line-height: 1rem;
	font-size: 1.5rem;
	color: #cc0000 !important; /* Feb. red for ♥ */
	color: #0F9D58 !important; /* Mar. green for ☘ */
	color: #ffffff !important;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
	padding: 0;
	margin: 0px;
	content: '🌞'; /* Aug */
	content: '😃'; /* Sep */
	content: '🎃'; /* Oct */
	content: '🦃'; /* Nov */
	content: '❄'; /* Dec */
	content: '⛄'; /* Jan */
	content: '❤'; /* Feb */
	content: '🍀'; /* Mar */
	content: '🐣'; /* Apr */
	content: '🌻'; /* May */
	content: '🎺';
	content: '♫';
}

.progress {
	background: #e1e2e2 !important;
}

em.played {
	color: #e1e2e2 !important;
}

div.time {
	color: #b4b4b4 !important;
}

/* Recordings This Year */
	.list-group-item-action {
		color: #b4b4b4 !important;
	}

	.list-group-item-action:hover {
		background-image: linear-gradient(#4d5256, #3a3f44 60%, #34383d) !important;
		color: #ffffff !important;
	}

	.list-group-item-action:active, a.list-group-item:action {
		background-image: linear-gradient(#3c3b6e, #363563 60%, #302f58) !important;
		color: #ffffff;
	}

	.list-group-item.list-group-item-action a {
		color: #b4b4b4 !important;
		text-decoration: none;
	}

	.list-group-item.list-group-item-action a:hover {
		color: #ffffff !important;
	}

	.list-group-item.list-group-item-action:hover {
		background-image: linear-gradient(#b22234, #a01e2e 60%, #8e1b29) !important;
		color: #e1e2e2 !important;
	}

	.list-group-item.list-group-item-action.active {
		background-image: linear-gradient(#b22234, #a01e2e 60%, #8e1b29) !important;
	}

	.list-group-item.list-group-item-action.active a {
		color: #ffffff !important;
		font-weight: bold;
	}

	.list-group-item.list-group-item-action.disabled {
		color: #212529 !important;
	}

	/* All Recordings */
		.pagination {
			max-width: 444px;
		}

		.page-item {
			margin: 0 4px 16px;
		}

		.page-link {
			padding: 0.375rem 0.75rem;
			padding: 15px 0.75rem;
			min-height: 5rem;
			min-width: 5rem;
			border-radius: 50% !important;
		}

		a.page-link:active {
			background-image: linear-gradient(#3c3b6e, #363563 60%, #302f58) !important;
			color: #b4b4b4 !important;
		}

	/* THIS IS RED HOVER FOR SONGS, RECORDINGS (YEARS), THEMES */
		a.page-link:hover, .active a.page-link {
			background-image: linear-gradient(#b22234, #a01e2e 60%, #8e1b29) !important;
			color: #ffffff !important;
		}
		.active a.page-link {
			font-weight: bold;
		}
/* Map */
		.map-container-9,
		.map-container-10,
		.map-container-11 {
		  overflow:hidden;
		  padding-bottom:56.25%;
		  position:relative;
		  height:0;
		}
		.map-container-9 iframe,
		.map-container-10 iframe,
		.map-container-11 iframe{
		  left:0;
		  top:0;
		  height:100%;
		  width:100%;
		  position:absolute;
		}