.slidingImage {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16%;
  margin-bottom: 5%;
}

.slider {
  /* width: 300px; */
  /* height: 150px; */
  width: 100%;
  height: auto;
  /* border-radius: 5px; */
  overflow: hidden;
}

.slides {
  width: 1000%;
  /* height: 150px; */
  height: auto;
  display: flex;
}

.slides input {
  display: none;
}

.slide {
  width: 10%;
  transition: 2s;
}

.slide img {
  /* width: 700x; */
  /* height: 150px; */
  width: 100%;
  height: auto;
}

/*Below is good for 5 pictures ONLY*/
#radio1:checked ~ .first {
  margin-left: 0;
}

#radio2:checked ~ .first {
  margin-left: -10%;
}

#radio3:checked ~ .first {
  margin-left: -20%;
}

#radio4:checked ~ .first {
  margin-left: -30%;
}

#radio5:checked ~ .first {
  margin-left: -40%;
}

/*css for automatic navigation*/
.navigation-auto {
  position: absolute;
  width: 300px;
  margin-top: 130px;
  display: flex;
  justify-content: center;
  visibility: hidden;
}

.navigation-auto div {
  border: 1.5px solid #f9fafb;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
  /*visibility: hidden;*/
}

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

#radio1:checked ~ .navigation-auto .auto-btn1 {
  background: #0967f9;
}

#radio2:checked ~ .navigation-auto .auto-btn2 {
  background: #0967f9;
}

#radio3:checked ~ .navigation-auto .auto-btn3 {
  background: #0967f9;
}

#radio4:checked ~ .navigation-auto .auto-btn4 {
  background: #0967f9;
}

#radio5:checked ~ .navigation-auto .auto-btn5 {
  background: #0967f9;
}