@keyframes tone1 {
    0% {
        transform: translate(-20px, 55px);
        opacity: 1;
    }

    80% {
        transform: translate(-5px, 15px);
        opacity: 0.5;
    }
    100%{
        transform: translate(0);
        opacity: 0;
    }
}
@keyframes tone2 {
    0% {
        transform: translate(-20px, 30px);
        opacity: 1;
    }

    80% {
        transform: translate(-15px, 10px);
        opacity: 0.5;
    }
    100%{
        transform: translate(-15px, 0px);
        opacity: 0;
    }
}
@keyframes tone3 {
    0% {
        transform: translate(-30px, 44px);
        opacity: 1;
    }

    80% {
        transform: translate(-20px, 0px);
        opacity: 0.5;
    }
    100%{
        transform: translate(-20px, -10px);
        opacity: 0;
    }
}
@keyframes tone4 {
    0% {
        transform: translate(-10px, 40px);
        opacity: 1;
    }

    80% {
        transform: translate(-20px, -20px);
        opacity: 0.5;
    }
    100%{
        transform: translate(-20px, -30px);
        opacity: 0;
    }
}
@keyframes tone5 {
    0% {
        transform: translate(0px, 40px);
        opacity: 1;
    }

    80% {
        transform: translate(0px, 0px);
        opacity: 0.5;
    }
    100%{
        transform: translate(0px, -10px);
        opacity: 0;
    }
}
#tone1{
    animation: tone1 4s infinite ease-in;
}
#tone2{
    animation: tone2 5s infinite ease-in 0.8s;
}
#tone3{
    animation: tone3 3s infinite ease-in 0.5s;
}
#tone4{
    animation: tone4 6s infinite ease-in 1s;
}
#tone5{
    animation: tone5 4s infinite ease-in;
}

.ortqli1{
    animation: boli 10s infinite ease-in-out;
}
.ortqli2{
    animation: boli2 8s infinite ease-in-out;
}
@keyframes boli {
    0% {
        opacity: 0;
        transform: skew(40deg , 0) translate(-591px);
    }
    25% {
        opacity: 0.4;
    }
    100% {
        transform: skew(40deg , -5deg) translate(-591px);
        opacity: 0;
    }
}
@keyframes boli2 {
    0% {
        opacity: 0;
        transform: skew(40deg , 0) translate(-585px ,0px);
    }
    25% {
        opacity: 0.6;
    }
    100% {
        transform: skew(40deg , -5deg) translate(-591px ,0px);
        opacity: 0;
    }
}

.xe1{
    animation: xe 14.1s infinite;
}
.xe2{
    animation: xe2 14s infinite;
}
@keyframes xe{
    0%{
        transform: rotateY(0deg) skew(0deg, 0deg) translate(0px, 0px);
    }
    50%{
        transform: rotate(1deg) skew(-10deg, 0deg) translate(92px, -20px);
    }
    100%{
        transform: rotateY(0deg) skew(0deg, 0deg) translate(0px, 0px);
    }
}
@keyframes xe2{
    0%{
        transform: rotateY(0deg) skew(0deg, 0deg) translate(0px, 0px);
    }
    50%{
        transform: rotate(1deg) skew(-10deg, 0deg) translate(92px, -16px);
    }
    100%{
        transform: rotateY(0deg) skew(0deg, 0deg) translate(0px, 0px);
    }
}

.handMove{
    animation: nikasHandmove 4s infinite;
}
@keyframes nikasHandmove{
    0%{
        transform: rotateY(0deg) skew(0deg, 0deg) translate(0px, 0px);
    }
    50%{
        transform: rotate(5deg) skew(15deg, 0deg) translate(-98px, -65px)
    }
    100%{
        transform: rotateY(0deg) skew(0deg, 0deg) translate(0px, 0px);
    }
}

.handMove2{
    animation: tavaHandMove 1s infinite;
}
@keyframes tavaHandMove {
    0%{
        transform: rotate(0deg) translate(0px , 0px);
        transform-origin: center center;
    }
    50%{
        transform: rotate(-0.1deg) translate(2px , 0px);
        transform-origin: center center;
    }
    100%{
        transform: rotate(0deg) translate(0px , 0px);
        transform-origin: center center;
    }
}
.headMove{
    animation: chrikasHeadMove 2s infinite ease-in-out;
}
@keyframes chrikasHeadMove {
    0%{
        transform: rotate(0deg) translate(0px , 0px);
        transform-origin: center center;
    }
    50%{
        transform: rotate(-5deg) skew(5deg) translate(-10px , 30px);
        transform-origin: center center;
    }
    100%{
        transform: rotate(0deg) translate(0px , 0px);
        transform-origin: center center;
    }
}

.jesiMove{
    animation: jesiMove 2s infinite ease-in-out;
}
.jesiMove2{
    animation: jesiMove2 2s infinite ease-in-out;
}
@keyframes jesiMove {
    0%{
        transform: rotate(0deg) translate(0px , 0px);
        transform-origin: bottom left;
    }
    50%{
        transform: rotate(5deg) skew(1deg) translate(-32px , -90px);
        transform-origin: bottom left;
    }
    100%{
        transform: rotate(0deg) translate(0px , 0px);
        transform-origin: bottom left;
    }
}
@keyframes jesiMove2 {
    0%{
        transform: rotate(0deg) translate(0px , 0px);
        transform-origin: bottom left;
    }
    50%{
        transform: rotate(0.2deg) skew(-0.1deg) translate(0.4px , -0.4px);
        transform-origin: bottom left;
    }
    100%{
        transform: rotate(0deg) translate(0px , 0px);
        transform-origin: bottom left;
    }
}
.teosMove{
    animation: teomove 2s infinite ease-in-out;
}
@keyframes teomove {
    0%{
        transform: rotate(0deg) translate(0px , 0px);
        transform-origin: bottom left;
    }
    50%{
        transform: rotate(5deg) skew(-5deg) translate(-62px , -82px);
        transform-origin: bottom left;
    }
    100%{
        transform: rotate(0deg) translate(0px , 0px);
        transform-origin: bottom left;
    }
}

@media(max-width:992px){
    .xe1,
    .xe2{
        animation: none;
    }
}