/* SLIDER */

.slider-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 460px;
}

.slider {
  width: 860px;
  height: 460px;
  border-radius: 10px;
  overflow: hidden;
}

.slides {
  width: calc(100% * 5);
  height: 460px;
  display: flex;
}

.slides input {
  display: none;
}

.slide {
  width: calc(100% / 5);
  transition: 2s;
}

.slide img {
  width: 100%;
  height: 100%;
}

/* Manual nav */
.navigation-auto {
  display: none;
}
/* .navigation-manual {
  position: absolute;
  width: 860px;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.manual-btn {
  border: 2px solid white;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}

.manual-btn:not(:last-child) {
  margin-right: 40px;
}

.manual-btn:hover {
  background: white;
} */

#radio1:checked ~ .first {
  margin-left: 0;
}
#radio2:checked ~ .first {
  margin-left: -20%;
}
#radio3:checked ~ .first {
  margin-left: -40%;
}
#radio4:checked ~ .first {
  margin-left: -60%;
}
#radio5:checked ~ .first {
  margin-left: -80%;
}

/* Auto nav */

.navigation-auto {
  display: none;
}

/* .navigation-auto {
  position: absolute;
  width: 860px;
  margin-top: 420px;
  display: flex;
  justify-content: center;
}

.navigation-auto div {
  border: 2px solid white;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
}

.navigation-auto div:not(:last-child) {
  margin-right: 40px;
} */

#radio1:checked ~ .navigation-auto .auto-btn1 {
  background: white;
}
#radio2:checked ~ .navigation-auto .auto-btn2 {
  background: white;
}
#radio3:checked ~ .navigation-auto .auto-btn3 {
  background: white;
}
#radio4:checked ~ .navigation-auto .auto-btn4 {
  background: white;
}
#radio5:checked ~ .navigation-auto .auto-btn5 {
  background: white;
}

@media (max-width: 992px) {
  .slider-container {
    max-width: 100vw;
    height: calc(100% * (860 / 460));
    margin: 10px;
  }

  .slider {
    max-width: 100vw;
    height: calc(100% * (860 / 460));
    border-radius: 0px;
  }

  .slides {
    height: calc(100% * (860 / 460));
  }

  .slide img {
    width: 100%;
    height: 100%;
  }

  .navigation-auto {
    width: 100%;
  }

  .navigation-manual {
    width: 100%;
  }
}