CodePen Embed - Detrás de la minería de Córdoba

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:400,500|Passion+One&display=swap"
  rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js">
</script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.4-rc1/js/foundation.js" type="text/javascript">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js" type="text/javascript">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/1.9.3/countUp.js" type="text/javascript"></script>
<script async src="https://static.addtoany.com/menu/page.js"></script>

<div id="users">

  <div id="dvCabeza">
    <span class="lbl">Buscar: </span> <input class="search" placeholder="buscar" />
    <span>
      <p>¿Quiénes son las personas detrás de las empresas con títulos de exploración y explotación en el Distrito Minero
        Especial de Córdoba?</p>
    </span>
    <span class="lbl" id="cambio">Ordenar por: </span>
    <button id="btnEmpresa" class="sort" data-sort="empresa" onclick="mostrarempresa()">
      empresas
    </button>
    <!--<button id="btnLugar" class="sort" data.sort="ubicacion" onclick="mostrarlugar()">
    lugares
  </button>-->
    <button id="btnMineral" class="sort" data-sort="id" onclick="primerorden()">
      personas
    </button>
  </div>
  <div id="dvFiltros">
    <div id="dvLugars">
      <div class="dvCita">
        <p>La Agencia Nacional de Mineria a otorgado 43 títulos mineros en los municipios de Puerto Libertador, Montelíbando y San José de Uré, en un superficie que cubre 128.641 hectáreas. De esos 43 títulos: </p>
      </div>
      <div class="cadaLugar" id="FiltroLibertador" value="puerto libertador">
        <p class="lblNum otro libert">39</p>
        <p class="name">libertador</p>
      </div>
      <div class="cadaLugar" id="FiltroMontelibano" value="montelibano">
        <p class="lblNum otro monte">5</p>
        <p class="name">montelibano</p>
      </div>
      <button id="filter-none1" class="btntodos btn">
        ver todos
      </button>
    </div>
    <div id="dvempresas">
      <button id="filter-none1" class="btntodos btn">
        ver todos
      </button>
      <p class="lbl">Seleccione un empresa para filtrar</p><br>

      <div class="cadaempresa" id="FiltroCM" value="empresa"><img class="empresa peq"
          src="https://upload.wikimedia.org/wikipedia/en/thumb/6/62/South32_logo.svg/130px-South32_logo.svg.png"
          alt="Cerro Matoso" title="Cerro Matoso" /> <span class="nempresa"> Cerro Matoso </span><span
          class="dos">6</span></div>
      <div class="cadaempresa" id="FiltroMC" value="empresa"><img class="empresa peq"
          src="https://www.newsfilecorp.com/socialImage/3116/google" alt="Minerales de Córdoba"
          title="Minerales de Córdoba" /> <span class="nempresa"> Minerales de Córdoba </span><span
          class="dos">22</span></div>
      <div class="cadaempresa" id="FiltroST" value="empresa"><img class="empresa peq"
          src="https://acmineria.com.co/acm/wp-content/uploads/2018/10/sator.jpg" alt="Sator - Grupo Argos"
          title="Sator - Grupo Argos" /> <span class="nempresa"> Sator - Grupo Argos </span><span class="dos">2</span>
      </div>
      <div class="cadaempresa" id="FiltroJM" value="empresa"><img class="empresa peq"
          src="http://190.144.176.42/images/alianza/ruisecos%20.jpg" alt="José Manuel Ruiseco V. y CIA S.C.A"
          title="José Manuel Ruiseco V. y CIA S.C.A" /> <span class="nempresa"> José Manuel Ruiseco V. y CIA S.C.A
        </span><span class="dos">7</span></div>
      <div class="cadaempresa" id="FiltroGC" value="empresa"><img class="empresa peq"
          src="https://0201.nccdn.net/4_2/000/000/060/85f/Imagen3-641x481.jpg#RDAMDAID17965459" alt="Geocosta"
          title="Geocosta" /> <span class="nempresa"> Geocosta </span><span class="dos">2</span></div>
    </div>
    
