#backtotop { display: block;  height:0;display: flex; justify-content: flex-end; align-items: center; position: absolute;
    width: calc(100% - var(--wrapper-margin) - var(--wrapper-margin) - var(--section-padding));
    z-index: 15; }

#backtotop>span>span{position: relative; margin-left:0.5em; }
#backtotop p { margin:0 !important; }
#backtotop p.cta a { display: flex; align-items: center;     padding: 8px 8px 8px 24px; }
#backtotop p.cta a::after { display:none !important;  }
#backtotop p.cta a:is(:link,:visited){ background: var(--black); border-color: white;  color: white; }
#backtotop p.cta a:is(:hover,:focus-visible){ border-color: var(--black) !important ; background: var(--white) !important;  color: black !important; }

#backtotop p.cta a i.icon { font-style: normal !important; background: white; border-radius:50%; color: black;

    width: 48px; height: 48px; display: block; line-height: 48px; text-align: center; margin-left:12px;
    transform: rotate(-90deg);
}


@media (prefers-color-scheme: dark) {
    #backtotop p.cta a i.icon { color:white !important; background: var(--black);
    }

}

#backtotop p.cta a i.icon::after {
    font-family: "esero";
    font-size: 24px;
    content:"\E800";

}

#backtotop p.cta a:is(:hover,:focus-visible) i.icon{
    background: black; color:white;
}

#backtotop.fixed {
    position: fixed; bottom:28px; left: 50%; transform: translateX(-50%)}


@media all and (max-width: 899px) {
    #backtotop.fixed { bottom:25px; }


}