.webp #private-lessons-intro-container {
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(../img/angelo-pinheiro-vCQv8ARTyUs-unsplash_2500x1875.webp) center center no-repeat fixed;
  background-size: cover;
}
.no-webp #private-lessons-intro-container {
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(../img/angelo-pinheiro-vCQv8ARTyUs-unsplash_2500x1875.jpg) center center no-repeat fixed;
  background-size: cover;
}

#private-lessons-intro-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

#private-lessons-intro-container h2 {
  margin: 20px 0;
}

/* TOP BOX WITH TEXT */

#private-lessons-intro-text {
  display: grid;
  grid-template-rows: auto;
  background: white;
  align-items: center;
  justify-content: center;
}

#private-lessons-intro-text p {
  margin: 0;
  align-self: center;
}

#private-lessons-intro-pic {
  max-height: 350px;
  align-self: center;
}

/* max-height needed for Safari issue */
#private-lessons-intro-pic img {
  width: 100%;
  height: 100%;
  max-height: 350px;
  object-fit: cover;
  object-position: 50% 25%;
}

#private-lessons-intro-pricing {
  display: flex;
  justify-self: center;
}

#private-lessons-intro-pricing p {
  background: #eee;
  border-radius: 20px;
  flex: 1;
  white-space: nowrap;
}

#private-lessons-intro-text-1 { grid-area: text1; }
#private-lessons-intro-pricing { grid-area: pricing; }
#private-lessons-intro-pic { grid-area: pic1; }
#private-lessons-intro-text-2 { grid-area: text2; }


@media only screen and (max-width: 749px) {
  #private-lessons-intro-text {
    grid-gap: 20px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "text1"
      "pic1"
      "pricing"
      "text2";

  }
  #private-lessons-intro-text p { padding: 10px; }
  #private-lessons-intro-pricing {flex-direction: column; gap: 10px;}
}

@media only screen and (min-width: 750px) and (max-width: 1199px) {
  #private-lessons-intro-text {
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "text1 pic1"
      "pricing pricing"
      "text2 text2";
  }
  #private-lessons-intro-text p { padding: 10px 5px; }
  #private-lessons-intro-pricing { gap: 10px; }
}

@media only screen and (min-width: 1200px) {
  #private-lessons-intro-text {
    grid-template-columns: 3fr 1fr;
    grid-template-areas:
      "text1 pic1"
      "pricing pic1"
      "text2 pic1";
  }
  #private-lessons-intro-text p { padding: 20px; }
  #private-lessons-intro-pricing { gap: 20px; }
}

/* INSTRUMENTS */

@media only screen and (max-width: 799px) {
  .private-instrument-container { margin: 10px; }
  .private-instrument-container { min-width: 280px; }
}

@media only screen and (min-width: 800px) {
  .private-instrument-container { margin: 20px; }
  .private-instrument-container { min-width: 350px; }
}

.instrument-age {
  display: inline-block;
  font-weight: 800;
  position: absolute;
  top: -20px;
  right: 0;
  padding: 5px;
}

.private-lessons-text {
  flex: 100%;
  background: white;
}

.webp #private-lessons-piano {
  background: radial-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.2)), url(../img/elia-pellegrini-SaXnOrym6xU-unsplash_1500x1000.webp) center center no-repeat;
  background-size: cover;
}
.no-webp #private-lessons-piano {
  background: radial-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.2)), url(../img/elia-pellegrini-SaXnOrym6xU-unsplash_1500x1000.jpg) center center no-repeat;
  background-size: cover;
}

.webp #private-lessons-guitar {
  background: radial-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.2)), url(../img/guitar-hands-girl_FromJS_1500x1000.webp) center center no-repeat;
  background-size: cover;
}
.no-webp #private-lessons-guitar {
  background: radial-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.2)), url(../img/guitar-hands-girl_FromJS_1500x1000.jpg) center center no-repeat;
  background-size: cover;
}

.webp #private-lessons-violin {
  background: radial-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.2)), url(../img/joel-wyncott-tkL2_ZpOECc-unsplash_1500x1000.webp) center center no-repeat;
  background-size: cover;
}
.no-webp #private-lessons-violin {
  background: radial-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.2)), url(../img/joel-wyncott-tkL2_ZpOECc-unsplash_1500x1000.jpg) center center no-repeat;
  background-size: cover;
}

