html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
}

.bg {
    background: #000 url(images/04.png) no-repeat 0 0;
    background-size: 100%;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

.firework1,
.firework2,
.firework3 {
    width: 350px;
    height: 350px;
    position: absolute;
}

.firework1.pos1 {
    width: 450px;
    height: 450px;
    left: 10%;
    top: 0;
}

.firework1.pos2 {
    width: 250px;
    height: 250px;
    left: 25%;
    top: 20%;
}

.firework1.pos2:before,
.firework1.pos2:after {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}

.firework1.pos3 {
    width: 300px;
    height: 300px;
    right: 10%;
    top: 5%;
}

.firework1.pos3:before,
.firework1.pos3:after {
    -webkit-animation-delay: .3s;
            animation-delay: .3s;
}

.firework1:before {
    content: "";
    background: url(images/firework1.png) no-repeat 0 0;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: fireworkA 3.5s ease infinite both;
            animation: fireworkA 3.5s ease infinite both;
}

.firework1:after {
    content: "";
    background: url(images/firework1-b.png) no-repeat 0 0;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: fireworkA-out 3.5s ease infinite both;
            animation: fireworkA-out 3.5s ease infinite both;
}


/* FIREWORK2 */

.firework2:before {
    content: "";
    background: url(images/firework2.png) no-repeat 0 0;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: fireworkA 3.5s ease infinite both;
            animation: fireworkA 3.5s ease infinite both;
}

.firework2:after {
    content: "";
    background: url(images/firework2-b.png) no-repeat 0 0;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: fireworkA-out 3.5s ease infinite both;
            animation: fireworkA-out 3.5s ease infinite both;
}

.firework2.pos1 {
    width: 350px;
    height: 350px;
    right: 19%;
    top: 10%;
}

.firework2.pos1:before,
.firework2.pos1:after {
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
}


/* FIREWORK3 */

.firework3:before {
    content: "";
    background: url(images/firework3.png) no-repeat 0 0;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: fireworkB 3.5s ease infinite both;
            animation: fireworkB 3.5s ease infinite both;
}

.firework3:after {
    content: "";
    background: url(images/firework3-b.png) no-repeat 0 0;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: fireworkB-out 3.5s ease infinite both;
            animation: fireworkB-out 3.5s ease infinite both;
}

.firework3.pos1 {
    width: 500px;
    height: 500px;
    left: -3%;
    top: -3%;
}

.firework3.pos1:before,
.firework3.pos1:after {
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
}

.firework3.pos2 {
    width: 300px;
    height: 300px;
    right: 3%;
    top: 10%;
}

.firework3.pos2:before,
.firework3.pos2:after {
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
}

@-webkit-keyframes fireworkA {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1);
                transform: scale3d(.1, .1, .1);
    }

    11.5%,
    25% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    50%,
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

@keyframes fireworkA {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1);
                transform: scale3d(.1, .1, .1);
    }

    11.5%,
    25% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    50%,
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes fireworkA-out {
    0%,
    12.5% {
        opacity: 0;
        -webkit-transform: scale3d(.9, .9, .9);
                transform: scale3d(.9, .9, .9);
    }
    45% {
        opacity: .4;
        -webkit-transform: scale3d(1.4, 1.4, 1.4) rotate(8deg);
                transform: scale3d(1.4, 1.4, 1.4) rotate(8deg);
    }
    60%,
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1.5, 1.5, 1.5) rotate(10deg);
                transform: scale3d(1.5, 1.5, 1.5) rotate(10deg);
    }
}

@keyframes fireworkA-out {
    0%,
    12.5% {
        opacity: 0;
        -webkit-transform: scale3d(.9, .9, .9);
                transform: scale3d(.9, .9, .9);
    }
    45% {
        opacity: .4;
        -webkit-transform: scale3d(1.4, 1.4, 1.4) rotate(8deg);
                transform: scale3d(1.4, 1.4, 1.4) rotate(8deg);
    }
    60%,
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1.5, 1.5, 1.5) rotate(10deg);
                transform: scale3d(1.5, 1.5, 1.5) rotate(10deg);
    }
}

@-webkit-keyframes fireworkB {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1);
                transform: scale3d(.1, .1, .1);
    }
    10% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    20% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    25% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    30% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    35% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    60%,
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

