#backtotop { display: block; background: var(--menu-blue);  font-size: 21px; line-height: 1.2; padding: var(--unit) 0; }
#backtotop>span  { display: flex; justify-content: flex-end; align-items: center; }
#backtotop>span>span{position: relative; margin-left:0.5em; }


#backtotop>span>span::before {
    content: '';
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    z-index: -1;
    transition: all .2s ease-in-out;
}
#backtotop:hover>span>span { color:var(--footer-2); }
#backtotop:hover>span>span::before {
    background-color: rgba(255,255,255,1);
    bottom: 0;
    height: calc(100% - 1px);
}

#backtotop>span::before { width: 16px; min-width: 16px; height: 16px; display: inline-block;  content:""; float: left; transition: all 0.2s ease;
    position: relative;
    background-repeat: no-repeat; background-size: contain; background-position: center;
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"><path fill="white" d="M7,16V3.8L1.4,9.4L0,8l8-8l8,8l-1.4,1.4L9,3.8V16H7z"/></svg>');
}
#backtotop:hover>span::before {transform: translateY(-4px);}


@media all and (max-width: 899px) {
    #backtotop {  font-size: 16px; }
}