.webp #private-lessons-woodwinds {
  background: radial-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.2)), url(../img/iain-cridland-i_R5LrvExBU-unsplash_1500x1000.webp) center center no-repeat;
  background-size: cover;
}
.no-webp #private-lessons-woodwinds {
  background: radial-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.2)), url(../img/iain-cridland-i_R5LrvExBU-unsplash_1500x1000.jpg) center center no-repeat;
  background-size: cover;
}

.webp #private-lessons-voice {
  background: radial-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.2)), url(../img/israel-palacio-Y20JJ_ddy9M-unsplash_1500x1000.webp) center center no-repeat;
  background-size: cover;
}
.no-webp #private-lessons-voice {
  background: radial-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.2)), url(../img/israel-palacio-Y20JJ_ddy9M-unsplash_1500x1000.jpg) center center no-repeat;
  background-size: cover;
}

.private-instrument-container {
  flex: 1;
  max-width: 600px;
  padding: 20px;
  color: white;
  box-shadow: var(--box-shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.request-availability {
  margin-top: auto;
}

/* REGISTRATION AND CLASS INFORMATION */

.webp #private-lessons-info-container {
  background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.95)), url(../img/denise-jans-RQ0_Fp2Hr2M-unsplash_1875x2500.webp) center center no-repeat;
  background-size: cover;
}
.no-webp #private-lessons-info-container {
  background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.95)), url(../img/denise-jans-RQ0_Fp2Hr2M-unsplash_1875x2500.jpg) center center no-repeat;
  background-size: cover;
}

#private-lessons-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;
}

#private-lessons-info a {
  display: inline-block;
}

@media only screen and (min-width: 1000px) {
  #private-lessons-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) {
  #private-lessons-info {
    grid-template-columns: 1fr;
    grid-template-areas:
    "tuition"
    "cancellation";
  }
  #private-lesson-info-pic1 { display: none; }
  #private-lesson-info-pic2 { display: none; }
}

#private-lesson-tuition { grid-area: tuition; }
#private-lesson-info-pic1 { grid-area: pic1; }
#private-lesson-info-pic2 { grid-area: pic2; }
#private-lesson-cancellation { grid-area: cancellation; }

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

/* PERFORMANCES */

.webp #private-lesson-performance-container {
  background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0)), url(../img/johannes-plenio-RWytwNueNng-unsplash_2500x1400.webp) center center no-repeat;
  background-size: cover;
  color: white;
}
.no-webp #private-lesson-performance-container {
  background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0)), url(../img/johannes-plenio-RWytwNueNng-unsplash_2500x1400.jpg) center center no-repeat;
  background-size: cover;
  color: white;
}

#private-lesson-performance {
  align-items: center;
}

#private-lesson-performance {
  max-width: 1000px;
  margin: 0 auto;
}

#private-lesson-performance #recital-photos {
  display: flex;
  align-items: center;
  justify-content: center;
}

#recital-photos {
  flex: 1;
}

#recital-photos picture {
  padding: 10px;
}

#recital-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: solid 5px #eee;
  border-radius: 20px;
  display: block;
}

@media only screen and (max-width: 549px) {
  #recital-photos { flex-flow: row wrap; }
  #recital-info { padding: 10px; }
}

@media only screen and (min-width: 550px) {
  #recital-info { padding: 20px; }
}

/* MODAL - grid spaces in styles.css */

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

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

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

#private-lesson-avail-days table tr th,
#private-lesson-avail-days table tr td {
  border: 1px solid #bbb;
  padding: 10px;
  font-size: 15px;
}

.text-sideways {
  writing-mode: vertical-lr;
  transform: scale(-1);
}

#private-lesson-avail-days table { 
  margin: 5px auto;
  border-collapse: collapse;
}

.left-align {
  text-align: left;
  margin: auto;
  width: fit-content;
}

.show-piano-instruments .instrument-guitar {
  display: none;
}

.show-guitar-instruments .instrument-piano {
  display: none;
}

/*
.no-instruments #private-lesson-experience-subtitle {
  display: none;
}
*/

.no-instruments #private-lesson-experience-wrapper {
  display: flex;
  gap: 10px;
}

#private-lesson-avail-experience textarea {
  max-width: 300px;
  margin: 10px auto;
}

.label-wrap-indent {
  display: flex;
}

.label-wrap-indent input {
  flex: 0;
  align-self: flex-start;
  margin-top: 10px;
}

.label-wrap-indent label {
  flex: 1;
  padding: 5px;
}