/* *, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   font-family: 'Roboto', sans-serif;
   font-size: 10px;
}

body {
   width: 100%;
   height: 100vh;
   background-color: #eee;
   display: flex;
}
 */

 
 /* from grid_sty_3.css*/

.image_container {
   width: 70%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.image_gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img-1 img-2 img-3 img-4'
      'img-5 img-6 img-7 img-8'
      'img-9 img-10 img-10 img-12'
      'img-13 img-14 img-16 img-11'
      'img-15 img-15 img-17 img-18';
}

.image_gallery a {
   width: 100%;
   height: 20rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.image_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.image_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.image_gallery a:hover i, 
.image_gallery a:hover::before {
   opacity: 1;
} 

.img-1 {
   grid-area: img-1;
   background-image: url("../images/ggAl001.jpg");
}

.img-2 {
   grid-area: img-2;
   background-image: url("../images/ggAn001.jpg");
}

.img-3 {
   grid-area: img-3;
   background-image: url("../images/g1An002.jpg");
}

.img-4 {
   grid-area: img-4;
   background-image: url("../images/ggAl002.jpg");
}

.img-5 {
   grid-area: img-5;
   background-image: url("../images/ggAa001.jpg");
}

.img-6 {
   grid-area: img-6;
   background-image: url("../images/g1AlAn001.jpg");
}

.img-7 {
   grid-area: img-7;
   background-image: url("../images/g1Ca001.jpg");
}

.img-8 {
   grid-area: img-8;
   background-image: url("../images/DSC_0012.jpeg");
}

.img-9 {
   grid-area: img-9;
   background-image: url("../images/DSC_0056.jpeg");
}

.img-10 {
   grid-area: img-10;
   background-image: url("../images/g1AbAn001.jpg");
}

.img-11 {
   grid-area: img-11;
   background-image: url("../images/ggOr001.jpg");
}

.img-12 {
   grid-area: img-12;
   background-image: url("../images/ggMa001.jpg");
}

.img-13 {
   grid-area: img-13;
   background-image: url("../images/ggPr001.jpg");
}

.img-14 {
   grid-area: img-14;
   background-image: url("../images/DSC_0011.jpeg");
}

.img-15 {
   grid-area: img-15;
   background-image: url("../images/DSC_0073.jpeg");
}

.img-16 {
   grid-area: img-16;
   background-image: url("../images/g1AgAn001.jpg");
}

.img-17 {
   grid-area: img-17;
   background-image: url("../images/ggMe001.jpg");
}

.img-18 {
   grid-area: img-18;
   background-image: url("../images/DSC_0030.jpeg");
}



/* Awards */
.img2_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img2_gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img2-1 img2-2 img2-3 img2-4'
      'img2-5 img2-6 img2-7 img2-8'
      'img2-9 img2-10 . .';
}

