.inner {
    position: relative;
    width: 600px;
    height: 240px;
    margin: auto;
}

.inner svg {
    position: relative;
    z-index: 1;
}

.inner .greeting {
    width: 600px;
    margin: auto;
}

.inner .greeting svg.newyear1 {
    width: 100%;
    height: 140px;
    top: 65px;
}

.inner .greeting svg.newyear1 .anim1 {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 10px;
    stroke-dasharray: 2824.1877441406;
    stroke-dashoffset: 2824.1877441406;
    -webkit-animation: draw 2.7s linear 0.5s forwards;
    animation: draw 2.7s linear 0.5s forwards;
}

.inner .greeting svg.shine {
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    margin: auto;
    width: 100px;
}

.inner .greeting svg.shine .shineAnim {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 10px;
    stroke-dasharray: 441.9982910156;
    stroke-dashoffset: 441.9982910156;
    -webkit-animation: draw 0.5s linear 3.6s forwards;
    animation: draw 0.5s linear 3.6s forwards;
}

@-webkit-keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

.inner .circles .circle-l {
    height: 30px;
    width: 30px;
}

.inner .circles .circle-s {
    height: 12px;
    width: 12px;
}

.inner .circles .circle-l,
.inner .circles .circle-s {
    background-color: #efc940;
    border-radius: 50%;
    position: absolute;
    -webkit-animation: scale 0.5s forwards ease-out;
    animation: scale 0.5s forwards ease-out;
    -webkit-animation-iteration-count: 3;
    animation-iteration-count: 3;
    opacity: 0;
}

.inner .circles .circle-l:nth-of-type(1),
.inner .circles .circle-s:nth-of-type(1) {
    left: 9%;
    top: 2%;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}

.inner .circles .circle-l:nth-of-type(2),
.inner .circles .circle-s:nth-of-type(2) {
    right: 10%;
    top: 10%;
    -webkit-animation-delay: 6.2s;
    animation-delay: 6.2s;
}

.inner .circles .circle-l:nth-of-type(3),
.inner .circles .circle-s:nth-of-type(3) {
    left: 1%;
    top: 80%;
    -webkit-animation-delay: 6.4s;
    animation-delay: 6.4s;
}

.inner .circles .circle-l:nth-of-type(4),
.inner .circles .circle-s:nth-of-type(4) {
    right: 30%;
    top: 95%;
    -webkit-animation-delay: 6.7s;
    animation-delay: 6.7s;
}

.inner .circles .circle-l:nth-of-type(5),
.inner .circles .circle-s:nth-of-type(5) {
    right: 35%;
    top: 22%;
    -webkit-animation-delay: 6.8s;
    animation-delay: 6.8s;
}

.inner .circles .circle-l:nth-of-type(6),
.inner .circles .circle-s:nth-of-type(6) {
    left: 16%;
    top: 55%;
    -webkit-animation-delay: 7.1s;
    animation-delay: 7.1s;
}

.inner .circles .circle-l:nth-of-type(7),
.inner .circles .circle-s:nth-of-type(7) {
    left: 27%;
    top: 16%;
    -webkit-animation-delay: 6.7s;
    animation-delay: 6.7s;
}

.inner .circles .circle-l:nth-of-type(8),
.inner .circles .circle-s:nth-of-type(8) {
    right: 5%;
    bottom: 24%;
    -webkit-animation-delay: 6.5s;
    animation-delay: 6.5s;
}

.inner .circles .circle-l:nth-of-type(9),
.inner .circles .circle-s:nth-of-type(9) {
    left: 25%;
    bottom: 2%;
    -webkit-animation-delay: 6.3s;
    animation-delay: 6.3s;
}

@-webkit-keyframes scale {
    0% {
        opacity: 0;
        transform: scale3d(0, 0, 0);
    }

    100% {
        opacity: 1;
    }
}

@keyframes scale {
    0% {
        opacity: 0;
        transform: scale3d(0, 0, 0);
    }

    100% {
        opacity: 1;
    }
}


.snowanimation {
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    background-repeat: repeat;
    z-index: 100000;
    pointer-events: none;
    -moz-animation: snow_animation 15s linear infinite;
    -webkit-animation: snow_animation 15s linear infinite;
    animation: snow_animation 15s linear infinite;
}

@-moz-keyframes snow_animation {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 500px 3000px, 0 400px, 0 300px;
    }
}

@-webkit-keyframes snow_animation {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 500px 3000px, 0 400px, 0 300px;
    }
}

@keyframes snow_animation {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 500px 3000px, 0 400px, 0 300px;
    }
}


.newyear {
    position: absolute;
    top: 45px;
    left: 76px;
    z-index: -1;
    max-height: 138px;
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
}

@keyframes swing {
    0% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(-5deg);
    }
}

@media(max-width:767px) {
    .newyear {
        top: 30px;
        left: 10px;
    }

    .inner,
    .inner .greeting {
        width: 300px;
        height: 200px;
    }

    .inner .greeting svg.shine {
        top: 70px;
        width: 65px;
    }
}

img.cap.img-fluid {
    width: 45px;
    content: "";
    position: absolute;
    left: -10px;
    right: 0;
    top: -6px;
}