﻿.arrow {
    position: absolute;
    /*top: 50%;
    left: 50%;*/
    top: 55%;
    left: 23%;
    transform: translate(-50%, -50%);
    transform: rotate(90deg);
    cursor: pointer;
}

    .arrow span {
        display: block;
        width: 3.5vw;
        height: 3.5vw;
        border-bottom: 6px solid #071432;
        border-right: 6px solid #071432;
        transform: rotate(45deg);
        margin: -26px;
        animation: animate 2s infinite;
    }

        .arrow span:nth-child(2) {
            animation-delay: -0.2s;
        }

        .arrow span:nth-child(3) {
            animation-delay: -0.4s;
        }

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
    }
}
