.tf-video-popup {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
position: relative;
}
.tf-video-popup .wrap-icon,
.tf-video-popup .video-icon {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
} @keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.tf_ani-linear-gradient:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.tf_ani-linear-gradient:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: inherit;
left: 0;
top: 0;
}
.tf_ani-pulsebox-1 {
cursor: pointer;
animation: pulse_two 2s infinite;
}
@keyframes pulse_two {
0% {
-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
}
70% {
-moz-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}