@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300&display=swap'); /*Texto Hover*/

.leyendaHis{
    margin-top: 120px;
}

.bloqueHistorias{
 width: 90%;
 margin: 465px auto;
 margin-bottom: 70px;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 border: 1px solid #333;} 

.fotoHistorias{
 margin: 20px;
 max-width: 300px; 
 padding: 5px;
 text-align: center;
 overflow: hidden;
 position: relative;  /*hace que el hover se posicione sobre su elemento*/
 font-family: 'Jura', sans-serif;}

.fotoHistorias a{
 text-decoration: none;}

.fotoHistorias img{
 max-width: 100%;
 object-fit: cover;}

.textoHistorias{
 height: 110px;	
 background-color: rgba(133,90,37,0.5);}

.fotoHistorias h2{ 
 color: white;	
 margin-bottom: 20px;
 }

.fotoHistorias h4{
 color: white;}

.fotoHistorias h5{
 color: #efb810;}

footer{
 margin-top: 2%;}

 /***************************RESPONSIVE****************************/

 @media(max-width:400px){ 
 .bloqueHistorias{ margin-top:580px; }
}

@media(min-width:480px){ 

}

 @media(min-width:600px){   /*****************************************/
  .fotoHistorias{ max-width: 400px; }
  .bloqueHistorias{ margin-top:340px; }

  .hover h2{
   margin: 40px;}
 }

 @media(min-width:1024px){  /*****************************************/
.fotoHistorias .textoHistorias{
 top: 0; 	
 width: 0%;
 height: 100%;
 position: absolute; 	
 justify-content: center;
 align-items: center;
 overflow: hidden;
 transition: 0.4s all;}

.textoHistorias h2{
 margin: 20px; 	
 text-shadow: 1px 1px 1px black;
 font-size: 35px;}

.textoHistorias h4{
 margin: 20px;
 text-shadow: 1px 1px 1px black;
 font-size: 20px;}

.textoHistorias h5{
 margin: 25px;
 text-shadow: 1px 1px 1px black;
 font-size: 15px;}

.fotoHistorias:hover .textoHistorias{
 width: 100%;
 cursor: pointer;}

 footer{
 margin-top: 5%;}
 }


 @media(min-width:1280px){  /*****************************************/
  .fotoHistorias{
   max-width: 450px;}   
 }

 @media(min-width:1680px){
.bloqueHistorias{ margin-top:250px; }

 }   