.img2_gallery a {
   width: 100%;
   height: 25rem;
   /* height: 25rem; */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img2_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img2_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img2_gallery a:hover i, 
.img2_gallery a:hover::before {
   opacity: 1;
}

.img2-1 {
   grid-area: img2-1;
   background-image: url("../images/g2Al001.jpg");
}

.img2-2 {
   grid-area: img2-2;
   background-image: url("../images/gg2An001.jpg");
}

.img2-3 {
   grid-area: img2-3;
   background-image: url("../images/g2Ma001.jpg");
}

.img2-4 {
   grid-area: img2-4;
   background-image: url("../images/g2Me001.jpg");
}

.img2-5 {
   grid-area: img2-5;
   background-image: url("../images/g2Aa001.jpg");
}

.img2-6 {
   grid-area: img2-6;
   background-image: url("../images/g2Or001.jpg");
}

.img2-7 {
   grid-area: img2-7;
   background-image: url("../images/g2vi001.jpg");
}

.img2-8 {
   grid-area: img2-8;
   background-image: url("../images/g2Ca001.jpg");
}

.img2-9 {
   grid-area: img2-9;
   background-image: url("../images/g2Pr001.jpg");
}

.img2-10 {
   grid-area: img2-10;
   background-image: url("../images/g2GrAn001.jpg");
}

@media screen and (max-width: 1200px){
   .img2_gallery {
      grid-template-areas: 
         'img2-1 img2-1 img2-2 img2-2'
         'img2-3 img2-3 img2-4 img2-4'
         'img2-5 img2-5 img2-6 img2-6'
         'img2-7 img2-7 img2-8 img2-8'
         'img2-9 img2-9 img2-10 img2-10';
   }
}

@media screen and (max-width: 600px){
   .img2_gallery {
      grid-template-areas: 
         'img2-1 img2-1 img2-1 img2-1'
         'img2-2 img2-2 img2-2 img2-2'
         'img2-3 img2-3 img2-3 img2-3'
         'img2-4 img2-4 img2-4 img2-4'
         'img2-5 img2-5 img2-5 img2-5'
         'img2-6 img2-6 img2-6 img2-6'
         'img2-7 img2-7 img2-7 img2-7'
         'img2-8 img2-8 img2-8 img2-8'
         'img2-9 img2-9 img2-9 img2-9'
         'img2-10 img2-10 img2-10 img2-10';
   }
}


/* 2023 Master Class modified 20230430 */
.img3_slider {
   width: 800px;
   margin: 0 auto;
}

/* 2022 Master Class add on 20221009*/
.img3_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img3_gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img3-1 img3-2 img3-3 img3-4'
      'img3-5 img3-6 img3-7 img3-8'
      'img3-9 img3-9 . .';
}

.img3_gallery a {
   width: 100%;
   height: 25rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img3_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img3_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img3_gallery a:hover i, 
.img3_gallery a:hover::before {
   opacity: 1;
}

.img3-1 {
   grid-area: img3-1;
   background-image: url("../images/MC2022_Alyssa.jpg");
}

.img3-2 {
   grid-area: img3-2;
   background-image: url("../images/MC2022_Anna.jpg");
}

.img3-3 {
   grid-area: img3-3;
   background-image: url("../images/MC2022_Orion.jpg");
}

.img3-4 {
   grid-area: img3-4;
   background-image: url("../images/MC2022_Pranayaa.jpg");
}

.img3-5 {
   grid-area: img3-5;
   background-image: url("../images/MC2022_Rhea.jpg");
}

.img3-6 {
   grid-area: img3-6;
   background-image: url("../images/MC2022_Robin.jpg");
}

.img3-7 {
   grid-area: img3-7;
   background-image: url("../images/MC2022_Shreya_viola.jpg");
}

.img3-8 {
   grid-area: img3-8;
   background-image: url("../images/MC2022_Risha_singing.jpg");
}

.img3-9 {
   grid-area: img3-9;
   background-image: url("../images/MC2022_Risha_and_Rhea_Duet.jpg");
}


@media screen and (max-width: 1200px){
   .img3_gallery {
      grid-template-areas: 
         'img3-1 img3-1 img3-2 img3-2'
         'img3-3 img3-3 img3-4 img3-4'
         'img3-5 img3-5 img3-6 img3-6'
         'img3-7 img3-7 img3-8 img3-8'
         'img3-9 img3-9 img3-9 img3-9';
   }
}

@media screen and (max-width: 600px){
   .img3_gallery {
      grid-template-areas: 
         'img3-1 img3-1 img3-1 img3-1'
         'img3-2 img3-2 img3-2 img3-2'
         'img3-3 img3-3 img3-3 img3-3'
         'img3-4 img3-4 img3-4 img3-4'
         'img3-5 img3-5 img3-5 img3-5'
         'img3-6 img3-6 img3-6 img3-6'
         'img3-7 img3-7 img3-7 img3-7'
         'img3-8 img3-8 img3-8 img3-8'
         'img3-9 img3-9 img3-9 img3-9';
   }
}


/* 2022 AAFAA Competition Winners Carnegie Hall*/
.img4_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img4_gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img4-1 img4-2 img4-3 img4-4'
      'img4-5 img4-5 img4-5 img4-5';
}

