.container-all-all{
    width: 96%;
    max-width: 570px;
    margin: auto;
    padding: 4px 6px 0px 0px;
    box-shadow: 2px 2px 2px black;
    overflow: hidden;
}
.container-all{
 
    border-radius: 6px;
    width: 98%;
    max-width: 280px;
}

 .container-all .slide{
    width: 400%;
    display: flex;
    padding: 0px;

   animation: autoplay 10s infinite;
   animation-timing-function: ease-out;
   
}

.container-all .slide .item-slide{  
   
    width: 100%;
    margin-left: 10px;
}
.container-all .slide .item-slide img{
    width: 100%;
  
}

@keyframes autoplay{
  
    0%{margin-left: 0; opacity: 0.3;}
    2%{margin-left: 0; opacity: 0.3;}
    3%{margin-left: 0; opacity: 1;}
    31%{margin-left: 0; opacity: 1;}
    32%{margin-left: 0; opacity: 0.3;}


   33%{margin-left: -100%;opacity: 1;}
   64%{margin-left: -100; opacity: 1;}
   65%{margin-left: -100%;opacity: 0.3;}

   66%{margin-left: -200%;opacity: 1;}
   100%{margin-left: -200%;}  
    
  
}

/*-----------------900--------------------------------------------*/
@media(max-width:900px){

    .container-all-all{
        width: 96%;
        max-width: 490px;
    }
    .container-all{
        width: 98%;
        max-width: 240px;
    }
}
/*-----------------800--------------------------------------------*/
@media(max-width:800px){

    .container-all-all{
        width: 96%;
        max-width: 450px;
    }
    .container-all{
        width: 98%;
        max-width: 220px;
    }
}
/*-----------------700--------------------------------------------*/
@media(max-width:700px){

    .container-all-all{
        width: 96%;
        max-width: 410px;
    }
    .container-all{
        width: 98%;
        max-width: 200px;
    }
}
/*-----------------600--------------------------------------------*/
@media(max-width:600px){

    .container-all-all{
        width: 96%;
        max-width: 350px;
    }
    .container-all{
        width: 98%;
        max-width: 170px;
    }
}
/*-----------------500--------------------------------------------*/
@media(max-width:500px){

    .container-all-all{
        width: 96%;
        max-width: 290px;
    }
    .container-all{
        width: 98%;
        max-width: 140px;
    }
    .cabanas-huasca-los-moncayo-magicas-header-imagen img{
        width: 98%;
      }
}