@keyframes info-show  {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes wrapper-show  {
    from {
        transform: scale(0.2)
    }
    to {
        transform: scale(1)
    }
}

@keyframes img-show  {
    from {
        opacity: 0
    }
    25% {
        opacity: 0;
    }
    to {
        opacity: 1
    }
}

@keyframes info-del  {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes wrapper-del  {
    from {
        transform: scale(1)
    }
    to {
        transform: scale(0.2)
    }
}

@keyframes img-del  {
    from {
        opacity: 1
    }
    25% {
        opacity: 1;
    }
    to {
        opacity: 0
    }
}

@keyframes first  {
    from {
        transform: rotate(-143deg);
        top: -124.5%;
        right: -63%;
    }
    25% {
        transform: rotate(-143deg);
        top: -124.5%;
        right: -63%;
    }
    to {
        top: -76.5%;
        right: -46.4%;
        transform: rotate(0);
    }
}

@keyframes second  {
    from {
        top: -76.5%;
        right: -46.4%;
        transform: rotate(0);
    }
    25% {
        top: -76.5%;
        right: -46.4%;
        transform: rotate(0);
    }
    to {
        transform: rotate(180deg);
        top: -11%;
        right: -17%;
    }
}

@keyframes therd  {
    from {
        transform: rotate(180deg);
        top: -11%;
        right: -17%;
    }
    25% {
        transform: rotate(180deg);
        top: -11%;
        right: -17%;
    }
    to {
        transform: rotate(148deg);
        top: -22.5%;
        right: -67%;
    }
}

@keyframes four  {
    from {
        transform: rotate(148deg);
        top: -22.5%;
        right: -67%;
    }
    25% {
        transform: rotate(148deg);
        top: -22.5%;
        right: -67%;
    }
    to {
        transform: rotate(-143deg);
        top: -124.5%;
        right: -63%;
    }
}

@media (max-width: 1024px) {
    @keyframes first  {
        from {
            top: -600px;
            right: -621px;
        }
        25% {
            top: -600px;
            right: -621px;
        }
        to {
            top: -405px;
            right: -461px;
        }
    }
    @keyframes second  {
        from {
            top: -405px;
            right: -461px;
        }
        25% {
            top: -405px;
            right: -461px;
        }
        to {
            top: -79px;
            right: -168px;
        }
    }
    @keyframes therd  {
        from {
            top: -79px;
            right: -168px;
        }
        25% {
            top: -79px;
            right: -168px;
        }
        to {
            top: -118px;
            right: -665px;
        }
    }
    @keyframes four  {
        from {
            top: -118px;
            right: -665px;
        }
        25% {
            top: -118px;
            right: -665px;
        }
        to {
            top: -600px;
            right: -621px;
        }
    }
}

@media (max-width: 425px) {
    @keyframes first  {
        from {
            top: -62vw;
            right: -67vw;
        }
        25% {
            top: -62vw;
            right: -67vw;
        }
        to {
            top: -35vw;
            right: -46vw;
        }
    }
    @keyframes second  {
        from {
            top: -35vw;
            right: -46vw;
        }
        25% {
            top: -35vw;
            right: -46vw;
        }
        to {
            top: 9vw;
            right: -8vw;
        }
    }
    @keyframes therd  {
        from {
            top: 9vw;
            right: -8vw;
        }
        25% {
            top: 9vw;
            right: -8vw;
        }
        to {
            top: 3vw;
            right: -73vw;
        }
    }
    @keyframes four  {
        from {
            top: 3vw;
            right: -73vw;
        }
        25% {
            top: 3vw;
            right: -73vw;
        }
        to {
            top: -62vw;
            right: -67vw;
        }
    }
} 

@keyframes circle  {
    from {
        stroke-dasharray: 0 1156
    }
    to {
        stroke-dasharray: 1086 1156
    }
}
@keyframes focus  {
    from {
        height: 100%
    }
    to {
        height: 72%
    }
}
@keyframes stress  {
    from {
        width: 0%
    }
    to {
        width: 2.8%
    }
}
@keyframes top  {
    from {
        top: 28px
    }
    to {
        top: -5px
    }
}
@keyframes red  {
    from {
        fill: #4fafaa;
    }
    to {
        fill: #C4686D;
    }
}
@keyframes bottom  {
    from {
        top: -5px
    }
    to {
        top: 28px
    }
}
@keyframes green  {
    from {
        fill: #C4686D;
    }
    to {
        fill: #4fafaa;
    }
}
@keyframes del  {
    from {
        top: -5px;
        opacity: 1;
    }
    to {
        top: -30px;
        opacity: 0;
    }
}
@keyframes violet  {
    from {
        fill: #4fafaa;
    }
    to {
        fill: #BDA2EB;
    }
}
@keyframes violet  {
    from {
        fill: #4fafaa;
    }
    to {
        fill: #BDA2EB;
    }
}

/* new */

@keyframes nav-button-hover {
    from {
        width: 0;
        height: 0;
    }
    to {
        width: 500px;
        height: 500px;
    }
}

@keyframes nav-button-move {
    from {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-20deg);
    }
    75% {
        transform: rotate(20deg);
    }
    to {
        transform: rotate(0deg);
    }
}