.img4_gallery a {
   width: 100%;
   height: 25rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img4_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img4_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img4_gallery a:hover i, 
.img4_gallery a:hover::before {
   opacity: 1;
}

.img4-1 {
   grid-area: img4-1;
   background-image: url("../images/aafaa2022_Alyssa_Tseng.jpg");
}

.img4-2 {
   grid-area: img4-2;
   background-image: url("../images/aafaa2022_Jasmine_Tseng.jpg");
}

.img4-3 {
   grid-area: img4-3;
   background-image: url("../images/aafaa2022_Alyssa.jpg");
}

.img4-4 {
   grid-area: img4-4;
   background-image: url("../images/aafaa2022_Jasmine.jpg");
}

.img4-5 {
   grid-area: img4-5;
   background-image: url("../images/aafaa2022_1.jpg");
}


@media screen and (max-width: 1200px){
   .img4_gallery {
      grid-template-areas: 
         'img4-1 img4-1 img4-2 img4-2'
         'img4-3 img4-3 img4-4 img4-4'
         'img4-5 img4-5 img4-5 img4-5';
   }
}

@media screen and (max-width: 600px){
   .img4_gallery {
      grid-template-areas: 
         'img4-1 img4-1 img4-1 img4-1'
         'img4-2 img4-2 img4-2 img4-2'
         'img4-3 img4-3 img4-3 img4-3'
         'img4-4 img4-4 img4-4 img4-4'
         'img4-5 img4-5 img4-5 img4-5';
   }
}


/* 2022 AAFAA Competition Winners Merkin Hall*/
.img5_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img5_gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img5-1 img5-2 img5-3 img5-4'
      'img5-5 img5-5 img5-5 img5-5';
}

