.slider{
	width: 800px;
	height: 351px; /*Default was 500*/
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.slides{
	width: 500%;
	height: 351px; /*default was 500px*/
	display: flex;
}

.slides input{
	display:none;
}

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

.slide img{
	width: 800px;
	height: 351px;
}

/*css for manual navigation with radio buttons*/
.navigation-manual{
	position: absolute;
	width: 800px;
	margin-top: -40px;
	display: flex;
	justify-content: center;
}

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

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

.manual-btn:hover{
	background: #f1dbcb;
}

#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%;
}
#radio6:checked ~ .first{
	margin-left: -100%;
}
/*css for automatic navigation*/
.navigation-auto{
	position: absolute;
	display: flex;
	width: 800px;
	justify-content: center;
	margin-top: 311px;
}
.navigation-auto div{
	border: 2px solid #f1dbcb; /*Change*/
	padding: 5px;
	border-radius: 10px;
	transition: 1s;
}
.navigation-auto div:not(:last-child){
	margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1{
	background: #f1dbcb;
}
#radio2:checked ~ .navigation-auto .auto-btn2{
	background: #f1dbcb;
}
#radio3:checked ~ .navigation-auto .auto-btn3{
	background: #f1dbcb;
}
#radio4:checked ~ .navigation-auto .auto-btn4{
	background: #f1dbcb;
}
#radio5:checked ~ .navigation-auto .auto-btn5{
	background: #f1dbcb;
}
#radio6:checked ~ .navigation-auto .auto-btn6{
	background: #f1dbcb;
}

/* test for responsiveness */
/* Hide the automatic and manual navigation on mobile */
@media (max-width: 799px) {
  .navigation-auto, .navigation-manual {
    display: none;
  }
}

/* For screens smaller than 800px, change the layout */
@media (max-width: 799px) {
  /* This will prevent slides from being horizontally aligned */
  .slides {
    display: none; 
  }

  /* Make sure each slide takes up its own row */
  .slide {
    width: 100%;
    /* other styles to make sure they stack properly */
  }

  /*
  You may also need to hide or modify the slider container's
  overflow properties, depending on your original CSS.
  */
  .slider {
    display: none;
  }
}
/*  */