#rolagem {
    position: absolute;
    left: 50%;
    bottom: 120px;
    transform: translateX(-50%);
    width: 200px;
    text-align: center;
    z-index: 2;
}


.mouse-wrap {
    display: inline-block;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#rolagem h6 {
    letter-spacing: 2px;
    font-size: 14px;
    color: #ffffff;
    animation: nudgeText 5.5s ease-out infinite;
    position: relative;
    left: 50%;
    top: 90px;
    transform: translateX(-50%) translateY(0);
    margin-left: 0;
}

.mouse {
    top: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    animation: nudgeMouse 5.5s ease-out infinite;
}

.mouse:after {
    content: '';
    background-color: #ffffff;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    animation: trackBallSlide 5.5s linear infinite;
    position: absolute;
    top: 0;
    right: 0;
    bottom: -50%;
    left: 0;
    margin: auto;
    transform: translateY(20px);
}

.mouse .frame {
    width: 100%;
    position: absolute;
    z-index: 1;
}

.mouse .frame path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    opacity: 0.5;
}

.mouse .mouse-left,
.mouse .mouse-right {
    width: 50%;
    position: absolute;
    z-index: 2;
}

.mouse .mouse-right {
    right: 0;
}

.mouse .Animate-Draw {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    fill-opacity: 1;
}

.mouse .mouse-left .Animate-Draw {
    animation: DrawLine 5.5s ease-out infinite;
}

.mouse .mouse-right .Animate-Draw {
    animation: DrawLineBack 5.5s ease-out infinite;
}


/*Keyframes*/

@keyframes DrawLine {
    0% {
        stroke-dashOffset: 0;
        stroke-dasharray: 120;
        stroke-opacity: 1;
    }

    22% {
        stroke-dashOffset: 0;
        stroke-dasharray: 120;
        stroke-opacity: 1;
    }

    38% {
        stroke-dashOffset: 125;
        stroke-dasharray: 120;
        stroke-opacity: 1;
    }

    38.1% {
        stroke-dashOffset: 0;
        stroke-dasharray: 120;
        stroke-opacity: 0;
    }

    48% {
        stroke-dashOffset: 0;
        stroke-dasharray: 120;
        stroke-opacity: 1;
    }

    64% {
        stroke-dashOffset: 125;
        stroke-dasharray: 120;
        stroke-opacity: 1;
    }

    64.1% {
        stroke-dashOffset: 0;
        stroke-dasharray: 120;
        stroke-opacity: 0;
    }

    74% {
        stroke-dashOffset: 0;
        stroke-dasharray: 120;
        stroke-opacity: 1;
    }

    90% {
        stroke-opacity: 1;
        stroke-dashOffset: 125;
        stroke-dasharray: 120;
    }

    90.1% {
        stroke-dashOffset: 0;
        stroke-dasharray: 120;
        stroke-opacity: 0;
    }
}

@keyframes DrawLineBack {
    0% {
        stroke-dashOffset: 0;
        stroke-dasharray: 120;
        stroke-opacity: 1;
    }

    22% {
        stroke-dashOffset: 0;
        stroke-dasharray: 120;
        stroke-opacity: 1;
    }

    38% {
        stroke-dashOffset: -114;
        stroke-dasharray: 120;
        stroke-opacity: 1;
    }

    38.1% {
        stroke-dashOffset: 0;
        stroke-dasharray: 120;
        stroke-opacity: 0;
    }

    48% {
        stroke-dashOffset: 0;
        stroke-dasharray: 120;
        stroke-opacity: 1;
    }

    64% {
        stroke-dashOffset: -114;
        stroke-dasharray: 120;
        stroke-opacity: 1;
    }

    64.1% {
        stroke-dashOffset: 0;
        stroke-dasharray: 120;
        stroke-opacity: 0;
    }

    74% {
        stroke-dashOffset: 0;
        stroke-dasharray: 120;
        stroke-opacity: 1;
    }

    90% {
        stroke-opacity: 1;
        stroke-dashOffset: -114;
        stroke-dasharray: 120;
    }

    90.1% {
        stroke-dashOffset: 0;
        stroke-dasharray: 120;
        stroke-opacity: 0;
    }
}

@keyframes nudgeMouse {
    0% {
        transform: translateY(0) translateX(-50%);
    }

    22% {
        transform: translateY(0px) translateX(-50%);
    }

    38% {
        transform: translateY(9px) translateX(-50%);
    }

    48% {
        transform: translateY(0px) translateX(-50%);
    }

    64% {
        transform: translateY(9px) translateX(-50%);
    }

    74% {
        transform: translateY(0px) translateX(-50%);
    }

    90% {
        transform: translateY(9px) translateX(-50%);
    }
}

/*Text*/

@keyframes nudgeText {
    0% {
        transform: translateY(0) translateX(-50%) scaleY(1);
        opacity: 1;
    }

    22% {
        transform: translateY(0px) translateX(-50%) scaleY(1);
        opacity: 1;
    }

    38% {
        transform: translateY(5px) translateX(-50%) scaleY(0.9);
        opacity: 0.5;
    }

    48% {
        transform: translateY(0px) translateX(-50%) scaleY(1);
        opacity: 1;
    }

    64% {
        transform: translateY(5px) translateX(-50%) scaleY(0.9);
        opacity: 0.5;
    }

    74% {
        transform: translateY(0px) translateX(-50%) scaleY(1);
        opacity: 1;
    }

    90% {
        transform: translateY(5px) translateX(-50%) scaleY(0.9);
        opacity: 0.5;
    }
}

/*Mouse wheel*/
@keyframes trackBallSlide {
    0% {
        transform: translateY(20px) scale(1);
        opacity: 1;
    }

    22% {
        transform: translateY(20px) scale(1);
        opacity: 1;
    }

    26% {
        transform: translateY(30px) scale(0.9);
        opacity: 1;
    }

    34% {
        transform: translateY(55px) scale(0.1);
        opacity: 0;
    }

    41% {
        transform: translateY(30px) scale(0);
        opacity: 0.3;
    }

    48% {
        transform: translateY(20px) scale(1);
        opacity: 1;
    }

    52% {
        transform: translateY(30px) scale(0.9);
        opacity: 1;
    }

    60% {
        transform: translateY(55px) scale(0.1);
        opacity: 0;
    }

    67% {
        transform: translateY(30px) scale(0);
        opacity: 0.3;
    }

    74% {
        transform: translateY(20px) scale(1);
        opacity: 1;
    }

    78% {
        transform: translateY(30px) scale(0.9);
        opacity: 1;
    }

    86% {
        transform: translateY(55px) scale(0.1);
        opacity: 0;
    }

    93% {
        transform: translateY(30px) scale(0);
        opacity: 0.3;
    }

    100% {
        transform: translateY(20px) scale(1);
        opacity: 1;
    }
}