* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    -webkit-transition: .2s linear;
    transition: .2s linear;
  }
  
  .banner-container {
    padding: 3rem 9%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(30rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 1.5rem;
  }
  
  .banner-container .banner {
    height: 160px;
    overflow: hidden;
    position: relative;
  }
  
  .banner-container .banner img {
    object-fit: cover;
    height: 160px;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .banner-container .banner:hover img {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  
  .banner-container .banner .content {
    position: absolute;
    top: 50%;
    left: 2rem;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .banner-container .banner .content h3 {
    padding-top: .5rem;
    font-size: 2.2rem;
    color: white;
  }
  
  .banner-container .banner .content .btn {
    padding: .7rem 2.5rem;
  }
  
  
  
  /* BOTONES FLOTANTES DE REDES SOCIALES */
  .float{
      position:fixed;
      width:60px;
      height:60px;
      bottom:40px;
      right:40px;
      background-color:#25d366;
      color:#FFF;
      border-radius:50px;
      text-align:center;
    font-size:30px;
      box-shadow: 2px 2px 3px #999;
    z-index:100;
  }
  .float:hover {
      text-decoration: none;
      color: #25d366;
    background-color:#fff;
  }
  
  .my-float{
      margin-top:16px;
  }
  
  .floatf{
      position:fixed;
      width:60px;
      height:60px;
      bottom:40px;
      right:40px;
    bottom: 110px;
      background-color:blue;
      color:#FFF;
      border-radius:50px;
      text-align:center;
    font-size:30px;
      box-shadow: 2px 2px 3px #999;
    z-index:100;
  }
  .floatf:hover {
      text-decoration: none;
      color: blue;
    background-color:#fff;
  }
  
  .my-floatf{
      margin-top:16px;
  }
  
  
  
  /* CATALOGO */
  .catalogo{
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    gap: 40px;
    padding: 40px;
    justify-content: center;
  }
  @media (max-width: 560px){
    .catalogo{
      grid-template-columns: 100%;
    }
  }
  .productcard{
    list-style: none;
    font-size: 1.5rem;
    justify-content: center;
    text-align: center;
  }
  .productimg{
    width: 200px;
    height: auto;
    background-color: white;
  }
  @media (max-width: 560px){
    .productimg{
      width: 100%;
      height: auto;
    }
  }
  .productboton{
    background-color: #007bff; /* Green */
    border-radius: 12px;
    color: white;
    padding: 5px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
  }
  
  /* SE USA PARA OCULTAR LOS PRODUCTOS */ 
  .hidden{
    display: none;
  }
  
  /* ESTILOS DE INPUT DE BUSQUEDA CATALOGO PRINCIPAL */ 
  .inputbuscar{
    text-align: center;
     width: 600px;
     padding: 10px;
     margin: 8px 0 0 263px;
     display: inline-block;
     border: 1px solid blue;
     border-radius: 7px;
     box-sizing: border-box;
  }
  @media (max-width: 850px){
    .inputbuscar{
      width: 100%;
      margin: 0px 0px 0px 0px;
    }
  }
  .formaromas{
    float: left;
    margin: 0px 20px 0px 0px ;

  }