@keyframes fireworkB {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1);
                transform: scale3d(.1, .1, .1);
    }
    10% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    20% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    25% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    30% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    35% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    60%,
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes fireworkB-out {
    from {
        opacity: 0;
    }
    10% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    20% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    25% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    50%,
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

@keyframes fireworkB-out {
    from {
        opacity: 0;
    }
    10% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    20% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    25% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    50%,
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}
@media (max-width: 1800px) {
    .firework1.pos1 {
        width: 400px;
        height: 400px;
        left: 10%;
        top: 0;
    }
    .firework1.pos2 {
        width: 200px;
        height: 200px;
        left: 25%;
        top: 20%;
    }
    .firework1.pos3 {
        width: 250px;
        height: 250px;
        right: 10%;
        top: 5%;
    }
    .firework2.pos1 {
        width: 350px;
        height: 350px;
        right: 19%;
        top: 10%;
    }
    .firework3.pos1 {
       width: 450px;
       height: 450px;
       left: -3%;
       top: -3%;
    }
    .firework3.pos2 {
        width: 300px;
        height: 300px;
        right: 3%;
        top: 10%;
    }
}
@media (max-width: 1400px) {
    .firework1.pos1 {
        width: 350px;
        height: 350px;
        left: 10%;
        top: 0;
    }
    .firework1.pos2 {
        width: 150px;
        height: 150px;
        left: 25%;
        top: 20%;
    }
    .firework1.pos3 {
        width: 200px;
        height: 200px;
        right: 10%;
        top: 5%;
    }
    .firework2.pos1 {
        width: 300px;
        height: 300px;
        right: 19%;
        top: 10%;
    }
    .firework3.pos1 {
       width: 400px;
       height: 400px;
       left: -3%;
       top: -3%;
    }
    .firework3.pos2 {
        width: 250px;
        height: 250px;
        right: 3%;
        top: 10%;
    }
}
@media (max-width: 1024px) {
    .firework1.pos1 {
        width: 270px;
        height: 270px;
        left: 10%;
        top: 0;
    }
    .firework1.pos2 {
        width: 100px;
        height: 100px;
        left: 25%;
        top: 20%;
    }
    .firework1.pos3 {
        width: 150px;
        height: 150px;
        right: 10%;
        top: 5%;
    }
    .firework2.pos1 {
        width: 230px;
        height: 230px;
        right: 19%;
        top: 8%;
    }
    .firework3.pos1 {
       width: 350px;
       height: 350px;
       left: -3%;
       top: -3%;
    }
    .firework3.pos2 {
        width: 200px;
        height: 200px;
        right: 3%;
        top: 10%;
    }
}
@media (max-width: 900px) {
    .firework1.pos1 {
        width: 230px;
        height: 230px;
        left: 10%;
        top: 0;
    }
    .firework1.pos2 {
        width: 70px;
        height: 70px;
        left: 25%;
        top: 20%;
    }
    .firework1.pos3 {
        width: 120px;
        height: 120px;
        right: 10%;
        top: 5%;
    }
    .firework2.pos1 {
        width: 200px;
        height: 200px;
        right: 19%;
        top: 8%;
    }
    .firework3.pos1 {
       width: 320px;
       height: 320px;
       left: -3%;
       top: -3%;
    }
    .firework3.pos2 {
        width: 170px;
        height: 170px;
        right: 3%;
        top: 10%;
    }
}
@media (max-width: 768px) {
    .firework1.pos1 {
        width: 180px;
        height: 180px;
        left: 10%;
        top: 0;
    }
    .firework1.pos2 {
        width: 50px;
        height: 50px;
        left: 25%;
        top: 10%;
    }
    .firework1.pos3 {
        width: 70px;
        height: 70px;
        right: 10%;
        top: 5%;
    }
    .firework2.pos1 {
        width: 150px;
        height: 150px;
        right: 19%;
        top: 3%;
    }
    .firework3.pos1 {
       width: 200px;
       height: 200px;
       left: -3%;
       top: -3%;
    }
    .firework3.pos2 {
        width: 120px;
        height: 120px;
        right: 3%;
        top: 10%;
    }
}
@media (max-width: 500px) {
    .firework1.pos1 {
        width: 100px;
        height: 100px;
        left: 10%;
        top: 0;
    }
    .firework1.pos2 {
        width: 30px;
        height: 30px;
        left: 18%;
        top: 10%;
    }
    .firework1.pos3 {
        width: 80px;
        height: 80px;
        right: 10%;
        top: 0%;
    }
    .firework2.pos1 {
        width: 50px;
        height: 50px;
        right: 19%;
        top: 5%;
    }
    .firework3.pos1 {
       width: 120px;
       height: 120px;
       left: -3%;
       top: -3%;
    }
    .firework3.pos2 {
        width: 70px;
        height: 70px;
        right: 3%;
        top: 4%;
    }
}