@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .image-animation {
        animation: fadeInUp 1.8s 1;
    }
}

#back-to-top {
    display: block;
    background-color: #6B9369;
    width: 3rem;
    height: 3rem;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 4.5rem;
    right: 4rem;
    transition: background-color .3s,
        opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}

#back-to-top::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #292733;
}

#back-to-top:hover {
    cursor: pointer;
    background-color: #99d196;
}

#back-to-top:active {
    background-color: #31532d;
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

#back-to-top.visible {
    opacity: 1;
}