<!-- TABLEAU -->    <!-- <div id="dvMinerals">
      <div class='tableauPlaceholder' id='viz1581532773157' style='position: relative'><noscript><a href='#'><img
              alt=' '
              src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Di&#47;DistritominerodeCrdoba&#47;TTULOSDELDISTRITOESPECIALMINERODECRDOBA&#47;1_rss.png'
              style='border: none' /></a></noscript><object class='tableauViz' style='display:none;'>
          <param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' />
          <param name='embed_code_version' value='3' />
          <param name='site_root' value='' />
          <param name='name' value='DistritominerodeCrdoba&#47;TTULOSDELDISTRITOESPECIALMINERODECRDOBA' />
          <param name='tabs' value='no' />
          <param name='toolbar' value='yes' />
          <param name='static_image'
            value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Di&#47;DistritominerodeCrdoba&#47;TTULOSDELDISTRITOESPECIALMINERODECRDOBA&#47;1.png' />
          <param name='animate_transition' value='yes' />
          <param name='display_static_image' value='yes' />
          <param name='display_spinner' value='yes' />
          <param name='display_overlay' value='yes' />
          <param name='display_count' value='yes' /></object></div>
      <script type='text/javascript'>
        var divElement = document.getElementById('viz1581532773157');
        var vizElement = divElement.getElementsByTagName('object')[0];
        vizElement.style.width = '100%';
        vizElement.style.height = (divElement.offsetWidth * 0.75) + 'px';
        var scriptElement = document.createElement('script');
        scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
        vizElement.parentNode.insertBefore(scriptElement, vizElement);
      </script>
    </div>-->
  </div>

  <!-- PERSONAS -->

  <!-- CERRO MATOSO -->

  <ul class="list">
    <li data-id="1" class="libert" value="Cerro Matoso">
      <span class="ubicacion">puerto libertador</span>

      <img class="image"
        src="https://upload.wikimedia.org/wikipedia/en/thumb/6/62/South32_logo.svg/130px-South32_logo.svg.png"
        alt="cerro matoso">
      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="cerro matoso" /></div>
      <p class="name">Ricardo Gavira Jansa</p>

      <p class="descrip">Presidente de SOUTH32, antes Cerro Matoso. Proyectos mineros en Puerto Libertador, Montelíbano
        y San José de Uré</p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><span class="tag NI">Niquel </span></td>
              <td><span class="tag CU">Cobre</span>
              <td>
              <td><span class="tag CA">Carbón</span>
              <td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="2" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image"
        src="https://upload.wikimedia.org/wikipedia/en/thumb/6/62/South32_logo.svg/130px-South32_logo.svg.png">
      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="cerro matoso" /></div>
      <p class="name">Honorio Castañeda Crespo</p>

      <p class="descrip">Representante legal de Cerro Matoso, fue <a
          href="https://www.laregional.net/cordoba-denuncian-a-funcionario-de-cerro-matoso-de-ofrecer-800-millones-para-que-un-lider-sindical-renunciara-a-la-empresa/">señalado
          en 2018 de un intento de soborno a un líder sindical.</a></p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><span class="tag NI">Niquel </span></td>
              <td><span class="tag CU">Cobre</span></td>
              <td><span class="tag CA">Carbón</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="3" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image"
        src="https://upload.wikimedia.org/wikipedia/en/thumb/6/62/South32_logo.svg/130px-South32_logo.svg.png">
      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="cerro matoso" /></div>
      <p class="name">Freddy Bernardo Cano Cano</p>
      <p class="descrip">Gerente financiero de Cerro Matoso desde 2017. Aparece también como uno de los representantes
        legales de la empresa.</p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><span class="tag NI">Niquel </span></td>
              <td><span class="tag CU">Cobre</span></td>
              <td><span class="tag CA">Carbón</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="4" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image"
        src="https://upload.wikimedia.org/wikipedia/en/thumb/6/62/South32_logo.svg/130px-South32_logo.svg.png">
      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="cerro matoso" /></div>
      <p class="name">Luis Eduardo Marulanda del Valle</p>

      <p class="descrip">Exgerente de asuntos corporativos de Cerro Matoso. Hoy trabaja para Cerrejón en comunicaciones
        de la minera.</p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>
                <span class="tag CA">Carbón</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="5" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image"
        src="https://upload.wikimedia.org/wikipedia/en/thumb/6/62/South32_logo.svg/130px-South32_logo.svg.png">
      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="cerro matoso" /></div>
      <p class="name">Ignacio Antonio Cabrales Paffen</p>

      <p class="descrip">Representante legal de Cerro Matoso. Su familia es propietaria de Cabrales Paffen S.A. (extraen
        sal en Galerazamba, Bolívar) y Cantera La Ceiba.</p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><span class="tag NI">Niquel </span></td>
              <td><span class="tag CU">Cobre</span></td>
              <td><span class="tag CA">Carbón</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <!-- MINERALES DE CÓRDOBA -->

    <li data-id="6" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image" src="https://www.newsfilecorp.com/socialImage/3116/google">
      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="cinerales de cordoba" />
      </div>
      <p class="name">Sara Armstrong</p>

      <p class="descrip">Vicepresidenta del consejo general de HPX (dueña de Minerales de Córdoba). También
        representante legal de Exploradora de Córdoba S.A.S.</p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><span class="tag CU">Cobre</span></td>
              <td><span class="tag NI">Plata</span></td>
              <td><span class="tag CA">Oro</span></td>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="7" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image" src="https://www.newsfilecorp.com/socialImage/3116/google">
      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="minerales de cordoba" />
      </div>
      <p class="name">Federico Chalela</p>

      <p class="descrip">Socio en la compra de 50,1% de las acciones de OMNI por parte de HPX (proyecto de El Alacrán).
      </p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><span class="tag CU">Cobre</span></td>
              <td><span class="tag NI">Plata</span></td>
              <td><span class="tag CA">Oro</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="8" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image" src="https://www.newsfilecorp.com/socialImage/3116/google">
      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="minerales de cordoba" />
      </div>
      <p class="name">Heliana M. Lopera Tamayo</p>

      <p class="descrip">Representante legal de Minerla es de Córdoba y de Exploradora Córdoba S.A.S</p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><span class="tag CU">Cobre</span></td>
              <td><span class="tag NI">Plata </span></td>
              <td><span class="tag CA">Oro</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <!-- SATOR -->

    <li data-id="9" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image" src="https://acmineria.com.co/acm/wp-content/uploads/2018/10/sator.jpg">
      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="sator" /></div>
      <p class="name">Gloria Amparo Marín Agudelo</p>

      <p class="descrip">Representante legal de Sator S.A.S</p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><span class="tag CA">Carbón</span></td>
              <td><span class="tag CU">Cobre</span></td>
              <td><span class="tag NI">Niquel </span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="10" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image" src="https://acmineria.com.co/acm/wp-content/uploads/2018/10/sator.jpg">
      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="sator" /></div>
      <p class="name">Eduardo Sánchez<br>Gómez</p>
      <p></p>
      <p></p>
      <p class="descrip">Representante legal de Sator S.A.S</p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><span class="tag CA">Carbón</span></td>
              <td><span class="tag CU">Cobre</span></td>
              <td><span class="tag NI">Niquel </span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="11" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image" src="https://acmineria.com.co/acm/wp-content/uploads/2018/10/sator.jpg">
      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="sator" /></div>
      <p class="name">Sara María Sánchez Gómez</p>
      <p></p>

      <p class="descrip">Gerente Compensación y Desarrollo Organizacional en Grupo Argos S.A</p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td><span class="tag CA">Carbón</span></td>
              <td><span class="tag CU">Cobre</span></td>
              <td><span class="tag NI">Niquel </span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <!-- JUAN MANUEL RUISECO -->

    <li data-id="12" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image" src="https://www.ultracem.co/wp-content/uploads/2018/11/icon.png">
      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="jose ruiseco" /></div>
      <p class="name">Gabriel I. Zea Fernández</p>
      <p class="descrip">Representante legal de Seeling Road Group Inc., C.I. Frontier Coal S.A.S y socio de Carbomine.
      </p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>
                <span class="tag CA">Carbón</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="13" class="libert">
      <span class="ubicacion">montelibano</span>
      <img class="image" src="https://www.ultracem.co/wp-content/uploads/2018/11/icon.png">
      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="jose ruiseco" /></div>
      <p class="name">Juan Manuel Ruiseco<br>Viera</p>

      <p class="descrip">Propietario de la cementera Ultracem, una de las empresas de mayor crecimiento en Barranquilla.
        Padre de Juan Manuel Ruiseco Gutiérrez con quien opera varios proyectos mineros en el DME. También es
        propietario de Grupo Pentas S.A.S (Cantera La Ceiba).</p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>
                <span class="tag CA">Carbón</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="14" class="libert">
      <span class="ubicacion">montelibano</span>
      <img class="image" src="https://www.ultracem.co/wp-content/uploads/2018/11/icon.png">

      <p class="name">Juan Manuel Ruiseco Gutiérrez</p>
      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="jose ruiseco" /></div>
      <p class="descrip">Hijo Juan Manuel Ruiseco Viera es representante legal de Seeling Road Group Inc. y Zanesfield
        Trade Company Inc. -conformadas en Panamá-, Sociedad Portuaria de Capulco S.A, Sociedad Portuaria Graneles del
        Golfo y de Juan Manuel Ruiseco V. y CIA S.C.A.</p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>
                <span class="tag CA">Carbón</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="15" class="libert">
      <span class="ubicacion">montelibano</span>
      <img class="image" src="https://www.ultracem.co/wp-content/uploads/2018/11/icon.png">

      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="jose ruiseco" /></div>
      <p class="name">Luis Eduardo Escudero Christiansen</p>
      <p class="descrip">Socio de Juan Manuel Ruiseco Gutiérrez. Representante legal de Zanesfield Trade Company Inc.
        -conformadas en Panamá-, Sociedad Portuaria de Capulco S.A, Sociedad Portuaria Graneles del Golfo y
        exrepresentante legal de C.I Frontier Coal.</p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>
                <span class="tag CA">Carbón</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="16" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image" src="https://www.ultracem.co/wp-content/uploads/2018/11/icon.png">

      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="jose ruiseco" /></div>
      <p class="name">Ana C. Gutiérrez de Ruiseco</p>
      <p class="descrip">Madre de Juan Manuel Ruiseco Gutiérrez y esposa de Juan Manuel Ruiseco Viera. Representante del
        Grupo Penta (Cantera La Ceiba).</p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>
                <span class="tag CA">Carbón</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <!-- GEOCOSTA -->

    <li data-id="17" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image" src="https://0201.nccdn.net/4_2/000/000/060/85f/Imagen3-641x481.jpg#RDAMDAID17965459">

      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="geocosta" /></div>
      <p class="name">Nicanor Guillermo Fontalvo Ricaurte</p>
      <p class="descrip">Representante legal de Geocosta y Agregados Geocosta. Su hija, Olga Elena Fontalvo Lopera tiene
        títulos mineros en Tolima.</p><br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>
                <span class="tag CA">Carbón</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="18" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image" src="https://0201.nccdn.net/4_2/000/000/060/85f/Imagen3-641x481.jpg#RDAMDAID17965459">

      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="geocosta" /></div>
      <p class="name">Carlos Andrés Fontalvo Lopera</p>
      <p class="descrip">Representante legal de Geocosta y Agregados Geocosta. Hijo de Nicanor Fontalvo.</p>
      <p></p>
      <br>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>
                <span class="tag CA">Carbón</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="19" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image" src="https://0201.nccdn.net/4_2/000/000/060/85f/Imagen3-641x481.jpg#RDAMDAID17965459">

      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="geocosta" /></div>
      <p class="name">José Luis Rangel Fontalvo</p>
      <p class="descrip">Exrepresentante legal de Geocosta. En su administración se perfeccionó la sociedad con Carbones
        del Sinú en un proyecto minero en el DME.</p>

      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>
                <span class="tag CA">Carbón</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="20" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image" src="https://0201.nccdn.net/4_2/000/000/060/85f/Imagen3-641x481.jpg#RDAMDAID17965459">

      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="geocosta" /></div>
      <p class="name">Marco Aurelio Giraldo Villada</p>
      <p class="descrip">Representante legal de Carbones del Sinú y de la Fundación Carina de Santacoloma. Tío político
        de Felipe Santacoloma Botero.</p>

      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>
                <span class="tag CA">Carbón</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

    <li data-id="21" class="libert">
      <span class="ubicacion">puerto libertador</span>
      <img class="image" src="https://0201.nccdn.net/4_2/000/000/060/85f/Imagen3-641x481.jpg#RDAMDAID17965459">

      <div class="dvPyp"><img class="empresa"
          src="https://www.shareicon.net/data/256x256/2015/09/01/94126_gear_512x512.png" alt="geocosta" /></div>
      <p class="name">Felipe Santacoloma Botero</p>
      <p class="descrip">Representante legal de Carbones del Sinú y miembro de la Fundación Carina de Santacoloma.</p>
      <p></p>
      <hr>
      <div class="datos">
        <table>
          <tbody>
            <tr>
              <td>Minerales</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>
                <span class="tag CA">Carbón</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>

  </ul>

