body{
    background-color: white;
    color: #073e7f;
}

.photo_gallery_div{
    display: inline-block;
    margin:15px;
}

.photo_gallery_wrapper{
    padding-bottom: 250px;
}

.gallery_wrapper{
    width: 90%;
    margin: auto;
}

h1{
    color: #0248A8;
    margin-bottom: 30px;
    font-weight: 700;
    font-size: 25px;
}

.photo_gallery_wrapper h1:nth-child(1){
    font-weight: 700;
}

.photo_gallery_thumbnail{
    min-height: 380px;
    width: 270px;
    background-color: white;
    border: 1px solid #eb9d48;;
     
}

.photo_gallery_thumbnail >a {
    text-decoration: none;
}


.photo_gallery_img_area{
    width: 268px;
    height: 185px;
    background-color: white;
    position: relative;
}

.photo_gallery_img_area_overlay{
    position:absolute;
    height: 100%;
    width: 100%;
    top:0px;
    left: 0px;
    color: white;
    background-color:rgba(72, 28, 136, 0.8);
    opacity: 0;

}

.photo_gallery_img_area_overlay_text{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0px 20px;
     
}

 

.photo_gallery_img_area>img{
    width: 268px;
    height: 185px;
    object-fit: cover;
}

.photo_gallery_activity_text_area {
    position: relative;
    min-height: 153px;
}

.photo_gallery_activity_text_area_overlay{
    content: "";
    background-color: rgba(245, 148, 39, 0.9);
    width: 100%;
    height: 110%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    opacity: 0;
    color: white;
    display: flex;
    align-items: center;
    padding: 0px 20px;
}

 .photo_gallery_activity_name{
    padding: 10px;
    font-size: 18px ;
    font-weight: bold ;
    color: grey;
    min-height: 153px;

 }

 .photo_gallery_activity_date{
    padding-left: 15px;
    color: grey;
 }


 .photo_gallery_thumbnail:hover .photo_gallery_img_area_overlay{
    opacity: 1;
 }


 .photo_gallery_thumbnail:hover .photo_gallery_activity_text_area_overlay{
    opacity:1
 }

 .gallery_container a{
    margin-bottom: 10px;
    text-decoration: none;
 }

 .gallery_container>a:hover>.gallery-box>.gallery-img-box::after{
    opacity: 0.5;
 }

 .gallery_container>a:hover>.gallery-box>.gallery-img-box>.gallery-organiser{
    opacity: 1;
 }

 .gallery-box{
    width: 270px;
    height: 380px;
    /* border: 1px solid #eb9d48; */
    border: 1px solid #0248A8;
    display: inline-block;
    vertical-align:bottom;
    margin:10px 10px;
    background-color: #0248A8;
    transition: background-color 0.3s, border-color 0.3s;
    /* background-color: #eb9d48; */
 }

 /* 2023-12-4 add orange layer */
.gallery-box:hover {
    border-color: #eb9d48;
    background-color: #eb9d48;
}




 .gallery-img-box{
    width: 268px;
    height: 185px;
    /* border-bottom: 1px solid #eb9d48;; */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    position: relative;
 }

 .gallery-img-box::after{
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(23,24,117);
    opacity: 0;
    position: absolute;
    top:0px;
    left: 0px;
 }

 .gallery-img-box img{
    width: 270px;
    height:180px;
    max-width: 98%;
    max-height: 98%;
    object-fit: cover;    
 }

 .gallery-organiser{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    opacity: 0;
    z-index: 1;
    font-size: 12px;
 }

 .gallery-box-content{
    width: 90%;
    margin: auto;
    color: white;
 }

.acti-name{
    font-weight: bold;
    font-size:16px;
    line-height: 1.3em;
    margin: 15px 0px;
    height:70px;
}


@media (max-width:767px) {
    .gallery_container{
        text-align: center;
    }
}

#footer h3{
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-weight: 500;
}