.arrow--white .arrow__path {
    fill:#000
}

.arrow--down {
    position: absolute;
    right: calc(50% - 12px);
    bottom: 60px;
    animation:arrow--down 2s reverse infinite
}

.arrow--default {
    position: absolute;
    right: calc(50% - 12px);
    padding-bottom:0;
}

@media (min-width: 769px) {
    .arrow--down .arrow--default{
        display: block
    }
}

@media screen and (max-width: 768px) {
    .arrow--down .arrow--default{
        display: none
    }
}

@keyframes arrow--down {
    0% {
        transform:translateY(-10px)
    }

    50% {
        transform:translateY(10px)
    }

    100% {
        transform: translateY(-10px)
    }
}