/**common css**/
*{margin:0px;padding:0px}
.clear{clear:both}

#slider{width:800px;height:500px;margin-left:180px;margin-top:25px;border-radius:10px;overflow:hidden}
#slides{display:flex;width:500%;height:500px}
#slides input{display:none}
.slide1{width:20%;transition:2s}
.slide1 img{width:1200px;height:500px}
.slide2{width:20%;transition:2s}
.slide2 img{width:1200px;height:500px}
.slide3{width:20%;transition:2s}
.slide3 img{width:1200px;height:500px}
.slide4{width:20%;transition:2s}
.slide4 img{width:1200px;height:500px}

/**navigation-manual**/
.navigation-manual{position:absolute;width:800px;margin-top:-40px;display:flex;justify-content:center}
.manual-btn{border:2px solid white;padding:5px;border-radius:10px;cursor:pointer;transition:1s}
.manual-btn:not(:last-child){margin-right:40px}
.manual-btn:hover{background:blue}
#radio1:checked~.slide1{margin-left:-40}
#radio2:checked~.slide2{margin-left:-40%}
#radio3:checked~.slide3{margin-left:-40%}
#radio4:checked~.slide4{margin-left:-40%}

/**navigation-auto**/
.navigation-auto{position:absolute;width:800px;margin-top:40px;display:flex;justify-content:center;margin-top:460px}
.auto-btn{border:2px solid white;padding:5px;transition:1s;border-radius:10px;cursor:pointer}
.auto-btn:not(:last-child){margin-right:40px}
.manual-btn:hover{background:blue}
#radio1:checked~.auto-btn{background:yellow}
#radio2:checked~.auto-btn{background:yellow}
#radio3:checked~.auto-btn{background:yellow}
#radio4:checked~.auto-btn{background:yellow}