.slider{
    
    margin: auto;
    overflow: hidden;
}

.slider ul{
    display: flex;
    padding:0;
    width: 500%;
    height: 100%;

    animation: cambio 20s infinite alternate;
    animation-timing-function: ease-in
    
}

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

.slider img{
    width: 100%;
}
@keyframes cambio{
    0%{ margin-left: 0;}
    20%{ margin-left: 0;}

    25%{ margin-left: -100%;}
    45%{ margin-left: -100%;}
    
    50%{ margin-left: -200%;}
    70%{ margin-left: -200%;}
    
    75%{ margin-left: -300%;}
    100%{ margin-left: -300%;}
}

/* Style the header */
.header {
    padding: 10px 16px;
    background: #555;
    color: #f1f1f1;
  }
  
  
  /* The sticky class is added to the header with JS when it reaches its scroll position */
  .sticky {
    position: fixed;
    top: 0;
    width: 100%
  }
  
  /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
  .sticky + .content {
    padding-top: 102px;
  }

  .containerHover{
    position: relative;
    width: 50%;
  }

  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #008CBA;
  }

  .container:hover .overlay {
    opacity: 1;
  }
  
  .text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }