.infobuttons {
  position: absolute;
  top: 45dvh;
  left: 40px;
  z-index: 120;
}

.info1, .info2 {
  background-color: rgb(18,80,14,0.8);
  padding: 16px 26px 6px 26px;
  border-radius: 10%;
}

.toTop {
  right: 6dvw;
  bottom: 28dvh;
}
@media only screen and (min-device-width: 1200px){
.gallery-title{
  padding-top: 0px;
  margin: 10px 0 0 110px;
}
.infobuttons {
  position: absolute;
  top: 100px;
  left: 40px;
  z-index: 120;
}}

@media only screen and (max-device-width: 1200px) and (orientation: landscape){
.gallery-title {
  width: 210px;
}
.infobuttons {
  top: 140px;
  left: 20px;
}
details > summary {
  width: 130px;
}
.info1 p, .info2 p { 
  font-size: 1.2em;
}
.toTop {
  left: 2vw;
  bottom: 8vh;
}}

body, html { 
overflow: hidden; 
  height: 100vh;
}
footer {
  display: none;
}

.slides-box{
  position: relative;
  width: 98%;
  aspect-ratio: 3 / 2;
  margin: 60px 0 0 20px;
  display: flex;
  z-index: 10;
  overflow-x: scroll; 
  overflow-y: hidden; 
    scroll-snap-type: x mandatory;
    scroll-snap-align: start;
  scroll-behavior: auto; 
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  gap: 50px;
  background-color: none;
	}
.slides-box::-webkit-scrollbar {
  display: none; /* Chrome */
}
.slides-box, .mySlide {
  pointer-events: auto;
}

.mySlide {
  display: flex;
  position: relative;
  width: 98%;
  aspect-ratio: 3 / 2;
  margin: auto;
  justify-content: center;
  align-items: center;
  padding: 0px 0px 0px 0px;
    scroll-snap-align: start;  
    scroll-snap-stop: always;
}
img.slide {
  height: 98%;
  width: auto;
   border-radius: 5px;
  outline: 3px ridge #AFAFAF;
} 
  
.strip {
  display: none;
}  

@media only screen and (max-device-width: 1200px) and (orientation: landscape){
.slides-box{
  position: absolute; 
  top: 0px;
  width: 68dvw;
  margin: 0px 0 0 230px;
}} 

@media only screen and (min-device-width: 1200px){
.slides-box {
  width: 72%;
  margin: 10px auto 0 auto;
  display: block;
  overflow-y: auto; 
  overflow-x: hidden; 
    scroll-snap-type: y mandatory;
}

.mySlide {
  width: 100%;
  margin-right: 0px;
}  

.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 {
  min-width: 42px;
  max-width: 110px;
  height: 70px;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fills container, crops image to maintain aspect ratio */
  object-position: center;
}
.thumb:hover {
  opacity: 1;
  transition: 0.3s;
  outline: 0px ridge #AFAFAF;
}}