.caption-hidden {
     display: none;
}
 .captionPopup{
     display:block;
     position: fixed;
     background: #FFF;
     padding: 30px;
     bottom: 0;
     left: 0;
     right: 0;
     text-align:center;
     margin: 40px auto 0;
     color: #0a233f;
     font-size: 16px;
     line-height: 1.4em;
     box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.75);
     -webkit-transition: 0.3s;
     transition: 0.3s;
}
.tier.popupGallery .flexGrid img {
    margin: 0 auto;
    max-width: 100%;
    width: unset !important;
    height: auto;
}
.tier.popupGallery .img-wrapper a:focus img{
     outline:2px solid #81d1e2 !important;
}
.tier.popupGallery .img-wrapper img:hover{
     transform: scale(1.1);
}
@media screen and (max-width: 768px) and (min-width:640px){
    .reveal{
        top:0 !important;
        max-width: 75% !important;
    }
}
/* For small laptops and tablets in landscape mode */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .reveal{
        top:0 !important;
        max-width: 75% !important;
    }
}

/* For standard laptops and desktops */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .reveal{
        top:0 !important;
        max-width: 50% !important;
    }
}

/* For large laptops and high-resolution desktops */
@media screen and (min-width: 1281px) {
    .reveal{
        top:0 !important;
        max-width: 45% !important;
    }
}
.reveal{
     top:100px !important;
     padding:2rem;
     box-shadow: 0px 0px 80px 10px rgba(0,0,0,.75) 
}
.reveal img{
    max-width: 800px !important;
    width: 100% !important;
}
@media screen and (min-width: 641px) and (max-width:2000px){
    .reveal img {
          max-height: 60vh;   /* keeps image from exceeding screen height */
          max-width: 90vw;    /* keeps image from exceeding screen width */
          width: auto;
          height: auto;
          object-fit: contain;
    }
}
 .reveal .previ,.reveal .nexti {
     cursor: pointer;
     position: absolute;
     top: 50%;
     width: auto;
     padding: 10px;
     margin-top: -22px;
     color: white;
     font-weight: bold;
     font-size: 25px;
     transition: 0.6s ease;
     border-radius: 0 3px 3px 0;
     user-select: none;
     color: #0a233f;
}
 .reveal .nexti{
     right: 0;
     background:none !important;
     border-width:0px !important 
}
 .reveal .previ{
     left:0;
     background:none !important;
     border-width:0px !important 
}
 .reveal .previ:focus,.reveal .nexti:focus {
     outline: 2px solid #81d1e2 !important;
}
 .reveal .previ:hover,.reveal .nexti:hover {
     opacity:1;
}
.tier.popupGallery .popup-img.horiz{
    top: 100px !important;
    vertical-align: bottom;
    width: 100% !important;
    height: auto !important;
}
.tier.popupGallery .popup-img.vert{
    top: 100px !important;
    vertical-align: bottom;
    width: auto !important;
    height: 400px !important;
}

/*media queries*/
@media screen and (max-width: 2000px){
    .tier.popupGallery .reveal{
        top:100px !important;
    }
}

@media screen and (max-width: 1920px){
     .img-wrapper img:hover{
         transform: scale(1.1);
    }
}
/*
@media only screen and (max-width: 1024px) and (min-width:601px) {
     .img-wrapper{
         justify-self: center;
    }
}
 @media only screen and (min-width: 1200px) {
     .galleryPopup.flexGrid .flexCard img {
         max-width:100% !important;
         height: 100% !important;
         margin: 0 auto;
    }
     .galleryPopup.flexGrid .flexCard {
         margin: 5px auto !important;
    }
}
 @media only screen and (max-width: 1200px) and (min-width:749px) {
     .galleryPopup.flexGrid .flexCard img {
         max-width:100% !important;
         height: 100% !important;
    }
}
 @media only screen and (max-width: 748px) and (min-width:600px) {
     .galleryPopup.flexGrid .flexCard img {
         max-width:100% !important;
         height: 100% !important;
    }
}
*/
/*
 @media screen and (max-width:2000px) and (min-width:1000px){
     .reveal{
         top:10% !important;
         max-width:40% !important;
    }
     .reveal img{
         width:90% !important;
         margin: 0 auto;
    }
     .caption{
         padding:20px;
    }
}
 @media screen and (max-width:999px) and (min-width:640px){
     .reveal{
         max-width:50% !important;
    }
     .reveal img{
         width:90% !important;
         margin: 0 auto;
    }
     .caption{
         padding:20px;
    }
}
*/
@media all and (max-width:1024px) and (min-width:640px){
     .img-wrapper img:hover{
         transform: none;
    }
}
 @media all and (max-width: 639px){
     .reveal{
         top:0 !important;
         padding:1rem;
    }
     .reveal img{
        padding-top:10%;
        max-width: 100%;
        height:auto;
        display:block;
        margin:0 auto;
    }
     .caption{
         padding:20px;
    }
    .tier.popupGallery .img-modal .modal-content{
         position: absolute;
         left: 50%;
         top: 40%;
         transform: translate(-50%, -50%);
         max-width:80%;
    }
     .img-wrapper a:focus img:hover{
         outline:2px solid #81d1e2 !important;
         opacity:1 
    }
     .img-wrapper img:hover{
         transform: none;
    }
    .captionPopup {
        box-shadow: none !important;    
    }
    .reveal .previ{
        z-index: 1;
    }
    .img-modal{
        display:flex;
        align-items: center;
        justify-content: center;
    }
    .img-modal img{
        max-width: 100%;
        height:auto;
        display:block;
        margin:0 auto;
    }
}