.counter {
    background-color: #eee;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    padding: 15px;
    width: 79%;
    border-radius: 6px;
}

#counter-digits {
    display: inline-block;
    background: #555;
    padding: 6px;
    border-radius: 3px;
    margin-bottom: 12px;
}

.counter-digit {
    display: inline-block;
    vertical-align: middle;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: #111;
    background: #bfbfbf;
    background: linear-gradient(180deg, #bfbfbf 0%, #e4e4e4 15%, #fff 45%, #bfbfbf 100%);
    border-radius: 2px;
    font-size: 3em;
    padding: 6px;
    margin: 0 1px;
}

.counter-title {
    margin: 0;
    font-weight: 900;
    font-size: 3em !important;
    color: #000 !important;
}
.counter-subtitle {
    margin: 0.5em 0;
    font-weight: 700;
    color: #000;
}

.counter-btn {
    display: inline-block;
    background: #b22;
    background: linear-gradient(#b22, #a00);
    border: 1px solid #600;
    margin-top: 8px;
    padding: 10px 14px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

.counter-btn:hover {
    background: #e44;
    background: linear-gradient(#e44, #b00);
    border: 1px solid #600;
}

.counter-btn:active {
    background: #a00;
    background: linear-gradient(#a00, #b22);
    border: 1px solid #600;
}

.counter-btn.unactive {
    background: #666;
    background: linear-gradient(#444, #999);
    border: 1px solid #333;
    cursor: default;
    opacity: 0.6;
}

.counter-btn span {
    color: #fff;
    font-size: 1.4em;
    font-weight: 600;
    text-shadow: 0 1px 1px #000;
}