.scroll-arrow::before {

    content: '';

    background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/arr_o5.svg);

    background-size: cover;

    width: 38px;

    height: 38px;

    position: absolute;

    top: 0px;

    left: 0px;

}



.scroll-arrow.left-scroll-media:hover, .scroll-arrow.right-scroll-media:hover {

    background: #ffb471;

}



.scroll-arrow.left-scroll-media:hover::before, .scroll-arrow.right-scroll-media:hover::before {

    content: '';

    background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/arr-w.svg);

    background-size: cover;

    width: 38px;

    height: 38px;

    position: absolute;

    top: 0px;

    left: 0px;

}



.scroll-arrow.left-scroll-media {

    left: -1%;

    transform: translate(0%, -50%) rotate(-90deg);

}



.scroll-arrow.right-scroll-media {

    right: -1%;

    transform: translate(0%, -50%) rotate(90deg);

}



.scroll-arrow.hidden {

    opacity: 0;

    pointer-events: none;

}



.scroll-arrow {

    opacity: 1;

}



.scroll-arrow {

    position: absolute;

    top: 50%;

    width: 38px;

    height: 38px;

    padding: 0;

    background: #ffffff;

    border-radius: 20px;

    cursor: pointer;

    box-shadow: 0 0 5px 1px #d7d7d7;

    z-index: 2;

}



#scrollList {

    overflow: scroll;

}



@media only screen and (max-width: 900px) {

    .scroll-arrow {

        display: none;

    }

}