.portfolio-page-section{
position: relative;
padding: 100px 0px 60px;
}
.portfolio-page-section.alternate{
padding-bottom:110px;
}
.portfolio-page-section .filters{
position:relative;
}
.portfolio-page-section .filters .more-projects{
position:relative;
color:#222222;
font-size:20px;
font-weight:600;
}
.portfolio-page-section .filters .filter-tabs{
position:relative;
margin-bottom:30px;
margin-top:50px;
}
.portfolio-page-section .filters .filter-tabs .filter{
position:relative;
color:#555555;
font-size:14px;
margin:0px 22px;
cursor:pointer;
font-weight:600;
margin-bottom:10px;
display:inline-block;
text-transform: uppercase;
transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
}
.portfolio-page-section .filters .filter-tabs .filter.active,
.portfolio-page-section .filters .filter-tabs .filter:hover{
color:#443986;
}
.portfolio-page-section .filters .filter-tabs .filter:before{
position: absolute;
content: '';
left: 50%;
margin-top: -40px;
width: 7px;
height: 7px;
opacity: 0;
visibility: hidden;
margin-left: -3px;
border-radius: 50px;
background-color: var(--theme-color);
transition: all 900ms ease;
-moz-transition: all 900ms ease;
-webkit-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
}
.portfolio-page-section .filters .filter-tabs .filter .dots{
position: absolute;
content: '';
left: 50%;
margin-top: -28px;
width: 31px;
opacity: 0;
visibility: hidden;
margin-left: -15px;
transition: all 900ms ease;
-moz-transition: all 900ms ease;
-webkit-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
}
.portfolio-page-section .filters .filter-tabs .filter .dots:before{
position: absolute;
content: '';
left: 0px;
top: 0px;
width: 7px;
height: 7px;
border-radius: 50px;
background-color: var(--theme-color);
}
.portfolio-page-section .filters .filter-tabs .filter .dots:after{
position: absolute;
content: '';
right: 0px;
top: 0px;
width: 7px;
height: 7px;
border-radius: 50px;
background-color: var(--theme-color);
}
.portfolio-page-section .filters .filter-tabs .filter:hover .dots,
.portfolio-page-section .filters .filter-tabs .filter.active .dots{
margin-top:-47px;
opacity: 1;
visibility: visible;
}
.portfolio-page-section .filters .filter-tabs .filter:hover::before,
.portfolio-page-section .filters .filter-tabs .filter.active::before{
margin-top:-24px;
opacity: 1;
bottom: auto;
visibility: visible;
}
.portfolio-page-section .button-box{
margin-top: 50px;
} .portfolio-masonry-section{
position: relative;
padding: 120px 0px 75px;
}