.gd-chr {
    position: absolute;
    top: 0px;
    left: 0px;
}

.gd-chr.gd-ani {
    animation-timing-function: steps(1, jump-start);
    animation-iteration-count: infinite;
}

.gd-chr.gd-rbhero {
    width: 84px;
    height: 84px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../../images/rb-character/Full\ Spritesheet350.png);
    z-index: 10;
}

@keyframes gd-keyframe-rbhero-12 {
    0% { background-position-x: 0px; }
    8.33% { background-position-x: -84px; }
    16.66% { background-position-x: -168px; }
    25% { background-position-x: -252px; }
    33.33% { background-position-x: -336px; }
    41.66% { background-position-x: -420px; }
    50% { background-position-x: -504px; }
    58.33% { background-position-x: -588px; }
    66.66% { background-position-x: -672px; }
    75% { background-position-x: -756px; }
    83.33% { background-position-x: -840px; }
    91.66% { background-position-x: -924px; }
    100% { background-position-x: 0px; }
}

@keyframes gd-keyframe-rbhero-5 {
    0% { background-position-x: -0px; }
    20% { background-position-x: -84px; }
    40% { background-position-x: -168px; }
    60% { background-position-x: -252px; }
    80% { background-position-x: -336px; }
    100% { background-position-x: 0px; }
}


@keyframes gd-keyframe-rbhero-3 {
    0% { background-position-x: -0px; }
    20% { background-position-x: -84px; }
    40% { background-position-x: -168px; }
    60% { background-position-x: -252px; }
    80% { background-position-x: -336px; }
    100% { background-position-x: 0px; }
}



@keyframes gd-keyframe-rbhero-4 {
    0% { background-position-x: -0px; }
    20% { background-position-x: -84px; }
    30% { background-position-x: -0px; }
    40% { background-position-x: -84px; }
    50% { background-position-x: -168px; }
    60% { background-position-x: -84px; }
    70% { background-position-x: -168px; }
    80% { background-position-x: -252px; }
    90% { background-position-x: -168px; }
    100% { background-position-x: -252px; }
}


.gd-ani.gd-rbhero.gd-walk {
    animation-duration: 0.7s;
    animation-name: gd-keyframe-rbhero-12;
}

.gd-rbhero.gd-walk.gd-angle-0,
.gd-rbhero.gd-idle.gd-angle-0 {
    background-position-y: -84px;
}

.gd-rbhero.gd-walk.gd-angle-90,
.gd-rbhero.gd-idle.gd-angle-90 {
    background-position-y: -168px;
}

.gd-rbhero.gd-walk.gd-angle-180,
.gd-rbhero.gd-idle.gd-angle-180 {
    background-position-y: 0px;
}

.gd-rbhero.gd-walk.gd-angle-270,
.gd-rbhero.gd-idle.gd-angle-270 {
    background-position-y: -252px;
}


.gd-rbhero.gd-walk.gd-angle-45,
.gd-rbhero.gd-idle.gd-angle-45 {
    background-position-y: -84px;
}

.gd-rbhero.gd-walk.gd-angle-135,
.gd-rbhero.gd-idle.gd-angle-135 {
    background-position-y: -168px;
}

.gd-rbhero.gd-walk.gd-angle-225,
.gd-rbhero.gd-idle.gd-angle-225 {
    background-position-y: -252px;
}

.gd-rbhero.gd-walk.gd-angle-315,
.gd-rbhero.gd-idle.gd-angle-315 {
    background-position-y: -84px;
}




.gd-ani.gd-rbhero.gd-run {
    animation-duration: 0.4s;
    animation-name: gd-keyframe-rbhero-5;
}

.gd-rbhero.gd-run.gd-angle-0 {
    background-position-y: -336px;
}

.gd-rbhero.gd-run.gd-angle-90 {
    background-position-y: -504px;
}

.gd-rbhero.gd-run.gd-angle-180 {
    background-position-y: -420px;
}

.gd-rbhero.gd-run.gd-angle-270 {
    background-position-y: -588px;
}

.gd-rbhero.gd-run.gd-angle-45 {
    background-position-y: -336px;
}

.gd-rbhero.gd-run.gd-angle-135 {
    background-position-y: -504px;
}

.gd-rbhero.gd-run.gd-angle-225 {
    background-position-y: -588px;
}

.gd-rbhero.gd-run.gd-angle-315 {
    background-position-y: -336px;
}










.gd-ani.gd-rbhero.gd-attack {
    animation-duration: 0.4s;
    animation-name: gd-keyframe-rbhero-3;
}

.gd-rbhero.gd-attack.gd-angle-0 {
    background-position-y: -336px;
}

.gd-rbhero.gd-attack.gd-angle-90 {
    background-position-y: -504px;
}

.gd-rbhero.gd-attack.gd-angle-180 {
    background-position-y: -420px;
}

.gd-rbhero.gd-attack.gd-angle-270 {
    background-position-y: -588px;
}















.gd-ani.gd-rbhero.gd-fall {
    animation-duration: 4s;
    animation-name: gd-keyframe-rbhero-4;
}

.gd-rbhero.gd-fall.gd-angle-0 {
    background-position-y: -1176px;
}