.virtual-video {
  object-fit: cover;
  width: 100vw;
  height: 260px;
  position: absolute;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.hero-viewport {
  display: flex;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -3px;
  background-image: linear-gradient(
    to right,
    #000,
    rgba(200, 200, 200, 0) 10%,
    rgba(200, 200, 200, 0) 90%,
    #000
  );
  height: 260px;
}
.hero-header-overlay {
  max-width: 1340px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}
.hero-transitions-logo {
  width: 60%;
  margin: 0;
}
.hero-header h1 {
  font-size: 1.25em;
  color: white;
  margin-bottom: 20px;
  margin-left: 5%;
  margin-top: -25px;
  line-height: 1.4;
  font-weight: 400;
}
.hero-header {
  width: 35%;
  margin-right: 5%;
}
.transitions-cta {
  margin-left: 5%;
}
.transitions-cta a.a-btn--primary {
  background-color: #0b2572;
  border: 2px solid #0b2572;
  color: white;
}
.transitions-cta a.a-btn--primary:hover {
  border: 2px solid white;
  background-color: transparent;
}
.transitions-back-cta {
  margin-top: 15px;
}
.transitions-back-cta a {
  color: white;
  margin-left: 5%;
  line-height: 0;
  font-size: .95em;
  text-decoration: none;
}
.transitions-back-cta .icon-chevron {
  font-size: .8em;
  margin-left: 1px;
}
.transitions-banner {
  width: 100%;
  padding-top: min(400px, calc(400 / 1800 * 100% - (58px + 12%)));
  background: url(https://www.americasbest.com/cdn-cgi/image/fit=scale-down,width=1800,f=auto,q=85/medias/AB-Transitions-SubHeadBanner-2023.jpg?context=bWFzdGVyfHJvb3R8NzY0MTV8aW1hZ2UvanBlZ3xoZjMvaGIwLzkzMjQzNzk2MzU3NDIvQUItVHJhbnNpdGlvbnMtU3ViSGVhZEJhbm5lci0yMDIzLmpwZ3w4ZWZlMmY3ZjEwZmFlMDJhODVhNjJhZjNlOTM2NDg0YjRhNWFlY2Q5YjM1MzFhZDFiNjU1OTMyMzdiZmQ5YTI3)
    center top/ auto 100% no-repeat no-repeat;
  margin: 35px auto;
  padding-bottom: 7%;
}
.transitions-content {
  width: 100%;
  max-width: 1340px;
  margin: auto;
}
.transitions-text {
  width: 40%;
  margin-left: 10%;
}
.transitions-text h2,
.transitions-text h3 {
  color: #0b2572;
  font-weight: 400;
  line-height: 1.3;
}
.transitions-text h2 {
  font-size: 2.5em;
  margin: 0 auto 10px;
}
.transitions-text h3 {
  font-size: 1.65em;
}
.transitions-style-content {
  display: flex;
  width: 100%;
  max-width: 1340px;
  margin: 35px auto;
  justify-content: space-evenly;
}
.transitions-style-content .transitions-style-block {
  width: 20%;
}
.transitions-style-content .transitions-style-block img {
  width: 100%;
  margin: 15px auto;
  border-radius: 50%;
}
.transitions-style-content .transitions-style-block p {
  font-size: 1.3em;
  text-align: center;
}
.transitions-style-block a {
  color: black;
  font-weight: 400;
  text-decoration: none;
}
.transitions-style-block a:hover {
  color: #0077b4;
  transition: color 0.2s ease-in-out;
  font-weight: 700;
}
@media (max-width: 1399px) {
  .hero-header-overlay {
    width: 90%;
  }
}
@media (min-width: 768px) {
  .virtual-video,
  .hero-viewport {
    height: 300px;
  }
  .video-mobile {
    display: none;
  }
}
@media (min-width: 992px) {
  .virtual-video,
  .hero-viewport {
    height: 344px;
  }
}
@media (min-width: 1200px) {
  .virtual-video,
  .hero-viewport {
    height: 400px;
  }
}
@media (min-width: 1400px) {
  .virtual-video,
  .hero-viewport {
    height: 433px;
  }
}
@media (max-width: 1199px) {
  .hero-header {
    width: 41%;
    margin-right: 0;
}
  .transitions-text h2 {
    font-size: 2em;
  }
  .transitions-text h3 {
    font-size: 1.45em;
  }
}
@media (max-width: 991px) {
  .hero-transitions-logo {
    width: 70%;
  }
  .transitions-banner {
    padding-top: min(400px, calc(400 / 1800 * 100% - (58px + 11%)));
    padding-bottom: 5%;
  }
  .hero-header h1 {
    font-size: 1.15em;
  }
  .transitions-text h2 {
    font-size: 1.75em;
  }
  .transitions-text h3 {
    font-size: 1.25em;
  }
}
@media (max-width: 767px) {
  .video-desktop {
    display: none;
  }
  .hero-viewport {
    left: initial;
    right: initial;
    height: initial;
    width: 100%;
    margin: 0;
  padding-top: calc(433 / 767 * 100% - (1px + 1%));
    background: url("https://www.americasbest.com/medias/Transitions-GEN8-2023-12-19-767x433.jpg?context=bWFzdGVyfHJvb3R8MTA3MzgxfGltYWdlL2pwZWd8aDZkL2g2OC85NTE0ODIyMDA4ODYyL1RyYW5zaXRpb25zLUdFTjhfMjAyMy0xMi0xOV83Njd4NDMzLmpwZ3xkODhiN2RjNjExNGQ5ZDMyOTVlNTlkNDY4ODg4NjNjMmJiZGM1MjlhOGI1ZGFhZjBjYWVlNjgyZWYyOGMxNzAy")
      center top/contain no-repeat no-repeat #a0a0a0;
    padding-bottom: 2%;
    position: relative;
  }
  .hero-header-overlay {
    flex-direction: column;
    width: 75%;
    margin-bottom: 5%;
    text-align: center;
  }
  .hero-header {
    width: 100%;
  }
  .hero-transitions-logo {
    margin-left: 8%;
  }
  .transitions-banner {
    padding-bottom: calc(536 / 767 * 100% - (1px + 5%));
    background: url("https://www.americasbest.com/cdn-cgi/image/fit=scale-down,width=767,f=auto,q=85/medias/AB-Transitions-SubHeadBanner-2023-Mobile.jpg?context=bWFzdGVyfHJvb3R8OTE2Njd8aW1hZ2UvanBlZ3xoNzEvaGI4LzkzMjQzNzk4OTc4ODYvQUItVHJhbnNpdGlvbnMtU3ViSGVhZEJhbm5lci0yMDIzLU1vYmlsZS5qcGd8NDcyYTMwZDBkMzc5MmRkMDdiODVhNmM0NjI2ZGUwZWU0NjdiZjliZmVhNjNkZmM5MDg0YTU4MzExNDY5ZTI4NA")
      center bottom/contain no-repeat no-repeat #d5d4d9;
    padding-top: 5%;
  }
  .transitions-content {
    width: 60%;
    text-align: center;
  }
  .transitions-text {
    width: 100%;
    margin: auto;
  }
  .transitions-text h2 {
    font-size: 2.25em;
  }
  .transitions-text h3 {
    font-size: 1.5em;
  }
  .transitions-style-content {
    flex-wrap: wrap;
  }
  .transitions-style-content .transitions-style-block {
    width: 40%;
  }
}
@media (max-width: 650px) {
  .transitions-text h2 {
    font-size: 2em;
  }
  .transitions-text h3 {
    font-size: 1.25em;
  }
}
@media (max-width: 550px) {
  .transitions-content {
    width: 65%;
  }
  .transitions-text h2 {
    font-size: 1.75em;
  }
  .transitions-text h3 {
    font-size: 1.1em;
  }
}
@media (max-width: 450px) {
  .hero-header-overlay {
    width: 85%;
  }
  .transitions-content {
    width: 75%;
  }
  .transitions-style-content .transitions-style-block p {
    font-size: 1.1em;
    line-height: normal;
  }
  .hero-header h1 {
    font-size: 1.05em;
    margin-top: -30px;
    margin-bottom: 10px;
}
}
@media (max-width: 390px) {
  .transitions-content {
    width: 80%;
  }
  .transitions-text h2 {
    font-size: 1.5em;
  }
  .transitions-text h3 {
    font-size: 1em;
  }
}
@media (max-width: 330px) {
  .transitions-text h2 {
    font-size: 1.25em;
  }
  .transitions-text h3 {
    font-size: 0.9em;
  }
  .transitions-style-content .transitions-style-block p {
    font-size: 1em;
  }
}