BODY {-webkit-font-smoothing:antialiased;-moz-font-smoothing:grayscale;-moz-osx-font-smoothing:grayscale;margin:0;background-color:black;background-image:url('wave.jpg');background-position:center;background-size:cover}
HTML, BODY {height:100%;color:#fff}

.countdown {position:relative;font-family:'Roboto',sans-serif;color:#fff;background-position:left center;transform:translateY(-50%);top:50%;width:900px;margin:auto;max-width:90%}

.container {text-align:center}

.circle {width:128px;height:128px;position:relative;display:inline-block;background-color:rgba(0,0,0,0.1);border-radius:64px;margin:0 10px 0}
.circle > SPAN {position:absolute;color:#fff;display:block;text-align:center;width:100px;bottom:-25px;left:50%;margin-left:-50px}
.progressbar-text {color:#fff !important;font-size:50px;margin-top:1px !important;font-weight:600}
.logo {max-width:70%;display:block;margin:0 auto 40px;filter:drop-shadow(black 0px 0px 20px)}

@media (max-width:700px) {
    .circle {width:64px;height:64px}
    .progressbar-text {font-size:32px;margin-top:-1px !important}
}
@media (max-width:500px) {
    .circle {margin:0 5px 0}
    .circle > SPAN {font-size:13px}
}
@media (max-width:350px) {
    .circle {margin:0 2px 0}
}
@media (max-height:800px) {
    .logo {max-height:400px}
}

@media (max-height:500px) {
    .logo {max-height:200px}
    .circle {width:64px;height:64px}
    .progressbar-text {font-size:32px;margin-top:-1px !important}
}