.video-head {

$height: 52.4vw;
$maxHeight: 780px;

@include media-breakpoint-up(md) {
  position: relative;
  height: $height;
  max-height: $maxHeight;
}
&__stage {
  position: relative;
  display: flex;
  height: $height;
  max-height: $maxHeight;
  background: #000;
  overflow: hidden;
}

&__logo {
  .container {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 1100px;
    top: 2rem;
    @include media-breakpoint-up(md) {
      padding: 0 30px;
    }
    @include media-breakpoint-up(lg) {
      padding: 0 15px;
    }
  }

  &-svg,
  &-link {
    display: block;
    width: 240px;
    @include media-breakpoint-up(md) {
      width: 315px;
    }
    @include media-breakpoint-up(lg) {
      width: 376px;
    }
  }
}

&__bg {
  display: flex;
  background: $black;
  overflow: hidden;
  height: auto;
  position: static;
  max-height: none;
}

&__background {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 0;
  padding-bottom: 66.25%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

&__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: 120%;
  background-repeat: no-repeat;
  transition: opacity 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940), visibility 0.5s linear;

  &--fadeOut {
    opacity: 0;
    visibility: hidden;
  }
}

&__spinner-border {
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  z-index: 99999;
  width: 56px;
  height: 56px;
  color: $primary;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.contact-box {
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: $container-width;
  position: relative; // 1024px
  @media (min-width: 768px) {
    position: absolute;
  }

  .contact-name {
    position: relative;
    padding: 24px;
    color: white;
    z-index: 10;
    background-color: $dark-grey;
    @media (min-width: 768px) {
      max-width: 458px;
      margin: {
        left: 32px;
        right: 32px;
        bottom: 32px;
      }
    }
  }

  .contact-now {
    display: block;
    background-color: $logo-primary;
    left: 0;
    text-decoration: none;
    font-size: 16px;
    color: white;
    font-weight: 600;
    padding: 16px 24px;
    z-index: 8;
    top: 0;
    white-space: nowrap;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: lighten($primary, 10);
    }

    @media (min-width: 768px) {
      left: 2rem;
      top: -59px;
      position: absolute;
    }
  }

  .title {
    font-weight: 600;
    font-size: 32px;
    line-height: 1.3;
    margin: 0;

    small {
      font-weight: 300;
      font-size: 24px;
      display: block;
      padding-top: 12px;
    }
  }
}

}