.fadeIn {
    -webkit-animation: fade-in .7s ease-in forwards;
    animation: fade-in .7s ease-in forwards;
  }

  .fadeOut {
    -webkit-animation: fade-out .7s ease-in forwards;
    animation: fade-out .7s ease-in forwards;
  }

  div.show-portfolio{
    display: block;
    animation: fade-in-slow 1000ms;
  }

  .portfolio-link {
    display: none;
  }

  .filter-list li:hover{
    animation: border-expand 1000ms;
  }
  
  @keyframes fade-in {
    0% { 
      opacity:0; 
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    0% { 
      opacity:1; 
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes fade-in {
    0% { 
      opacity:0; 
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes border-expand {
    0% { 
      border-bottom: 2px solid linear-gradient(90deg, rgba(39,62,121,0) 0%, rgba(39,62,121,1) 10%)
    }
    75% {
      border-bottom: 2px solid linear-gradient(90deg, rgba(39,62,121,0) 40%, rgba(39,62,121,1) 80%);
    }
    100% {
      border-bottom: 2px solid linear-gradient(90deg, rgba(39,62,121,0) 90%, rgba(39,62,121,0) 100%);
    }
  }

  @keyframes border-colapse {
    0% { 
      opacity:0; 
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-in-slow {
    from {opacity: 0; }
    to { opacity: 1;}
  }

  @keyframes fade-in-slow {
    from {opacity: 0; }
    to { opacity: 1;}
  }