.cd-top {
    display: inline-block;
    height: auto;//delete when merging
    width: auto;//delete when merging
    position: fixed;
    bottom: 10px;
    right: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    /* image replacement properties */
    overflow: hidden; //delete when merging
    text-indent: 0;
    white-space: nowrap;
    background: $back-top-background;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    -o-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
    z-index:999;
    color:$back-top-color;
    text-align:center;
    padding:10px;
    text-decoration:none;
    font-size:14px;
    @include border-radius(4px);

    @media only screen and (min-width: 767px) {
        right: 20px;
        bottom: 20px;
        font-size:16px;
    }
    @media only screen and (min-width: 1024px) {
        height: auto;//delete when merging
        width: auto;//delete when merging
        right: 30px;
        bottom: 30px;
    }

    &:before{
        font-family: FontAwesome;
        content:'\f077';
        display:block;
        line-height:0;
        margin:5px 0 10px;
    }

    &:focus{
        background:$focus-color;
        opacity:1;
    }

    &:hover{
        text-decoration:none;
        color:$back-top-hover-color;
        background:$back-top-hover-background;
    }

    &.cd-is-visible {
        visibility: visible;
        opacity: 1;
    }

}
.cd-top.cd-is-visible, 
.no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  -o-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.no-touch .cd-top:hover {
  background-color: $back-top-hover-background;
  opacity: 1;
}