@media (min-width: 320px) {

    .scroll-up-circle {
        height: 45px;
        width: 45px;
        padding: 5px;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
        border: 1px solid #222;
        background: #222;
        top: calc(100% - 40px);
        position: absolute;
        right: -18px;
        cursor: pointer;
    }

    .custom-arrow {
        position: relative;
        top: 0;
        color: white;
        font-weight: normal;
    }

    .custom-text {
        font-size: x-small;
        position: absolute;
        top: calc(100% - 18px);
        right: calc(100% - 7px);
        /* font-weight: 600; */
        text-align: center;
        vertical-align: middle;
        color: white;
        cursor: pointer;
    }

    .scroll-to-top {
        /* font-size: 2em !important; */
        position: fixed !important;
        right: 50px !important;
        bottom: 4.5% !important;
        opacity: 0 !important;
        -webkit-transition: all .2s ease-in-out !important;
        -o-transition: all .2s ease-in-out !important;
        transition: all .2s ease-in-out !important;
        z-index: 999 !important;
    }

    .scroll-to-top:hover {
        color: #ba0060 !important;
        -webkit-transform: scale(1.1, 1.1) !important;
        -ms-transform: scale(1.1, 1.1) !important;
        transform: scale(1.1, 1.1) !important;
        -webkit-transition: all 0.5s ease !important;
        -o-transition: all 0.5s ease !important;
        transition: all 0.5s ease !important;
    }

    .show-scroll {
        opacity: 1 !important;
        -webkit-transition: all .5s ease-in-out !important;
        -o-transition: all .5s ease-in-out !important;
        transition: all .5s ease-in-out !important;
    }

    .back-to-top {
        position: relative !important;
        right: 12px !important;
        bottom: 5px !important;
        color: #ba0060 !important;
        cursor: pointer !important;
    }
}