/*********************************************
 * Video Popup
**********************************************/
.vii-video-popup {
    --btn-w:77px;
    --btn-font-size:21px;
    --img-h:clamp(225px, 49.7vw, 716px);
}

/* height */
.vii-video__height {height:var(--img-h);}

/* adjust transition */
.vii-video-popup__popup:before, .vii-video-popup__popup img {transition-duration:0.5s;}

/* image dark overlay */
a.vii-video-popup__popup:not(:hover):not(:focus):before {opacity:.2;}

/* play button */
.vii-video-popup__play-button {
    width:var(--btn-w); font-size:var(--btn-font-size);
    box-shadow:0 0 0 19px rgba(255,255,255,0.4);
}
.vii-video-popup__play-button i {transform:translateX(0.1em);}
.vii-video-popup a:hover .vii-video-popup__play-button {
    background:var(--vii-color-primary); color:var(--vii-color-on-primary);
    box-shadow:0 0 15px 16px rgba(255,255,255,0.4)
}

/* remove radius for vc row full width */
.vc_row[data-vc-full-width][data-vc-stretch-content].vc_row-no-padding .vii-video-popup__popup {border-radius:0;}


/*********************************************
 * Video Popup Responsive
**********************************************/
@media only screen and (max-width:768px) {
    .vii-video-popup {--btn-w:60px; --btn-font-size:16px;}
    .vii-video-popup__play-button:not(:hover) {box-shadow:0 0 0 10px rgba(255,255,255,0.4);}
}
@media only screen and (max-width:480px) {
    .vii-video-popup {--btn-w:50px; --btn-font-size:14px;}
}