.sp-hero {
  height: 87vh;
  position: relative;
  background: #eee; }
  .sp-hero__inner {
    height: 100%; }
  .sp-hero__slides {
    height: 100%;
    position: relative; }
    @media (max-width: 968px) {
      .sp-hero__slides {
        display: flex;
        flex-direction: column; } }
  @media (max-width: 512px) {
    .sp-hero {
      height: 100%; } }

.sp-hero-slide {
  position: absolute;
  height: 100%;
  display: inline-block;
  width: 50%;
  transition: 0.5s ease width, 0.5s ease transform;
  overflow: hidden;
  transform: translateX(0px);
  min-height: 315px;
  will-change: width; }
  @media (max-width: 968px) {
    .sp-hero-slide {
      height: 40vh;
      position: relative;
      width: 100%; } }
  @media (max-width: 512px) {
    .sp-hero-slide {
      height: 350px; } }
  .sp-hero-slide.active {
    width: 80%;
    z-index: 9; }
    .sp-hero-slide.active .sp-hero-slide__bgoverlay {
      opacity: 0 !important; }
  .sp-hero-slide.no-active {
    width: 50%; }
    .sp-hero-slide.no-active .sp-hero-slide__content {
      opacity: 0; }
    .sp-hero-slide.no-active:first-of-type {
      transform: translateX(-200px); }
    .sp-hero-slide.no-active:nth-of-type(2) {
      transform: translateX(200px); }
  .sp-hero-slide:first-of-type {
    top: 0; }
    .sp-hero-slide:first-of-type .sp-hero-slide__bg {
      transform-origin: left; }
  .sp-hero-slide:nth-of-type(2) {
    right: 0;
    top: 0; }
    .sp-hero-slide:nth-of-type(2) .sp-hero-slide__bg {
      transform-origin: right; }
  .sp-hero-slide:first-of-type .sp-hero-slide__inner {
    justify-content: flex-start;
    align-items: center;
    text-align: left; }
  .sp-hero-slide:nth-of-type(2) .sp-hero-slide__inner {
    justify-content: flex-end;
    align-items: center;
    text-align: right; }
  .sp-hero-slide__inner {
    padding: 35px 85px;
    height: 100%;
    display: flex;
    width: 100%; }
    @media (max-width: 1200px) {
      .sp-hero-slide__inner {
        padding: 25px 35px; } }
    @media (max-width: 512px) {
      .sp-hero-slide__inner {
        padding: 15px; } }
  .sp-hero-slide__bg {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block; }
  .sp-hero-slide__bgoverlay {
    height: 100%;
    width: 100%;
    position: relative;
    transition: 0.35s ease-out opacity;
    display: block;
    will-change: opacity; }
  .sp-hero-slide__content {
    width: 600px;
    position: relative;
    z-index: 2;
    opacity: 1;
    transition: 0.25s ease-out opacity;
    will-change: opacity; }
    .sp-hero-slide__content .slide-cta-wrapper {
      transition: box-shadow 500ms;
      display: inline-block;
      margin-top: 30px;
      border-radius: 7.5px;
      overflow: hidden;
      box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3); }
      .sp-hero-slide__content .slide-cta-wrapper:hover {
        box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.5); }
    @media (max-width: 1440px) {
      .sp-hero-slide__content {
        max-width: 500px; } }
    .sp-hero-slide__content h2,
    .sp-hero-slide__content h5,
    .sp-hero-slide__content a {
      color: white !important; }
    .sp-hero-slide__content h2 {
      font-size: 96px !important;
      font-weight: bold;
      margin-top: 0px;
      line-height: 1.1; }
      @media (max-width: 1440px) {
        .sp-hero-slide__content h2 {
          font-size: 70px !important; } }
      @media (max-width: 968px) {
        .sp-hero-slide__content h2 {
          font-size: 64px !important; } }
      @media (max-width: 520px) {
        .sp-hero-slide__content h2 {
          font-size: 50px !important; } }
    .sp-hero-slide__content h5 {
      font-size: 30px !important;
      margin-top: 25px; }
      @media (max-width: 1440px) {
        .sp-hero-slide__content h5 {
          font-size: 24px !important; } }
      @media (max-width: 968px) {
        .sp-hero-slide__content h5 {
          font-size: 22px !important; } }
      @media (max-width: 520px) {
        .sp-hero-slide__content h5 {
          display: none; } }
      @media (max-width: 968px) and (max-height: 1000px) {
        .sp-hero-slide__content h5 {
          display: none; } }
    .sp-hero-slide__content a {
      font-size: 14px !important;
      font-weight: 700;
      text-transform: uppercase;
      padding: 20px 22.5px;
      display: inline-block; }
      @media (max-width: 520px) {
        .sp-hero-slide__content a {
          padding: 15px 20px; } }