#lightbox {
  background-color: #eee;
  padding: 10px;
  border-bottom: 2px solid #666;
  border-right: 2px solid #666
}

#lightbox #lightboxDetails {
  font-size: 14px;
  padding-top: 0.4em
}

#lightbox #lightboxCaption {
  float: left
}

#lightbox #keyboardMsg {
  float: right
}

#lightbox #keyboardMsg a {
  text-decoration: none;
  font-size: 0.8em;
  color: #555555;
  font-family: verdana
}

#lightbox img {
  border: none
}

#overlay img {
  border: none
}

#overlay {
  background: #fff;
  opacity: 0.7;
  filter: alpha(opacity=70)
}

#lightbox #closeButton {
  top: 10px;
  right: 10px;
  border-left: 5px solid white !important
}

#lightbox2 {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 100;
  text-align: center;
  line-height: 0
}

#lightbox2 a img {
  border: none
}

#lightbox2 #outerImageContainer {
  position: relative;
  background-color: #fff;
  width: 250px;
  height: 250px;
  margin: 0 auto
}

#lightbox2 #imageContainer {
  padding: 10px
}

#lightbox2 #loading {
  position: absolute;
  top: 40%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0
}

#lightbox2 #hoverNav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10
}

#lightbox2 #imageContainer>#hoverNav {
  left: 0
}

#lightbox2 #hoverNav a {
  outline: none
}

#lightbox2 #prevLink,
#lightbox2 #nextLink {
  width: 49%;
  height: 100%;
  background: transparent url(/images/util/general/blank.gif) no-repeat;
  display: block
}

#lightbox2 #prevLink {
  left: 0;
  float: left
}

#lightbox2 #nextLink {
  right: 0;
  float: right
}

#lightbox2 #prevLink {
  left: 0;
  float: left
}

#lightbox2 #nextLink {
  right: 0;
  float: right
}

#lightbox2 #prevLink:hover,
#lightbox2 #prevLink:visited:hover {
  background: url(/images/common/lightbox/prevlabel.gif) left 15% no-repeat
}

#lightbox2 #nextLink:hover,
#lightbox2 #nextLink:visited:hover {
  background: url(/images/common/lightbox/nextlabel.gif) right 15% no-repeat
}

#lightbox2 #imageDataContainer {
  font: 10px Verdana, Helvetica, sans-serif;
  background-color: #fff;
  margin: 0 auto;
  line-height: 1.4em
}

#lightbox2 #imageData {
  padding: 0 10px
}

#lightbox2 #imageData #imageDetails {
  width: 50%;
  float: left;
  text-align: left;
  color: #fff
}

#lightbox2 #imageData #caption {
  font-weight: bold
}

#lightbox2 #imageData #numberDisplay {
  display: block;
  clear: left;
  padding-bottom: 1.0em
}

#lightbox2 #imageData #bottomNavPrev {
  width: 20px;
  float: right;
  padding-bottom: 0.7em
}

#lightbox2 #imageData #bottomNavPrev img {
  display: block;
  margin: 3px auto 0 auto
}

#lightbox2 #imageData #bottomNavNext {
  width: 20px;
  float: right;
  padding-bottom: 0.7em
}

#lightbox2 #imageData #bottomNavNext img {
  display: block;
  margin: 3px auto 0 auto
}

#lightbox2 #imageData #bottomNavClose {
  width: 66px;
  float: right;
  padding-bottom: 0.7em;
  margin: 0 0 0 10px
}

#lightbox2-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 500px;
  background-color: #fff;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6
}

#lightbox2 .clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden
}

* html>body #lightbox2 .clearfix {
  display: inline-block;
  width: 100%
}

* html #lightbox2 .clearfix {
  height: 1%
}
.lightbox-gallery{background-image: linear-gradient(#4A148C, #E53935);background-repeat: no-repeat;color: #000;overflow-x: hidden}.lightbox-gallery p{color:#fff}.lightbox-gallery h2{font-weight:bold;margin-bottom:40px;padding-top:40px;color:#fff}@media (max-width:767px){.lightbox-gallery h2{margin-bottom:25px;padding-top:25px;font-size:24px}}.lightbox-gallery .intro{font-size:16px;max-width:500px;margin:0 auto 40px}.lightbox-gallery .intro p{margin-bottom:0}.lightbox-gallery .photos{padding-bottom:20px}.lightbox-gallery .item{padding-bottom:30px}
    /* CSS for the modal */
    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Position it on top of the content */
      z-index: 9999; /* Make sure it's above other elements */
      padding-top: 100px; /* Add space at the top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scrolling if needed */
      background-color: rgb(0, 0, 0); /* Fallback color */
      background-color: rgba(0, 0, 0, 0.9); /* Black with opacity */
    }
    
    /* CSS for the modal content (image) */
    .modal-content {
      margin: auto;
      display: block;
      height:max-content;
      width:auto;
    }
    
    /* CSS for the close button */
    .close {
      color: #fff;
      position: absolute;
      top: 15px;
      right: 35px;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
    }
    
    .close:hover,
    .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }