.invisible {
  opacity: 0;
}
p.invisible {
  color: rgba(0,0,0,0);
}

.visible {
  opacity: 1.0;
  transition: 1.5s ease;
}

.visible.transition-1 {
  transition: 1s ease;
}

section.invisible {
  background-color: rgba(0,0,0,0);
  transition:background 10s ease;
}

.visible.transition-2 {
  transition: 2s ease;
}
.visible.transition-2h {
  transition: 2.5s ease;
}
.visible.transition-3 {
  transition: 3s ease;
}
.visible.transition-3h {
  transition: 3.5s ease;
}
.visible.transition-4 {
  transition: 4s ease;
}
.invisible.RtoL {
  opacity: 1;
  transform: translate(5vw, 0);
}

.invisible.LtoR {
  opacity: 1;
  transform: translate(-5vw, 0);
}

.invisible.BtoT {
  opacity: 1;
  transform: translate(0, 5vw);
}

.invisible.TtoB {
  opacity: 1;
  transform: translate(0, -5vw);
}

.visible.RtoL,
.visible.LtoR,
.visible.BtoT,
.visible.rotate,
.visible.scale {
  transform: translate(0, 0) scale(1) rotate(0turn);
}