.outside-arrow {
    position: fixed;
    width: 106px;
    height: 106px;
    right: 50px;
    bottom: 50px;
    display: inline-block;
    background: none;
    /*border: 1px solid rgba(170, 170, 170, 0.5);*/
    z-index: 66;
    border-radius: 50%;
    transition: 0.5s;
    opacity: 0;
}
.outside-arrow:hover {
    cursor: pointer;
}
.outside-arrow__pict-arrow {
    height: auto;
    width: 16px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    z-index: 10;
}
.outside-arrow.scrolltop_visible {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.outside-arrow  svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: translateX(0.25px);
    rx: 106px;
    ry: 106px;
}

.outside-arrow  svg rect {
    fill: none;
    stroke-width: 1.25;
    stroke-dasharray: 321%;
    stroke-dashoffset: 642%;
    transition-property: stroke-dashoffset, transform;
    transform-origin: 51% 51%;
    will-change: stroke-dashoffset, transform;
    transition-duration: 1.3s;
    transition-timing-function: cubic-bezier(.74, 0, .24, .99);
    width: 106px;
    height: 106px;
    transform: rotate(-90deg);
    stroke: rgba(170, 170, 170, 0.5);
    rx: 106px;
    ry: 106px;
}

.outside-arrow  svg rect {
    width: 106px;
    height: 106px;
    transform: rotate(-90deg);
}

.outside-arrow  svg rect + rect {
    stroke: #CA9D75;
}

.outside-arrow :hover svg rect {
    transform: rotate(0deg);
    stroke-dashoffset: 321%;
}

.outside-arrow  svg rect + rect {
    stroke-dashoffset: 321%;
}

.outside-arrow:hover svg rect + rect {
    transform: rotate(0deg);
}

.outside-arrow:hover svg rect + rect {
    stroke-dashoffset: 0%;
}


@media (max-width: 1199px) {
    .outside-arrow {
        border: 1px solid rgba(170, 170, 170, 0.5);
        width: 80px;
        height: 80px;
    }
    .outside-arrow {
        bottom: 70px;
        right: 20px;
    }
    .outside-arrow svg{
        display: none;
    }

}

@media (max-width: 767px) {
    .outside-arrow {
        width: 45px;
        height: 45px;
    }
}
