.webp #group-classes-container {
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.7)), url("../img/bruno-croci-5EaSpNNJwYQ-unsplash_2500x1667.webp") center center no-repeat fixed;
  background-size: cover;
}
.no-webp #group-classes-container {
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.7)), url("../img/bruno-croci-5EaSpNNJwYQ-unsplash_2500x1667.jpg") center center no-repeat fixed;
  background-size: cover;
}

/* Top box with intro info */

@media only screen and (max-width: 699px) {
  .webp #group-class-text {
    background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url("../img/blue_staff_with_stars_and_keys_FromJS_123rf.webp") center center;
    background-size: cover;
  }

  .no-webp #group-class-text {
    background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url("../img/blue_staff_with_stars_and_keys_FromJS_123rf.png") center center;
    background-size: cover;
  }
}

@media only screen and (min-width: 700px) {
  .webp #group-class-text {
    background: linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0.86), rgba(255,255,255,1)), url("../img/blue_staff_with_stars_and_keys_FromJS_123rf.webp") center center;
    background-size: cover;
  }

  .no-webp #group-class-text {
    background: linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0.86), rgba(255,255,255,1)), url("../img/blue_staff_with_stars_and_keys_FromJS_123rf.png") center center;
    background-size: cover;
  }

  #group-class-text {
    min-height: 200px;
    position: relative;
  }

  #group-class-text p {
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  
}

#group-class-text p {
  margin: 0 auto;
  color: var(--color-purple);
  font-weight: 800;
  padding: 30px;
  font-size: 28px;
  max-width: 500px;
  font-style: italic;
}

/* INDIVIDUAL GROUP CLASS DETAILS */

#group-class-list {
  display: flex;
  flex-flow: row wrap;
}

.group-class-outer-container {
  flex: 1;
  margin: 20px;
}

.group-class-inner-container {
  /*max-width: 650px;*/
  background: white;
  margin: auto;
  box-shadow: var(--box-shadow);
  width: 320px;
}

.group-class-header-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.group-class { padding: 10px; }
.group-class p { font-size: 20px; }

.group-class p.larger-font {
  margin: 10px 10px 0 10px;
  font-weight: bold;
  font-size: 24px;
}

.class-subheader {
  margin: 0 0 10px 0;
  padding: 0;
}

.group-class p.group-class-subtext {
  font-size: medium;
}

.group-class .see-class-description {
  margin: 10px auto;
}

.class-details {
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  white-space: nowrap;
  display: flex;
}

.class-details img {
  height: 20px;
  padding: 2px;
  border-radius: 50%;
  background: var(--color-orange-dark);
}

.class-details div {
  padding: 10px;
  flex: 1;
}

.class-details div p {
  margin: 0;
}

.class-schedule-list-item a:link, .class-schedule-list-item a:visited {
  text-decoration: none;
  color: black;
}

.class-schedule-list-item a:hover, .class-schedule-list-item a:active {
  color: var(--color-orange-dark);
}

.class-details-header {
  font-weight: 800;
}

@media only screen and (max-width: 699px) {
  #group-class-text { margin: 10px; }
}

@media only screen and (min-width: 700px) {
  #group-class-text { margin: 20px; }
}

.class-schedule-container {
  display: flex;
  flex-flow: row wrap;
}

.class-schedule-list-item {
  background: #eee;
  border-radius: 20px;
  width: 300px;
  /*min-width: 300px;*/
  margin: 10px auto;
  padding: 10px;
}

.class-schedule-list-item p {
  margin: 2px;
}

.list-item-session {
  font-weight: bold;
}

.register-button, .waitlist-button {
  height: auto;
  width: auto;
  color: black;
  padding: 2px 5px;
  margin: 0 auto;
  border: solid 1.5px black;
  background: none;
  font-family: var(--font-family-body);
  cursor: pointer;
  transition: 0.3s all;
  text-decoration: none;
  font-size: var(--font-size-p);
}

.register-button:hover, .waitlist-button:hover {
  background: black;
  color: white;
}

.class-not-available {
  color: white;
  margin: 0 10px;
  padding: 10px;
  max-width: 600px;
  background: #333;
  border-radius: 20px;
}

.register-button { display: block; }
.waitlist-button { display: none; }
.full .full-text { display: inline-block; }

.full-text {
  color: red;
  display: none;
}

