#img-container {
  width: 100%;
  max-width: 1000px;
  overflow-x: hidden;
  margin: 0rem;
}
#img-container:hover > div {
  animation-play-state: paused;
}
@keyframes slide {
  0% {
    margin-left: 0px;
  }
  50% {
    margin-left: -100px;
  }
  100% {
    margin-left: -400px;
  }
}
.imgstrip {
  white-space: nowrap;
  animation: slide infinite 6s alternate;
  display: flex;
  overflow-x: auto;
  padding: 0.5rem 1.5rem;
  align-items: center;
}
.clipped {
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
  height: 150px;
  width: 200px;
  margin: 0 -0.2rem;
}
div img:hover,
div img:focus {
  transform: scale(1.1);
  transition: all 0.2s;
}
.imgstrip::-webkit-scrollbar {
  /*     width: 50px; */
  height: 5px;
  background: white;
  /*       -webkit-linear-gradient(0, slategray 4%, white 96%); */
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* body {
    background-color: #eee;
    margin: 3rem;
  }
   */
#mainimg {
  height: 300px;
  width: 100%;
  background-color: slategray;
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat !important;
}

/** LIGHTBOX MARKUP **/

.lightbox {
  /* Default to hidden */
  display: none;

  /* Overlay entire screen */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* A bit of padding around image */
  padding: 1em;

  /* Translucent background */
  background: rgba(0, 0, 0, 0.8);
}

/* Unhide the lightbox when it's the target */
.lightbox:target {
  display: block;
}

.lightbox span {
  /* Full width and height */
  display: block;
  width: 100%;
  height: 100%;

  /* Size and position background image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}