.body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    
}
.slider{
    margin:20 20;
    width:100%;
    height:140px;
    overflow:hidden;
}
.slides{
    width:400%;
    height:120px;
    display:flex;
}
.slides input{
    display:none;
}
.slide{
    width:25%;
    position:relative;
    
}
.slide img{
    width:100%;
    height:115px;
}
/* radio button   */
.manual-navigation{
    position:absolute;
    width:200px;
    margin-top:-138px;
    display:flex;
    justify-content:center;
}
.manual-btn{
    border:2px solid #FFFAFA;
    padding:5px;
    border-radius:10px;
    cursor:pointer;
    transition:1s;
}
.manual-btn:not(:last-child){
    margin-right:30px;
}
.manual-btn:hover{
    background:#fff;
}
#radio1:checked ~ .first{
    margin-left:0;
}
#radio2:checked ~ .first{
    margin-left:-25%;
}
#radio3:checked ~ .first{
    margin-left:-50%;
}
#radio4:checked ~ .first{
    margin-left:-75%;
}
.navigation-auto div{
    border:2px solid #20a6ff;
    padding:5px;
    border-radius:10px;
    cursor:pointer;
    transition:1s;
    
}
.navigation-auto{
    position:absolute;
    width:200px;
    margin-top:-18px;
    display:flex;
    justify-content:center;
    
    
}
.navigation-auto div:not(:last-child){
    margin-right:30px;
}
#radio1:checked ~ .navigation-auto .auto-btn1{
    background-color:#fff;
}
#radio2:checked ~ .navigation-auto .auto-btn2{
    background-color:#fff;
}
#radio3:checked ~ .navigation-auto .auto-btn3{
    background-color:#fff;
}
#radio4:checked ~ .navigation-auto .auto-btn4{
    background-color:#fff;
}