.divUm{
    margin-top: 6rem;
    background-color: white;



}
.slider{
    border-radius: 0.5rem;
    margin: 12px auto; /*margin de 0 em cima e em baixo, e auto na esquerda e na direita pra centralizar */
    width: 100%;
    height: 400px;
    overflow: hidden ;/*pra aparecer apenas a primeira img nao todas as imagens*/
}
.slides{  
    width: 400%;
    height: 400px; /*msm altura do slider pra manter um padrao*/
    display: flex;/*os elementos ficam um ao lado do outro*/
}
.slides input{
    display: none;
}

.slide{
    width: 25%;
    position: relative;
    transition:  .80s;
}
.slide img{
    width:800px ;
}
.manual-navigation{
    position:absolute;
    width: 800px;
    margin-top: -40px ;
    display: flex;
    justify-content: center;
}
.manual-btn{
    display: none;
    border: 2px solid black ;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;

}
.manual-btn:not(:last-child){ /* menos no ultimo item*/
    display: none;

    margin-right: 40px ; /*margin na direita uns 40 pixel */

} 
.manual-btn:hover{
    background-color:var(--orange);
    cursor: pointer;
}

#radio1:checked ~ .first{/*quando estiver ativo*/
    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 white;
    
    padding:5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.navigation-auto{
    position: absolute;
    width: 800px ;
    margin-top: 360px;
    display: none;
    justify-content: center;
}

.navigation-auto div:not(:last-child){
    margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1{
    background-color: var(--orange);
}

#radio2:checked ~ .navigation-auto .auto-btn2{
    background-color: var(--orange);
}
#radio3:checked ~ .navigation-auto .auto-btn3{
    background-color: var(--orange);
}
#radio4:checked ~ .navigation-auto .auto-btn4{
    background-color: var(--orange);
}

@media screen and (max-width:800px){/*função que muda as configurações pro celular*/
    .slider{
        margin: 0 auto; /*margin de 0 em cima e em baixo, e auto na esquerda e na direita pra centralizar */
        width:100%;
        height:200%;
     }
     .slides{  
        width: 400%;
        height: 100%; 
     }
   .slide{
        transition:1s;
   }
    .slide img{
        justify-content: center;
        width:100%;
    }
    .manual-btn{
        display:none;
    }
    .manual-navigation{
        max-width:100px;
    }
    .navigation-auto {
        max-width:100px;
        display: none; 

    }

}