@media only screen and (max-width: 992px) {
    .loader {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url('../img/scroll-touch.gif') 50% 50% no-repeat rgb(249, 249, 249);
        background-size: 25%;
        opacity: 75%;
    }
    #hideMeScroll {
        -webkit-animation: cssAnimation 4s forwards;
        animation: cssAnimation 4s forwards;
    }
    @keyframes cssAnimation {
        0% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @-webkit-keyframes cssAnimation {
        0% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    .scroll {
        width: 60px;
        height: 60px;
        border: 2px solid #333;
        border-radius: 50%;
        position: relative;
        animation: down 1.5s infinite;
        -webkit-animation: down 1.5s infinite;
    }
    .scroll::before {
        content: '';
        position: absolute;
        top: 15px;
        left: 18px;
        width: 18px;
        height: 18px;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        transform: rotate(-45deg);
    }
    @keyframes down {
        0% {
            transform: translate(0);
        }
        20% {
            transform: translateY(15px);
        }
        40% {
            transform: translate(0);
        }
    }
    @-webkit-keyframes down {
        0% {
            transform: translate(0);
        }
        20% {
            transform: translateY(15px);
        }
        40% {
            transform: translate(0);
        }
    }
}