  .filtro {
    grid-area: filtro;

    margin: 0;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-rows: 20px;
    grid-template-columns: 25%          75%;
    grid-template-areas:  "ver_empresa  boxFamilias";
    justify-content: left;
    align-content: center;
    background: #DDD;
  }
  .ver_empresa {
    grid-area: ver_empresa;
    display: grid;
    width:135px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    font-family:Lato;
    font-size:14px;
    font-weight: bold;
    text-transform: uppercase;
    color:#000;
  }
  .ver_empresa a {
    font-family:Lato;
    font-size:14px;
    text-decoration: none;
    color:#700;
  }
  .ver_familia {
    display: inline-block;
    width:135px;
    padding: 3px 0px 2px 12px;
  }
  .ver_familia a {
    font-family:Lato;
    font-size:14px;
    text-decoration: none;
    color:#700;
  }
  span.ver_grupo {
    display: inline-block;
    width:135px;
    padding: 2px 0px 2px 12px; 
  }
  span.ver_grupo a {
    font-family:Lato;
    font-size:14px;
    font-weight: bold;
    text-decoration: none;
    color:#009;
  }
  /*------------------------------------------------------- 1024 */
  @media screen and (max-width:790px) {
    .filtro {
      display: grid;
      grid-template-rows: 20px;
      grid-template-columns: 25%          75%;
      grid-template-areas:  "ver_empresa  boxFamilias";
      justify-content: left;
      align-content: center;

    }
    .boxFamilias {
      display: grid;

    }
  }
  /*-------------------------------------------------------- 790 */
  @media screen and (max-width:790px) {
    .ver_empresa {
      width:300px;
      padding-top: 0px;
      padding-left: 6px;
    }
    .ver_familia {
      width:165px;
      padding: 3px 0px 3px 20px;
    }
    .ver_familia a {
      font-size:16px;
    }
    span.ver_grupo {
      width:150px;
      padding: 1px 0px 3px 35px; 
    }
    span.ver_grupo a {
      font-size:18px;
    }
  }
  