.screen-3__ellipse-1,
.screen-3__ellipse-2,
.screen-3__phone,
.screen-3__family,
.screen-3__family-new-home,
.screen-3__logo-section-content,
.screen-3__website,
.screen-3__question,
.screen-3__feature,
.screen-3__cta-button {
  opacity: 0;
}

.screen-3__ellipse-1,
.screen-3__ellipse-2,
.screen-3__phone,
.screen-3__family {
  transform: translateY(100%);
  opacity: 0;
}

.screen-3__family-new-home {
  transform: scale(0);
  opacity: 0;
}

@keyframes slideUpFromBottom {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  10% {
    transform: translateY(0%);
    opacity: 1;
  }
  80% {
    transform: translateY(0%);
    opacity: 1;
  }
  90% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes scaleIntoView {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  10% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
  90% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes logoTextFadeInOut {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Ellipses, phone, and family slide up from bottom */
.screen-3__ellipse-1 {
  animation: slideUpFromBottom 4s ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.screen-3__ellipse-2 {
  animation: slideUpFromBottom 4s ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.screen-3__phone {
  animation: slideUpFromBottom 4s ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.screen-3__family {
  animation: slideUpFromBottom 4s ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

/* Family-new-home scales into view */
.screen-3__family-new-home {
  animation: scaleIntoView 4s ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

/* Logo and text fade in and out */
.screen-3__logo-section-content {
  animation: logoTextFadeInOut 4s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.screen-3__website {
  animation: logoTextFadeInOut 4s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.screen-3__question {
  animation: logoTextFadeInOut 4s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.screen-3__feature {
  animation: logoTextFadeInOut 4s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.screen-3__cta-button {
  animation: logoTextFadeInOut 4s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}