.portfolio-stream.all-category-box::before {
  -webkit-mask: url('../icons/tickk.svg') center no-repeat;
  mask: url('../icons/tickk.svg') center no-repeat;
}
.portfolio-stream.filter .heading {
  font-size: var(--36px);
  font-weight: var(--regular);
  line-height: var(--45px);
  margin: 0;
  padding: 0;
  text-transform: none;
}
.portfolio-stream.filter .heading + .options {
  margin-top: var(--20px);
}
.portfolio-stream.filter .options {
  display: flex;
  flex-wrap: wrap;
  /* overflow-x: auto; */
  margin-bottom: var(---2px);
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--7-5px);
  position: relative;
  scroll-snap-type: x mandatory;
  -webkit-user-select: none;
  user-select: none;
  gap: var(--18-5px);
}
.portfolio-stream.filter .option {
  cursor: pointer;
  /* margin-right: var(--18-5px);
  margin-bottom: var(--18-5px); */
  scroll-snap-align: start;
}
.portfolio-stream.filter .option:first-child {
  margin-left: 0;
}
.portfolio-stream.filter .checkbox:checked ~ .block {
  background-color: var(--orange);
  color: var(--white);
}
.portfolio-stream .all_checked .all-category-box {
  background-color: var(--orange);
  color: var(--white)
}
.portfolio-stream.filter .checkbox:checked ~ .block::before {
  background-color: var(--white);
}
.portfolio-stream .all_checked .all-category-box::before {
	background-color: var(--white)
}

/* Hover state */
.portfolio-stream.block:hover {
  background-color: var(--orange);
  color: var(--white);
}

.portfolio-stream.block:hover::before {
  background-color: var(--white);
}

.portfolio-stream.line {
  align-items: center;
  display: inline-flex;
  font-size: var(--16px);
  font-style: normal;
  font-weight: var(--semibold);
  line-height: var(--18px);
  text-transform: uppercase;
}
.portfolio-stream.line::before {
  background-color: var(--orange);
  content: '';
  flex-shrink: 0;
  height: var(--36px);
  margin-right: var(--8px);
  width: var(--36px);
}
.portfolio-stream.cyber-security.line::before {
  width: var(--31px);
}
.portfolio-stream.devops-new-ways.line::before {
  height: var(--38px);
  margin-bottom: var(---2px);
  margin-right: var(--6px);
  margin-top: var(---2px);
  width: var(--38px);
}
.portfolio-stream.project-management.line::before {
  width: var(--25px);
}
.portfolio-stream.portfolio-stream.all-category-box.line::before {
  width: var(--25px);
}
.portfolio-stream.block {
  background-color: var(--grey-background);
  color: var(--grey);
  display: inline-block;
  flex-direction: column;
  font-size: var(--26px);
  font-style: normal;
  font-weight: var(--semibold);
  height: var(--250px);
  line-height: var(--26px);
  padding: var(--80px) var(--35px) var(--40px) var(--40px);
  position: relative;
  text-transform: uppercase;
  vertical-align: middle;
  width: var(--250px);
  z-index: 1;
}
.portfolio-stream.block::before {
  background-color: var(--orange);
  content: '';
  left: var(--42px);
  margin-top: var(---10px);
  position: absolute;
  top: 50%;
  transform: translateY(-100%);
}
a.portfolio-stream.block:hover,
a.portfolio-stream.block:focus,
.portfolio-stream.block.active {
  background-color: var(--orange);
  color: var(--white);
}
a.portfolio-stream.block:hover::before,
a.portfolio-stream.block:focus::before,
.portfolio-stream.block.active::before {
  background-color: var(--white);
}
.portfolio-stream.all-category-box.block::before {
  height: var(--54px);
  width: var(--38px);
}

.portfolio-stream.small.block {
  font-size: var(--16px);
  height: var(--155px);
  line-height: var(--18px);
  padding: var(--85px) var(--20px) var(--20px) var(--24px);
  width: var(--155px);
}
.portfolio-stream.small.block::before {
  left: var(--24px);
  margin-top: 0;
}

.portfolio-stream.small.it-service-management-governance.block {
  font-size: var(--14px);
  line-height: var(--16px);
}

.portfolio-stream.small.all-category-box.block::before {
  height: var(--37px);
  width: var(--26px);
}

@media (max-width: calc(960px * 0.8)) {
  .portfolio-stream.filter .heading {
    font-size: var(--26px);
    line-height: var(--32px);
  }

  /* These mirror the default .portfolio-stream.small.block rules */
  .portfolio-stream.block {
    font-size: var(--16px);
    height: var(--155px);
    line-height: var(--18px);
    padding: 25px var(--20px) var(--20px) var(--24px);
    width: var(--155px);
  }
  
  .portfolio-stream.all-category-box.block::before {
    height: var(--37px);
    width: var(--26px);
  }

  .portfolio-stream.small.block {
    font-size: var(--16px);
    height: var(--125px);
    line-height: var(--18px);
    padding: var(--65px) var(--15px) var(--25px);
    width: var(--130px);
  }
  .portfolio-stream.small.block::before {
    left: var(--15px);
    margin-top: var(---4px);
  }
  
  .portfolio-stream.all-category-box.small.block::before {
    height: var(--29px);
    width: var(--24px);
  }
  /*fixes margin on 'ALL' box in mobile ver.*/
  .portfolio-stream .all_checked .all-category-box 		{
    margin-right: -20px;
 	}
}