/**
 * The base file that should be imported by every file.
 * There should be no CSS generation in this or from imported scss files at all!
 */
/**
 * Library
 */
/**
 * Variables and functions
 */
.section-video-ctas .container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25em; }
  @media (max-width: 767px) {
    .section-video-ctas .container {
      flex-direction: column;
      gap: 1em; } }
  @media (min-width: 1200px) {
    .section-video-ctas .container {
      margin-inline: 80px 150px;
      -moz-column-gap: 80px;
           column-gap: 80px;
      width: calc(100% - 230px); } }
  .section-video-ctas .container > h1, .section-video-ctas .container > h2, .section-video-ctas .container > h3 {
    margin: 0 0 .5em 0;
    flex-basis: 100%; }
  .section-video-ctas .container h1 {
    font-size: 32px;
    line-height: 40px; }
  .section-video-ctas .container h2 {
    font-size: 28px;
    line-height: 36px; }
  .section-video-ctas .container h3 {
    font-size: 24px;
    line-height: 32px; }

.section-video-ctas .video, .section-video-ctas .image {
  position: relative;
  padding-top: 55%;
  height: auto;
  min-height: auto;
  overflow: hidden;
  flex: 2;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.13);
  border-radius: 5px; }
  .section-video-ctas .video > .img, .section-video-ctas .video img, .section-video-ctas .video video, .section-video-ctas .video iframe, .section-video-ctas .image > .img, .section-video-ctas .image img, .section-video-ctas .image video, .section-video-ctas .image iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover; }
  @media (min-width: 768px) {
    .section-video-ctas .video, .section-video-ctas .image {
      padding-top: 35%; } }
  @media (min-width: 981px) {
    .section-video-ctas .video, .section-video-ctas .image {
      flex: 1.75; } }
  .section-video-ctas .video .icon-play, .section-video-ctas .image .icon-play {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 45px;
    background-color: var(--white);
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--light-blue);
    z-index: 1; }
    .section-video-ctas .video .icon-play:before, .section-video-ctas .image .icon-play:before {
      margin-right: -.1em; }

.section-video-ctas .text {
  flex: 1; }
  @media (min-width: 768px) {
    .section-video-ctas .text {
      padding-top: .5em; } }
  .section-video-ctas .text > a {
    display: flex;
    position: relative;
    margin-bottom: 1em;
    outline: none;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.13);
    background-color: var(--white);
    border-radius: 5px;
    width: 100%;
    align-items: center;
    transition: background-color .3s ease-in-out;
    padding: 16px 32px 16px 16px;
    gap: 24px;
    align-self: stretch; }
    @media (min-width: 768px) {
      .section-video-ctas .text > a {
        margin-bottom: 1.25em;
        padding-right: 4em; } }
    .section-video-ctas .text > a i {
      background-color: var(--background-color);
      width: 48px;
      aspect-ratio: 1;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      transition: background-color .3s ease-in-out, color .3s ease-in-out; }
    .section-video-ctas .text > a:after {
      content: "\e912";
      transition: background-color .3s ease-in-out, color .3s ease-in-out;
      color: var(--dark-blue);
      display: flex;
      font-size: 20px;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1;
      border-radius: 50%;
      font-family: Icomoon;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto; }
    .section-video-ctas .text > a > span {
      transition: color .3s ease-in-out, font-weight .3s ease-in-out; }
    .section-video-ctas .text > a.btn-blue {
      background-color: var(--light-blue);
      color: var(--white); }
    .section-video-ctas .text > a.btn-purple {
      background-color: var(--light-purple); }
    .section-video-ctas .text > a:hover {
      text-decoration: none;
      background-color: var(--light-purple); }
      .section-video-ctas .text > a:hover i {
        color: var(--white);
        background-color: rgba(0, 0, 0, 0.5); }
      .section-video-ctas .text > a:hover > span {
        color: var(--white);
        font-weight: bold; }
      .section-video-ctas .text > a:hover:after {
        color: var(--white); }

.section-video-ctas.video-first .video {
  order: 1; }

.section-video-ctas.video-first .text {
  order: 2; }

.section-video-ctas.light {
  background: linear-gradient(to bottom, var(--background-color), var(--background-color) 200px, var(--white) 200px, var(--white) 100%); }
  @media (min-width: 768px) {
    .section-video-ctas.light {
      background: linear-gradient(to bottom, var(--background-color), var(--background-color) 80%, var(--white) 80%, var(--white) 100%); } }
  @media (min-width: 1200px) {
    .section-video-ctas.light {
      background: linear-gradient(to bottom, var(--background-color), var(--background-color) 74%, var(--white) 74%, var(--white) 100%); } }

.section-video-ctas.white {
  background: linear-gradient(to bottom, var(--white), var(--white) 200px, var(--background-color) 200px, var(--background-color) 100%); }
  @media (min-width: 768px) {
    .section-video-ctas.white {
      background: linear-gradient(to bottom, var(--white), var(--white) 80%, var(--background-color) 80%, var(--background-color) 100%); } }
  @media (min-width: 1200px) {
    .section-video-ctas.white {
      background: linear-gradient(to bottom, var(--white), var(--white) 74%, var(--background-color) 74%, var(--background-color) 100%); } }

.section-video-ctas.sand {
  background: linear-gradient(to bottom, var(--dark-sand), var(--dark-sand) 200px, var(--white) 200px, var(--white) 100%); }
  @media (min-width: 768px) {
    .section-video-ctas.sand {
      background: linear-gradient(to bottom, var(--dark-sand), var(--dark-sand) 80%, var(--white) 80%, var(--white) 100%); } }
  @media (min-width: 1200px) {
    .section-video-ctas.sand {
      background: linear-gradient(to bottom, var(--dark-sand), var(--dark-sand) 74%, var(--white) 74%, var(--white) 100%); } }

.section-video-ctas.blue {
  background: linear-gradient(to bottom, var(--dark-blue), var(--dark-blue) 200px, var(--white) 200px, var(--white) 100%); }
  @media (min-width: 768px) {
    .section-video-ctas.blue {
      background: linear-gradient(to bottom, var(--dark-blue), var(--dark-blue) 80%, var(--white) 80%, var(--white) 100%); } }
  @media (min-width: 1200px) {
    .section-video-ctas.blue {
      background: linear-gradient(to bottom, var(--dark-blue), var(--dark-blue) 74%, var(--white) 74%, var(--white) 100%); } }
  .section-video-ctas.blue a.cta {
    border: 1px solid var(--white);
    background: transparent; }
    @media (max-width: 980px) {
      .section-video-ctas.blue a.cta > span {
        color: var(--text-color); } }
    .section-video-ctas.blue a.cta:after {
      color: var(--white); }
    .section-video-ctas.blue a.cta:hover {
      background: var(--white); }
      .section-video-ctas.blue a.cta:hover:after {
        color: var(--light-blue); }
      .section-video-ctas.blue a.cta:hover i {
        background-color: var(--dark-blue); }
      .section-video-ctas.blue a.cta:hover > span {
        color: var(--dark-blue); }

/*# sourceMappingURL=video-ctas.css.map */