</div>

#sDos {
  width: 100%;
}
.mio li {
  width: 20em;
  max-width: 20em;
  min-width: 20em;
  display: inline-block;
  margin-left: 1em;
  border: solid 2px #fff;
  padding: 0.5em;
  margin-bottom: 1em;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border-radius: 7px 7px 7px 7px;
}
.list li {
  position: relative;
  width: 20em;
  max-width: 20em;
  min-width: 20em;
  display: inline-block;
  margin-left: 1em;
  border: solid 2px #fff;
  padding: 0.5em;
  min-height: 35em;
  height: 35em;
  max-height: 35em;
  margin-bottom: 1em;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border-radius: 7px 7px 7px 7px;
}

.monte hr {
  border: solid 1px #b20718;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.libert hr {
  border: solid 1px #b20718;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.arriba {
  min-height: 10em;
  height: 10em;
  max-height: 10em;
  margin-left: auto;
  margin-right: auto;
}
.lblNum {
  font-size: 5em;
  font-family: "Roboto Slab", serif;
  margin-left: auto;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  text-align: center;
  background-color: #b22222;
  color: #fff;
}
.dos {
  font-size: 1.5em;
  font-family: "Roboto Slab", serif;
  margin-left: auto;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  text-align: center;
  color: #b22222;
  background-color: #fff;
  display: inline;
}
.otro {
  color: #3c3c3c;
  background-color: #fff;
}
.otromas {
  color: #b22222;
  background-color: #fff;
}
.fondogris {
  background-color: #d6dfe1;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

#latin {
  background-color: #b22222;
  color: #d6dfe1;
  width: 100%;
  padding-top: 2em;
  padding-bottom: 2em;
  text-align: center;
}

