/* main container */

.season_container {
    top: 0px;
    background: #fff;
    width: 100%;
    height: 0px;
    position: absolute;
    left: 0%;
    background: transparent;
    background-size: cover;
    z-index: 1;
}

.fallingSeason {
    text-align: center;
    height: 0px;
}

.fallingSeason span {
    display: inline-block;
    width: 20px;
    height: 21px;
    margin: -280px 60px 54px -34px;
    /*background: url("./images/snowflake.png");
    background-repeat: no-repeat;*/
    opacity: 0;
    -webkit-animation: fallingSnow 10s infinite cubic-bezier(0.35, 0.45, 0.39, 0.29);
    -moz-animation: fallingSnow 10s infinite cubic-bezier(0.35, 0.45, 0.39, 0.29);
}

.fallingSeason span:nth-child(5n+5) {
    background-size: 50% 50%;
    -webkit-animation: fallingSnow 10s infinite 1.3s cubic-bezier(0.5, 0.5, 0.5, 0.5);
    -moz-animation: fallingSnow 10s infinite 1.3s cubic-bezier(0.5, 0.5, 0.5, 0.5);
}

.fallingSeason span:nth-child(3n+2) {
    background-size: 80% 80%;
    -webkit-animation: fallingSnow 13s infinite 1.5s cubic-bezier(0.35, 0.45, 0.39, 0.29);
    -moz-animation: fallingSnow 13s infinite 1.5s cubic-bezier(0.35, 0.45, 0.39, 0.29);
}

.fallingSeason span:nth-child(2n+5) {
    background-size: 40% 40%;
    -webkit-animation: fallingSnow 12s infinite 1.7s cubic-bezier(0.35, 0.45, 0.39, 0.29);
    -moz-animation: fallingSnow 12s infinite 1.7s cubic-bezier(0.35, 0.45, 0.39, 0.29);
}

.fallingSeason span:nth-child(3n+10) {
    background-size: 30% 30%;
    -webkit-animation: fallingSnow 15s infinite 2.7s cubic-bezier(0.35, 0.45, 0.39, 0.29);
    -moz-animation: fallingSnow 15s infinite 2.7s cubic-bezier(0.35, 0.45, 0.39, 0.29);
}

.fallingSeason span:nth-child(7n+2) {
    background-size: 60% 60%;
    -webkit-animation: fallingSnow 12s infinite 3.5s cubic-bezier(0.35, 0.45, 0.39, 0.29);
    -moz-animation: fallingSnow 12s infinite 3.5s cubic-bezier(0.35, 0.45, 0.39, 0.29);
}

.fallingSeason span:nth-child(4n+5) {
    background-size: 10% 10%;
    -webkit-animation: fallingSnow 20s infinite 5.5s cubic-bezier(0.35, 0.45, 0.39, 0.29);
    -moz-animation: fallingSnow 20s infinite 5.5s cubic-bezier(0.35, 0.45, 0.39, 0.29);
}

.fallingSeason span:nth-child(3n+7) {
    background-size: 70% 70%;
    -webkit-animation: fallingSnow 12s infinite 8s cubic-bezier(0.35, 0.45, 0.39, 0.29);
    -moz-animation: fallingSnow 12s infinite 8s cubic-bezier(0.35, 0.45, 0.39, 0.29);
}

@-webkit-keyframes fallingSnow {
    0% {
        opacity: 1;
        -webkit-transform: translate(0, 0px) rotateZ(0deg);
    }
    75% {
        opacity: 1;
        -webkit-transform: translate(100px, 600px) rotateZ(270deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(150px, 800px) rotateZ(360deg);
    }
}

@-moz-keyframes fallingSnow {
    0% {
        opacity: 1;
        -webkit-transform: translate(0, 0px) rotateZ(0deg);
    }
    75% {
        opacity: 1;
        -webkit-transform: translate(100px, 600px) rotateZ(270deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(150px, 800px) rotateZ(360deg);
    }
}