#santa,
#snowflakes {
    pointer-events: none
}

#snowflakes i,
.christmas-frame {
    position: relative;
    display: inline-block
}

#christmas-music,
#santa {
    position: fixed;
    z-index: 5
}

@keyframes sway {
    25% {
        transform: translateX(-50px) rotate(90deg)
    }

    50% {
        transform: translateX(0) rotate(180deg)
    }

    75% {
        transform: translateX(50px) rotate(270deg)
    }

    100% {
        transform: translateX(0) rotate(360deg)
    }
}

@keyframes fall {
    0% {
        top: -10vh
    }

    100% {
        top: 105vh
    }
}

@keyframes sleigh {
    0% {
        opacity: 0;
        transform: translate(0, 0)
    }

    12.5% {
        opacity: 1;
        transform: translate(-25vw, -50px)
    }

    25% {
        opacity: 1;
        transform: translate(-50vw, 0)
    }

    37.5% {
        opacity: 1;
        transform: translate(-75vw, -50px)
    }

    100%,
    50% {
        transform: translate(-102vw, 0);
        opacity: 0
    }
}

#snowflakes {
    position: fixed;
    top: -30px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    width: 100%;
    text-align: left;
    z-index: 99999999;
}

#snowflakes i {
    height: 16px;
    width: 16px;
    top: -10vh;
    border-radius: 50%;
    animation: 3s linear 2s infinite fall, 3s linear 2s infinite sway;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, #f00 40%, #f00 60%, rgba(255, 255, 255, 0) 60%), linear-gradient(90deg, rgba(255, 255, 255, 0) 40%, #f00 40%, #f00 60%, rgba(255, 255, 255, 0) 60%), linear-gradient(45deg, rgba(255, 255, 255, 0) 43%, #fff 43%, #fff 57%, rgba(255, 255, 255, 0) 57%), linear-gradient(135deg, rgba(255, 255, 255, 0) 43%, #fff 43%, #fff 57%, rgba(255, 255, 255, 0) 57%);
}

.snow-alternate #snowflakes i {
    background: #fff;
    box-shadow: 0 0 3px #fff;
    height: 8px;
    width: 8px
}

#snowflakes i:nth-of-type(5n) {
    left: 25%;
    animation-timing-function: ease-in-out, ease-in-out
}

#snowflakes i:nth-of-type(5n+1) {
    left: 50%;
    animation-timing-function: ease-out, ease-in-out
}

#snowflakes i:nth-of-type(5n+2) {
    left: 75%;
    animation-timing-function: ease, ease-in-out
}

#snowflakes i:nth-of-type(5n+3) {
    left: 0;
    animation-timing-function: ease-in, ease-in-out
}

#snowflakes i:nth-of-type(5n+4) {
    left: 100%;
    animation-timing-function: linear, ease-in-out
}

#snowflakes i:nth-of-type(3n) {
    height: 30px;
    width: 30px;
    transform-origin: right -30px
}

.snow-alternate #snowflakes i:nth-of-type(3n) {
    width: 12px;
    height: 12px;
    opacity: .9
}

#snowflakes i:nth-of-type(3n+1) {
    height: 24px;
    width: 24px;
    transform-origin: left -30px
}

.snow-alternate #snowflakes i:nth-of-type(3n+1) {
    width: 8px;
    height: 8px;
    opacity: .8
}

#snowflakes i:nth-of-type(3n+2) {
    height: 10px;
    width: 10px;
    transform-origin: -30px 0
}

.snow-alternate #snowflakes i:nth-of-type(3n+2) {
    width: 4px;
    height: 4px;
    opacity: .6
}

#snowflakes i:nth-of-type(4n) {
    animation-duration: 6s, 5s;
    transform-origin: left -20px
}

#snowflakes i:nth-of-type(4n+1) {
    animation-duration: 5s, 4s;
    transform-origin: 10px -20px
}

#snowflakes i:nth-of-type(4n+2) {
    animation-duration: 3s, 2s;
    transform-origin: right -20px
}

#snowflakes i:nth-of-type(4n+3) {
    animation-duration: 4s, 4s;
    transform-origin: right -20px
}

.slow-snow #snowflakes i:nth-of-type(4n+0) {
    animation-duration: 9s, 6s
}

.slow-snow #snowflakes i:nth-of-type(4n+1) {
    animation-duration: 11s, 5s
}

.slow-snow #snowflakes i:nth-of-type(4n+2) {
    animation-duration: 13s, 4s
}

.slow-snow #snowflakes i:nth-of-type(4n+3) {
    animation-duration: 15s, 9s
}

.fast-snow #snowflakes i:nth-of-type(4n+0) {
    animation-duration: 2s, 1s
}

.fast-snow #snowflakes i:nth-of-type(4n+1) {
    animation-duration: 3s, 2.5s
}

.fast-snow #snowflakes i:nth-of-type(4n+2) {
    animation-duration: 2.5s, 2s
}

.fast-snow #snowflakes i:nth-of-type(4n+3) {
    animation-duration: 1.5s, .5s
}

#snowflakes i:nth-of-type(7n) {
    animation-delay: 1.3s, .5s
}

#snowflakes i:nth-of-type(7n+1) {
    animation-delay: .5s, .3s
}

#snowflakes i:nth-of-type(7n+2) {
    animation-delay: 1.9s, 1s
}

#snowflakes i:nth-of-type(7n+3) {
    animation-delay: 1s, .5s
}

#snowflakes i:nth-of-type(7n+4) {
    animation-delay: 1.8s, .8s
}

#snowflakes i:nth-of-type(7n+5) {
    animation-delay: 1.1s, .3s
}

#snowflakes i:nth-of-type(7n+6) {
    animation-delay: 1.9s, .1s
}

#snowflakes i:nth-of-type(11n) {
    animation-timing-function: cubic-bezier(0.2, 0.3, 0.8, 0.9), ease-in-out
}

#santa {
    animation: 24s linear 5s infinite sleigh;
    transform-origin: 100% 50%;
    transform: translate(0);
    background-size: contain;
    left: 100%;
    bottom: 0%
}

#santa.sleigh-1 {
    background-image: url("https://asterbilling.in/web/img/santa-sleigh-1.gif");
    width: 175px;
    height: 60px
}

@media (min-width:980px) {
    #santa.sleigh-1 {
        width: 350px;
        height: 120px
    }
}

#santa.sleigh-2 {
    background: url("https://asterbilling.in/web/img/santa-sleigh-2.gif");
    width: 134px;
    height: 58px
}

.christmas-frame:after {
    position: absolute;
    content: "";
    display: block;
    top: -9%;
    left: -6%;
    width: 33%;
    height: 33%;
    background-image: url("https://asterbilling.in/web/img/xmas-frame.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left
}

#christmas-music {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%
}