.animate-fade-up{
  animation: 2s animate-fade-up;
}

.animate-fade-down{
  animation: 2s animate-fade-down;
}

.animate-fade-left{
  animation: 2s animate-fade-left;
}

.animate-icon {
  cursor: pointer;
  transition: 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.animate-icon:hover {
  transform: translateX(5px);
}

@keyframes animate-fade-up {
  from {
    opacity: 0;
    padding-top: 50px;
  }
  
  to {
    opacity: 1;
    padding-top: 0px;
  }
}

@keyframes animate-fade-down {
  from {
    opacity: 0;
    margin-top: -50px;
  }
  
  to {
    opacity: 1;
    margin-top: 0px;
  }
}

@keyframes animate-fade-left {
  from {
    opacity: 0;
    margin-left: -50px;
  }
  
  to {
    opacity: 1;
    margin-left: 0px;
  }
}