﻿
.ziczacsanta {
    width: 20%;
    z-index: 9999;
    bottom: 0%;
    left: 0%;
    position: fixed;
    -webkit-animation: FlyingSanta 50s linear infinite;
    -moz-animation: FlyingSanta 50s linear infinite;
    -ms-animation: FlyingSanta 50s linear infinite;
    animation: FlyingSanta 50s linear infinite;
}

@keyframes FlyingSanta {
    25% {
        bottom: 80%;
        left: 80%;
        transform: rotateY(0deg);
    }

    26% {
        transform: rotateY(180deg);
    }

    50% {
        bottom: 60%;
        left: 0%;
        transform: rotateY(180deg);
    }

    51% {
        transform: rotateY(0deg);
    }

    75% {
        bottom: 40%;
        left: 80%;
        transform: rotateY(0deg);
    }

    76% {
        bottom: 40%;
        left: 80%;
        transform: rotateY(180deg);
    }

    99% {
        transform: rotateY(180deg);
    }
}

@media only screen and (max-width: 460px) {
    .ziczacsanta {
        width: 40%;
        height: auto;
    }

    @keyframes FlyingSanta {
        25% {
            bottom: 80%;
            left: 60%;
            transform: rotateY(0deg);
        }

        26% {
            transform: rotateY(180deg);
        }

        50% {
            bottom: 60%;
            left: 0%;
            transform: rotateY(180deg);
        }

        51% {
            transform: rotateY(0deg);
        }

        75% {
            bottom: 40%;
            left: 60%;
            transform: rotateY(0deg);
        }

        76% {
            bottom: 40%;
            left: 60%;
            transform: rotateY(180deg);
        }

        99% {
            transform: rotateY(180deg);
        }
    }
}

@media only screen and (min-width: 461px) {
    @keyframes FlyingSanta {
        25% {
            bottom: 80%;
            left: 80%;
            transform: rotateY(0deg);
        }

        26% {
            transform: rotateY(180deg);
        }

        50% {
            bottom: 60%;
            left: 0%;
            transform: rotateY(180deg);
        }

        51% {
            transform: rotateY(0deg);
        }

        75% {
            bottom: 40%;
            left: 80%;
            transform: rotateY(0deg);
        }

        76% {
            bottom: 40%;
            left: 80%;
            transform: rotateY(180deg);
        }

        99% {
            transform: rotateY(180deg);
        }
    }

    @-moz-keyframes FlyingSanta {
        25% {
            bottom: 80%;
            left: 80%;
            transform: rotateY(0deg);
        }

        26% {
            transform: rotateY(180deg);
        }

        50% {
            bottom: 60%;
            left: 0%;
            transform: rotateY(180deg);
        }

        51% {
            transform: rotateY(0deg);
        }

        75% {
            bottom: 40%;
            left: 80%;
            transform: rotateY(0deg);
        }

        76% {
            bottom: 40%;
            left: 80%;
            transform: rotateY(180deg);
        }

        99% {
            transform: rotateY(180deg);
        }
    }

    @-webkit-keyframes FlyingSanta {
        25% {
            bottom: 80%;
            left: 80%;
            transform: rotateY(0deg);
        }

        26% {
            transform: rotateY(180deg);
        }

        50% {
            bottom: 60%;
            left: 0%;
            transform: rotateY(180deg);
        }

        51% {
            transform: rotateY(0deg);
        }

        75% {
            bottom: 40%;
            left: 80%;
            transform: rotateY(0deg);
        }

        76% {
            bottom: 40%;
            left: 80%;
            transform: rotateY(180deg);
        }

        99% {
            transform: rotateY(180deg);
        }
    }

    @-ms-keyframes FlyingSanta {
        25% {
            bottom: 80%;
            left: 80%;
            transform: rotateY(0deg);
        }

        26% {
            transform: rotateY(180deg);
        }

        50% {
            bottom: 60%;
            left: 0%;
            transform: rotateY(180deg);
        }

        51% {
            transform: rotateY(0deg);
        }

        75% {
            bottom: 40%;
            left: 80%;
            transform: rotateY(0deg);
        }

        76% {
            bottom: 40%;
            left: 80%;
            transform: rotateY(180deg);
        }

        99% {
            transform: rotateY(180deg);
        }
    }
}

