.hide { /* You can play with the seconds to change the "animation" */
  animation: hide .5s ease 0s 1 normal forwards;
  transform-origin: center;
}
.show { /* You can play with the seconds to change the "animation" */
    animation: show .5s ease 0s 1 normal forwards;    
    transform-origin: center;
}

@keyframes hide {
  0%{
    transform: scale(1);        
  }
  100% {
    transform: scale(0);        
    width: 0;
    height: 0;
    margin: 0;
  }
}
@keyframes show {
  0%{
    transform: scale(0);     
    width: 0;
    height: 0;
    margin: 0;   
  }
  100% {
    transform: scale(1);    
  }
}
/*  // Needed for filters */

/* For decoration only */
body {
  font-family: sans-serif;
}
/* .projects {
  display: flex;
  background: gray;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
.project {
  background: rebeccapurple;
  width: 230px;
  height: 100px;
  margin: 20px;
  padding-top: 20px;
  text-align: center;  
}
.project:nth-child(odd) {
  background: greenyellow;
} */
.filters {
  margin: 20px;
  display: flex;
  background-color: #000;
  color: #fff;
  justify-content: center;
}
.filter {
  margin: 10px;
  padding: 20px;
}

.filters .filter {
  font-size: 1.5rem;
}
.filters .filter:hover{
  background-color: #fff;
  color: #000;
  cursor: pointer;
}
/* // For decoration only */

/* Responsive Productos */
@media (min-width:320px) and (max-width:768px){
  .filter{
    margin: 3px;
    padding: 7px;
  }
  .filters .filter {
    font-size: 1rem;
  }
  #steps{
    text-align: center;
  }
}