* {margin: 0; padding: 0;}
 

 
#photobannercontainer {
width: 1040px;
 height: 400px;
 overflow: hidden;
 margin: 1px auto;
 background: black; 

}



.photobanner{
  height:400px;
  width: 14400px;
  margin-top:0px;
  margin-bottom:1px; 

}
 

    

.first{
    -webkit-animation: bannermove 60s linear infinite;
       -moz-animation: bannermove 60s linear infinite;
        -ms-animation: bannermove 60s linear infinite;
         -o-animation: bannermove 60s linear infinite;
            animation: bannermove 60s linear infinite;
}



@keyframes "bannermove" {
 0% {    margin-left: 0px; }
 100% {    margin-left: -10000px; }
}
 
@-moz-keyframes bannermove {
 0% {   margin-left: 0px; }
 100% {   margin-left: -10000px; }
}
 
@-webkit-keyframes "bannermove" {
 0% {   margin-left: 0px; }
 100% {   margin-left: -10000px; }
}
 
@-ms-keyframes "bannermove" {
 0% {   margin-left: 0px; }
 100% {   margin-left: -10000px; }
}
 
@-o-keyframes "bannermove" {
 0% {   margin-left: 0px; }
 100% {   margin-left: -10000px;}
}

 
.photobanner img {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    animation-delay: .75s;
}

.photobanner  img:hover{
   -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    cursor: pointer;
 
    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
 
.photobanner  hover:overlay{
   -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    cursor: pointer;
 
    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    
        transition: all .0s ease;
}




.gallery-container {
  display: flex;
  justify-content: center;
}

.thumbnails {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.thumbnails img {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.scrollbar {
  width: 1px;
  height: 720px;
  background: #ccc;
  display: block;
  margin: 0 0 0 8px;
}

.thumb {
  width: 1px;
  position: absolute;
  height: 0;
  background: #000;
}

.slides {
  margin: 0 16px;
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;
  width: calc(540px + 1rem);
  padding: 0 0.25rem;
  height: 720px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.slides > div {
  scroll-snap-align: start;
}

.slides img {
  width: 540px;
  object-fit: contain;
}

.slides::-webkit-scrollbar {
  display: none;
}