a:focus {
  outline: none;
}

.portfolioFilter {
  padding: 15px 0;
  width:100%;
  text-align:center;
  margin:0 0 20px 0;

  background-color: #eeecf4;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  gap: 5px;
  align-items: center;
}

.portfolioFilter a {
  margin: 0px;
  color: var(--primary-color);
  text-decoration: none;
  padding: 10px 30px;
  display: inline-block;
  font-weight: 500;
  font-size: 20px;
  border-right: 1px solid #d1d1d1;
}
.portfolioFilter a:last-child{ border-right:none}
.portfolioFilter a.current {
  background: var(--primary-color);
  color: var(--white);
  position:relative;
  border-radius: 10px;
}

.portfolioFilter a.current:after{
	width:100%;
	height:1px;
	/* background-color:#CCC; */
	content:'';
	/* position:absolute; */
	left:0;
	bottom:0;
}
.portfolioContainer{
  /*border: 1px solid #eee;
  border-radius: 3px;*/
}

/*.portfolioContainer img {
  margin: 5px;
  max-width:100%;
}*/


.isotope-item {
  z-index: 2;
   width:25%;
   padding:12px 10px;
}
.isotope-item img {
  width:100%;
  vertical-align:middle;
  display:block;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity;
}




@media only screen and (max-width: 1024px) {
.isotope-item {
 
    width: 33.333333333%;}
}



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

.portfolioFilter a { padding: 5px 10px; font-size: 18px;}
.isotope-item {

  width:50%;
}
.isotope-item img { height: 35px;}
}

@media only screen and (max-width: 575px) {
.portfolioFilter{ flex-wrap: wrap;}
}


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


.isotope-item {
padding: 5px;
}


}
@media only screen and (max-width: 360px) {
  .isotope-item{ width: 100%;}
}