*{
 margin: 0;   
}



:root{
    --color_verde1: #344839;
--color_mostaza: #e6a057;
--color_verde2: #3c4f44;
--color_cuatro: #977a4f;
--color_blanco: #fefefe;
    
  }



.slider{
   
    border-radius: 0px;
    overflow: hidden;
  
    

}

.slides img{
    width: 100%;
    
    
    

}

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

.slides input{
display: none;

}

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





.navegation_manual {
position: absolute;
width: 100%;
margin-top: -90px;
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-color: white;
}

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

#radio2:checked ~ .first{
    margin-left: -20%;
}
#radio3:checked ~ .first{
    margin-left: -40%;
}
#radio4:checked ~ .first{
    margin-left: -60%;
}

/* automático */

/*.navegation_automatico{
    position: absolute;
    display: flex;
    width: 1500px;
    justify-content: center;
    margin-top: -60px;
}*/

.navegation_automatico div{
    border: 2px solid var(--color_mostaza);
    padding: 5px;
    border-radius: 10px;
    transition: 1s;

}

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

#radio1:checked ~ .navegation_automatico .auto-btn1{
    background-size: var(--color_mostaza);
}

#radio2:checked ~ .navegation_automatico .auto-btn1{
    background-size: var(--color_mostaza);
}
#radio3:checked ~ .navegation_automatico .auto-btn1{
    background-size: var(--color_mostaza);
}
#radio4:checked ~ .navegation_automatico .auto-btn1{
    background-size: var(--color_mostaza);
}
/*

@media (max-width: 1400px)
{
    .navegation_manual {
        position: absolute;
        width: 100%;
        margin-top: -200px;
        display: flex;
        justify-content: center;
        } 
}



@media (max-width: 1200px)
{
    .navegation_manual {
        position: absolute;
        width: 100%;
        margin-top: -200px;
        display: flex;
        justify-content: center;
        } 
}

@media (max-width: 900px)
{
    .navegation_manual {
        
        width: 100%;
        margin-top: -850px;
        display: flex;
        justify-content: center;
        } 
        
        .slide{
   
            width: 20%;
            transition: 3s;
        }
}
*/

/*PRUEBA RESPONSIVE*/

@media (min-width: 900px) {
    .navegation_manual {
        position: absolute;
        width: 100%;
        margin-top: -100px;
        display: flex;
        justify-content: center;
        }
}


@media screen and (min-width: 1170px) and (max-width: 1400px) {
    .navegation_manual {
        position: absolute;
        width: 100%;
        margin-top: -250px;
        display: flex;
        justify-content: center;
        }
}

@media screen and (min-width: 629px) and (max-width: 1170px) {
    .navegation_manual {
        position: absolute;
        width: 100%;
        margin-top: -450px;
        display: flex;
        justify-content: center;
        }
}

@media screen and (min-width: 778px) and (max-width: 890px) {
    .navegation_manual {
        position: absolute;
        width: 100%;
        margin-top: -500px;
        display: flex;
        justify-content: center;
        }

}

@media screen and (min-width: 200px) and (max-width: 778px) {
    .navegation_manual {
        position: absolute;
        width: 100%;
        margin-top: -1800px;
        display: flex;
        justify-content: center;
        }

}

@media screen and (min-width: 200px) and (max-width: 645px) {
    .navegation_manual {
        position: absolute;
        width: 100%;
        margin-top: -1800px;
        display: flex;
        justify-content: center;
        }

}

@media screen and (min-width: 200px) and (max-width: 489px) {
    .navegation_manual {
        position: absolute;
        width: 100%;
        margin-top: -1750px;
        display: flex;
        justify-content: center;
        }

}

@media screen and (min-width: 200px) and (max-width: 415px) {
    .navegation_manual {
       
        width: 100%;
        margin-top: -1800px;
        display: flex;
        justify-content: center;
        }

}