.spring2018{position: fixed;z-index:99999;background: #f13843;}
.spring-silk{left:0;top:0;}
.top-light{width: 91.82%;left:4.09%;top:0;}
.spring-bottom{left: 0;bottom: 0;}
.left-tree{width:27.55%;left:0;top:0;-webkit-animation: treeLeft 1s cubic-bezier(0, 0, 0.2, 1) both;animation: treeLeft 1s cubic-bezier(0, 0, 0.2, 1) both;}
.right-tree{width:27.13%;right:0;top:0;-webkit-animation: treeRight 1s cubic-bezier(0, 0, 0.2, 1) both;animation: treeRight 1s cubic-bezier(0, 0, 0.2, 1) both;}
.spring-left-img{width:13.85%;bottom:13.89%;left:3.65%;-webkit-animation: fadeIn 1s ease-out .3s both;animation: fadeIn 1s ease-out .3s both;}
.spring-right-img{width: 16.51%;bottom:16.20%;right:3.125%;-webkit-animation: fadeIn 1s ease-out .5s both;animation: fadeIn 1s ease-out .5s both;}
.spring-middle{width:69.79%;top:11.8%;left:0;right:0;margin:0 auto;-webkit-animation: tinUpIn 1s both;animation: tinUpIn 1s both;}
.middle2018{width:54.328%;top:11%;left:23.5%;-webkit-animation: light 3s ease-out both infinite;animation: light 3s ease-out both infinite;}
.spring-lights >img{-webkit-animation: light 3s linear both infinite;animation: light 3s linear both infinite;}
.spring-lights >img.spring-left-light1{width: 6.145%;left:15%;top:26%;-webkit-animation-delay: 1s;animation-delay: 1s;}
.spring-lights >img.spring-left-light2{width:17.5%;left:2%;top:29%;-webkit-animation-delay: 2.5s;animation-delay: 2.5s;}
.spring-lights >img.spring-right-light1{width:9.69%;right:11.8%;top:25%;-webkit-animation-delay: 3.3s;animation-delay: 3.3s;}
.spring-lights >img.spring-right-light2{width:18.23%;right:0;top:29%;-webkit-animation-delay: 1.3s;animation-delay: 1.3s;}

.spring-fireworks img{width: 11.25%;position: absolute;top:5%; -webkit-animation: fireworks 2s ease-out both infinite;animation: fireworks 2s ease-out both infinite;}
.spring-fireworks img:nth-child(1){right: 20%;-webkit-animation-delay: .3s;animation-delay: .3s;}
.spring-fireworks img:nth-child(2){top:-10%;left: 40%;-webkit-animation-delay: .8s;animation-delay: .8s;}
.spring-fireworks img:nth-child(3){top:auto;bottom:13%;right:30%;-webkit-animation-delay: 1.5s;animation-delay: 1.5s;}
.spring-fireworks img:nth-child(4){top:15%;left: 20%;-webkit-animation-delay: 1.8s;animation-delay: 1.8s;}

.spring2018.out{-webkit-animation: puffOut 1s linear both;animation: puffOut 1s linear both;}
@media screen and (max-width: 1024px){
    .spring2018{display: none;}
}

@-webkit-keyframes fireworks {
    from{
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    20%{
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: 1;
    }
    70%,to{
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0;
    }
 }
@keyframes fireworks {
    from{
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    20%{
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: 1;
    }
    70%,to{
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0;
    }
}
@-webkit-keyframes light {
    from,16%,30%{opacity: 0;}
    8%,24%,36%,100%{opacity: 1;}
 }
@keyframes light {
    from,16%,30%{opacity: 0;}
    8%,24%,36%,100%{opacity: 1;}
}
@-webkit-keyframes treeLeft {
    from{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
 }
@keyframes treeLeft {
    from{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@-webkit-keyframes treeRight {
    from{
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
 }
@keyframes treeRight {
    from{
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
@-webkit-keyframes fadeIn {
    from{
        opacity: 0;
    }
 }
@keyframes fadeIn {
    from{
        opacity: 0;
    }
}
@-webkit-keyframes middle-scaleIn {
    from{
        -webkit-transform: scale(.5);
        transform: scale(.5);
        opacity: 0;
    }
 }
@keyframes middle-scaleIn {
    from{
        -webkit-transform: scale(.5);
        transform: scale(.5);
        opacity: 0;
    }
}

@keyframes tinUpIn {
    0% {
        opacity: 0;
        transform: scale(1, 1) translateY(-900%);
    }

    50%, 70%, 90% {
        opacity: 1;
        transform: scale(1.1, 1.1) translateY(0);
    }

    60%, 80%, 100% {
        opacity: 1;
        transform: scale(1, 1) translateY(0);
    }
}
@keyframes puffOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1);
        filter: blur(0px);
    }

    100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2,2);
        filter: blur(2px);
    }
}