.base {
            width: auto;
            text-align: center;
            position: absolute;
            top: 0;
            left: 150px;
            padding: 0 0 30px;
        }

        .base1 {
            width: auto;
            text-align: center;
            position: absolute;
            top: 0;
            right: 450px;
            padding: 0 0 30px;
        }

        .base2 {
            width: auto;
            text-align: center;
            position: absolute;
            top: 0;
            right: 250px;
            padding: 0 0 30px;
        }

        .base3 {
            position: absolute;
            bottom: -20px;
            left: 10px;
            z-index: 2;
        }

        .base4 {
            position: absolute;
            bottom: 20px;
            right: 20px;
            z-index: 2;
        }

        .santa-image{
            position:absolute;
            bottom:15%;
            left:30%;
            z-index:2;
        }
        .new-year-image {
            position: absolute;
            bottom: 15%;
            left: 30%;
            z-index: 2;
            animation: bounceIn 4s ease-in-out infinite;
        }
.thread {
    display: inline-block;
    width: 2px;
    height: 200px;
    background: #fff;
    border-radius: 5px;
    position: relative;
    transform-origin: 50% 0;
    animation: moveIt 5s ease-in-out infinite;
}

        .thread1 {
            display: inline-block;
            width: 2px;
            height: 180px;
            background: #fff;
            border-radius: 5px;
            position: relative;
            transform-origin: 50% 0;
            animation: moveIt 5s ease-in-out infinite;
        }

        .thread2 {
            display: inline-block;
            width: 2px;
            height: 350px;
            background: #fff;
            border-radius: 5px;
            position: relative;
            transform-origin: 50% 0;
            animation: moveIt 5s ease-in-out infinite;
        }      

        .pendulum {
            width: 66px;
            height: 75px;
            background: url(./star.png);
            background-repeat: repeat;
            background-size: auto;
            background-repeat: no-repeat;
            position: absolute;
            bottom: -40px;
            left: -34px;
            background-size: 70px;
        }

        .pendulum1 {
            width: 115px;
            height: 115px;
            background: url(./light.png);
            background-repeat: repeat;
            background-size: auto;
            background-repeat: repeat;
            background-size: auto;
            background-repeat: no-repeat;
            position: absolute;
            bottom: -40px;
            left: -49px;
            background-size: 100px;
        }

        .pendulum2 {
            width: 95px;
            height: 125px;
            background: url(./box.png);
            background-repeat: repeat;
            background-size: auto;
            background-repeat: repeat;
            background-size: auto;
            background-repeat: repeat;
            background-size: auto;
            background-repeat: no-repeat;
            position: absolute;
            bottom: -30px;
            left: -48px;
            background-size: 100px;
        }
        .baloon1 {
            width: 95px;
            height: 257px;
            background: url(./baloon1.png);
            background-repeat: repeat;
            background-size: auto;
            background-repeat: repeat;
            background-size: auto;
            background-repeat: repeat;
            background-size: auto;
            background-repeat: no-repeat;
            position: absolute;
            bottom: 0;
            top: auto;
            left: 0;
            background-size: 100px;
            animation: balloons 4s ease-in-out infinite;
            transform-origin: bottom center;
        }

.baloon2 {
    width: 95px;
    height: 257px;
    background: url(./baloon2.png);
    background-repeat: repeat;
    background-size: auto;
    background-repeat: repeat;
    background-size: auto;
    background-repeat: repeat;
    background-size: auto;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    top: auto;
    right: 0;
    background-size: 100px;
    animation: balloons 3s ease-in-out infinite;
    transform-origin: bottom center;
}

        .shadow {
            width: 30px;
            height: 15px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            margin: 50px auto 0;
            animation: moveShade 2.5s ease-in-out alternate infinite;
        }

        @keyframes moveIt {
            0%, 100% {
                transform: rotate(15deg);
            }

            50% {
                transform: rotate(-15deg);
            }
        }

        @keyframes moveShade {
            0% {
                transform: translateX(-100px) scale(1.4, .5);
                filter: blur(20px);
            }

            50% {
                filter: blur(10px);
            }

            100% {
                transform: translateX(100px) scale(1.4, .5);
                filter: blur(20px);
            }
        }

        /* customizable snowflake styling */
        .snowflake {
            color: #fff;
            font-size: 30px;
            text-shadow: 0 0 1px #000;
        }

        @-webkit-keyframes snowflakes-fall {
            0% {
                top: -10%
            }

            100% {
                top: 100%
            }
        }

        @-webkit-keyframes snowflakes-shake {
            0% {
                -webkit-transform: translateX(0px);
                transform: translateX(0px)
            }

            50% {
                -webkit-transform: translateX(80px);
                transform: translateX(80px)
            }

            100% {
                -webkit-transform: translateX(0px);
                transform: translateX(0px)
            }
        }

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

            100% {
                top: 100%
            }
        }

        @keyframes snowflakes-shake {
            0% {
                transform: translateX(0px)
            }

            50% {
                transform: translateX(80px)
            }

            100% {
                transform: translateX(0px)
            }
        }
        @keyframes balloons {
            0%,100% {
                transform: translateY(0) rotate(-4deg);
            }

            50% {
                transform: translateY(-25px) rotate(4deg);
            }
        }
        
        .snowflake {
            position: fixed;
            top: -10%;
            z-index: 9999;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: default;
            -webkit-animation-name: snowflakes-fall,snowflakes-shake;
            -webkit-animation-duration: 10s,3s;
            -webkit-animation-timing-function: linear,ease-in-out;
            -webkit-animation-iteration-count: infinite,infinite;
            -webkit-animation-play-state: running,running;
            animation-name: snowflakes-fall,snowflakes-shake;
            animation-duration: 10s,3s;
            animation-timing-function: linear,ease-in-out;
            animation-iteration-count: infinite,infinite;
            animation-play-state: running,running
        }

            .snowflake:nth-of-type(0) {
                left: 1%;
                -webkit-animation-delay: 0s,0s;
                animation-delay: 0s,0s
            }

            .snowflake:nth-of-type(1) {
                left: 10%;
                -webkit-animation-delay: 1s,1s;
                animation-delay: 1s,1s
            }

            .snowflake:nth-of-type(2) {
                left: 20%;
                -webkit-animation-delay: 6s,.5s;
                animation-delay: 6s,.5s
            }

            .snowflake:nth-of-type(3) {
                left: 30%;
                -webkit-animation-delay: 4s,2s;
                animation-delay: 4s,2s
            }

            .snowflake:nth-of-type(4) {
                left: 40%;
                -webkit-animation-delay: 2s,2s;
                animation-delay: 2s,2s
            }

            .snowflake:nth-of-type(5) {
                left: 50%;
                -webkit-animation-delay: 8s,3s;
                animation-delay: 8s,3s
            }

            .snowflake:nth-of-type(6) {
                left: 60%;
                -webkit-animation-delay: 6s,2s;
                animation-delay: 6s,2s
            }

            .snowflake:nth-of-type(7) {
                left: 70%;
                -webkit-animation-delay: 2.5s,1s;
                animation-delay: 2.5s,1s
            }

            .snowflake:nth-of-type(8) {
                left: 80%;
                -webkit-animation-delay: 1s,0s;
                animation-delay: 1s,0s
            }

            .snowflake:nth-of-type(9) {
                left: 90%;
                -webkit-animation-delay: 3s,1.5s;
                animation-delay: 3s,1.5s
            }
