*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.outer-wrapper {
  width: 95%;
  margin: 0 auto;
}

.s-wrap {
  width: 100%;
  /* margin-bottom: 2rem; */
  padding-bottom: 25%;
  position: relative;
  border: 4px var(--rich-black) solid;
  overflow: hidden;
}

/* .s-wrap>input {
  display: none;
} */

.s-wrap-sf {
  width: 100%;
  /* margin-bottom: 2rem; */
  padding-bottom: 25%;
  position: relative;
  border: 4px var(--lilly-pad) solid;
  overflow: hidden;
}

/* .s-wrap-sf>input {
  display: none;
} */

.s-content {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  height: 50%;
  font-size: 0;
  list-style: none;
  transition: transform .5s;
}

.s-item {
  display: inline-block;
  width: 20%;
  height: 200%;
  background-repeat: no-repeat;
  background-size: cover;
}

.s-wrap .s-item-1 {
  background-image: url("/images/header/pic-3/BDA-sunshine.jpg");
}

.s-wrap .s-item-2 {
  background-image: url("/images/header/pic-3/LWD-lush.jpg");
}

.s-wrap .s-item-3 {
  background-image: url("/images/header/pic-3/pebble-creek-skyline.jpg");
}

.s-wrap .s-item-4 {
  background-image: url("/images/header/pic-3/rock-creek-ripples.jpg");
}

.s-wrap .s-item-5 {
  background-image: url("/images/header/pic-3/nehalem-bridge.jpg");
}

.s-wrap .s-item-6 {
  background-image: url("/images/website-images/blank-salmon-2024.jpeg");
}

.s-wrap .s-item-7 {
  background-image: url("/images/website-images/newsome-salmon-2024.jpeg");
}

.s-wrap .s-item-8 {
  background-image: url("/images/website-images/swayze-salmon-2024.jpeg");
}

.s-wrap .s-item-9 {
  background-image: url("/images/website-images/rusty-buckets-2024.jpeg");
}

.s-wrap .s-item-10 {
  background-image: url("/images/website-images/carvin-marvin-salmon-2024.jpeg");
}

.s-content {
  -webkit-animation: slider-animation 40s ease-in-out infinite;
  animation: slider-animation 40s ease-in-out infinite;
}

.s-content:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

@-webkit-keyframes slider-animation {

  0%,
  7% {
    transform: translateX(0%);
  }

  12.5%,
  19.5% {
    transform: translateX(-20%);
  }

  25%,
  32% {
    transform: translateX(-40%);
  }

  37.5%,
  44.5% {
    transform: translateX(-60%);
  }

  50%,
  57% {
    transform: translateX(-80%);
  }

  62.5%,
  69.5% {
    transform: translateX(-60%);
  }

  75%,
  82% {
    transform: translateX(-40%);
  }

  87.5%,
  94.5% {
    transform: translateX(-20%);
  }
}

@keyframes slider-animation {

  0%,
  7% {
    transform: translateX(0%);
  }

  12.5%,
  19.5% {
    transform: translateX(-20%);
  }

  25%,
  32% {
    transform: translateX(-40%);
  }

  37.5%,
  44.5% {
    transform: translateX(-60%);
  }

  50%,
  57% {
    transform: translateX(-80%);
  }

  62.5%,
  69.5% {
    transform: translateX(-60%);
  }

  75%,
  82% {
    transform: translateX(-40%);
  }

  87.5%,
  94.5% {
    transform: translateX(-20%);
  }
}

@media screen and (max-width: 75rem) {
  .s-wrap {
    padding-bottom: 40%;
  }
  
}