.cd-top {
    display: inline-block;
    position: fixed;
    bottom: 35px;
    right: 25px;
    box-shadow: var(--box-shadow);
    /* image replacement properties */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: var(--hover-color) url(/assets/cd-top-arrow.svg) no-repeat center 50%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
    z-index: 9999;
    border-radius: 0.25rem;
    cursor: pointer;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all 200ms ease 0ms;
    -webkit-transition: all .2s;
    -webkit-transform: translateY(-60%);
    -moz-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
    -o-transform: translateY(-60%);
}

    .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        box-shadow: var(--card-box-shadow);

    }

    .cd-top:hover {
        background-color: var(--second-color);
        box-shadow: var(--card-box-shadow);
    }

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

    .cd-top.cd-fade-out {
        /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
        opacity: .5;
    }

.no-touch .cd-top:hover {
    background-color: var(--hover-color);
    box-shadow: var(--card-box-shadow);
    opacity: 1;
}

@media (max-width: 576px) 
{
    .cd-top {
        height: 30px;
        width: 30px;
        right: 20px;
        bottom: 20px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) 
{
    .cd-top {
        height: 30px;
        width: 30px;
        right: 20px;
        bottom: 20px;
    }

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) 
{
    .cd-top {
        height: 45px;
        width: 45px;
        right: 20px;
        bottom: 20px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) 
{
    .cd-top {
        height: 60px;
        width: 60px;
        right: 30px;
        bottom: 25px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) 
{
    .cd-top {
        height: 60px;
        width: 60px;
        right: 30px;
        bottom: 25px;
    }
}

/* Double Extra large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) 
{
    .cd-top {
        height: 60px;
        width: 60px;
        right: 30px;
        bottom: 25px;
    }
}