#Saldos {
  display: table;
  text-align: center;
  width: 100%;
  margin-top: 3em;
  padding-top: 5em;
  padding-bottom: 0;
  margin-bottom: 0;
}
#lead {
  width: 20em;
  text-align: center;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
.mio {
  display: inline-table;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding: 0;
  margin: 0;
}

#users {
  background-color: #f8f8f8;
  padding-bottom: 4em;
  margin-top: 0;
}
#dvCabeza {
  display: table;
  width: 100%;
  text-align: center;
  margin-bottom: 1em;
  margin-top: 4em;
}
.lbl {
  margin-left: 3em;
  margin-right: 0.5em;
  font-family: "Roboto", sans-serif;
}
.search {
  border: solid 1px #c6c5c5;
  padding: 0.5em;
  margin-bottom: 1em;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border-radius: 7px 7px 7px 7px;
  width: 300px;
}
.sort:hover {
  cursor: pointer;
  background-color: #b20718;
  color: #d6dfe1;
}
.sort {
  min-height: 80px;
  max-height: 80px;
  min-width: 80px;
  max-width: 80px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin-left: 1em;
  margin-right: 1em;
  text-align: center;
  border: solid 2px #c6c5c5;
  padding: 5px;
  background-color: #fff;
  color: #b20718;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}
button:focus {
  outline: none;
}
input:focus,
.btn:focus {
  outline: none;
}

.image {
  min-height: 150px;
  max-height: 150px;
  min-width: 150px;
  max-width: 150px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
  display: block;
  text-align: center;
  border: solid 0.4px #666565;
  padding: 5px;
  background-color: #fff;
}

#dvLugars {
  display: table;
  width: 100%;
  max-height: auto;
  padding: 0;
  margin: 0;
  display: none;
  background-color: #fff;
  padding-bottom: 1em;
}

