.scroller {
    position: fixed;
    bottom: 5px;
    z-index: 9999;
    left: 5px;
    background: rgba(28, 165, 172, 1);
    border-radius: 50%;
    border: 0px solid #000;
    width: 60px;
    height: 60px;
    overflow: hidden;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    -webkit-transition: all 200ms ease-in-out;
}

.scroller > a {
    cursor: pointer;
    -webkit-transition: background-color 2s ease-out;
    -moz-transition: background-color 2s ease-out;
    transition: background-color 2s ease-out;
}

.scroller > a.scroller__to-top {
    background-image: url(img/chevron-up.png);
    background-repeat: no-repeat;
    background-position: center;
}

.scroller > a.scroller__to-bottom {
    background-image: url(img/chevron-down.png);
    background-repeat: no-repeat;
    background-position: center;
}

.scroller  > a.scroller__to-bottom:hover {
    background:  url(img/chevron-down.png) center no-repeat rgba(17, 70, 127, 0.65);
}

.scroller  > a.scroller__to-top:hover {
    background:  url(img/chevron-up.png) center no-repeat rgba(17, 70, 127, 0.65);
}

.scroller > a {
    height: 30px;
    display: block;
    font-size: 0;
    opacity: 1;
}