.logik-video-img
{
border-radius: var(--box-border-radius);
overflow: hidden;
}
.logik-popup-video .logik-video-icon .logik-video
{
position: absolute;
text-align: center;
left: 0;
right: 0;
top: 50%;
margin: 0 auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
line-height: 50px;
color: var(--color-theme-white);
width:50px;
height: 50px;
background: var(--color-theme-primary);
border-radius: 5px;
z-index: 99;
}
.logik-popup-video .logik-video-icon .logik-video:hover
{
background:var(--color-theme-secondary);
color: var(--color-theme-primary);
}
.logik-popup-video .logik-video-icon .waves {
position: absolute;
top: 50%;
background: transparent;
left: 50%;
width: 25px;
height: 25px;
margin-left: -12px;
margin-top: -12px;
border-radius: var(--box-border-radius);
-webkit-backface-visibility: hidden;
}
.logik-popup-video .logik-video-icon .waves:before {
position: absolute;
background: var(--color-theme-primary);
margin-left: -12px;
margin-top: -12px;
width: 50px;
height: 50px;
content: "";
display: block;
border-radius: var(--box-border-radius);
-webkit-backface-visibility: hidden;
animation: wave-animate 3s infinite ease-out;
}
.logik-popup-video .logik-video-icon .waves:after {
position: absolute;
background: var(--color-theme-primary);
margin-left: -12px;
margin-top: -12px;
width: 50px;
height: 50px;
content: "";
display: block;
border-radius: var(--box-border-radius);
-webkit-backface-visibility: hidden;
opacity: 0;
animation: wave-animate 3s 1.5s infinite ease-out;
}
.logik-popup-video .logik-video-icon
{
text-align: center;
}
@keyframes wave-animate {
0% {
transform: scale(0);
opacity: 1;
transform-origin: center;
}
100% {
transform: scale(3);
opacity: 0;
transform-origin: center;
}
}
@keyframes color-loop {
0% {
background: #2CAB5B;
}
25% {
background: #FABC03;
}
50% {
background: #ED4B40;
}
75% {
background: #4286F3; 
}
100% {
background: #2CAB5B;
}
}