.dvCita {
  display: inline-table;
  width: 25em;
  min-width: 25em;
  max-width: 25em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}
#dvminerals {
  width: 100%;
  display: none;
  background-color: #fff;
  padding-top: 1em;
}
.cita {
  color: #3c3c3c;
  font-family: "Roboto", sans-serif;
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}
.comilla {
  min-height: 30px;
  max-height: 30px;
  min-width: 30px;
  max-width: 30px;
  font-family: "Passion One", cursive;
  font-size: 2.3em;
  background-color: #b20718;
  color: #fff;
  padding: 0;
  margin-bottom: 5px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}

.gris {
  color: #d6dfe1;
  font-family: "Roboto", sans-serif;
  margin-top: 1em;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.9em;
  font-family: "Roboto Slab", serif;
  line-height: 1.7;
}

.lCita {
  border: 2px solid #3c3c3c;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
  margin-bottom: 0em;
}
.lblCitado {
  width: 96%;
  font-size: 1.3em;
  text-align: right;
  color: #303458;
}
.cadaLugar {
  display: inline-table;
  min-width: 15em;
  width: 15em;
  min-height: 3em;
  max-height: 5em;
  margin-left: 1em;
  position: relative;
  top: 3em;
}
.cadaLugar p {
  margin-top: 0;
  margin-bottom: 0;
}

