.walker-video-image-circles{
position: relative;
display: block;
width: min(100%, var(--wvic-stage-width, var(--wvic-max-width, 560px)));
max-width: 100%;
margin: 0 auto;
}
.walker-video-image-circles__stage{
position: relative;
display: block;
width: 100%;
height: var(--wvic-stage-height, 360px);
min-height: 0;
aspect-ratio: auto;
overflow: visible;
isolation: isolate;
} .walker-video-image-circles__image{
position: absolute;
left: var(--wvic-origin-x, 50%);
top: var(--wvic-origin-y, 50%);
width: var(--wvic-size, 160px);
height: var(--wvic-size, 160px);
border-radius: 999px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
transform: translate(
calc(-50% + var(--wvic-x, 0px)),
calc(-50% + var(--wvic-y, 0px))
);
z-index: var(--wvic-layer, 1);
border: 6px solid #ffffff;
box-shadow:
0 14px 30px rgba(0, 0, 0, 0.16),
0 4px 12px rgba(0, 0, 0, 0.10);
}
.walker-video-image-circles__image::after{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.10);
pointer-events: none;
}
.walker-video-image-circles__image[style*="--wvic-layer: 3"],
.walker-video-image-circles__image[style*="--wvic-layer: 4"]{
box-shadow:
0 18px 38px rgba(0, 0, 0, 0.18),
0 6px 14px rgba(0, 0, 0, 0.12);
} .walker-video-image-circles__button{
position: absolute;
left: var(--wvic-origin-x, 50%);
top: var(--wvic-origin-y, 50%);
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: var(--wvic-button-size, 110px);
height: var(--wvic-button-size, 110px);
transform: translate(
calc(-50% + var(--wvic-button-x, 0px)),
calc(-50% + var(--wvic-button-y, 0px))
);
border: 0;
border-radius: 999px !important;
background: var(--wvic-button-color, #00a5b1);
color: var(--wvic-play-icon-color, #ffffff);
text-decoration: none !important;
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.20);
cursor: pointer;
z-index: 30;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.walker-video-image-circles__button:hover,
.walker-video-image-circles__button:focus{
transform: translate(
calc(-50% + var(--wvic-button-x, 0px)),
calc(-50% + var(--wvic-button-y, 0px))
) scale(1.05);
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.24);
outline: none;
}
.walker-video-image-circles__button,
.walker-video-image-circles__button span{
line-height: 0 !important;
}
.walker-video-image-circles__play-icon{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 60%;
height: 60%;
color: var(--wvic-play-icon-color, #ffffff);
margin: 0 0 0 3%;
}
.walker-video-image-circles__play-icon svg{
display: block;
width: 100%;
height: 100%;
} .walker-video-image-circles__modal{
position: fixed;
inset: 0;
z-index: 2147483647;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.28s ease, visibility 0.28s ease;
}
.walker-video-image-circles__modal.is-active{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.walker-video-image-circles__modal-backdrop{
position: absolute;
inset: 0;
background: rgba(10, 16, 24, 0.72);
backdrop-filter: blur(4px);
z-index: 1;
}
.walker-video-image-circles__modal-dialog{
position: relative;
z-index: 2;
width: min(92vw, 1100px);
max-height: 90vh;
margin: 0;
background: #000;
border-radius: 18px;
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
.walker-video-image-circles__modal-close{
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
color: #fff;
cursor: pointer;
font-size: 28px;
line-height: 1;
transition: background 0.2s ease, transform 0.2s ease;
}
.walker-video-image-circles__modal-close:hover,
.walker-video-image-circles__modal-close:focus{
background: rgba(255, 255, 255, 0.24);
transform: scale(1.05);
outline: none;
}
.walker-video-image-circles__modal-video{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.walker-video-image-circles__modal-video iframe{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
body.wvic-modal-open{
overflow: hidden;
}
@media (max-width: 991px){
.walker-video-image-circles__image{
border-width: 5px;
}
}
@media (max-width: 767px){
.walker-video-image-circles__modal{
padding: 16px;
}
.walker-video-image-circles__modal-dialog{
width: min(94vw, 1100px);
margin-top: 10vh;
border-radius: 14px;
}
.walker-video-image-circles__modal-close{
width: 38px;
height: 38px;
font-size: 24px;
}
.walker-video-image-circles__image{
border-width: 4px;
}
}