@font-face {
    font-family: oswaldbold;
    src: url(../fuentes/static/Oswald-Bold.ttf);
}

@font-face {
    font-family: oswaldlight;
    src: url(../fuentes/static/Oswald-ExtraLight.ttf);
}

@font-face {
    font-family: LaguSansBold;
    src: url(../fuentes/Lagu\ Sans\ Light.otf);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section .item_producto{
  margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items:flex-start;
flex-direction: row;
width: 100%;
height: auto; 
}
section  .item_producto figure{
    width: 400px;
    height: 300px;
 text-align:right;
 position: relative;
 
}
section  .item_producto figure a{
    width: 100%;
}

section  .item_producto figure::before {
    
content: "";
position: absolute;
top: -70px;
font-family: oswaldbold;
font-weight: normal;
letter-spacing: 0px;
font-size: 35px;
   }
   
section  .item_producto #asecensorHospitalario::before {
    content: "Ascensor Hospitalario";
   
    
       }
       
section  .item_producto #asecensorHidraulico::before {
    content: "Ascensor Hidraulicos";
   
    
       }
       
section  .item_producto #asecensorMontaplatos::before {
    content: "Ascensor Montaplatos";
   
    
       }
       
section  .item_producto #montacoches::before {
    content: "Montacoches";
    
    
       }
       
section  .item_producto #ascensoresMediaCabina::before {
    content: "Ascensor Media Cabina";
  
    
       }
       section  .item_producto #estructurasMetalicas::before {
        content: "Estructuras Metalicas";
      
        
           }
section  .item_producto figure img{
   width: 400px;
   height: 300px;
object-fit: cover; transition:  filter .5s;
}
section  .item_producto figure img:hover{
    filter:grayscale(100%);
}
section  .item_producto p{
    width: 40%;
    font-family: LaguSansBold;
padding: 0px 20px 0px 20px;
    text-align: justify;
    line-height: 1.4;
  
}

@media only screen and (max-width: 1000px) {

section  .item_producto {
    align-items:center;
    flex-direction: column;
    justify-content: center;
}

section  .item_producto figure::before {
    content: "";
text-align: center;
width: 400px;
       }

       section  .item_producto p{
           margin: 20px 0px 20px 0px;
        width: 95%;
        padding: 0;
      
      
    }
}

@media only screen and (max-width: 500px) {
    section  .item_producto figure{
        width: 100%;
  
    }    
    section  .item_producto figure a{
     
        display: flex;
        justify-content: center;
        align-items: center;
    }
    section  .item_producto p{
      
     width: 95%;
   
   
 }
    section  .item_producto figure img{
background-color: black;
        width: 95%;
       
    }
    section  .item_producto figure::before {
        content: "";
left: 0;
    width: 100%;
           }
}