body { /* stop body scroll -- class added to body via js */
  position: fixed;
  overflow: hidden;
  inset: 0;
}

.infobuttons {
  position: fixed;
  top: 45vh;
  left: 40px;
  z-index: 80;
}

.gallery-title {
  margin: 0;
}

/* Modal Content */
.modal-content {
  position: relative;
  width: 98vw;  /* adjust here to set wrapper width -- mySlides width */
  height: 24vh;
  padding: 0;
  margin: 150px 0 0 -40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  z-index: 50;
}

.toTop {
  right: 4vw;
  bottom: 8vh;
}

@media only screen and (min-device-width: 1200px){
.gallery-title {
  padding-top: 0px;
  margin: 20px 0 0 110px;
}
.infobuttons {
  position: absolute;
  top: 100px;
  left: 40px;
  z-index: 120;
}
.modal-content {
  width: 70vw;    /* adjust here to set wrapper width -- mySlides width */
  height: 85vh;
  margin: 50px auto;
}}

@media only screen and (max-device-width: 1200px) and (orientation: landscape){
.gallery-title {
  position: absolute;
  top: 70px; left: 20px;
  width: 210px;
}
.infobuttons {
  position: absolute;
  top: 150px;
  left: 20px;
}
.info1 p, .info2 p {
  font-size: 21px;
  padding: 15px 16px 0px 16px;
}
.toTop {
  left: 4vw;
  bottom: 8vh;
}
.modal-content {
  position: absolute;
  top: 2px;
  left: 10dvw;
  width: 76%;
  height: 100vh;
  margin: 0;
}}



.slide-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* vertical center for images under 800px high -apply diplay:flex to parent div */
}

.mySlides {
  position: absolute;
  top: 0;
  width: 100%;
    aspect-ratio: 3 / 2;  /* keep portraits same height as landscapes */
  margin: auto;
  opacity: 0;
  transition: 0.3s ease-out;
}
.fade-in {
  opacity: 1;
  transition: 0.3s ease-out;
}

img.slide {
  position: relative;
   border-radius: 5px;
  outline: 3px ridge #AFAFAF;
  height: 100%;
  width: auto; /* keep portraits same height as landscapes */
  margin: auto; 
}

@media only screen and (min-device-width: 1200px){
.slide-wrapper {
}
.mySlides {
  height: 100%;
}
img.slide {
  height: 100%;
}}

.slidecaption {
  opacity: 0;
  height: 0px;
  z-index: 0;
}

/* Next & previous area */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom:0;
  width: 50%;
  user-select: none;
  -webkit-user-select: none;
  z-index: 10;
}
.prev { /* Position the "prev area" to the left */
  left:0px;
}
.next { /* Position the "next area" to the right */
  right: 0;
}

/* Next & previous buttons */
.prev-button, .next-button {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  width: 60px;
  height: 50px;
  padding: 9px;
  color: #AFAFAF;
  font-weight: bold;
  font-size: 35px;
  transition: 0.6s ease;
  border-radius: 0 6px 6px 0;
  user-select: none;
  -webkit-user-select: none;
	}
.prev-button {
  left:0px;
}
/* Position the "next button" to the right */
.next-button {
  right: 0;
  border-radius: 6px 0 0 6px;
}

@media only screen and (min-device-width: 1200px){
.prev-button, .next-button {
  top: 50%;
  font-size: 20px;
  font-size: 25px;
}
/* On hover, add a dark background */
.prev-button:hover,
.next-button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}}

.strip {
  display: none;
}  

.thumb {
  display: flex;
  min-width: 215px;
  height: 210px;
  border-radius: 5px;
  overflow: hidden;  /* allow thumbs round corners */
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fills container, crops image to maintain aspect ratio */
  object-position: center;
}

@media only screen and (min-device-width: 1200px){
.pullout {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0;
  color: #AFAFAF;
  font-size: 25px;
}
.strip {
  position: fixed;
  top: 25%;
  left: 0px;
  position: ;
  display: flex;
  width: 30vw;
  height: 65vh;
  flex-direction: column;
  transform: translateX(-95%);
  transition: 0.3s ease-in;
  transition-delay: 0s;
  z-index: 120;
}
.strip:hover {  
  transform: translateX(0%);
  transition: 0.5s ease-out;
}

.thumbs-list {
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(0,0,0,0.8);
  border: 3px ridge #AFAFAF;
  border-radius: 5px;
  overflow-x: hidden; 
  overflow-y: auto;
  column-gap: 5px; 
  gap: 5px;
  scroll-behavior: smooth; 
  scrollbar-width: none;  /* Firefox */
	}
.strip::-webkit-scrollbar {
  display: none; /* Chrome */
}
.thumb {
  display: flex;
  min-width: 45px;
  max-width: 110px;
  height: 70px;
  opacity: 0.7;
}
.active,
.thumb:hover {
  opacity: 1;
  transition: 0.3s;
  outline: 0px ridge #AFAFAF;
}}


@media only screen and (max-device-width: 1200px) and (orientation: landscape){
.slide-wrapper {
  position: relative;
  height: 99%;
  width: auto;
  right: 0%;
  margin-left: 170px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* vertical center for images under 800px high  */
}
.mySlides{
  width: 98%;

}
img.slide{
}
.prev-button, .next-button {
  top: 55%;
  font-size: 25px;
}
.strip {
  flex-wrap: wrap;
  position: absolute;
  top: -50px;
  left: 20px;
  height: 400px;
  max-height: 400px;
  width: 150px; 
  overflow-x: hidden; 
  overflow-y: auto;
  gap: 5px;
}
.thumb {
  min-width: 150px;
  height: 150px;
}}


.fade { animation: fadeIn 0.2s ease-out; }

@keyframes fadeIn {
	0% {opacity: 0.2;}
	100% {opacity: 1;}
}