.no-classes .trial-class-button { display: none; }
.full .register-button { display: none; }
.full .waitlist-button { display: block; }
.class-not-available { display: none; }
.no-classes .class-not-available { display: block; margin: auto;}
.no-classes .class-schedule-table { display: none; }

.class-button-container {
  margin-top: auto;
}

.trial-class-button {
  background: radial-gradient(circle at bottom center, var(--color-purple), var(--color-purple-dark));
  cursor: pointer;
  border: none;
  color: white;
  border-radius: 50%;
  font-family: var(--font-family-body);
  padding: 10px;
  margin: 10px auto;
  transition: 0.5s all;
  font-size: var(--font-size-p);
  height: calc(90px + 1.5vw);
  width: calc(90px + 1.5vw);
  display: block;
  filter: drop-shadow(2px 2px 2px black);
  -webkit-appearance: none;
}

.trial-class-button:hover, .trial-class-button:active {
  transform: scale(1.1);
  filter: drop-shadow(4px 4px 4px black);
  -webkit-appearance: none;
}

.class-description {
  max-width: 1000px;
  margin: auto;
  padding: 10px;
}

.class-description ul {
  max-width: 800px;
  margin: 0 auto;
}

/* REGISTRATION and CLASS INFORMATION */

.webp #group-class-info-container {
  background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.95)), url(../img/annie-spratt-4Hpljf9Y1ko-unsplash_2000x3315.webp) center center no-repeat;
  background-size: cover;
}
.no-webp #group-class-info-container {
  background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.95)), url(../img/annie-spratt-4Hpljf9Y1ko-unsplash_2000x3315.jpg) center center no-repeat;
  background-size: cover;
}

#group-class-info {
  display: grid;
  grid-template-rows: auto;
  grid-column-gap: 20px;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 10px;
}

@media only screen and (min-width: 1000px) {
  #group-class-info {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
    "tuition tuition tuition pic1"
    "pic2 cancellation cancellation cancellation";
  }
}

@media only screen and (max-width: 999px) {
  #group-class-info {
    grid-template-columns: 1fr;
    grid-template-areas:
    "tuition"
    "cancellation";
  }
  #group-class-info-pic1 { display: none; }
  #group-class-info-pic2 { display: none; }
}

#group-class-tuition { grid-area: tuition; }
#group-class-info-pic1 { grid-area: pic1; }
#group-class-info-pic2 { grid-area: pic2; }
#group-class-cancellation { grid-area: cancellation; }

#group-class-info-pic1 img, #group-class-info-pic2 img {
  width: 100%;
  max-height: 800px;
  object-fit: contain;
}

#group-class-tuition .music-list p {
  margin: 5px 0 0 0;
  font-style: italic;
  font-size: smaller;
}

.class-schedule-list-item hr {
  border-top: solid 2px var(--color-orange-dark);
  margin: 0 50px;
}

.class-schedule-list-item button {
  margin: 10px auto;
}



/* MODAL */

.no-class-details .modal-additional-class-info { display: none; }
/*
.no-class-details .orange { display: none; }
.no-class-details .modal-session { display: none; }
.no-class-details .modal-day { display: none; }
.no-class-details .modal-time { display: none; }
.no-class-details .modal-class-length { display: none; }
.no-class-details .modal-date-range { display: none; }
.no-class-details .modal-price-in-dollars { display: none; }
*/

.modal-price-in-dollars::before,
.list-item-price::before {
  content: "$";
}

.no-class-details .modal-instrument-at-home, .modal-instrument-at-home { display: none; }
.show-instrument-input .modal-instrument-at-home { display: block; }

#class-interest-child-or-adult { display: none; }
.show-interest-child-or-adult-input #class-interest-child-or-adult { display: block; }
.show-interest-child-or-adult-input .child-information { display: none; }

.child-class .child-information { display: block; }
.adult-class .child-information { display: none; }

.media-release { display: none; }
.add-media-release .media-release { display: block; }

.media-release { text-align: left; }
.media-release legend { text-align: center; }

.media-release p {
  padding-left: 26px;
  margin: 0;
}

#class-interest-child-or-adult-wrapper {
  display: flex;
  flex-flow: row wrap;
}

#class-interest-child-or-adult-wrapper div {
  flex: 1;
}

#class-interest-child-or-adult-wrapper input[type="number"] {
  border: 1px solid #aaa;
  border-radius: 5px;
  width: 50px;
  font-size: var(--font-size-p);
}