* {
    margin: 0%;
    padding: 0%;
}

.container {
    display: flex;
    height: 100vh;
    justify-content: center;
    


}

.slider {
    overflow: hidden;
    width: 800px;
    height: 500px;
    flex-wrap: wrap;
}

.slides {
    width: 500%;
    height: 500px;
    display: flex;
    flex-wrap: wrap;
}

.slides input {
    display: none;
}

/*  
     font-family: "Poppins", sans-serif; 
    font-weight: 100;
    font-style: normal;
*/
.navbar {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 20px;

}

.main {
    justify-content: space-between;

}

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

.slide img {
    width: 800px;
    height: 500px;
    flex-wrap: wrap;
}

.manual {
    position:absolute;
    width: 800px;
    margin-top: -40px;
    display: flex;
    justify-content: center;
}

.manuals {
    border: 2px solid gray;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

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

.manuals:hover {
    background-color: black;
}

#radio1:checked~.first {
    margin-left: 0%;
}

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

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

.auto {
    position: absolute;
    width: 800px;
    margin-top: 460px;
    display: flex;
    justify-content: center;
}

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

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

#radio1:checked~.auto .auto1 {
    background-color: yellow;
}

#radio2:checked~.auto .auto2 {
    background-color: yellow;
}

#radio3:checked~.auto .auto3 {
    background-color: yellow;
}

@media  screen and (max-width:700px)
{
    
.slider {
    overflow: hidden;
    width: 337px;
    height: 300px;
    
}

.slides {
    width: 337;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
}

.slides input {
    display: none;
}
.slide {
    width: 20%;
    transition: 2s;
}

.slide img {
    width: 387px;
    height: 400px;
    flex-wrap: wrap;
}

.manual {
    position:absolute;
    width: 337px;
    margin-top: -40px;
    display: flex;
    justify-content: center;
}

.manuals {
    border: 2px solid gray;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manuals:not(:last-child) {
    margin-right: 30px;
}

.manuals:hover {
    background-color: black;
}

#radio1:checked~.first {
    margin-left: 0%;
}

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

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

.auto {
    display: none;
}

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

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

#radio1:checked~.auto .auto1 {
    background-color: yellow;
}

#radio2:checked~.auto .auto2 {
    background-color: yellow;
}

#radio3:checked~.auto .auto3 {
    background-color: yellow;
}
}