.wp_animals {
width: 32px;
height: 32px;
background-repeat: no-repeat;
position: absolute;
z-index: 99999;
}
.wp_animal_left {
animation: wp_anim_left 0.5s steps(3) infinite;
-webkit-animation: wp_anim_left 0.5s steps(3) infinite;
background-position: 0 -32px;
}
.wp_animal_right {
animation: wp_anim_right 0.5s steps(3) infinite;
-webkit-animation: wp_anim_right 0.5s steps(3) infinite;
background-position: 0 -64px;
}
.wp_animal_up {
animation: wp_anim_up 0.5s steps(3) infinite;
-webkit-animation: wp_anim_up 0.5s steps(3) infinite;
background-position: 0 -96px;
}
.wp_animal_down {
animation: wp_anim_down 0.5s steps(3) infinite;
-webkit-animation: wp_anim_down 0.5s steps(3) infinite;
background-position: 0 0;
}
@keyframes wp_anim_left {
form {
background-position: 0px -32px;
}
to {
background-position: -96px -32px;
}
}
@-webkit-keyframes wp_anim_left {
form {
background-position: 0px -32px;
}
to {
background-position: -96px -32px;
}
} 
@keyframes wp_anim_right {
form {
background-position: 0px -64px;
}
to {
background-position: -96px -64px;
}
}
@-webkit-keyframes wp_anim_right {
form {
background-position: 0px -64px;
}
to {
background-position: -96px -64px;
}
} 
@keyframes wp_anim_up {
form {
background-position: 0px -96px;
}
to {
background-position: -96px -96px;
}
}
@-webkit-keyframes wp_anim_up {
form {
background-position: 0px -96px;
}
to {
background-position: -96px -96px;
}
} 
@keyframes wp_anim_down {
form {
background-position: 0px -0px;
}
to {
background-position: -96px 0px;
}
}
@-webkit-keyframes wp_anim_down {
form {
background-position: 0px 0px;
}
to {
background-position: -96px 0px;
}
}.playlist_peertube_grid {
width: 100%;
position: relative;
}
.playlist_peertube_grid .video {
width: 48%;
display: inline-block;
position: relative;
margin-left: 2%;
margin-top: 2%;
}
.playlist_peertube_grid .video .video_container {
position: relative;
}
.playlist_peertube_grid .video h3 {
height: 45px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.playlist_peertube_grid .video img.thumbnail {
width: 100%;
opacity: 0.5;
}
.playlist_peertube_grid .video span.video_description {
position: absolute;
bottom: 0px;
left: 0px;
padding: 10px;
width: 100%;
background-color: #000;
color: #fff;
font-size: 18px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
}
.playlist_peertube_grid .video img.play_video {
position: absolute;
left: calc(50% - 32px);
top: calc(50% - 32px);
cursor: pointer;
transition: all 0.1s linear;
width: 64px;
height: 64px;
}
.playlist_peertube_grid .video img.play_video:hover {
transform: scale(1.2);
opacity: 0.8;
}
.playlist_peertube_grid iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
@media screen and (max-width: 550px) {
.playlist_peertube_grid .video {
width: 100%;
}
}