* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
	background-image: url("../assets/images/img/background/white_stripes_2.jpg");
	background-size: cover;
}

.content {
	min-height: 100%;
}
.main {
	overflow: auto;
	padding-bottom: 100px;
}
footer {
	position: relative;
	background-color: grey;
	background-image: url("../assets/images/img/background/grey_stripes.jpg");
	background-size: cover;
	height: auto;
	bottom: 100px;
	margin-top: -50px;
}
.container-fluid {
	padding: 0px;
}
.row.no-gutter {
	margin-left: 0;
	margin-right: 0;
}
.link {
	color: #68d9ff
}
.line-break {
	margin-bottom: 0px;
}

/*------------------ Custom Text ------------------*/
.text-white {
	color: white;
}
.text-purple {
	color: #6D00BE;
}
/*------------------ Custom Buttons ------------------*/
.btn-purple {
	background-color: #6D00BE;
	color: white;
}
.btn-purple:hover {
	background-color: #581e8a;
}
.btn-blue {
	background-color: #68d9ff;
	color: white;
}
.btn-gold {
	background-color: #e3b65e;
	color: white;
}
.btn-outline-white {
	border: 2px solid white;
	background-color: transparent;
	color: white;
}
.btn-outline-white:hover {
	background-color: white;
	color: #6D00BE;
	font-weight: bold;
}

/* ------------------ Messages ------------------ */
.error {
	border-left: 10px solid #721C24;
}
.success {
	border-left: 10px solid #155776;
}
.unavailable {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}


/*-------------------- Navigation Bar --------------------*/
.navbar{
	background-color: black;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1;
}
.navbar-brand-logo {
	width: 40px;
}
.nav-link, .nav-link:hover, .dropdown-item { 
	color: #fff;
	text-align: center;
} 
.nav-selected:hover {
	border-bottom: 3px solid #e3b65e;
}

.navbar-toggler:hover { 
	border-color: #e3b65e;	 
}

.navbar-toggler-icon { 
	border-color: #f2efe6; 
	background-image: url(../assets/images/icons/menu.png); 	
} 
/*-------------------- Modal --------------------*/
.modal {
	display: none; /* hides the modal */
	position: fixed; /* makes it stay in place */
	z-index: 2; /* allows it to sit over content */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto; /*enables a scroll bar */
	padding-top: 50px;
}
.modal-header, .logo-login {
	margin: 0 auto; /* puts content in the middle */
}
.modal-dialog {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color: hsla(40, 12%, 95%, 1);
	border-top: 10px solid #6D00BE;
}
.close {
	margin-right: 15px;
	font-size: 30px;
}
.modal-username {
	/* background-image: url(../images/icons/user.png); */
	background-position: 8px 8px;
	background-repeat: no-repeat;
	/* border-style: none; */
	/* padding-left: 30px; */
}
.modal-password {
	/* background-image: url(../images/icons/key.png); */
	background-position: 8px 8px;
	background-repeat: no-repeat;
	/* border-style: none; */
	/* padding-left: 30px; */
}
.modal-btn-login {
	width: 100%;
}
.modal-footer {
	background-color: hsla(40, 12%, 95%, 1);
}


/*-------------------- Footer --------------------*/
.footer-image {
	height: 125px;
	width: 125px;
}
.footer-text-title {
	font-size: 28px;
	color: white;
}
.footer-text-nav {
	color: white;
}
.footer-text-nav:hover {
	color: #68d9ff;
}
.heart {
  fill: #e3b65e;
  position: relative;
  top: 5px;
  width: 20px;
  animation: pulse 1s ease infinite, 
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}


