#slider{
    position: relative;
    top:70px;
}

.slider{
    width: 100%;
    height: auto;
    margin:auto;
    overflow: hidden;
}

/*se le da un espacio al UL con un width*/
.slider ul{
    
    display: flex;
    padding: 0;
    width: 300%;
    
    animation: cambio 12s infinite ;
}

.slider li {
    
   list-style:none;
    width: 100%;
    
}

.slider img {
    
    width: 100%;
    height: 140px;
}

@keyframes cambio {
    
    0% {margin-left: 0%;}
    30% {margin-left: 0%;}
    
    35% {margin-left: -100%;}
    65% {margin-left: -100%;}
    
    70%{margin-left: -200%;}
    100%{margin-left: -200%;}
    
    
}

@media (min-width:320px){
    
    .slider img{
        
        width: 100%;
        height: 140px;
    }
    
}

@media (min-width:768px){
    
    #logo img {
        
        max-width: 300px;
    }
    
    .slider img{
        
        width: 100%;
        height: auto;

    }
}

@media (min-width:1024px){
    
      
    #logo img {
        
        max-width: 350px;
    }
    
    .slider img{
        
        width: 100%;
        height: 400px;
    }

}