/* Spilt CSS on 9-15-25 */
/* CSS for Illustration page */
/* IMAGE GRID */
#index-gallery{
    display: grid;
    padding: 4%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
    grid-template-areas:
	"gallery-p gallery-p gallery-p gallery-p"
	"gallery-h2 gallery-h2 gallery-h2 gallery-h2"  
	"img1 img2 img3 img3"
	"img4 img2 img3 img3"
	"img4 img5 img3 img3"
	"img6 img6 img7 img8"
	"img6 img6 img7 img9"
	"img10 img11 img12 img9"
	"img10 img13 img15 img15"
	"img14 img13 img15 img15";
  }
#index-gallery .gallery-img{
    height: 200px;
    max-width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border-radius: 7px;
}
/* height = (200px x n) +++ (10px x (n-1) ) */
#index-gallery p{
    grid-area: gallery-p;
}
#index-gallery h2{
    grid-area: gallery-h2;
}
#index-gallery .img1{
    grid-area: img1;
    background-position: bottom;
    background-image: url("../images/thumbs/img1.jpg");
}
#index-gallery .img2{
    grid-area: img2;
    background-image: url("../images/thumbs/img2.jpg");
    height: var(--gal-2box);
}
#index-gallery .img3{
    grid-area: img3;
    background-image: url("../images/thumbs/img3.jpg");
    height: var(--gal-3box);
    background-position: top;
}
#index-gallery .img4{
    grid-area: img4;
    background-image: url("../images/thumbs/img4.jpg");
    height: var(--gal-2box);
}
#index-gallery .img5{
    grid-area: img5;
    background-image: url("../images/thumbs/img5.jpg");
}
#index-gallery .img6{
    grid-area: img6;
    background-image: url("../images/thumbs/img6.jpg");
    height: var(--gal-2box);
}
#index-gallery .img7{
    grid-area: img7;
    background-image: url("../images/thumbs/img7.jpg");
    height: var(--gal-2box);
}
#index-gallery .img8{
    grid-area: img8;
    background-image: url("../images/thumbs/img8.jpg");
}
#index-gallery .img9{
    grid-area: img9;
    background-image: url("../images/thumbs/img9.png");
    height: var(--gal-2box);
}
#index-gallery .img10{
    grid-area: img10;
    background-image: url("../images/thumbs/img10.jpg");
    height: var(--gal-2box);
}
#index-gallery .img11{
    grid-area: img11;
    background-image: url("../images/thumbs/img11.jpg");
}
#index-gallery .img12{
    grid-area: img12;
    background-image: url("../images/thumbs/img12.jpg");
}
#index-gallery .img13{
    grid-area: img13;
    background-image: url("../images/thumbs/img13.jpg");
    height: var(--gal-2box);
}
#index-gallery .img14{
    grid-area: img14;
    background-image: url("../images/thumbs/img14.jpg");
}
#index-gallery .img15{
    grid-area: img15;
    background-image: url("../images/thumbs/img15.jpg");
    height: var(--gal-2box);
}
/*Lightbox Image Titles */
.gallery-img div{
    height: 100%;
    width: 100%;
    background-color: var(--primary-color);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.gallery-img a{
    font-size: 18px;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
}
.gallery-img div:hover{
    opacity: 0.8;
    scale: 1;
    transition: var(--tran-03);
}
/* Lightbox Image popup */
.img-window{
    height: 100vh;
    width: 100vw;
    background-color: rgba(10, 20, 40, .8);
    position: fixed;
    top: 0;
    left: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.img-window img{
    max-height: 90vh;
    max-width: 90vw;
}
/* Lightbox Buttons */
.img-btn-prev{
    display: block;
    padding: 15px 15px;
    border-radius: 5px;
    color: #141432;
    background-color: #d5d7dd;
    position: fixed;
    top: 48vh;
    cursor: pointer;
    z-index: 20;
    text-transform: uppercase;
}
.img-btn-prev:hover{
    color: var(--body-color);
    background-color: var(--primary-color);
}
.img-btn-next{
    display: block;
    padding: 15px 15px;
    border-radius: 5px;
    color: #141432;
    background-color: #d5d7dd;
    position: fixed;
    top: 48vh;
    cursor: pointer;
    z-index: 20;
    text-transform: uppercase;
}
.img-btn-next:hover{
    color: var(--body-color);
    background-color: var(--primary-color);
}
/* Gallery Media Q */
@media(max-width: 800px){
#index-gallery{
    transition: var(--tran-05);
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
  	"img1 img1"
  	"img2 img3"
  	"img2 img3"
  	"img4 img5"
  	"img4 img5"
  	"img6 img6"
  	"img7 img8"
  	"img7 img8"
  	"img9 img10"
  	"img9 img10"
  	"img11 img11"
  	"img12 img13"
  	"img12 img13"
  	"img14 img15"
  	"img14 img15";
}
#index-gallery .img1, #index-gallery .img3, #index-gallery .img5, #index-gallery .img8, #index-gallery .img11, #index-gallery .img12, #index-gallery .img14{
	height: var(--gal-2box);
}
}
@media(max-width: 450px){
#index-gallery{
		grid-template-columns: 1fr;
		grid-template-areas:
  	"img1""img2""img3""img4""img5""img6""img7""img8""img9""img10""img11""img12""img13""img14""img15"	;
}
#index-gallery .img1, #index-gallery .img2, #index-gallery .img3, #index-gallery .img4, #index-gallery .img5, #index-gallery .img6, #index-gallery .img7, #index-gallery .img8, #index-gallery .img9, #index-gallery .img10, #index-gallery .img11, #index-gallery .img12, #index-gallery .img13, #index-gallery .img14, #index-gallery .img15{
		height:  210px;
}
#index-gallery .img2, #index-gallery .img9{
		background-position: bottom;
}
#index-gallery .img3{
		background-position: center;
}
#index-gallery .img5, #index-gallery .img7,#index-gallery .img10, #index-gallery .img15{
		background-position: top;
}
}