.img5_gallery a {
   width: 100%;
   height: 25rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img5_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img5_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img5_gallery a:hover i, 
.img5_gallery a:hover::before {
   opacity: 1;
}

.img5-1 {
   grid-area: img5-1;
   background-image: url("../images/aafaa2022_Robin_Ryan_Tseng.jpg");
}

.img5-2 {
   grid-area: img5-2;
   background-image: url("../images/aafaa2022_Claire.jpg");
}

.img5-3 {
   grid-area: img5-3;
   background-image: url("../images/aafaa2022_Lucas.jpg");
}

.img5-4 {
   grid-area: img5-4;
   background-image: url("../images/aafaa2022_Rhea.jpg");
}


.img5-5 {
   grid-area: img5-5;
   background-image: url("../images/aafaa2022_NJ_1.jpg");
}


@media screen and (max-width: 1200px){
   .img5_gallery {
      grid-template-areas: 
         'img5-1 img5-1 img5-2 img5-2'
         'img5-3 img5-3 img5-4 img5-4'
         'img5-5 img5-5 img5-5 img5-5';
   }
}

@media screen and (max-width: 600px){
   .img5_gallery {
      grid-template-areas: 
         'img5-1 img5-1 img5-1 img5-1'
         'img5-2 img5-2 img5-2 img5-2'
         'img5-3 img5-3 img5-3 img5-3'
         'img5-4 img5-4 img5-4 img5-4'
         'img5-5 img5-5 img5-5 img5-5';
   }
}

/* 2022 Dec 11 Winter Recital add on 20221226*/
.img6_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img6_gallery {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img6-1 img6-2';
}

.img6_gallery a {
   width: 100%;
   height: 15rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img6_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img6_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img6_gallery a:hover i, 
.img6_gallery a:hover::before {
   opacity: 1;
}

.img6-1 {
   grid-area: img6-1;
   background-image: url("../images/Recital20221211_1.jpg");
}

.img6-2 {
   grid-area: img6-2;
   background-image: url("../images/Recital20221211_2.jpg");
}

/* 2023 Spring Recital add on 20240601*/
.img7_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img7_gallery {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img7-1 img7-2';
}

.img7_gallery a {
   width: 100%;
   height: 15rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img7_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img7_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img7_gallery a:hover i, 
.img7_gallery a:hover::before {
   opacity: 1;
}

.img7-1 {
   grid-area: img7-1;
   background-image: url("../images/AAFAA2023/Recital20230527.jpg");
}

.img7-2 {
   grid-area: img7-2;
   background-image: url("../images/AAFAA2023/Recital20230610.jpg");
}


/* 2023 AAFAA Competition Winners Carnegie Hall*/
.img8_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img8_gallery {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img8-1 img8-2';
}

.img8_gallery a {
   width: 100%;
   height: 38rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img8_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img8_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img8_gallery a:hover i, 
.img8_gallery a:hover::before {
   opacity: 1;
}

.img8-1 {
   grid-area: img8-1;
   background-image: url("../images/AAFAA2023/aafaa2023_RyanLi.jpg");
}

.img8-2 {
   grid-area: img8-2;
   background-image: url("../images/AAFAA2023/Carnegie2023.jpg");
}

/*
@media screen and (max-width: 1200px){
   .img8_gallery {
      grid-template-areas: 
         'img8-1 img8-1 img8-2 img8-2';
   }
}

@media screen and (max-width: 600px){
   .img8_gallery {
      grid-template-areas: 
         'img8-1 img8-1 img8-1 img8-1'
         'img8-2 img8-2 img8-2 img8-2';
   }
}
*/

/* 2023 AAFAA Competition Winners Elizabeth R. Johnson Theater, NJ*/
.img9_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img9_gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img9-1 img9-2 img9-3 img9-4'
      'img9-5 img9-5 img9-5 img9-5';
}

.img9_gallery a {
   width: 100%;
   height: 25rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img9_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img9_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img9_gallery a:hover i, 
.img9_gallery a:hover::before {
   opacity: 1;
}

.img9-1 {
   grid-area: img9-1;
   background-image: url("../images/AAFAA2023/aafaa2023_Anna_Leung.jpg");
}

.img9-2 {
   grid-area: img9-2;
   background-image: url("../images/AAFAA2023/aafaa2023_Rhea.jpg");
}

.img9-3 {
   grid-area: img9-3;
   background-image: url("../images/AAFAA2023/aafaa2023_BoxuanFu.jpg");
}

.img9-4 {
   grid-area: img9-4;
   background-image: url("../images/AAFAA2023/aafaa2023_Rhea_21.jpg");
}


.img9-5 {
   grid-area: img9-5;
   background-image: url("../images/AAFAA2023/aafaa20230311.jpg");
}


@media screen and (max-width: 1200px){
   .img9_gallery {
      grid-template-areas: 
         'img9-1 img9-1 img9-2 img9-2'
         'img9-3 img9-3 img9-4 img9-4'
         'img9-5 img9-5 img9-5 img9-5';
   }
}

@media screen and (max-width: 600px){
   .img9_gallery {
      grid-template-areas: 
         'img9-1 img9-1 img9-1 img9-1'
         'img9-2 img9-2 img9-2 img9-2'
         'img9-3 img9-3 img9-3 img9-3'
         'img9-4 img9-4 img9-4 img9-4'
         'img9-5 img9-5 img9-5 img9-5';
   }
}

/* 2023 - 2026 Alumni*/
.imga1_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.imga1_gallery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'imga1-1 imga1-2 imga1-3'
      'imga1-4 imga1-5 imga1-6';
}

.imga1_gallery a {
   width: 100%;
   height: 28rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.imga1_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.imga1_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.imga1_gallery a:hover i, 
.imga1_gallery a:hover::before {
   opacity: 1;
}

.imga1-1 {
   grid-area: imga1-1;
   background-image: url("../images/AAFAA2023/2023_Alyssa_Cai.jpg");
}

.imga1-2 {
   grid-area: imga1-2;
   background-image: url("../images/AAFAA2023/2023_Mira_Mukadam.jpg");
}

.imga1-3 {
   grid-area: imga1-3;
   background-image: url("../images/AAFAA2023/2023_Anna_Leung.jpg");
}

.imga1-4 {
   grid-area: imga1-4;
   background-image: url("../images/AAFAA2023/2023_Orion_Wang.jpg");
}

.imga1-5 {
   grid-area: imga1-5;
   background-image: url("../images/AAFAA2025/2025_Maadhavan_Gopikrishnan.jpg");
}

.imga1-6 {
   grid-area: imga1-6;
   background-image: url("../images/AAFAA2026/2026_Boxuan_Robin_Fu.jpg");
}

@media screen and (max-width: 1200px){
   .imga1_gallery {
      grid-template-areas: 
         'imga1-1 imga1-1 imga1-2 imga1-2'
         'imga1-3 imga1-3 imga1-4 imga1-4'
         'imga1-5 imga1-5 imga1-6 imga1-6';
   }
}

@media screen and (max-width: 600px){
   .imga1_gallery {
      grid-template-areas: 
         'imga1-1 imga1-1 imga1-1 imga1-1'
         'imga1-2 imga1-2 imga1-2 imga1-2'
         'imga1-3 imga1-3 imga1-3 imga1-3'
         'imga1-4 imga1-4 imga1-4 imga1-4'
         'imga1-5 imga1-5 imga1-5 imga1-5'
         'imga1-6 imga1-6 imga1-6 imga1-6';
   }
}

/* 2024 Spring Recital add on 20240601*/
.img10_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img10_gallery {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img10-1 img10-2';
}

.img10_gallery a {
   width: 100%;
   height: 15rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img10_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img10_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img10_gallery a:hover i, 
.img10_gallery a:hover::before {
   opacity: 1;
}

.img10-1 {
   grid-area: img10-1;
   background-image: url("../images/AAFAA2024/Recital20240121_1.jpg");
}

.img10-2 {
   grid-area: img10-2;
   background-image: url("../images/AAFAA2024/Recital20240121_2.jpg");
}

/* 2025 Apr. Maplewood Senior Living Community Service Performance*/
.img15_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img15_gallery {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img15-1 img15-2';
}

.img15_gallery a {
   width: 100%;
   height: 15rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img15_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img15_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img15_gallery a:hover i, 
.img15_gallery a:hover::before {
   opacity: 1;
}

.img15-1 {
   grid-area: img15-1;
   background-image: url("../images/AAFAA2025/Lupine_Pranaya_Volunteer_20250426_3.jpg");
}

.img15-2 {
   grid-area: img15-2;
   background-image: url("../images/AAFAA2025/Maplewood_perform_20250426_1.jpg");
}


/* 2025 Spring Recital add on 20250607*/
.img13_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img13_gallery {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img13-1 img13-2';
}

.img13_gallery a {
   width: 100%;
   height: 15rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img13_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img13_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img13_gallery a:hover i, 
.img13_gallery a:hover::before {
   opacity: 1;
}

.img13-1 {
   grid-area: img13-1;
   background-image: url("../images/AAFAA2025/recital_20250126_1.jpg");
}

.img13-2 {
   grid-area: img13-2;
   background-image: url("../images/AAFAA2025/recital_20250126_2.jpg");
}

/* 2024 Nov. The Residence at Basking Ridge Community Service Performance */
.img14_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img14_gallery {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img14-1 img14-2';
}

.img14_gallery a {
   width: 100%;
   height: 15rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img14_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img14_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img14_gallery a:hover i, 
.img14_gallery a:hover::before {
   opacity: 1;
}

.img14-1 {
   grid-area: img14-1;
   background-image: url("../images/AAFAA2024/Lupine_Basking_Ridge_20241103_2.jpg");
}

.img14-2 {
   grid-area: img14-2;
   background-image: url("../images/AAFAA2024/Lupine_BaskingRidge_20241103_perform.jpg");
}



/* 2024 AAFAA Competition Winners Carnegie Hall*/
.img11_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img11_gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img11-1 img11-2 img11-3 img11-4'
      'img11-5 img11-6 img11-6 img11-6';
}

.img11_gallery a {
   width: 100%;
   height: 25rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img11_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img11_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img11_gallery a:hover i, 
.img11_gallery a:hover::before {
   opacity: 1;
}

.img11-1 {
   grid-area: img11-1;
   background-image: url("../images/AAFAA2024/Carnegie2024_Abhiraam.jpg");
}

.img11-2 {
   grid-area: img11-2;
   background-image: url("../images/AAFAA2024/Carnegie2024_BoxuanFu.jpg");
}

.img11-3 {
   grid-area: img11-3;
   background-image: url("../images/AAFAA2024/Carnegie2024_RyanLi.jpg");
}

.img11-4 {
   grid-area: img11-4;
   background-image: url("../images/AAFAA2024/Carnegie2024_Rhea.jpg");
}

.img11-5 {
   grid-area: img11-5;
   background-image: url("../images/AAFAA2024/Carnegie2024_LucasLi.jpg");
}

.img11-6 {
   grid-area: img11-6;
   background-image: url("../images/AAFAA2024/Carnegie20240302.jpg");
}


@media screen and (max-width: 1200px){
   .img11_gallery {
      grid-template-areas: 
         'img11-1 img11-1 img11-2 img11-2'
         'img11-3 img11-3 img11-4 img11-4'
         'img11-5 img11-5 img11-6 img11-6';
   }
}

@media screen and (max-width: 600px){
   .img11_gallery {
      grid-template-areas: 
         'img11-1 img11-1 img11-1 img11-1'
         'img11-2 img11-2 img11-2 img11-2'
         'img11-3 img11-3 img11-3 img11-3'
         'img11-4 img11-4 img11-4 img11-4'
         'img11-5 img11-5 img11-5 img11-5'
         'img11-6 img11-6 img11-6 img11-6';
   }
}

/* 2024 AAFAA Competition Winners Dorothy Young Center for the Arts, Drew University, NJ*/
.img12_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img12_gallery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img12-1 img12-2 img12-3'
      'img12-4 img12-4 img12-4';
}

.img12_gallery a {
   width: 100%;
   height: 28rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img12_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img12_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img12_gallery a:hover i, 
.img12_gallery a:hover::before {
   opacity: 1;
}

.img12-1 {
   grid-area: img12-1;
   background-image: url("../images/AAFAA2024/Eliza2024_Dhanya.jpg");
}

.img12-2 {
   grid-area: img12-2;
   background-image: url("../images/AAFAA2024/Eliza2024_Pranaya.jpg");
}

.img12-3 {
   grid-area: img12-3;
   background-image: url("../images/AAFAA2024/Eliza2024_Raaghavan.jpg");
}

.img12-4 {
   grid-area: img12-4;
   background-image: url("../images/AAFAA2024/Elizabeth20240309.jpg");
}

@media screen and (max-width: 1200px){
   .img12_gallery {
      grid-template-areas: 
         'img12-1 img12-1 img12-2 img12-2'
         'img12-3 img12-3 img12-4 img12-4';
   }
}

@media screen and (max-width: 600px){
   .img12_gallery {
      grid-template-areas: 
         'img12-1 img12-1 img12-1 img12-1'
         'img12-2 img12-2 img12-2 img12-2'
         'img12-3 img12-3 img12-3 img12-3'
         'img12-4 img12-4 img12-4 img12-4';
   }
}


/* 2025 AAFAA Young Artist Master Class*/
.img16_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img16_gallery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img16-1 img16-2 img16-3';
}

.img16_gallery a {
   width: 100%;
   height: 25rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img16_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img16_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img16_gallery a:hover i, 
.img16_gallery a:hover::before {
   opacity: 1;
}

.img16-1 {
   grid-area: img16-1;
   background-image: url("../images/AAFAA2025/YAMC_2025_1.jpg");
}

.img16-2 {
   grid-area: img16-2;
   background-image: url("../images/AAFAA2025/YAMC_2025_2.jpg");
}

.img16-3 {
   grid-area: img16-3;
   background-image: url("../images/AAFAA2025/YAMC_2025_3.jpg");
}


@media screen and (max-width: 1200px){
   .img16_gallery {
      grid-template-areas: 
         'img16-1 img16-1 img16-2 img16-2'
         'img16-3 img16-3 img16-3 img16-3';
   }
}

@media screen and (max-width: 600px){
   .img16_gallery {
      grid-template-areas: 
         'img16-1 img16-1 img16-1 img16-1'
         'img16-2 img16-2 img16-2 img16-2'
         'img16-3 img16-3 img16-3 img16-3';
   }
}



/* 2025 AAFAA Competition Winners Carnegie Hall*/
.img17_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img17_gallery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img17-1 img17-2 img17-3'
      'img17-4 img17-5 img17-5';
}

.img17_gallery a {
   width: 100%;
   height: 25rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img17_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img17_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img17_gallery a:hover i, 
.img17_gallery a:hover::before {
   opacity: 1;
}

.img17-1 {
   grid-area: img17-1;
   background-image: url("../images/AAFAA2025/Carnegie_2025_1.jpg");
}

.img17-2 {
   grid-area: img17-2;
   background-image: url("../images/AAFAA2025/Carnegie_2025_2.jpg");
}

.img17-3 {
   grid-area: img17-3;
   background-image: url("../images/AAFAA2025/Carnegie_2025_3.jpg");
}

.img17-4 {
   grid-area: img17-4;
   background-image: url("../images/AAFAA2025/Carnegie_2025_4.jpg");
}

.img17-5 {
   grid-area: img17-5;
   background-image: url("../images/AAFAA2025/Carnegie_2025_5.jpg");
}


@media screen and (max-width: 1200px){
   .img17_gallery {
      grid-template-areas: 
         'img17-1 img17-1 img17-2 img17-2'
         'img17-3 img17-3 img17-4 img17-4'
         'img17-5 img17-5 img17-5 img17-5';
   }
}

@media screen and (max-width: 600px){
   .img17_gallery {
      grid-template-areas: 
         'img17-1 img17-1 img17-1 img17-1'
         'img17-2 img17-2 img17-2 img17-2'
         'img17-3 img17-3 img17-3 img17-3'
         'img17-4 img17-4 img17-4 img17-4'
         'img17-5 img17-5 img17-5 img17-5';
   }
}


/* 2025 AAFAA Competition Winners Dorothy Young Center for the Arts, Drew University, NJ*/
.img18_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 1.5rem;
}

.img18_gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto;
   grid-gap: 1rem;
   grid-template-areas: 
      'img18-1 img18-2 img18-3 img18-4'
      'img18-6 img18-5 img18-5 img18-5';
}

.img18_gallery a {
   width: 100%;
   height: 25rem;

   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.img18_gallery a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 3rem;
   position: relative;
   z-index: 100;
   padding: 1rem 3rem;
   border: 2px solid  rgba(255, 255, 255, 0.6);
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s;
}

.img18_gallery a::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0, 0.8);
   opacity: 0;
   transition: opacity 0.5s;
}

.img18_gallery a:hover i, 
.img18_gallery a:hover::before {
   opacity: 1;
}

.img18-1 {
   grid-area: img18-1;
   background-image: url("../images/AAFAA2025/Dorothy_Young_2025_1.jpg");
}

.img18-2 {
   grid-area: img18-2;
   background-image: url("../images/AAFAA2025/Dorothy_Young_2025_2.jpg");
}

.img18-3 {
   grid-area: img18-3;
   background-image: url("../images/AAFAA2025/Dorothy_Young_2025_3.jpg");
}

.img18-4 {
   grid-area: img18-4;
   background-image: url("../images/AAFAA2025/Dorothy_Young_2025_4.jpg");
}

.img18-5 {
   grid-area: img18-5;
   background-image: url("../images/AAFAA2025/Dorothy_Young_2025_5.jpg");
}

.img18-6 {
   grid-area: img18-6;
   background-image: url("../images/AAFAA2025/Dorothy_Young_2025_6.jpg");
}

@media screen and (max-width: 1200px){
   .img18_gallery {
      grid-template-areas: 
         'img18-1 img18-1 img18-2 img18-2'
         'img18-3 img18-3 img18-4 img18-4'
         'img18-6 img18-6 img18-5 img18-5';
   }
}

@media screen and (max-width: 600px){
   .img18_gallery {
      grid-template-areas: 
         'img18-1 img18-1 img18-1 img18-1'
         'img18-2 img18-2 img18-2 img18-2'
         'img18-3 img18-3 img18-3 img18-3'
         'img18-4 img18-4 img18-4 img18-4'
         'img18-6 img18-6 img18-6 img18-6'
         'img18-5 img18-5 img18-5 img18-5';
   }
}