.monte {
  background-color: #eeeeee;
}
.libert {
  background-color: #d6dfe1;
}
.texton {
  font-family: "Roboto Slab", serif;
  font-size: 1em;
  line-height: 1.7;
  color: #3c3c3c;
}
.dvCita .texton {
  line-height: 1.5;
  font-size: 0.9em;
}
.entradilla {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.entradilla span {
  line-height: 2;
}

.dvPyp {
  position: absolute;
  top: 140px;
  left: 0;
  margin: 0;
  padding: 1em;
}
.alto {
  line-height: 2;
}

.sub {
  color: #3c3c3c;
  border-bottom: 1px solid #b22222;
  font-weight: 400;
  padding-bottom: 3px;
  text-decoration: none;
}
.sub:hover {
  color: #b22222;
  border-bottom: 2px solid #b22222;
}

h2 {
  font-size: 3em;
  font-family: "Roboto Slab", serif;
  margin-top: 2em;
  margin-bottom: 2em;
  padding-top: 2.5em;
}
h4 {
  font-size: 1.8em;
  font-family: "Roboto Slab", serif;
  margin-top: 0;
  margin-bottom: 3em;
  padding-top: 0;
}
.pastor {
  width: 40px;
}
.pastorl {
  position: relative;
  top: 0.7em;
  width: 30px;
}
.empresa {
  background-color: #fff;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  padding: 2px;
  min-height: 50px;
  max-height: 50px;
  min-width: 50px;
  max-width: 50px;
}
#dvempresas {
  display: table;
  padding-top: 2.5em;
  padding-bottom: 2.5em;
  display: none;
  background-color: #fff;
}
.cadaempresa {
  display: inline-table;
  position: relative;
  min-width: 20em;
  text-align: left;
  min-height: 3em;
  max-height: 3em;
}
.nempresa {
  margin: 0;
  margin-left: 45px;
  font-family: "Roboto", sans-serif;
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0rem;
  text-transform: uppercase;
  color: #3c3c3c;
  display: inline-table;
}
#dvFiltros {
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
}
.peq {
  min-height: 30px;
  max-height: 30px;
  min-width: 30px;
  max-width: 30px;
  border: solid 1px #3c3c3c;
  position: absolute;
  left: 0;
}
.cadaempresa:hover img {
  border-color: #b20718;
  cursor: pointer;
  border-width: 4px;
}
.cadaempresa:hover .lblNum3 {
  font-weight: bold;
}
.cadaempresa:hover {
  cursor: pointer;
}

.cadaLugar:hover .lblNum2 {
  background-color: #b20718;
}
.cadaLugar:hover .name {
  color: #b20718;
}
.cadaLugar:hover {
  cursor: pointer;
}

.list {
  display: table;
  grid-gap: 20px;
  grid-template-columns: 30%;
  grid-template-rows: 8em;
}
#primera {
  border: solid 5px #b20718;
  margin: 0;
  padding: 0;
  margin-bottom: 5em;
}
.list li {
  display: inline-block;
  min-width: 21em;
  width: 21em;
  max-width: 21em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  margin-top: 1em;
  min-height: 35em;
  height: 35em;
}

