.fade-in-image {
  animation: fadeIn 3s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.slide-effect {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text, .slideDn {
  position: relative;
  font-family: 'Cabin Condensed';
  font-size: 15px;
  opacity:0;
}

.text {
  top:40px;
  font-weight: bold;
  animation: slideDn ease .4s forwards;
}

.slideUp {
  top:40px;
  left:10px;
  animation: slideUp ease .5s forwards 1.2s;
}
.slideDn {
  top:40px;
  left:10px;
  animation: slideDn ease .5s forwards 1.2s;
}

@keyframes slideUp {
  0% {transform: translateY(0);}
  100% {transform: translateY(-40px);opacity:1;}
}

@keyframes slideDn {
  100% {transform: translateY(-40px);opacity:1;}
  0% {transform: translateY(0);}
}