.hero {
  position: relative;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 100px;
}

.hero.f2f2f2 { background: #f2f2f2; }

.hero .content-wrapper {
  display: flex;
  align-items: center;
  margin-top: 3em;
  margin-bottom: 8em;
}

.hero .content-wrapper.nobottom {
  margin-bottom: 0;
}

.hero__content {
  width: 45%;
}

.hero__content h1>span {
  display: flex;
  flex-direction: column;
}

.hero__content h1>span>span {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
  position: absolute;
  max-width: 594px;
  height: auto;
  width: auto;
}

.hero__img img {
  opacity: 0;
  transition: opacity 0.5s ease;
  position: absolute;
  max-width: 594px;
  height: auto;
  width: auto;
}

.hero__content h1>span>span.active {
  opacity: 1;
  transform: translateY(0);
}

.hero__content h1>span>span.slide-out {
  transform: translateY(-100%);
}


.hero__content h1>span>span.ysoft { color: #FF6600; }
.hero__content h1>span>span.be3d { color: #E4002B; }
.hero__content h1>span>span.aiva { color: #2A7541; }
.hero__content h1>span>span.clerbo { color: #3A9CBB; }
.hero__content h1>span>span.grey { color: #B2B2B2; }

.hero__img {
  width: 55%;
  text-align: right;
  height: auto;
  overflow: hidden;
  position: relative;
}

.hero__img img {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease; /* Transition opacity and transform */
  position: absolute;
  right: 0;
}

.hero__img img.active {
  opacity: 1;
}

.hero__img img.slide-out {
  opacity: 0;
}

.hero__content .button { margin-top: 43px; }

@media(max-width: 767px) {
  .hero {
    flex-direction: column;
    padding-top: 53px;
    padding-bottom: 3em;
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero .content-wrapper {
    padding: 0;
    flex-direction: column;
    margin-bottom: 3em;
  }
  .hero .content-wrapper.nobottom {
    margin-bottom: 0;
  }

  .hero__content,
  .hero.small .hero__content,
  .hero.video .hero__content {
    width: 100%;
    margin-bottom: 2em;
  }

  .hero__img,
  .hero.small .hero__img,
  .hero.video .hero__img {
    width: 100%;
    text-align: center;
  }
  .hero__img img {
    left: 0;
    right: auto;
    width: 100%;
}