/*==========================
    Scroll To Top Button
==========================*/

#scrollTopBtn {

    position: fixed;

    right: 30px;
    bottom: 30px;

    width: 55px;
    height: 55px;

    border-radius: 50%;

    background: linear-gradient(135deg, #f44336, #ff7b54);

    color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;

    text-decoration: none;

    font-size: 22px;

    box-shadow: 0 10px 30px rgba(244, 67, 54, .35);

    z-index: 9999;

    opacity: 0;
    visibility: hidden;

    transform: translateY(20px);

    transition: .4s ease;

}

/* Show Button */

#scrollTopBtn.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

/* Hover */

#scrollTopBtn:hover {

    transform: translateY(-6px);

    box-shadow: 0 18px 40px rgba(244, 67, 54, .45);

    background: linear-gradient(135deg, #ff6b6b, #ff914d);

}


/*==============================
        Responsive
==============================*/

@media(max-width:768px) {

    #scrollTopBtn {

        width: 50px;
        height: 50px;

        right: 20px;
        bottom: 20px;

        font-size: 20px;

    }

}

@media(max-width:480px) {

    #scrollTopBtn {

        width: 45px;
        height: 45px;

        right: 15px;
        bottom: 15px;

        font-size: 18px;

    }

}