a.scroll-to-top {
    -moz-transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.1s ease;
    -ms-transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.1s ease;
    -o-transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.1s ease;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.1s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.1s ease;
    position: fixed;
    text-align: center;
    text-decoration: none;
    display: block;
    background: #9e9e9e url("../svg/scroll.svg") no-repeat scroll center center;
    background-color: var(--main-color);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    right: 30px;
    left: inherit;
    bottom: 23px;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.3536 6.64645C12.1583 6.45118 11.8417 6.45118 11.6464 6.64645L8.46447 9.82843C8.2692 10.0237 8.2692 10.3403 8.46447 10.5355C8.65973 10.7308 8.97631 10.7308 9.17157 10.5355L12 7.70711L14.8284 10.5355C15.0237 10.7308 15.3403 10.7308 15.5355 10.5355C15.7308 10.3403 15.7308 10.0237 15.5355 9.82843L12.3536 6.64645ZM12.5 17L12.5 7L11.5 7L11.5 17L12.5 17Z" fill="white"/></svg>');
    background-size: cover;
    background-position: center !important;
}

a.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

a.scroll-to-top.round_white,
a.scroll-to-top.rect_white {
    background-color: #fff;
}

a.scroll-to-top.round_grey,
a.scroll-to-top.rect_grey {
    background-color: #e3e3e3;
}

a.scroll-to-top.round_color,
a.scroll-to-top.rect_color {
    background-position: center 14px;
}

a.scroll-to-top.round_white,
a.scroll-to-top.rect_white,
a.scroll-to-top.round_grey,
a.scroll-to-top.rect_grey {
    background-position: center -70px;
}

a.scroll-to-top.rect_color.touch {
    background-position: center 17px;
}

a.scroll-to-top.rect_grey.touch,
a.scroll-to-top.rect_white.touch {
    background-position: center -67px;
}

a.scroll-to-top.content {
    left: 50%;
    margin-left: 512px;
}

a.scroll-to-top:hover {
    --theme-base-color-hue: 227;
    --theme-base-color-saturation: 100%;
    --theme-base-color-lightness: 68%;
    --theme-lightness-hover-diff: 6%;

    background-color: var(--main-color-hover);
    background-position: center 14px;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes rotatein {
    0% {
        transform-origin: center;
        -webkit-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0;
    }
    0%, to {
        -webkit-transform-origin: center;
    }
    to {
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotatein {
    0% {
        transform-origin: center;
        -webkit-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0;
    }
    0%, to {
        -webkit-transform-origin: center;
    }
    to {
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.rotateIn {
    -webkit-animation-name: rotatein;
    animation-name: rotatein;
}

@-webkit-keyframes rotateout {
    0% {
        transform-origin: center;
        opacity: 1;
    }
    0%, to {
        -webkit-transform-origin: center;
    }
    to {
        transform-origin: center;
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 0;
    }
}

@keyframes rotateout {
    0% {
        transform-origin: center;
        opacity: 1;
    }
    0%, to {
        -webkit-transform-origin: center;
    }
    to {
        transform-origin: center;
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 0;
    }
}

.rotateOut {
    -webkit-animation-name: rotateout;
    animation-name: rotateout;
}