/* Container Style */

.ccn_animation_wrapper_1 {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}

.ccn_animation_container_1{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ccn_animation_container_1::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Style Snowballs and Snowflakes */

.ccn_animation_container_1 .snow-ball-container .snow-ball{
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: white;
    filter: drop-shadow(1px 1px 1px #eeeeee)

}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(even){
    position: absolute;
    width: 16px;
    height: 16px;
    background: url('../img/snowflake.png');
    animation: flake-motion 10s linear infinite;
}


/* Position the Snowballs above the screen */

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(1){
    top: -50%;
    left: 5%;
    width: 20px;
    height: 20px;
    animation: snowball-animation 8s linear 2s infinite;
}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(2){
    top: -20%;
    left: 10%;
}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(3){
    top: -50%;
    left: 15%;
    animation: snowball-animation 8s linear infinite;
}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(4){
    top: -10%;
    left: 20%;
}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(5){
    top: -20%;
    left: 25%;
    width: 20px;
    height: 20px;
    animation: snowball-animation 8s linear 2s infinite;
}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(6){
    top: -40%;
    left: 30%;
}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(7){
    top: -30%;
    left: 35%;
    width: 5px;
    height: 5px;
    animation: snowball-animation 8s linear infinite;
}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(8){
    top: -20%;
    left: 40%;
}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(9){
    top: -50%;
    left: 45%;
    width: 5px;
    height: 5px;
    animation: snowball-animation 8s linear 2s infinite;
}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(10){
    top: -5%;
    left: 50%;
}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(11){
    top: -20%;
    left: 60%;
    animation: snowball-animation 8s linear infinite;
}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(12){
    top: -10%;
    left: 70%;
}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(13){
    top: -50%;
    left: 80%;
    width: 5px;
    height: 5px;
    animation: snowball-animation 8s linear 2s infinite;
}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(14){
    top: -20%;
    left: 90%;
}

.ccn_animation_container_1 .snow-ball-container .snow-ball:nth-child(15){
    top: -50%;
    left: 95%;
    width: 30px;
    height: 30px;
    animation: snowball-animation 8s linear infinite;
}


/* Define animations of Snowball and Snowflakes */

@keyframes snowball-animation {
    0%{
        transform: translate(0);
        opacity: 1;
    }


    20%{
        transform: translate(4px, 100px);
        opacity: 0.8;
    }

    40%{
        transform: translate(-7px, 200px);
        opacity: 0.7;
    }

    60%{
        transform: translate(10px, 400px);
        opacity: 0.5;
    }

    80%{
        transform: translate(-14px, 700px);
        opacity: 0.2;
    }

    100%{
        transform: translate(16px, 900px);
        opacity: 0;
    }
}

@keyframes flake-motion {
    0%{
        transform: translate(-2px, 0);
        opacity: 1;
    }

    20%{
        transform: translate(-9px, 200px);
        opacity: 0.9;
    }

    40%{
        transform: translate(14px, 300px);
        opacity: 0.7;
    }

    60%{
        transform: translate(-22px, 400px);
        opacity: 0.6;
    }

    80%{
        transform: translate(30px, 600px);
        opacity: 0.5;
    }

    90%{
        transform: translate(-40px 800px);
        opacity: 0.3;
    }

    100%{
        transform: translate(52px, 1000px);
        opacity: 0;
    }
}