/* sections */
.hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-out;
}

.visible {
  opacity: 1;
  transform: translateY(0);
}

/* boxes */
.delay {
  opacity: 0;
  transform: translateZ(-20px);
  transition: all 0.5s ease-out;
}

.appear {
  opacity: 1;
  transform: translateZ(0);
}

/* images */
.invisible-right {
  opacity: 0;
  transform: translateX(300px);
  transition: all 0.8s ease-out;
}

.invisible-left {
  opacity: 0;
  transform: translateX(-300px);
  transition: all 0.8s ease-out;
}

.slide {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 800px) {
  .invisible-right {
    transform: translateX(0);
  }

  .invisible-left {
    transform: translateX(-0);
  }
}