﻿/*

 * Sticky buttons v1

 * Code found at mobatek.net
 * Licensed under the KWH license
 * HEADER:
 * <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 * <link rel="stylesheet" href="./css/sticky_btns.css" media="screen">
 * END OF DOCUMENT:
 * <script src="./javascripts/sticky_btns.js"></script>
 *
    <!-- Sticky Go To Top -->
    <div id="stickybtns" class="sticky-btns">
        <a href="#"><span><i class="fa fa-chevron-up"></i></span></a>
        <!-- fa-chevron-up -->
    </div>
*/

.sticky-btns {
    position: fixed;
    z-index: 50;
    right: -48px;
    bottom: 10px;
    -webkit-transition: right .3s ease;
    -moz-transition: right .3s ease;
    transition: right .3s ease;
}
    .sticky-btns.scrolled {
        right: 3px;
    }
    .sticky-btns span {
        display: block;
        float: left;
        width: 42px;
        height: 42px;
        text-align: center;
        font-size: 1.25em;
        color: #fff;
        background: rgb(88,89,91);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        padding-top: 7px;
        margin: 0 5px;
        cursor: pointer;
        -webkit-transition: background .3s ease;
        -moz-transition: background .3s ease;
        transition: background .3s ease;
    }
        .sticky-btns span:hover {
            background: rgb(117,118,120);
        }
        .sticky-btns span#scrollTop-btn {
            padding-top: 5px;
        }
    .sticky-btns:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
    }

