.r_red, .r_blue, .r_green, .r_violet {
    animation-duration: 25s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.r_red {
    animation-name: redPath;
}
@keyframes redPath {
    50% {
        height: 142px;
        width: 142px;
        top: 370px;
        left: 180px;
    }
}

.r_blue {
    animation-name: bluePath;
}

@keyframes bluePath {
    50% {
        right: 24px;
        top: 221px;
        height: 148px;
        width: 148px;
    }
}

.r_green {
    animation-name: greenPath;
}

@keyframes greenPath {
    50% {
        top: 359px;
        right: 208px;
        height: 149px;
        width: 149px;
    }
}

.r_violet {
    animation-name: violetPath;
}

@keyframes violetPath {
    50% {
        height: 122px;
        width: 122px;
        top: 259px;
        left: 60px;
    }
}

@media (min-width: 992px) {
    
    @keyframes redPath {
        50% {
            height: 134px;
            width: 134px;
            top: 338px;
            left: 562px;
        }
    }

    @keyframes bluePath {
        50% {
            right: 304px;
            top: 139px;
        }
    }

    @keyframes greenPath {
        50% {
            top: 297px;
            right: 438px;
        }
    }

    @keyframes violetPath {
        50% {
            height: 138px;
            width: 138px;
            top: 154px;
            left: 361px;
        }
    }
}
@media (min-width: 1440px) {
    @keyframes redPath {
        50% {
            height: 194px;
            width: 194px;
            top: 490px;
            left: 816px;
        }
    }
    @keyframes bluePath {
        50% {
            right: 441px;
            top: 202px;
        }
    }
    @keyframes greenPath {
        50% {
            top: 431px;
            right: 635px;
        }
    }
    @keyframes violetPath {
        50% {
            height: 198px;
            width: 198px;
            top: 223px;
            left: 524px;
        }
    }
}