/*********************************************
 * Video Popup
**********************************************/
.ifs-video-popup {
    --btn-w:74px;
    --btn-font-size:15px;
    --img-ar:16/9;
    --img-h:100%;
}

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

/* image dark overlay */
.ifs-video-popup__popup:before {background-color:#000; opacity:.1; transition:opacity .6s ease; z-index:2;}
.ifs-video-popup__popup:hover:before {opacity:.3;}

/* image hover */
.ifs-video-popup__popup img {transition:transform .6s ease;}
.ifs-video-popup a:hover img {transform:scale(1.02);}

/* play button */
.ifs-video-popup__play-button {
    width:var(--btn-w);font-size:var(--btn-font-size);
}
.ifs-video-popup__play-button::after {
    content:"";
    width:calc(var(--btn-w) - 4px);
    display:flex; align-items:center; justify-content:center;
    aspect-ratio:1; border-radius:999px;transition:all 0.3s ease;
    font-size:10px; color:var(--ifs-color-white);
    position:absolute; top:0; left:0;border:2px solid var(--ifs-color-green);
    background-color:var(--ifs-color-green-3); box-shadow:var(--ifs-btn-shadow); backdrop-filter:blur(28px);
    background-image:var(--ifs-btn-img-url);
    background-size:300%; background-repeat:no-repeat; background-position:15% 20%;
}
.ifs-video-popup a:hover .ifs-video-popup__play-button::after {background-color:var(--ifs-color-green);}


/*********************************************
 * Video Popup Responsive
**********************************************/
@media only screen and (min-width:1800px) {
    .ifs-video-popup {
        --img-h:100%;
    }
}
@media only screen and (max-width:768px) {
    .ifs-video-popup {--btn-w:50px; --btn-font-size:10px;}
}