.banner-with-info {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.banner-with-info .banner-with-info-img,
.banner-with-info .banner-with-info-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-with-info .banner-with-info-img .image-wrapper-full {
    width: 100%;
    height: 100%;
}

.banner-with-info .video_wrapper_inner,
.banner-with-info .html5_vid_wrapper,
.banner-with-info .html5_vid_container,
.banner-with-info .vsVideoPlayerHTML5,
.banner-with-info .vid_cover,
.banner-with-info .video_wrapper {
    width: 100%;
    height: 100%;    
}

.banner-with-info .video-controls .video-controls-wrap {
    text-align: right;
}

.banner-with-info .video-controls {
    bottom: inherit;
    top: calc(var(--menu-height) + var(--sticky-h-height) + 8px);
}

.banner-with-info .banner-with-info-img {
    width: 70vw;
    left: 50%;
    transform: translateX(-50%);
}

.banner-with-info .banner-with-info-wrp-info {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 40px 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px);
    height: 230px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    z-index: 1;

}
.banner-with-info .banner-with-info-wrp-info .banner-with-info-wrp-info-inner {
    max-width: 670px;
    margin: 0 auto;
    z-index: 5;
    text-align: center;
}

.banner-with-info .banner-with-info-wrp-info .banner-with-info-wrp-info-inner .cta_wrapper {
    padding-top: 16px;
}


@media screen and (max-width: 1024px) {

    .banner-with-info .video-controls {
        top: calc(var(--menu-height) + var(--sticky-h-height) + 24px);
    }

}