#map-container {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 800px; /* Match thumbnail height */
	flex-wrap: wrap;
}
.contentBox {
  position: absolute;
  top: 50%;
  left: 450px; /* Width of thumbnail + any margin */
  transform: translateY(-50%); /* Only center vertically */
  margin: 2px auto auto auto;
  overflow: hidden;
  border: 1px solid #aaa;
  padding: 0;
  cursor: move;
}
#fullscreen {
  position: relative;
  display: block;
}
#thumbnail {
  position: relative;
  flex-shrink: 0; /* Prevent shrinking */
  margin-right: 20px; /* Add some space */
}
#thumbImage {
  z-index: 1;
}
#magnifier {
  width: 55px;
  height: 55px;
  border: 1px solid #000066;
  position: absolute;
  z-index: 100;
  cursor: move;
}
#captionContainer {
  position: relative;
  height: 25em;
}
div.HScaption {
  position: absolute;
  visibility: hidden;
  width: 180px; /* 200 px */
  background-color: #fff;
  font-style: normal;
}
div.HScaption p {
  padding: 1px;
}
h2.caphead {
  margin: 0;
  color: #fff;
  background-color: #0C3F9E;
  font-style: normal;
  padding: 1px;
}
@media only screen and (max-width: 860px) {
  #map-container {
    flex-direction: column; /* Stack vertically on mobile */
    align-items: center;
  }
  
  .contentBox {
    position: relative; /* Change from absolute */
    left: auto;
    top: auto;
    transform: none;
    margin: 20px auto 0 auto; /* Center horizontally, add top margin */
  }
  
  #thumbnail {
    margin-right: 0;
    margin-bottom: 20px;
  }
}