/*
 * Scroll Mouse
 * Code HTML: <div id="mouse-scroll-container"><div class="hdfade"><a class="mouse-scroll" href="#main"><span class="mouse"><span class="mouse-movement"></span></span></a></div></div>
 */
#mouse-scroll-container .overlay {
    position : relative;
}

#mouse-scroll-container {
    top: 80vh;
    position: absolute;
    display: block;
    left: 50%;
}

#mouse-scroll-container .hdfade {
    transform  : translateY(0);
    text-align : center;
    transition : all .2s linear;

}

#mouse-scroll-container .hdfade, #mouse-scroll-container .hdfade-100 {
    opacity : 1;
}

#mouse-scroll-container .mouse-scroll {
    margin-top     : 0;
    line-height    : 18px;
    font-size      : 13px;
    font-weight    : 400;
    color          : #1b1b1b;
    letter-spacing : 2px;
    overflow       : hidden;
    transition     : opacity ease-in-out 1s;
}

#mouse-scroll-container .mouse-scroll .mouse {
    position      : relative;
    display       : block;
    width         : 25px;
    height        : 40px;
    margin        : 0 auto 20px;
    box-sizing    : border-box;
    border        : 1px solid #1b1b1b;
    border-radius : 23px;
}

#mouse-scroll-container .mouse-scroll .mouse .mouse-movement {
    position      : absolute;
    display       : block;
    top           : 29%;
    left          : 50%;
    width         : 8px;
    height        : 8px;
    margin        : -4px 0 0 -4px;
    background    : #1b1b1b;
    border-radius : 50%;
    animation     : scroll-ani 2s linear infinite;
}

@keyframes scroll-ani {
    0% {opacity : 0;filter : alpha(opacity=0);top : 20%}
    50% {opacity : 1;filter : alpha(opacity=100);top : 50%}
    100% {opacity : 0;filter : alpha(opacity=0);top : 80%}
}