/* -------------------- Projects Filter -------------------- */

.project-filter-wrapper {
  margin: 20px auto;
  text-align: left;
}

.project-filter-form select {
  padding: 2px 16px;
  border: 1px solid #ccc;
}

@media (max-width: 576px) {
  .project-filter-form select {
    padding: 5px 16px;
  }
}

.project-card {
  opacity: 1;
  transition: opacity 1s ease-in-out;
  display: block;
}

.project-card.fading-out {
  opacity: 0;
}

.project-card.visible {
  opacity: 1;
  display: block;
}

.project-card.hidden {
  display: none;
  opacity: 0;
}

.projects-wrapper {
  transition: height 0.7s ease;
  overflow: hidden;
}

/* -------------------- Projects -------------------- */

.projects-container {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* ensures that height matches the width */
  overflow: hidden;
}

.projects-overlay {   
  position: absolute;
  width: 100%;
  height: 50%;
  bottom:0;
  background-image: linear-gradient(
   hsla(0, 0%, 35.29%, 0) 0%,
   hsla(0, 0%, 34.53%, 0.034375) 16.36%,
   hsla(0, 0%, 32.42%, 0.125) 33.34%,
   hsla(0, 0%, 29.18%, 0.253125) 50.1%,
   hsla(0, 0%, 24.96%, 0.4) 65.75%,
   hsla(0, 0%, 19.85%, 0.546875) 79.43%,
   hsla(0, 0%, 13.95%, 0.675) 90.28%,
   hsla(0, 0%, 7.32%, 0.675) 97.43%,
   hsla(0, 0%, 0%, 0.675) 100%
 );
}

.projects-text {
  position: absolute;
  bottom:0;
  width: 100%;
  color: white;
}

.projects-image {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* -------------------- Hover over Projects image -------------------- */

.projects-container:hover img {  
  filter: grayscale(0.7);
  -webkit-filter: grayscale(0.7);
  -webkit-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}

.projects-container-fadeout img{
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}