/* categories section starts */

.zblog-categ-nav {
  display: none;
  position: absolute;
  top: 0;
}

.zb-categories {
  position: relative;
  float: left;
  margin: 2px 0 0 40px;
}

.zb-categories>span:before {
  content: '';
  position: absolute;
  right: 18px;
  top: -3px;
  bottom: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-style: solid;
  border-width: 0px 0px 1px 1px;
  transform: rotate(-45deg);
}

.zb-categories>span {
  font-size: 14px;
  color: #000;
  padding: 7px 35px 7px 20px;
  position: relative;
  display: inline-block;
  border-radius: 30px;
  cursor: pointer;
  font-family: var(--zf-secondary-medium);
}

.zb-categories>span:hover,
.zb-categories.active>span {
  background: #dceeff;
  color: #1780de;
}

.zb-categ {
  display: grid;
  gap: 0px;
  background: #fff;
  box-shadow: 2px 4px 10px rgb(0 0 0 / 10%);
  border: 1px solid #e5e5e5;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  overflow: hidden;
  z-index: 9;
  position: absolute;
  top: 55px;
}

.zb-categ ul {
  margin: 0;
}

.zb-categories.active .zb-categ {
  overflow: visible;
  transform: translateY(-20px);
  opacity: 1;
  visibility: visible;
}

.zb-categ ul>li>a {
  color: #000;
  padding: 7px 0;
  display: inline-block;
}

.zb-categ ul>li>a:hover {
  color: #03a9f5;
}

.zb-categ.one-col {
  grid-template-columns: 1fr;
  width: 180px;
}

.zb-categ.two-col {
  grid-template-columns: 1fr 1.2fr;
  width: 320px;
}

.zb-categ.three-col {
  grid-template-columns: 1fr 1.2fr 1.2fr;
  width: 450px;
}

.zb-categ>div {
  position: relative;
}

.zb-categ>div:not(:first-child) {
  border-left: 1px solid #e4e4e4;
  padding: 0 0 0 30px;
}

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

  .zb-categ.three-col,
  .zb-categ.two-col {
      grid-template-columns: 1fr;
      width: 180px;
  }

  .zb-categories.active .zb-categ {
      overflow: scroll;
      max-height: 300px;
  }

  .zb-categ>div:not(:first-child) {
      border-left: none;
      padding: 0;
  }

  .zb-categ {
      padding: 10px 20px;
  }
}

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

  .i18n-pt-br #primary {
      padding: 60px 0 0 0;
      position: relative;
  }

  .i18n-pt-br .site-content.container {
      padding: 80px 15px 0;
  }

  .zb-categories {
      margin: 0 0 0 10px;
  }

  .zblog-categ-topnav {
      display: none;
  }

  .zblog-categ-nav {
      display: block;
  }

  .zb-categories>span {
      background-color: #f0f0f0;
  }
}

/* categories section ends */