/* ==========================================================
   COMPONENT 013
   PREMIUM BACK TO TOP
========================================================== */

#tm-back-to-top{

    position:fixed;

    right:28px;

    bottom:28px;

    width:60px;

    height:60px;

    border:none;

    border-radius:20px;

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.12),
        0 4px 12px rgba(11,94,215,.10);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(24px) scale(.92);

    transition:
        opacity .35s ease,
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;

    z-index:999;

}

#tm-back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0) scale(1);

}

#tm-back-to-top:hover{

    transform:translateY(-5px) scale(1.05);

    background:rgba(255,255,255,.92);

    box-shadow:
        0 18px 40px rgba(11,94,215,.22),
        0 8px 20px rgba(0,0,0,.12);

}

#tm-back-to-top:active{

    transform:translateY(-2px) scale(.98);

}

#tm-back-to-top svg{

    width:26px;

    height:26px;

    fill:#0B5ED7;

    transition:.3s;

}

#tm-back-to-top:hover svg{

    fill:#1677ff;

}

@keyframes tmButtonFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-3px);

    }

    100%{

        transform:translateY(0);

    }

}

#tm-back-to-top.show{

    animation:tmButtonFloat 4s ease-in-out infinite;

}

@media (max-width:768px){

    #tm-back-to-top{

        right:18px;

        bottom:18px;

        width:54px;

        height:54px;

    }

}