/*--------------------------------------------------------------
    Totop
--------------------------------------------------------------*/

#back-to-top {
    position: fixed;
    display: none;
    text-decoration: none;
    bottom: 20px;
    right: 20px;
    overflow: hidden;
    width: 50px;
    height: 50px;
    border: none;
    text-indent: 100%;
    z-index: 9;
    text-indent: -9999px;
    box-shadow:  0px 0px 5px -1px rgba(var(--wdtAccentTxtColorRgb),0.5);
}



.back-to-top-icon {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin:auto;
    top: 0;
    bottom: 0;
   -webkit-transition:var(--wdtAltTransition);
    transition:var(--wdtAltTransition);
    text-indent: 0;
    text-align: center;
    font-size: 25px;
    line-height: 1;
}


#back-to-top .back-to-top-icon:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: var(--wdtHeadAltColor);
opacity: 1;
left: 0;
animation: btn-clip-invert 0.7s linear;
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

#back-to-top .back-to-top-icon:hover:before{
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
opacity: 1;
animation: btn-clip 0.7s linear;
}

#back-to-top .back-to-top-icon i{
width: 100%;
height: 100%;
display: grid;
place-items: center;

z-index: 1;
}

#back-to-top .back-to-top-icon i:before{
bottom: 2px; 
position: relative;
}

#back-to-top:hover .back-to-top-icon{
color: var(--wdtAccentTxtColor)
}



/*--------------------------------------------------------------
Accents
--------------------------------------------------------------*/


/* Primary */
#back-to-top { background-color: var(--wdtPrimaryColor); }

/* Secondary */


/*--------------------------------------------------------------
Responsive
--------------------------------------------------------------*/

@media only screen and (max-width: 1280px) {

    .nav-is-visible #back-to-top {
        opacity: 0;
    }
}