#filters {
  margin:1%;
  padding:0;
  list-style:none;
}
    #filters li {
      float:left;
    }
    #filters li span {
      display: block;
      padding: 5px 20px;    
      text-decoration: none;
      color: black; /* FILTER LINKS TEXT COLOR */
      border: 1px solid black;
      cursor: pointer;
      margin-right: 10px;
      margin-top: 10px;
    }    
    #filters li span.active {
      background: black;
      color: white;
    }
#portfoliolist {
  min-height: 80% !important;  
}    
#portfoliolist .portfolio {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  /* 4 COLUMNS 
  width: 23%;
  margin: 1%;
  */
  /* 2 COLUMNS */
  width: 48%;
  margin: 1%;
  display: none;
  float: left;
  overflow: hidden;
}
    .portfolio-wrapper {
      overflow: hidden;
      position: relative !important;
      background: #666;
    }
    .portfolio img {
      width: 100%; /* adilbo ADD THIS FIX */
      max-width: 100%;
      position: relative;
      top: 0;
      -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
      transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);    
    }
    .portfolio .label {
      position: absolute;
      width: 100%;
      height: 50px;
      bottom: -50px;
      -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
      transition:         all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    }
      .portfolio .label-bg {
        background: black;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .portfolio .label-text {
        color: white;
        position: relative;
        z-index: 500;
        padding: 5px 8px;
      }
      .portfolio .label-text a {
        color: white;     /* adilbo ADD THIS FIX */
        font-weight: 700;  /* adilbo ADD THIS FIX */
      }
        .portfolio .text-category {
          display: block;
          font-size: 9px;
        }
    .portfolio:hover .label {
      bottom: 0;
    }
    .portfolio:hover img {
      top: -30px;
    }
/*  MOBILE (PORTRAIT) - NOTE: DESIGN FOR A WIDTH OF 320px */
@media only screen and (max-width: 767px) {
  #portfoliolist .portfolio {
    width: 100%;
  }
}
/* CLEARING - SELF CLEARING GOODNESS */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:before, .clearfix:after, .row:before, .row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.row:after, .clearfix:after {
  clear: both;
}
.row, .clearfix {
  zoom: 1;
}
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* FOOTER HACK FOR FILTER PAGE */
footer {
  position: fixed !important;
  width: 100%;
  bottom: 0; /* IF FOOTER IS NOT STICKY */

}
/*
.container {
  display: grid;
  grid-template-rows: auto auto auto;
}
footer {
  display: grid;
  align-self: end;
}
*/
footer p {
  margin: var(--universal-margin);
}