.arrow {
    opacity: 0;
    /* position: absolute;
    left: 49%;
    top: 90%; */
    margin-left: 49%;
    margin-top: 100px;
    transform-origin: 50% 50%;
    transform: translate3d(-50%, -50%, 0);
}

.arrow-first {
    animation: 1.5s ease-in-out infinite arrow-movement;
}
.arrow-second {
    animation: 1.5s ease-in-out .5s infinite arrow-movement;
}

.arrow:before,
.arrow:after {
    background: #fff;
    content: '';
    display: block;
    height: 3px; 
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
}

.arrow:before {
    transform: rotate(45deg) translateX(-23%);
    transform-origin: top left;
}

.arrow:after {
    transform: rotate(-45deg) translateX(23%);
    transform-origin: top right;
}

@keyframes arrow-movement {
    0% { 
        position: absolute;
        opacity: 0;
        margin-left: 49%;
        margin-top: 80px;
    }
    70% {
        margin-left: 49%;
        opacity: 1;
    }
    100% { 
        margin-left: 49%;
        opacity: 0;
    }
}