ul {
  list-style: none;
  padding: 0 1rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.name {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.2rem;
  padding: 0.5rem 0;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0;
  background-color: #fff;
  color: #b22222;
  margin-top: 1em;
}
.name1 {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.2rem;
  padding: 0.5rem 0;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0;
  margin-top: 0;
  background-color: #3c3c3c;
  color: #d6dfe1;
}
.cred {
  font-size: 0.9em;
  padding-left: 1em;
  padding-right: 1em;
  margin-bottom: 1em;
}
.nom {
  padding-top: 1em;
  padding-bottom: 2em;
  line-height: 1.8;
}
.btntodos {
  display: block;
  width: 120px;
  border: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.7em;
  font-family: "Roboto", sans-serif;
  font-size: 0.7em;
  font-weight: 500;
  letter-spacing: 0.2rem;
  padding: 0.5rem 0;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0;
  background-color: #3c3c3c;
  color: #d6dfe1;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border-radius: 7px 7px 7px 7px;
}
.tag {
  padding-left: 0.2em;
  padding-left: 0.2em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin-bottom: 0.5em;
  min-width: 8em;
  width: 8em;
  font-family: "Roboto", sans-serif;
  font-size: 0.7em;
  text-align: center;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border-radius: 7px 7px 7px 7px;
  color: #d6dfe1;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.05rem;
  box-shadow: 5px 5px 5px #e3e4e5;
  display: block;
}
.in {
  display: inline-table;
  box-shadow: none;
  width: auto;
  padding-left: 1em;
  padding-right: 1em;
}
.Mom {
  background-color: #b20718;
  padding: 10px;
}
.NI {
  background-color: #3c3c3c;
}
.CA {
  background-color: #898176;
  color: #fff;
  border: solid 1px #fff;
}
.CU {
  background-color: #f4f4f4;
  color: #3c3c3c;
  border: solid 1px #3c3c3c;
}

.ubicacion {
  background-color: #fff;
  padding-left: 0.5em;
  padding-top: 0.1em;
  padding-bottom: 0.2em;
  padding-right: 0.7em;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border-radius: 7px 7px 7px 7px;
  font-family: "Roboto Slab", serif;
  font-weight: 400;
  color: #3c3c3c;
  font-size: 0.9em;
  line-height: 1.5;
}

table {
  width: 100%;
  min-width: 100%;
  font-family: "Roboto Slab", serif;
  text-align: center;
  color: #3c3c3c;
  margin-top: 0;
}
.mineral {
  margin: 0;
  margin-top: 0.5em;
  text-align: left;
  padding-left: 0.5em;
  font-family: "Roboto Slab", serif;
  font-size: 0.9em;
  color: #3c3c3c;
  line-height: 1.5;
}
.descrip {
  margin: 0;
  margin-top: 0.5em;
  text-align: left;
  padding-left: 0.5em;
  font-family: "Roboto Slab", serif;
  font-size: 0.9em;
  color: #3c3c3c;
  line-height: 1.5;
}
td {
  vertical-align: top;
  text-align: center;
  min-height: 1.5em;
  height: 1.5em;
}

.btn:hover {
  background-color: #b20718;
  cursor: pointer;
  color: #fff;
}
#FiltroPastores {
  border: solid 1px #b20718;
}
#FiltroLibertador:hover .lblNum2 {
  color: #fff;
}
#FiltroMontelibano:hover .lblNum2 {
  color: #fff;
}
#filter-none {
  display: none;
}
#filter-none1 {
  display: none;
}
#creditos {
  min-height: 100vh;
  width: 100%;
  padding-top: 8em;
}
br {
  line-height: 1.3;
}
.vertodo {
  min-height: auto;
  height: auto;
  max-height: auto;
  width: 50%;
}
a {
  text-decoration: none;
}
@media only screen and (max-device-width: 1024px) {
  #Contenedor {
    top: 50px;
  }
  .h21 {
    font-size: 1.5em;
    line-height: 1.6;
  }
  .h1 {
    font-size: 2em;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    width: 100%;
  }
  .artip {
    min-width: 100%;
  }
  #mio li {
    margin-left: 0;
    max-height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .list li {
    margin-left: 0;
    max-height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .list {
    grid-gap: 0;
  }
  #users {
    width: 100%;
  }
  h2 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    padding-top: 2em;
  }
  .entradilla,
  .gris,
  .vertodo {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }
  #lead,
  #final,
  #Saldos2 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    min-width: 90%;
    max-width: 90%;
  }
  .name {
    text-decoration: none;
  }
  #cambio {
    display: block;
    margin-bottom: 1em;
  }
  #fuera {
    display: none;
  }
  .texton {
    font-size: 1.1em;
  }
  .arriba hr {
    display: none;
  }
  .arriba {
    border: none;
    max-height: auto;
  }
  .artip {
    font-size: 0.9em;
    width: 90.96%;
  }
  .dvCita {
    display: none;
  }
  .cadaLugar {
    width: 50%;
  }
  #dvLugars {
    display: table;
    height: 30em;
  }
  .dvCita {
    display: inline-table;
    width: 90%;
    min-width: 90%;
    max-width: 90%;
    margin-top: 1em;
  }
  .cadaLugar {
    display: inline-table;
    min-width: 45%;
    width: 45%;
    height: 6em;
    margin-left: 0.2em;
    top: 1em;
  }
  .cadaLugar p {
    margin-top: 0;
    margin-bottom: 0;
  }
  #dvLugars {
    display: none;
  }
}

