.diwali-popup { display: block; background-image: url(../images/HappyDiwalii.png); height: 550px; width: 550px; margin: 0px auto; background-repeat: no-repeat; background-size: contain; position: relative;top:50%;margin-top:-275px; }

.diwali-popup span { position: absolute; left: 50%; bottom: -50px; transform: translate(-50%, -50%); font-size: 14px; line-height: 30px; width: 60px; height: 30px; color: #fff; cursor: pointer; z-index: 9999;font-family: var(--bold); }
#diwaliOverlay { position: fixed; display: block; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.60); z-index: 9999; }

.pyro { position: absolute; top: 100px; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; direction: ltr; z-index: 2; }

.pyro > .before, .pyro > .after { position: absolute; width: 5px; height: 5px; border-radius: 50%; z-index: 1000; box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff; -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; }

.pyro > .after { -moz-animation-delay: 1.25s, 1.25s, 1.25s; -webkit-animation-delay: 1.25s, 1.25s, 1.25s; -o-animation-delay: 1.25s, 1.25s, 1.25s; -ms-animation-delay: 1.25s, 1.25s, 1.25s; animation-delay: 1.25s, 1.25s, 1.25s; -moz-animation-duration: 1.25s, 1.25s, 6.25s; -webkit-animation-duration: 1.25s, 1.25s, 6.25s; -o-animation-duration: 1.25s, 1.25s, 6.25s; -ms-animation-duration: 1.25s, 1.25s, 6.25s; animation-duration: 1.25s, 1.25s, 6.25s; }


@-webkit-keyframes bang {
    to { box-shadow: -121px -164.6666666667px #ff0400, 169px -277.6666666667px #d500ff, -20px -100.6666666667px #6200ff, 110px -164.6666666667px #f700ff, -198px -57.6666666667px #ffbf00, 71px -121.6666666667px #09ff00, 185px -395.6666666667px #00e1ff, 125px -42.6666666667px #0044ff, 6px -301.6666666667px #ff3c00, -58px -315.6666666667px #d500ff, 7px -220.6666666667px #009dff, 89px -12.6666666667px red, 107px -12.6666666667px #ff0044, 65px -25.6666666667px #ff0022, -40px -256.6666666667px #44ff00, -92px -360.6666666667px #00ff66, -122px -311.6666666667px #e100ff, -97px 29.3333333333px #55ff00, -147px -193.6666666667px #00ff55, 22px -187.6666666667px #00ff6a, -58px -386.6666666667px #ddff00, 96px -80.6666666667px #0400ff, -77px 39.3333333333px #ff007b, -192px -410.6666666667px #ff00dd, -44px -163.6666666667px #00c4ff, 56px -62.6666666667px #00ffd5, -166px -128.6666666667px #8c00ff, 32px -35.6666666667px #00ff95, -129px -33.6666666667px #44ff00, 174px -169.6666666667px #00f2ff, -243px -285.6666666667px #ff6200, 14px -286.6666666667px #ff004d, -191px 62.3333333333px #0015ff, 111px -274.6666666667px #0040ff, 134px 49.3333333333px #ffc400, 69px -190.6666666667px #fff700, -173px -216.6666666667px #d5ff00, -165px -72.6666666667px #5900ff, 24px -365.6666666667px #ff009d, -8px -208.6666666667px #ae00ff, -45px -92.6666666667px #91ff00, 102px 53.3333333333px #6fff00, -167px -65.6666666667px #00ffd0, 17px -136.6666666667px #ff00c8, -63px -210.6666666667px #ff0015, 207px -62.6666666667px darkorange, 119px -387.6666666667px #9900ff, 81px -352.6666666667px #1eff00, 71px -306.6666666667px #ff00ee, -190px -2.6666666667px #0dff00, 244px 49.3333333333px #40ff00; }
}

@-moz-keyframes bang {
    to { box-shadow: -121px -164.6666666667px #ff0400, 169px -277.6666666667px #d500ff, -20px -100.6666666667px #6200ff, 110px -164.6666666667px #f700ff, -198px -57.6666666667px #ffbf00, 71px -121.6666666667px #09ff00, 185px -395.6666666667px #00e1ff, 125px -42.6666666667px #0044ff, 6px -301.6666666667px #ff3c00, -58px -315.6666666667px #d500ff, 7px -220.6666666667px #009dff, 89px -12.6666666667px red, 107px -12.6666666667px #ff0044, 65px -25.6666666667px #ff0022, -40px -256.6666666667px #44ff00, -92px -360.6666666667px #00ff66, -122px -311.6666666667px #e100ff, -97px 29.3333333333px #55ff00, -147px -193.6666666667px #00ff55, 22px -187.6666666667px #00ff6a, -58px -386.6666666667px #ddff00, 96px -80.6666666667px #0400ff, -77px 39.3333333333px #ff007b, -192px -410.6666666667px #ff00dd, -44px -163.6666666667px #00c4ff, 56px -62.6666666667px #00ffd5, -166px -128.6666666667px #8c00ff, 32px -35.6666666667px #00ff95, -129px -33.6666666667px #44ff00, 174px -169.6666666667px #00f2ff, -243px -285.6666666667px #ff6200, 14px -286.6666666667px #ff004d, -191px 62.3333333333px #0015ff, 111px -274.6666666667px #0040ff, 134px 49.3333333333px #ffc400, 69px -190.6666666667px #fff700, -173px -216.6666666667px #d5ff00, -165px -72.6666666667px #5900ff, 24px -365.6666666667px #ff009d, -8px -208.6666666667px #ae00ff, -45px -92.6666666667px #91ff00, 102px 53.3333333333px #6fff00, -167px -65.6666666667px #00ffd0, 17px -136.6666666667px #ff00c8, -63px -210.6666666667px #ff0015, 207px -62.6666666667px darkorange, 119px -387.6666666667px #9900ff, 81px -352.6666666667px #1eff00, 71px -306.6666666667px #ff00ee, -190px -2.6666666667px #0dff00, 244px 49.3333333333px #40ff00; }
}

@-o-keyframes bang { to;
{ box-shadow: -121px -164.6666666667px #ff0400, 169px -277.6666666667px #d500ff, -20px -100.6666666667px #6200ff, 110px -164.6666666667px #f700ff, -198px -57.6666666667px #ffbf00, 71px -121.6666666667px #09ff00, 185px -395.6666666667px #00e1ff, 125px -42.6666666667px #0044ff, 6px -301.6666666667px #ff3c00, -58px -315.6666666667px #d500ff, 7px -220.6666666667px #009dff, 89px -12.6666666667px red, 107px -12.6666666667px #ff0044, 65px -25.6666666667px #ff0022, -40px -256.6666666667px #44ff00, -92px -360.6666666667px #00ff66, -122px -311.6666666667px #e100ff, -97px 29.3333333333px #55ff00, -147px -193.6666666667px #00ff55, 22px -187.6666666667px #00ff6a, -58px -386.6666666667px #ddff00, 96px -80.6666666667px #0400ff, -77px 39.3333333333px #ff007b, -192px -410.6666666667px #ff00dd, -44px -163.6666666667px #00c4ff, 56px -62.6666666667px #00ffd5, -166px -128.6666666667px #8c00ff, 32px -35.6666666667px #00ff95, -129px -33.6666666667px #44ff00, 174px -169.6666666667px #00f2ff, -243px -285.6666666667px #ff6200, 14px -286.6666666667px #ff004d, -191px 62.3333333333px #0015ff, 111px -274.6666666667px #0040ff, 134px 49.3333333333px #ffc400, 69px -190.6666666667px #fff700, -173px -216.6666666667px #d5ff00, -165px -72.6666666667px #5900ff, 24px -365.6666666667px #ff009d, -8px -208.6666666667px #ae00ff, -45px -92.6666666667px #91ff00, 102px 53.3333333333px #6fff00, -167px -65.6666666667px #00ffd0, 17px -136.6666666667px #ff00c8, -63px -210.6666666667px #ff0015, 207px -62.6666666667px darkorange, 119px -387.6666666667px #9900ff, 81px -352.6666666667px #1eff00, 71px -306.6666666667px #ff00ee, -190px -2.6666666667px #0dff00, 244px 49.3333333333px #40ff00; }
}

@-ms-keyframes bang {
    to { box-shadow: -121px -164.6666666667px #ff0400, 169px -277.6666666667px #d500ff, -20px -100.6666666667px #6200ff, 110px -164.6666666667px #f700ff, -198px -57.6666666667px #ffbf00, 71px -121.6666666667px #09ff00, 185px -395.6666666667px #00e1ff, 125px -42.6666666667px #0044ff, 6px -301.6666666667px #ff3c00, -58px -315.6666666667px #d500ff, 7px -220.6666666667px #009dff, 89px -12.6666666667px red, 107px -12.6666666667px #ff0044, 65px -25.6666666667px #ff0022, -40px -256.6666666667px #44ff00, -92px -360.6666666667px #00ff66, -122px -311.6666666667px #e100ff, -97px 29.3333333333px #55ff00, -147px -193.6666666667px #00ff55, 22px -187.6666666667px #00ff6a, -58px -386.6666666667px #ddff00, 96px -80.6666666667px #0400ff, -77px 39.3333333333px #ff007b, -192px -410.6666666667px #ff00dd, -44px -163.6666666667px #00c4ff, 56px -62.6666666667px #00ffd5, -166px -128.6666666667px #8c00ff, 32px -35.6666666667px #00ff95, -129px -33.6666666667px #44ff00, 174px -169.6666666667px #00f2ff, -243px -285.6666666667px #ff6200, 14px -286.6666666667px #ff004d, -191px 62.3333333333px #0015ff, 111px -274.6666666667px #0040ff, 134px 49.3333333333px #ffc400, 69px -190.6666666667px #fff700, -173px -216.6666666667px #d5ff00, -165px -72.6666666667px #5900ff, 24px -365.6666666667px #ff009d, -8px -208.6666666667px #ae00ff, -45px -92.6666666667px #91ff00, 102px 53.3333333333px #6fff00, -167px -65.6666666667px #00ffd0, 17px -136.6666666667px #ff00c8, -63px -210.6666666667px #ff0015, 207px -62.6666666667px darkorange, 119px -387.6666666667px #9900ff, 81px -352.6666666667px #1eff00, 71px -306.6666666667px #ff00ee, -190px -2.6666666667px #0dff00, 244px 49.3333333333px #40ff00; }
}

@keyframes bang {
    to { box-shadow: -121px -164.6666666667px #ff0400, 169px -277.6666666667px #d500ff, -20px -100.6666666667px #6200ff, 110px -164.6666666667px #f700ff, -198px -57.6666666667px #ffbf00, 71px -121.6666666667px #09ff00, 185px -395.6666666667px #00e1ff, 125px -42.6666666667px #0044ff, 6px -301.6666666667px #ff3c00, -58px -315.6666666667px #d500ff, 7px -220.6666666667px #009dff, 89px -12.6666666667px red, 107px -12.6666666667px #ff0044, 65px -25.6666666667px #ff0022, -40px -256.6666666667px #44ff00, -92px -360.6666666667px #00ff66, -122px -311.6666666667px #e100ff, -97px 29.3333333333px #55ff00, -147px -193.6666666667px #00ff55, 22px -187.6666666667px #00ff6a, -58px -386.6666666667px #ddff00, 96px -80.6666666667px #0400ff, -77px 39.3333333333px #ff007b, -192px -410.6666666667px #ff00dd, -44px -163.6666666667px #00c4ff, 56px -62.6666666667px #00ffd5, -166px -128.6666666667px #8c00ff, 32px -35.6666666667px #00ff95, -129px -33.6666666667px #44ff00, 174px -169.6666666667px #00f2ff, -243px -285.6666666667px #ff6200, 14px -286.6666666667px #ff004d, -191px 62.3333333333px #0015ff, 111px -274.6666666667px #0040ff, 134px 49.3333333333px #ffc400, 69px -190.6666666667px #fff700, -173px -216.6666666667px #d5ff00, -165px -72.6666666667px #5900ff, 24px -365.6666666667px #ff009d, -8px -208.6666666667px #ae00ff, -45px -92.6666666667px #91ff00, 102px 53.3333333333px #6fff00, -167px -65.6666666667px #00ffd0, 17px -136.6666666667px #ff00c8, -63px -210.6666666667px #ff0015, 207px -62.6666666667px darkorange, 119px -387.6666666667px #9900ff, 81px -352.6666666667px #1eff00, 71px -306.6666666667px #ff00ee, -190px -2.6666666667px #0dff00, 244px 49.3333333333px #40ff00; }
}

@-webkit-keyframes gravity {
    to { transform: translateY(200px); -moz-transform: translateY(200px); -webkit-transform: translateY(200px); -o-transform: translateY(200px); -ms-transform: translateY(200px); opacity: 0; }
}

@-moz-keyframes gravity {
    to { transform: translateY(200px); -moz-transform: translateY(200px); -webkit-transform: translateY(200px); -o-transform: translateY(200px); -ms-transform: translateY(200px); opacity: 0; }
}

@-o-keyframes gravity { to;
{ transform: translateY(200px); -moz-transform: translateY(200px); -webkit-transform: translateY(200px); -o-transform: translateY(200px); -ms-transform: translateY(200px); opacity: 0; }
}

@-ms-keyframes gravity {
    to { transform: translateY(200px); -moz-transform: translateY(200px); -webkit-transform: translateY(200px); -o-transform: translateY(200px); -ms-transform: translateY(200px); opacity: 0; }
}

@keyframes gravity {
    to { transform: translateY(200px); -moz-transform: translateY(200px); -webkit-transform: translateY(200px); -o-transform: translateY(200px); -ms-transform: translateY(200px); opacity: 0; }
}

@-webkit-keyframes position {
    0%, 19.9% { margin-top: 10%; margin-left: 40%; }
    20%, 39.9% { margin-top: 40%; margin-left: 30%; }
    40%, 59.9% { margin-top: 20%; margin-left: 70%; }
    60%, 79.9% { margin-top: 30%; margin-left: 20%; }
    80%, 99.9% { margin-top: 30%; margin-left: 80%; }
}

@-moz-keyframes position {
    0%, 19.9% { margin-top: 10%; margin-left: 40%; }
    20%, 39.9% { margin-top: 40%; margin-left: 30%; }
    40%, 59.9% { margin-top: 20%; margin-left: 70%; }
    60%, 79.9% { margin-top: 30%; margin-left: 20%; }
    80%, 99.9% { margin-top: 30%; margin-left: 80%; }
}

@-o-keyframes position { 0%, 19.9%;
{ margin-top: 10%; margin-left: 40%; }
20%, 39.9% { margin-top: 40%; margin-left: 30%; }
40%, 59.9% { margin-top: 20%; margin-left: 70%; }
60%, 79.9% { margin-top: 30%; margin-left: 20%; }
80%, 99.9% { margin-top: 30%; margin-left: 80%; }
}

@-ms-keyframes position {
    0%, 19.9% { margin-top: 10%; margin-left: 40%; }
    20%, 39.9% { margin-top: 40%; margin-left: 30%; }
    40%, 59.9% { margin-top: 20%; margin-left: 70%; }
    60%, 79.9% { margin-top: 30%; margin-left: 20%; }
    80%, 99.9% { margin-top: 30%; margin-left: 80%; }
}

@keyframes position {
    0%, 19.9% { margin-top: 10%; margin-left: 40%; }
    20%, 39.9% { margin-top: 40%; margin-left: 30%; }
    40%, 59.9% { margin-top: 20%; margin-left: 70%; }
    60%, 79.9% { margin-top: 30%; margin-left: 20%; }
    80%, 99.9% { margin-top: 30%; margin-left: 80%; }
}



@media only screen and (min-width : 1200px) {
}

@media only screen and (max-width: 992px) {
    .diwali-popup { height: 450px; width: 450px;top:50%;margin-top:-225px; }
}

@media only screen and (max-width: 767px) {
    .diwali-popup { height: 400px; width: 400px;top:50%;margin-top:-200px; }
}

@media only screen and (max-width: 479px) {
    .diwali-popup { height: 300px; width: 300px;top:50%;margin-top:-150px; }
}