.element {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.scroll-active {
  opacity: 1;
}

.element.starting-position {
  opacity: 1;
}

.element.ending-position {
  opacity: 1;
}

.full-section-filler {
  height: 100vh;
}

.feature-block,
.feature-image {
  height: 1000px;
}

.feature-image.x-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.feature-image.x-image.first-image {
  height: 800px;
  justify-content: flex-start;
}

.feature-block.first-block {
  height: 800px;
}

.benefit-text {
  opacity: 1;
  transition: opacity 0.2s;
}

.benefit-scroll-text {
  opacity: 0.8;
  transition: opacity 0.2s;
}

.benefit-name-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 20px;
  position: relative;
}

.benefit-text {
  position: relative;
}

/* Animation */
.element .benefit-text p {
  color: rgba(20, 39, 47, 0.80);
  font-size: 18px;
  position: absolute;
  top: 50px;
  left: 0;
  transition-property: top;
  transition-duration: 0.8s;
}

.benefit-name-container .benefit-number {
  color: #00364F;
  font-size: 26px;
  line-height: 33px;
  font-weight: 700;
  margin-right: 46px;
  position: absolute;
  left: -30px;
  transition-property: opacity, left;
  transition-duration: 0.5s, 0.8s;
  transition-delay: 0, 0.2s;
}

.benefit-name-container .benefit-name {
  color: #14272F;
  opacity: 0.5;
  font-size: 20px;
  line-height: 1;
  position: absolute;
  left: 100px;
  transition-property: opacity, left;
  transition-duration: 0.5s, 0.8s;
  transition-delay: 0, 0.2s;
}

.benefit-heading {
  color: #000;
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  transition-property: opacity, left;
  transition-duration: 0.5s, 0.8s;
  transition-delay: 0, 0.2s;
}

.feature-block.first-block .benefit-name-container .benefit-number {
  left: 0px;
}

.feature-block.first-block .benefit-name-container .benefit-name {
  left: 50px;
}

.element.animated-in .benefit-name-container .benefit-number {
  color: #3BD290;
  left: 0;
}

.element.animated-in .benefit-name-container .benefit-name {
  opacity: 1;
  left: 50px;
}

.element.animated-in .benefit-heading {
  opacity: 1;
}

.element.animated-in .benefit-text p {
  top: 0;
}

/* END Animation */


.benefit-row {
  display: flex;
  align-items: center;
}

/* Show hidden text elements in Cornerstone Editor Only */
.ember-application .element {
  opacity: 1;
}