


.slides1 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  animation: slide-animation 0s infinite;
}

.slides1 input {
  display: none;
}

.slide1 {
  width: 13%;
  padding: 10px;
  transition: 0.6s;
}

.slide1 img {
  width: 100%;
  /*height: 60%;*/
}

/* Manual navigation buttons */
.navigation-manual1 {
  position: absolute;
  width: 800px;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.manual-btn1 {
  border: 2px solid #40d3dc;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.manual-btn1:not(:last-child) {
  margin-right: 40px;
}

.manual-btn1:hover {
  background: #40d3dc;
}

/* Auto-slide functionality */
@keyframes slide-animation {

  0% { margin-left: 0; }
  20% { margin-left: 0; }
  25% { margin-left: -20%; }
  45% { margin-left: -20%; }
  50% { margin-left: -40%; }
  70% { margin-left: -40%; }
  75% { margin-left: -60%; }
  95% { margin-left: -60%; }
  100% { margin-left: -100%; }
}

/* Auto navigation dots */
.navigation-auto1 {
  position: absolute;
  display: flex;
  width: 800px;
  justify-content: center;
  margin-top: 370px;
}

.navigation-auto1 div {
  width: 10px;
  height: 10px;
  border: 2px solid #40d3dc;
  margin: 0 20px;
  border-radius: 10px;
  animation: auto-slider 5s infinite;
}

@keyframes auto-slider {
  0%, 20% { background: #40d3dc; }
  25%, 100% { background: #fff; }
}
