#explosion {
    top: 100%;
    width: 100%;
    height: 100%;
}
.explosion-byline {
    top: 63%;
    left: 10%;
    color: white;
    max-width: 22%;
    opacity: 1;
}
#domExplosionList {
    position: fixed !important;
    width: 270px;
    top: 140%;
    right: 15%;
    opacity: 1;
}
.dom-explosion-item {
    position: absolute !important;
    width: 60px;
    height: 60px;
    background-color: #fff;
}
.dei-1  { top: 0;   left: 0;  }
.dei-2  { top: 0;   left: 70px; }
.dei-3  { top: 0;   left: 140px; }
.dei-4  { top: 0;   left: 210px; }
.dei-5  { top: 70px;   left: 0;  }
.dei-6  { top: 70px;   left: 70px; }
.dei-7  { top: 70px;   left: 140px; }
.dei-8  { top: 70px;   left: 210px; }
.dei-9  { top: 140px;   left: 0;  }
.dei-10 { top: 140px;   left: 70px; }
.dei-11 { top: 140px;   left: 140px; }
.dei-12 { top: 140px;   left: 210px; }
.dei-13 { top: 210px;   left: 0;  }
.dei-14 { top: 210px;   left: 70px; }
.dei-15 { top: 210px;   left: 140px; }
.dei-16 { top: 210px;   left: 210px; }

@media all and (max-width: 1000px) {
    .container {
        display: none;
    }
    .error {
        display: block;
        font-size: 22px;
    }
}