@media (max-width:1366px){
    .santa-image {
        bottom: 5%;
        left:25%;
    }
    .new-year-image {
        bottom: 5%;
        left: 25%;
        bottom: 40px;
    }
	.santa-image .img-fluid {
		width: 75%
	}
}
@media (max-width:1200px) {
    .santa-image{
        bottom:10px;
    }
        .santa-image .img-fluid {
            width: 70%;
        }
    .new-year-image .img-fluid {
        width: 80%;
    }
    .base3 {
        bottom: -15%;
    }
}
@media (max-width:1100px) {
   
    .santa-image .img-fluid {
        width: 65%;
    }
    .new-year-image .img-fluid {
        width: 65%;
    }
    .base3 {
        bottom: 5%;
        left:0;
    }
}
@media (max-width:1024px) {

    .santa-image .img-fluid {
        width: 45%;
    }
    .new-year-image {
        bottom: 10px;
        left: 10%;
    }
        .new-year-image .img-fluid {
            width: 260px;
        }
    .base3 {
        bottom:-10%;
        left:35%;
    }
    .baloon1 {
        bottom: 10px;
        background-size:70px;
    }
    .base4{
        right:0;
        bottom:0;
    }
    .baloon2 {
        background-size: 70px;
    }
}
@media (max-width:991px) {
    .santa-image {
        bottom: 20px;
    }
        .santa-image .img-fluid {
            width: 35%;
        }
    .new-year-image{
        left:25%;
    }
}
@media (max-width: 767px) {
    .santa-image {
        bottom: 10px;
    }
    .santa-image .img-fluid {
        width: 30%;
    }
}
@media (max-width:600px) {
    .santa-image {
        bottom: -15px;
    }
	.santa-image .img-fluid {
		width: 40%;
	}
    .new-year-image{
        left:40%;
	}
    .pendulum2 {
        width: 65px;
        height: 80px;
        background-size: 65px;
        left: -32px;
    }
    .pendulum1 {
        width: 75px;
        height: 75px;
        background-size: 65px;
        left: -32px;
    }
    .pendulum {
        left: -34px;
    }

    .base {
        left: 280px;
    }
    .base2 {
        right: 100px;
    }
    .base1 {
        right: 440px;
    }
    .thread2 {
        height: 260px;
    }
}
@media (max-width:575px) {
    .new-year-image {
        left: 40%;
    }
}
@media (max-width:480px) {
    .santa-image {
        bottom: -5px;
    }
	.santa-image .img-fluid {
		width: 50%;
	}
}
@media (max-width:360px) {
    .baloon1 {
        background-size: 50px;
    }
    .base3 {
        bottom: -13%;
        left: 45%;
    }
    .baloon2 {
        background-size: 60px;
    }
	 .santa-image .img-fluid {
        width: 50%;
    }
    .base {
        left: 240px;
    }
    .base1 {
        right: 350px;
    }
    .base2 {
        right: 100px;
    }
    .thread {
        height: 140px;
    }

}
@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

    0% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@media (max-width:420px) {
    .base {
        left: 180px;
    }
    .thread1 {
        height: 140px;
    }
}
@media (max-width:380px) {
    .base1 {
        right: 270px;
    }
    .base2 {
        right: 50px;
    }
}