.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; } } }
}