<div class="menu">
  <ul>
    <span>►</span><li class="active" link-categoria="Todas as categorias"><a>Todas as categorias</a></li>
    <li class="" link-categoria="Agro"><a>Agro</a></li>
    <li class="" link-categoria="Analytics"><a>Analytics</a></li>
    <li class="" link-categoria="CMNet"><a>CMNet</a></li>
    <li class="" link-categoria="Construção e Projetos"><a>Construção e Projetos</a></li>
    <li class="" link-categoria="Conveniências para os TOTVERs"><a>Conveniências para os TOTVERs</a></li>
    <li class="" link-categoria="Educacional"><a>Educacional</a></li>
    <li class="" link-categoria="ERP e CRM"><a>ERP e CRM</a></li>
    <li class="" link-categoria="Fiscal"><a>Fiscal</a></li>
    <li class="" link-categoria="Jurídico"><a>Jurídico</a></li>
    <li class="" link-categoria="Serviços"><a>Serviços</a></li>
    <li class="" link-categoria="Serviços TOTVS"><a>Serviços TOTVS</a></li>
    <li class="" link-categoria="Social"><a>Social</a></li>
  </ul>
</div>

<style>
.columnLayout.two-equal {
    width: 100%;
    margin: 0 auto;
    padding-top: 32px;
    text-decoration: none;
    background-image: url(https://totvsdigitalstatic.blob.core.windows.net/static/tdn/background.png);
    height: 106px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 230px;
}


.columnLayout.two-equal .innerCell {
	padding: 80px;
}

#title-text {
	display: none !important; 
}

.menu {
  width: 100%;
  padding-top: 30px;
}

.menu ul {
  list-style: none;
  display: flex;
  justify-content: center;
    padding-left: 0px;
flex-wrap: wrap;
}

.menu ul li {
  padding: 0px 10px;
  border-right: 2px solid #D7D7D7;
  cursor: pointer;
}

.menu ul li a, .wiki-content a, .wiki-content a:link, .wiki-content a:visited, .wiki-content a:focus, .wiki-content a:hover, .wiki-content a:active {
  color: #000;
text-decoration: none;
}

.menu ul li.active a {
      color: #0D729C;
    font-weight: bold;
}


#main #content {
  padding: 0 10px;
}

.menu span {
    color: #FFB600;
}


#main #breadcrumbs {
	padding: 0 10px;
}

.innerCell h1 {
	font-size: 32px;
}

.aui-page-panel {
    padding: 20px 0px;
}

.main-header {
	padding: 0 20px;
}

.page-metadata {
    margin-top: -22px;
}

.columnLayout.single .innerCell {
  padding: 5px;
  display: flex;
    flex-wrap: wrap;
    padding: 0 200px;
    justify-content: center;
padding-bottom: 20px;
}


.ia-fixed-sidebar, .ia-splitter-left {
    display: none;
}
div#main {
    margin-left: 0px !important;
}

#footer {
  margin-left: 0px !important;
}

#main {
padding-left: 0px;
padding-right: 0px;
overflow-x: hidden;
}

</style>

<script>
$(".menu ul li").click(function() {
  var el = this;
  var categoria = el.attributes[1].value.toUpperCase();
$(".menu ul li").map(function(i, item){
	item.className = "";
});

  el.className = "active";

  if(categoria == "TODAS AS CATEGORIAS") {
	$(".mobile-card").map(function(i, card) {
       card.className = "mobile-card show";
    });
  } else {
  $(".mobile-card").map(function(i, card) {
    var card_categoria = card.attributes[1].value.toUpperCase();
    
    if(card_categoria != categoria)
      {
        card.className = "mobile-card hide";
      } else {
        card.className = "mobile-card show";
      }
  })
 }
});
</script>