var options = {
  valueNames: [
    "name",
    "mineral",
    "ubicacion",
    "descrip",
    { data: ["id"] },
    { attr: "src", name: "image" },
    { attr: "alt", name: "empresa" },
    { attr: "href", name: "link" },
    { attr: "data-timestamp", name: "timestamp" }
  ]
};
var userList;

$(document).ready(function() {
  userList = new List("users", options);

  $("#FiltroMontelibano").click(function() {
    userList.filter(function(item) {
      if (item.values().ubicacion == "montelibano") {
        return true;
      } else {
        return false;
      }
    });
    return false;
  });
  $("#FiltroLibertador").click(function() {
    userList.filter(function(item) {
      if (item.values().ubicacion == "puerto libertador") {
        return true;
      } else {
        return false;
      }
    });
    return false;
  });
  $("#FiltroCM").click(function() {
    userList.filter(function(item) {
      if (item.values().empresa == "cerro matoso") {
        return true;
      } else {
        return false;
      }
    });
    return false;
  });
  $("#FiltroMC").click(function() {
    userList.filter(function(item) {
      if (item.values().empresa == "minerales de cordoba") {
        return true;
      } else {
        return false;
      }
    });
    return false;
  });
  $("#FiltroST").click(function() {
    userList.filter(function(item) {
      if (item.values().empresa == "sator") {
        return true;
      } else {
        return false;
      }
    });
    return false;
  });
  $("#FiltroJM").click(function() {
    userList.filter(function(item) {
      if (item.values().empresa == "jose ruiseco") {
        return true;
      } else {
        return false;
      }
    });
    return false;
  });
  $("#FiltroGC").click(function() {
    userList.filter(function(item) {
      if (item.values().empresa == "geocosta") {
        return true;
      } else {
        return false;
      }
    });
    return false;
  });

  $("#filter-none").click(function() {
    userList.filter();
    userList.short(id);
    return false;
  });
  $("#filter-none1").click(function() {
    userList.filter();
    userList.short();
    return false;
  });
});

function mostrarlugar() {
  document.getElementById("dvempresas").style.display = "none";
  document.getElementById("dvminerals").style.display = "none";
  document.getElementById("dvLugars").style.display = "block";

  userList.filter();
  return false;
}

function primerorden() {
  document.getElementById("dvempresas").style.display = "none";
  document.getElementById("dvminerals").style.display = "none";
  document.getElementById("dvLugars").style.display = "none";

  userList.filter();
  return false;
}

function mostrarempresa() {
  document.getElementById("dvLugars").style.display = "none";
  document.getElementById("dvempresas").style.display = "block";
  document.getElementById("dvminerals").style.display = "none";
  userList.filter();
  return false;
}

/*function mostrarmineral()
{
  document.getElementById('dvLugars').style.display = 'none'; 
  document.getElementById('dvempresas').style.display = 'none';
  document.getElementById('dvminerals').style.display = 'block';
  userList.filter();
  return false;
}*/

This Pen is owned by José Díaz on CodePen. It is a fork of this Pen.

See more by @tejodiaz on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.