[html]
<!-- Фильтры  -->
<div id="port-filter2"><div class="botbg"><div class="inner">

<div id="dir-block">
<section class="wow fadeInDown" data-wow-duration="1s">

<h4 class="tit">Тип работ</h4>
<div id="changeStyle">
<a id="line" class="f-saled">
<div class="icon"><div id="my-ic" class="material-icons">lock</div></div>
<h4>Сделанные на заказ работы</h4>
<div class="filler"></div></a>
<a id="line" class="f-forsale">
<div class="icon"><div id="my-ic" class="fa-solid fa-sack-dollar"></div></div>
<h4>Размещено на продажу</h4>
<div class="filler"></div></a>
<a id="line" class="f-free">
<div class="icon"><div id="my-ic" class="fa-solid fa-gift"></div></div>
<h4>Бесплатные работы</h4>
<div class="filler"></div></a>
</div>

</section></div>

<div id="dir-block">
<section class="wow fadeInDown" data-wow-duration="1s">

<div id="changeStyle2" class="filter">
<h4 class="tit">Общие категории</h4>
<div>
<a class="dis tip" title="Все, связанное с работами для сайтов/форумов, кроме готовых скриптов и мелкой графики">Вебдизайн</a>
<a class="graf tip" title="Все, связанное с графическими работами, НЕ включающее кодинг/скрипты">Графика</a>
<a class="code tip" title="Готовые разработки и работы по верстке/кодингу">Скрипты/коды</a>
</div>

<h4 class="tit">Дополнительные категории</h4>
<div>
<a class="fulldis tip" title="Полные работы по дизайну для сайтов или форумов">Дизайн форумов/сайтов</a>
<a class="layout tip" title="Макеты для дизайна форумов/сайтов или графические работы по созданию макетов">Макеты</a>
<a class="dis-code tip" title="Работы по верстке дизайнов или отдельных элементов дизайна">Верстка</a>
<a class="graf-s tip" title="Работы по дизайну и оформлению соцсетей/стримов">Соц-сети/стримы</a>
<a class="js tip" title="Готовые разработки и работы по верстке/кодингу">Скрипты/коды</a>
<a class="art tip" title="Небольшие графические работы для форумов, сайтов и ролевых игр">Ролевая графика/арт</a>
</div>

</div>

</section></div>

<section class="wow fadeInDown" data-wow-duration="1s">
<div id="changeStyle2" class="filter">
<br><center>
<a class="mob">Адаптивное</a>
<a class="frpg">Ролевые игры</a>
<a class="game">Компьютерные игры</a>
<a class="flat">Нейтральное</a>
</center>
</div>
</section>

<!-- Фильтры конец  -->
</div></div></div>
<script type="text/javascript" src="/files/0007/e3/f7/50958.js"></script>
<link rel="stylesheet" type="text/css" href="/files/0007/e3/f7/67652.css?v=3">
<style>
#port-filter2 .inner {
display: grid;
gap: 16px 4%;
  grid-template-columns: repeat(2, 1fr);
  margin: 16px auto 0;
}
#port-filter2 .inner section {grid-column: 1/-1;}

h4.tit {
  font-family: 'Bebas Neue';
  font-size: 24px;
  text-transform: uppercase;
  padding-top: 10px;
  margin: 0 0 5px;
}

#line {
display: block;
position: relative;
line-height: 50px;
height: 50px;
color: #515862;
font-family: 'Bebas Neue', 'Book Antiqua';
text-transform: uppercase;
font-size: 28px;
white-space: nowrap;
border-bottom: 3px solid #b9b9b9;
cursor: pointer;
}
#line:hover, #line:active, #line:focus {color: #fff;background-color: #2e3e4f;}
#line h4 {margin: 0 0 0 60px;cursor: pointer;}
#line .filler {
height: 3px;
width: 0%;
position: absolute;
bottom: -3px;
left: 0;
transition: all 1.0s ease-out;
-webkit-transition: all 1.0s ease-out;
background: #00a1e4;
}
#line:hover .filler {width: 100%;}
#line .icon {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
}
#line .icon #my-ic {color: #00a1e4;}
#line.f-saled .icon #my-ic {color: #e63737;}
#line.f-saled .filler {background: #e63737;}
#line.f-free .icon #my-ic {color: #26af33;}
#line.f-free .filler {background: #26af33;}
#line.STYLselect {
  background-color: #2e3e4f;
  color: #fff;
}

.filter {font-size: 0; text-align: left;}
.post.portfolio .filter a {
  padding: 5px;
  border-radius: 5px;
  margin: 5px;
  cursor: pointer;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: normal;
  background: #f4f4f4;
display: inline-block;
}
.post.portfolio .filter a.active:hover {background: #2e3e4f; color: #e63737;}
.post.portfolio .filter a.active {background: #f98561; color:#fff;}
.post.portfolio .filter a:hover {
  background: #2e3e4f;
  color: #e63737;
}

.port-items[id*="block-"] {
display: grid;
gap: 20px 30px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
justify-content: center;
}
.hideonsite {grid-column: 1/-1;}

.port-items .p-out {
position: relative;
border: 1px solid #ccc;
  background: #ddd;
}
.port-items .p-inner {
background: #fff;
  border: 1px solid #ccc;
  position: relative;
  top: 6px;
  left: 6px;
padding: 6px;
transition: all 0.6s;
  -webkit-transition: all 0.6s;
}
.port-items .p-out a {
padding: 0;
  max-width: 100%;
}

.port-items .p-out .icon {
  position: absolute;
  background-color: #fff;
  width: 50px;
  height: 50px;
  z-index: 200;
  top: 12px;
  left: 12px;
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  text-align: center;
}
.port-items .icon.fa-gift {color: #26af33;}
.port-items .icon.fa-sack-dollar {color: #00a1e4;}
.port-items .icon.material-icons {color: #e63737;}
.port-items .icon.fa-solid {font-size: 42px;}
.port-items .icon.material-icons {font-size: 46px;}

.port-items .p-out img {
  width: 100%;
height: auto;
object-fit: contain;
}

.port-items .p-descr {display: none;}

@media screen and (max-width: 950px) {
.main #port-filter2 .inner {grid-template-columns: repeat(1, 1fr);}
.main .port-items[id*="block-"] {grid-template-columns: repeat(2, 1fr); gap: 10px 0px;}
}

@media screen and (max-width: 720px) {
.punbb .main .port-items[id*="block-"] {grid-template-columns: repeat(1, 1fr);}
}

@media screen and (max-width: 520px) {
.main #line {font-size: 22px;}
}
</style>
[/html]