.santa-path {
    position: absolute;
    bottom: 30px;
    margin-top: -85px;
    left: auto;
    animation: path-animation 33s infinite;
    -webkit-animation: path-animation 33s infinite;
    z-index: 42;
}

.santa {
    width: 85px;
    height: 85px;
    background: url('../assets/santa.png');
    animation: santa-animation .8s steps(10) infinite;
    -webkit-animation: santa-animation .8s steps(12) infinite;
}

.santa-path-reverse {
    position: absolute;
    bottom: 30px;
    margin-top: -85px;
    left: auto;
    animation: path-animation-reverse 38s infinite;
    -webkit-animation: path-animation-reverse 38s infinite;
    z-index: 51;
}

.santa-reverse {
    width: 85px;
    height: 85px;
    background: url('../assets/santa-reverse.png');
    animation: santa-animation-reverse .9s steps(10) infinite;
    -webkit-animation: santa-animation-reverse .9s steps(12) infinite;
}

.deer-path {
    position: absolute;
    bottom: 30px;
    margin-top: -85px;
    left: auto;
    animation: path-animation 40s infinite;
    -webkit-animation: path-animation 40s infinite;
    z-index: 51;
}

.deer {
    width: 279px;
    height: 456px;
    background: url('../assets/deer-sprite-reverse.png');
    animation: deer-path-animation .8s steps(5) infinite;
    -webkit-animation: deer-animation .8s steps(7) infinite;
}

/*Deer to the right*/
@keyframes deer-animation {
    0% {
        background-position: 0px 0;
    }

    100% {
        background-position: -1956px 0;
    }
}

@keyframes deer-path-animation {
    0% {
        left: -5%;
        bottom: 90px;
    }

    5% {
        bottom: 100px;
    }

    50% {
        bottom: 20px;
    }

    60% {
        bottom: 0px;
    }

    70% {
        bottom: -20px;
    }

    80% {
        bottom: -40px;
    }

    90% {
        bottom: -80px;
    }

    100% {
        left: 120%;
        bottom: -125px;
    }
}

/*Santa to the right--------------------------------------------------------------------------*/
@keyframes santa-animation {
    0% {
        background-position: 0px 0;
    }

    100% {
        background-position: -1024px 0;
    }
}

@keyframes path-animation {
    0% {
        left: -5%;
        bottom: 90px;
    }

    5% {
        bottom: 100px;
    }

    50% {
        bottom: 0px;
    }

    60% {
        bottom: -40px;
    }

    70% {
        bottom: -60px;
    }

    80% {
        bottom: -80px;
    }

    90% {
        bottom: -100px;
    }

    100% {
        left: 120%;
        bottom: -125px;
    }
}

@-moz-keyframes santa-animation {
    0% {
        background-position: 0px 0;
    }

    100% {
        background-position: -1024px 0;
    }
}

@-moz-keyframes path-animation {
    0% {
        left: -5%;
        bottom: 90px;
    }

    5% {
        bottom: 100px;
    }

    50% {
        bottom: 0px;
    }

    60% {
        bottom: -40px;
    }

    70% {
        bottom: -60px;
    }

    80% {
        bottom: -80px;
    }

    90% {
        bottom: -100px;
    }

    100% {
        left: 120%;
        bottom: -125px;
    }
}

@-webkit-keyframes santa-animation {
    0% {
        background-position: 0px 0;
    }

    100% {
        background-position: -1024px 0;
    }
}

@-webkit-keyframes path-animation {
    0% {
        left: -5%;
        bottom: 90px;
    }

    5% {
        bottom: 100px;
    }

    50% {
        bottom: 0px;
    }

    60% {
        bottom: -40px;
    }

    70% {
        bottom: -60px;
    }

    80% {
        bottom: -80px;
    }

    90% {
        bottom: -100px;
    }

    100% {
        left: 120%;
        bottom: -125px;
    }
}

@-ms-keyframes santa-animation {
    0% {
        background-position: 0px 0;
    }

    100% {
        background-position: -1024px 0;
    }
}

@-ms-keyframes path-animation {
    0% {
        left: -5%;
        bottom: 90px;
    }

    5% {
        bottom: 100px;
    }

    50% {
        bottom: 0px;
    }

    60% {
        bottom: -40px;
    }

    70% {
        bottom: -60px;
    }

    80% {
        bottom: -80px;
    }

    90% {
        bottom: -100px;
    }

    100% {
        left: 120%;
        bottom: -125px;
    }
}

/*Santa to the left-----------------------------------------------------*/

@keyframes santa-animation-reverse {
    0% {
        background-position: -1024px 0;
    }

    100% {
        background-position: 0px 0;
    }
}

@keyframes path-animation-reverse {
    0% {
        right: -5%;
        bottom: 70px;
    }

    5% {
        bottom: 80px;
    }

    50% {
        bottom: 10px;
    }

    60% {
        bottom: 10px;
    }

    70% {
        bottom: 10px;
    }

    80% {
        bottom: 80px;
    }

    90% {
        bottom: 120px;
    }

    100% {
        right: 120%;
        bottom: 125px;
    }
}

@-moz-keyframes santa-animation-reverse {
    0% {
        background-position: -1024px 0;
    }

    100% {
        background-position: 0px 0;
    }
}

@-moz-keyframes path-animation-reverse {
    0% {
        right: -5%;
        bottom: 70px;
    }

    5% {
        bottom: 80px;
    }

    50% {
        bottom: 10px;
    }

    60% {
        bottom: 10px;
    }

    70% {
        bottom: 10px;
    }

    80% {
        bottom: 80px;
    }

    90% {
        bottom: 120px;
    }

    100% {
        right: 120%;
        bottom: 125px;
    }
}

@-webkit-keyframes santa-animation-reverse {
    0% {
        background-position: -1024px 0;
    }

    100% {
        background-position: 0px 0;
    }
}

@-webkit-keyframes path-animation-reverse {
    0% {
        right: -5%;
        bottom: 70px;
    }

    5% {
        bottom: 80px;
    }

    50% {
        bottom: 10px;
    }

    60% {
        bottom: 10px;
    }

    70% {
        bottom: 10px;
    }

    80% {
        bottom: 80px;
    }

    90% {
        bottom: 120px;
    }

    100% {
        right: 120%;
        bottom: 125px;
    }
}

@-ms-keyframes santa-animation-reverse {
    0% {
        background-position: -1024px 0;
    }

    100% {
        background-position: 0px 0;
    }
}

@-ms-keyframes path-animation-reverse {
    0% {
        right: -5%;
        bottom: 70px;
    }

    5% {
        bottom: 80px;
    }

    50% {
        bottom: 10px;
    }

    60% {
        bottom: 10px;
    }

    70% {
        bottom: 10px;
    }

    80% {
        bottom: 80px;
    }

    90% {
        bottom: 120px;
    }

    100% {
        right: 120%;
        bottom: 125px;
    }
}