.cta-slant {
  position: relative;
  padding: 62px 0 52px;
}

.cta-slant {
  background: #273a91;
  color: #ffffff;
}

.cta-slant h2,
.cta-slant h3,
.cta-slant h4 {
  color: #ffffff;
}

.cta-slant .subtitle {
  color: #e3e6f1;
  margin-bottom: 18px;
}

.cta-slant .btn-primary {
  color: #273a91;
  background: #ffffff;
}

.cta-slant .btn-primary:hover {
  background: #e96325;
  color: #ffffff;
}

.cta-slant .btn-secondary {
  color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) inset,
    0 0 8px rgba(255, 255, 255, 0.6);
}

.cta-slant .btn-secondary:hover {
  background: #ffffff;
  color: #273a91;
}

.cta-slant__wrap {
  position: relative;
  z-index: 2;
}

.cta-slant__wave {
  position: absolute;
  left: 67%;
  bottom: -79px;
  width: 768px;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  opacity: 0.3;
}

.cta-slant p a {
  color: #ffffff;
  text-decoration: none;
  background: none;
  transition: background-size 0s;
  word-break: break-word;
  margin-bottom: 5px;
}

.cta-slant p a:hover {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.25) 100%
  );
  color: #ffffff;
  background-repeat: repeat-x;
  background-size: 2px 30px;
  background-position: 0 100%;
  transition: background-size 0.3s;
}

@media (min-width: 768px) {
  .cta-slant {
    padding: 61px 0;
  }

  .cta-slant .subtitle {
    margin-bottom: 20px;
  }

  .cta-slant__wave {
    left: 50%;
    bottom: -110px;
    width: 768px;
  }
}

@media (min-width: 1200px) {
  .cta-slant {
    padding: 200px 0 100px;
    -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
    z-index: 1;
    margin-top: -220px;
  }

  .cta-slant--prev {
    padding-bottom: 280px !important;
  }

  .cta-slant .subtitle {
    margin-bottom: 16px;
  }

  .cta-slant__wave {
    width: 100%;
    bottom: -200px;
  }

  /* .cta-slant p a {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 3px 2px;
  } */
}

@media (min-width: 1800px) {
  .cta-slant {
    padding: 245px 0 100px;
    -webkit-clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%);
  }

  .cta-slant__wave {
    width: 100%;
    bottom: -400px;
  }
}