/*-------------------- Hero Image --------------------*/
.hero-image {
	background-image: url("../assets/images/img/hero/hendrix.jpg");
	height: 900px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.hero-text {
	text-align: center;
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #f2efe6;
	/* font-size: 3em; */
	/* font-size: 40px; */
}
.hero-title {
	background-color: black;
	opacity: 0.65;
	/* -webkit-animation: fadein 5s; */
	/* -moz-animation: fadein 5s; /* Firefox < 16 */ */
    /* -ms-animation: fadein 5s; /* Internet Explorer */ */
    /* -o-animation: fadein 5s; /* Opera < 12.1 */ */
    /* animation: fadein 5s; */
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.65; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.65; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.65; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.65; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.65; }
}
@media (min-width: 290px) {  
  /* #hero-title {font-size:0.75rem;}  */
  .hero-title {
	  /* font-size:17px; */
	  font-size: 35px;
	  }
  .hero-image {height: 360px;}
}
@media (min-width: 320px) {  
  /* #hero-title {font-size:0.8rem;}  */
  .hero-title {
	  /* font-size:25px; */
	  font-size: 50px;
	  }
  .hero-image {height: 460px;}
}
@media (min-width: 340px) {  
  /* #hero-title {font-size:0.90rem;} */
  .hero-title {
	  /* font-size:30px; */
	  font-size: 50px;
	  }
  .hero-image {height: 560px;}
  .line-break {
	  display: block;
  }
}
@media (min-width: 575px) {  
  /* #hero-title {font-size:1.5rem;}  */
  .hero-title {
	  /* font-size:34px; */
	  font-size: 50px;
	  }
  .hero-image {height: 660px;}
  .line-break {
	  display: none;
  }
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  /* #hero-title {font-size:2.5rem;}  */
  .hero-title {
	  /* font-size:36px; */
	  font-size: 60px;
	  }
  .hero-image {height: 760px;}
  .line-break {
	  display: none;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  /* #hero-title {font-size:2.5rem;}  */
  .hero-title {
	  /* font-size:42px; */
	  font-size: 80px;
	  }
  .hero-image {height: 860px;}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  /* #hero-title {font-size:3rem;}  */
  .hero-title {
	  /* font-size:48px; */
	  font-size: 80px;
	  }
  .hero-image {height: 960px;}
}
/*------------------ What is Melodic Odyssey? ----------------*/
.what {
	background-image: url("../assets/images/img/background/purple_stripes.jpg");
	background-size: cover;
	/* background-color: #782BBA; */
	height: 110%;
	width: auto;
}
.what-text {
	text-align: center;
	color: #f2efe6;
	width: 100%;
	font-size: 40px;
	padding-top: 20px;
}
.what-info-title {
	font-size: 20px;
}
.what-info {
	margin-left: 150px;
	margin-right: 150px;
}
@media (min-width: 290px) {  
	.what-info {
		margin-left: 0px;
		margin-right: 0px;
	}
	.what-video {
		height: 90%;
		width: 90%;
	}
}
@media (min-width: 320px) {  
	.what-info {
		margin-left: 0px;
		margin-right: 0px;
	}
	.what-video {
		height: 90%;
		width: 90%;
		margin-top: 0%;
		padding-bottom: 0px;
	}
}
@media (min-width: 340px) {  
	.what-info {
		margin-left: 0px;
		margin-right: 0px;
	}
	.what-video {
		height: 100%;
		width: 90%;
		margin-top: 0%;
		padding-bottom: 32px;
	}
}
@media (min-width: 575px) {  
	.what-info {
		margin-left: 0px;
		margin-right: 0px;
	}
	.what-video {
		height: 35%;
		width: 80%;
		margin-top: 35%;
	}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
	.what-info {
		margin-left: 50px;
		margin-right: 50px;
	}
	.what-video {
		height: 50%;
		width: 80%;
		margin-top: 40px;
	}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.what-info {
		margin-left: 50px;
		margin-right: 50px;
	}
	.what-video {
		height: 100%;
		width: 80%;
		padding-bottom: 144px;
		margin-top: 10px;
	}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
	.what-info {
		margin-left: 50px;
		margin-right: 50px;
	}
	.what-video {
		height: 120%;
		width: 50%;
		padding-bottom: 144px;
		margin-top: 10px;
	}
}
/*------------------ Lesson Bar ----------------*/
.lesson-banner {
	/* background-image: url("../assets/images/img/background/grey_diamonds.jpg");  */
	background-size: cover; 
	background-color: black;
	/* padding-bottom: 15px; */
	width: auto;
	/* font-size: 40px; */
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 290px) {  
  /* #hero-title {font-size:2.5rem;}  */
  .lesson-banner {font-size:33px;}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  /* #hero-title {font-size:2.5rem;}  */
  .lesson-banner {font-size:36px;}
}
/*------------------ Slideshow -----------------*/
.slide-lesson-banner {
	background-color: black;
	font-size: 40px;
	height: auto;
	opacity: 0.65;
}
#slider, .wrap, .slide-content {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: auto;
  overflow-x: hidden; 
}
.wrap {
  position: relative;
  margin-top: -28px;
  
  
}
.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.slide1 {
  /* background-image: url("../assets/images/img/slideshow/selection-theory-dark.jpg"); */
}
.slide2 {
  /* background-image: url("../assets/images/img/slideshow/selection-guitar-dark.jpg"); */
}
.slide3 {
  /* background-image: url("../assets/images/img/slideshow/selection-guitar-dark.jpg"); */
}
.slide4 {
  /* background-image: url("../assets/images/img/slideshow/selection-piano-dark.jpg"); */
}
.slide5 {
  /* background-image: url("../assets/images/img/slideshow/selection-ukulele-dark.jpg"); */
}
.slide6 {
  /* background-image: url("../assets/images/img/slideshow/selection-drums-dark.jpg"); */
}
.slide-theory {
	padding-top: 20px;
	background-image: url("../assets/images/img/slideshow/selection-theory-dark.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	padding-bottom: 5px;
}
.slide-guitar {
	padding-top: 20px;
	background-image: url("../assets/images/img/slideshow/selection-guitar-dark.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}
.slide-bass {
	padding-top: 20px;
	background-image: url("../assets/images/img/slideshow/selection-bass-dark.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}
.slide-piano {
	padding-top: 20px;
	background-image: url("../assets/images/img/slideshow/selection-piano-dark.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}
.slide-ukulele {
	padding-top: 20px;
	background-image: url("../assets/images/img/slideshow/selection-ukulele-dark.jpg"); 
	background-size: cover;
	background-repeat: no-repeat;
}
.slide-drums {
	padding-top: 20px;
	background-image: url("../assets/images/img/slideshow/selection-drums-dark.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}
.slide-content {
  display: flex;
  flex-direction: column;
}
.arrow {
  cursor: pointer;
  position: absolute;
  top: 60%;
  margin-top: -35px;
  width: -10%;
  height: -10%;
  border-style: solid;
  padding-top: 0px;
  padding-left: 10px;
  border: 1px solid red;
}
#arrow-left {
  border-width: 10px 20px 10px 0;
  border-color: transparent #fff transparent transparent;
  left: 0;
  margin-left: 10px;
}
#arrow-right {
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #fff;
  right: 0;
  margin-right: 10px;
}
.slider-text {
	color: white;
	word-wrap: break-word;
}
.slide-content h1 {
	font-size: 30px;
	color: #fff;
}	 
.slider-img {
	height: 300px;
	width: 300px;
	display: block;
	padding-bottom: 15px;
}
.slider-text {
	margin-top: 50px;
	display: block;
	padding-left: 35px;
	padding-right: 35px;
	font-size: 18px;
}
@media (min-width: 290px) { 
	.slider-img {
		margin-left: auto;
		margin-right: auto;
	}
}
@media (min-width: 320px) {
	.slider-img {
		margin-left: auto;
		margin-right: auto;
	}
}
@media (min-width: 340px) {
	.slider-img {
		margin-left: auto;
		margin-right: auto;
		height: 125px;
		width: 115px;
	}
}
@media (min-width: 410px) {  
	.slider-img {
		margin-left: auto;
		margin-right: auto;
		height: 125px;
		width: 115px;
	}
}
@media (min-width: 575px) {
	.slide {
		height: 25%;
	}
	.slider-img {
		height: 135px;
		width: 125px;
	}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) { 
	.slide {
		height: 95%;
	}
	.slider-img {
		height: 65%;
		width: 65%;
	}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {  
	.slider-img {
		height: 75%;
		width: 75%;
	}
}

/*------------------- Why Us --------------------*/
.why {
	background-image: url("../assets/images/img/background/purple_stripes_2.jpg");
	background-size: cover;
	/* background-color: #782BBA; */
	height: 110%;
	width: auto;
}
.why-text {
	text-align: center;
	color: #f2efe6;
	width: 100%;
	font-size: 40px;
	padding-top: 20px;
}
#why-text {
	animation-timing-function: ease;
}
.why-info-title {
	font-size: 20px;
}
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.why-image {
	height: 125px;
	width: 125px;
}
/*------------------- Pricing --------------------*/
.pricing {
	background-color: white;
	
}
.pricing-text {
	text-align: center;
	width: 100%;
	font-size: 40px;
	padding-top: 20px;
}
.pricing-box-one {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color: hsla(40, 12%, 95%, 1);
	border-top: 10px solid #6D00BE;
	height: 350px;
	width: 225px;
	margin-top: 3%;
	margin-bottom: 3%;
}
.pricing-box-three {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color: hsla(40, 12%, 95%, 1);
	border-top: 10px solid #68d9ff;
	height: 350px;
	width: 225px;
	margin-top: 3%;
	margin-bottom: 3%;
}
.pricing-box-six {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color: hsla(40, 12%, 95%, 1);
	border-top: 10px solid #e3b65e;
	height: 350px;
	width: 225px;
	margin-top: 3%;
	margin-bottom: 3%;
}
.pricing-box-banner {
	background-color: lightgrey;
	height: auto;
	width: auto;
}
.pricing-box-banner-text {
	font-size: 20px;
	padding-top: 5px;
	color: black;
}
.pricing-box-banner-text-info {
	font-size: 12px;
	margin-top: 0;
}
.pricing-box-info-text {
	margin-top: 10%;
	font-size: 32px;
	color: black;
}
.pricing-box-info-text-info {
	font-size: 16px;
	top: -10px;
}
/*------------------- Registration Section ----------------*/
.hero-gif {
	background-image: url("../assets/images/gif/beatles_2.gif");
	height: 900px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.registration-box {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color: #6D00BE;
	height: auto;
	width: auto;
	margin-top: 3%;
	margin-bottom: 3%;
	text-align: center;
	position: absolute;
	top: 50%; 
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px 20px 20px 20px;
	border-radius: 5px;
}
@media (min-width: 290px) {  
  .hero-gif {height: 360px;}
}
@media (min-width: 320px) {  
  .hero-gif {height: 460px;}
}
@media (min-width: 340px) {  
  .hero-gif {height: 560px;}
}
@media (min-width: 575px) {  
  .hero-gif {height: 660px;}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  .hero-gif {height: 760px;}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .hero-gif {height: 860px;}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  .hero-gif {height: 960px;}
}


/*-------------------- Registration Page --------------------*/
.registration-background {
	background-image: url("../assets/images/img/background/white_stripes_2.jpg");
	background-size: cover;
}
.container-registration {
	width: auto;
	height: auto;
	background-color: white;
	border-top: 10px solid #e3b65e;
	margin-top: 66px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 0 0 10px 10px;
	margin-bottom: 16px;
}
.footer-registration-text {
	color: white;
	margin-top: 25%;
	/* bottom: 0; */
}
.col-registrationimg { 
	background-image: url('../assets/images/img/muses.jpg');
	/* background-color: purple; */
	background-repeat: no-repeat; 
	overflow: hidden;
    background-size: cover; 
    background-position: center;
	border-radius: 0 0 0 10px;	
}
.registration-text {
	margin-top: 20px;
	font-size: 50px;
	color: white;
}
@media (min-width: 290px) {  
	.col-registrationimg {
		border-radius: 0 0 0 0;
	}
}
@media (min-width: 320px) {  
	.col-registrationimg {
		border-radius: 0 0 0 0;
	}
}
@media (min-width: 340px) {  
	.col-registrationimg {
		border-radius: 0 0 0 0;
	}
}
@media (min-width: 575px) { 
	.col-registrationimg {
		border-radius: 0 0 0 0;
	}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
	.col-registrationimg {
		border-radius: 0 0 0 10px;
	}
}

/*-------------------- Login Page --------------------*/
.login-background {
	background-image: url("../assets/images/img/background/white_stripes_2.jpg");
	background-size: cover;
}
.container-login {
	width: auto;
	height: auto;
	background-color: white;
	margin-top: 66px;
	border-top: 10px solid #e3b65e;	
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 0 0 10px 10px;
}
.col-login-img { 
	background-image: url('../assets/images/img/crowd.jpg');
	background-repeat: no-repeat; 
	overflow: hidden;
    background-size: cover; 
    background-position: center; 
	border-radius: 0 0 0 10px;
}
.login-text {
	color: white;
	margin-top: 25%;
}
@media (min-width: 290px) {  
	.col-login-img {
		border-radius: 0 0 0 0;
	}
}
@media (min-width: 320px) {  
	.col-login-img {
		border-radius: 0 0 0 0;
	}
}
@media (min-width: 340px) {  
	.col-login-img {
		border-radius: 0 0 0 0;
	}
}
@media (min-width: 575px) { 
	.col-login-img {
		border-radius: 0 0 0 0;
	}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
	.col-login-img {
		border-radius: 0 0 0 10px;
	}
}

/*-------------------- Profile Page --------------------*/
.profile-banner {
	background-color: #6D00BE;
	height: 150px;
	margin-top: 65px;
}
.profile-pic {
	border-radius: 50%;
	height: 205px;
	width: 205px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border: 5px solid white;
}
.profile-username-text {
	display: block;
	margin-left: auto;
	margin-right: auto;	
}
.profile-edit-section-image {
	background-color: #6D00BE;
	border-radius: 0 0 0 10px;
}

.user-avatar {
	margin-top: 10%;
	height: 450px;
	width: 450px;
	border-radius: 50%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	border: 5px solid white;
}
.profile-edit-container {
	background-color: white;
	border-radius: 0 0 10px 10px;
}

@media (min-width: 290px) {  
	.user-avatar {
		margin-top: 10%;
		height: 250px;
		width: 250px;
		border: 5px solid white;
	}
	.profile-edit-section-image {
		border-radius: 0 0 0 0;
	}
}
@media (min-width: 320px) {  
	.user-avatar {
		margin-top: 10%;
		height: 325px;
		width: 325px;
		border: 5px solid white;
	}
	.profile-edit-section-image {
		border-radius: 0 0 0 0;
	}
}
@media (min-width: 340px) {  
	.user-avatar {
		margin-top: 10%;
		height: 325px;
		width: 325px;
		border: 5px solid white;
	}
	.profile-edit-section-image {
		border-radius: 0 0 0 0;
	}
}
@media (min-width: 575px) { 
	.user-avatar {
		margin-top: 10%;
		height: 450px;
		width: 450px;
		border: 5px solid white;
	}
	.profile-edit-section-image {
		border-radius: 0 0 0 0;
	}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
	.user-avatar {
		margin-top: 50%;
		height: 325px;
		width: 325px;
		border: 5px solid white;
	}
	.profile-edit-section-image {
		border-radius: 0 0 0 10px;
	}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .user-avatar {
		margin-top: 10%;
		height: 450px;
		width: 450px;
		border: 5px solid white;
	}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  .user-avatar {
		margin-top: 10%;
		height: 450px;
		width: 450px;
		border: 5px solid white;
	}
}

/*-------------------- Insturment Selection Page --------------------*/
.image-lesson {
	height: 100%;
	width: 100%;
	padding-top: 20px;
}

/*-------------------- Lesson Selection Page --------------------*/
/* Style the buttons that are used to open and close the accordion panel */
.lesson-selection {
	padding: 0px 150px 0px 150px;
}
.lesson-image {
	height: 35px;
	float: left;
}
.accordion-selection {
    background-color: #808080;
    color: #fff;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #808080;
	color: white;
	border-top: 5px solid white;
	font-weight: bold;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 5px 18px;
    /* background-color: #f2f2f2; */
	background-color: white;
    display: none;
    overflow: hidden;
}
.lesson-link {
	color: black;
}
.lesson-link:hover {
	color: #68d9ff;
	text-decoration: none;
}
@media (min-width: 290px) {  
.lesson-selection {
	padding: 0px 0px 0px 0px;
	}
}
@media (min-width: 320px) {  
.lesson-selection {
	padding: 0px 0px 0px 0px;
	}
}
@media (min-width: 340px) {  
.lesson-selection {
	padding: 0px 0px 0px 0px;
	}
}
@media (min-width: 575px) { 
.lesson-selection {
	padding: 0px 100px 0px 100px;
	}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
.lesson-selection {
	padding: 0px 0px 0px 0px;
	}
}
/*-------------------- Global Lesson Page --------------------*/
.lesson-arrow {
	height: 60px;
	width: 60px;
}
.accordion-tldr {
	background-color: #808080;
    color: #fff;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.main-content {
	margin: 8px 16px 8px 16px;
	padding-bottom: 12px;
}
.lesson-video {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.lesson-image-long {
	
}
@media (min-width: 290px) {  
	.lesson-image-long {
		width: 100%;
	}
}
@media (min-width: 320px) {  
	.lesson-image-long {
		width: 100%;
	}
}
@media (min-width: 340px) {  
	.lesson-image-long {
		width: 100%;
	}
}
@media (min-width: 575px) { 
	.lesson-image-long {
		width: 100%;
	}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
	.lesson-video {
		height: 280px;
		width: 500px;
	}
	.lesson-image-long {
		width: 100%;
	}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .lesson-video {
		height: 280px;
		width: 500px;
	}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  .lesson-video {
		height: 280px;
		width: 500px;
	}
}
/*-------------------- Notation Training --------------------*/
.notation-menu-bar {
	list-style-type: none;
	margin: 0;
}
.notation-image {
		height: 350px;
	}
	.notation-image-container {
		height: 350px;
	}
	.notation-menu-bar-right {
		margin-left: 36%;
		width: 13%;
	}
	.notation-menu-bar-audio {
		width: 13%;
	}
	.notation-menu-bar-wrong {
		width: 10%;
	}
.right {
	position: static;
	color: green;
	font-size: 24px;
	font-weight: bold;
}

.audio-btn {
	position: static;
	/* margin-left: 12%; */
}
.wrong {
	position: static;
	color: red; 
	font-size: 24px;
	font-weight: bold;
	/* margin-left: 13%; */
	/* display:inline-block; */
}
.settings-btn {
	position: static;
	/* margin-left: 10%; */
	/* display:inline-block; */
}
#settings-menu {
	display: none;
	width: 50%;
	margin-left: 25%;
	border-style: inset;
}
.notation-image {
	height: 45%;
	margin-bottom: -320px;
}
.notation-image-container {
	height: 350px;
}
.settings-menu-section {
	border-style: inset;	
}
.settings-menu-text {
	float: left;
	margin-top: -3%;
}
.settings-menu-btn {
	float: right;
	margin-top: -4%;
}
@media (min-width: 360px) {  
	.notation-image {
		height: 180px;
		margin-bottom: -150px;
	}
	.notation-image-container {
		height: 182px;
	}
	.btn-mobile-container {
		padding-right: 0;
		padding-left: 0;
	}
	.btn-mobile-notation-purple {
		margin: 0px -2px 0px -2px;
	}
	.notation-menu-bar-right {
		margin-left: 25%;
		width: 20%;
		
	}
	.notation-menu-bar-audio {
		width: 22%;
	}
	.notation-menu-bar-wrong {
		width: 20%;
	}
	#settings-menu {
		width: 95%;
		margin-left: 3%;
	}
}
@media (min-width: 411px) {  
	.notation-image {
		height: 270px;
	}
	.notation-image-container {
		height: 270px;
	}
	.btn-mobile-notation-purple {
		margin: 0px 0px 0px 0px;
	}
	.notation-menu-bar-right {
		margin-left: 25%;
		width: 21%;
		
	}
	.notation-menu-bar-audio {
		width: 20%;
	}
	.notation-menu-bar-wrong {
		width: 20%;
	}
	#settings-menu {
		width: 95%;
		margin-left: 3%;
	}
}
@media (min-width: 575px) {  
	.notation-image {
		height: 290px;
	}
	.notation-image-container {
		height: 290px;
	}
	.notation-menu-bar-right {
		margin-left: 18%;
		width: 29%;
	}
	.notation-menu-bar-audio {
		width: 30%;
	}
	.notation-menu-bar-wrong {
		width: 13%;
	}
	#settings-menu {
		width: 85%;
		margin-left: 10%;
	}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
	.notation-image {
		height: 310px;
	}
	.notation-image-container {
		height: 310px;
	}
	.notation-menu-bar-right {
		margin-left: 27%;
		width: 21%;
	}
	.notation-menu-bar-audio {
		width: 22%;
	}
	.notation-menu-bar-wrong {
		width: 10%;
	}
	#settings-menu {
		width: 65%;
		margin-left: 20%;
	}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.notation-image {
		height: 330px;
	}
	.notation-image-container {
		height: 330px;
	}
	.notation-image-container {
		height: 350px;
	}
	.notation-menu-bar-right {
		margin-left: 33%;
		width: 15%;
	}
	.notation-menu-bar-audio {
		width: 16%;
	}
	.notation-menu-bar-wrong {
		width: 10%;
	}
	#settings-menu {
		width: 50%;
		margin-left: 25%;
	}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
	.notation-image {
		height: 350px;
	}
	.notation-image-container {
		height: 350px;
	}
	.notation-menu-bar-right {
		margin-left: 36%;
		width: 13%;
	}
	.notation-menu-bar-audio {
		width: 13%;
	}
	.notation-menu-bar-wrong {
		width: 10%;
	}
}