.numCounter {
    z-index: 50;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    color: #F1F1F1;
    text-shadow: 0 0 2px #fff;
    font-weight: bold;
    white-space: normal;
    font-size: 16px;

}
.numCounter > b {
    display: inline-block;
    width: 17.14286px;
    height: 100%;
    margin: 0 0.05em;
    border-radius: 3px;
    text-align: center;
    background: #348e2a;
    overflow: hidden;
}
.numCounter > b:before {
    content: ' 0 1 2 3 4 5 6 7 8 9 ';
    display: block;
    word-break: break-all;
    word-break: break-word;
    -webkit-transition: 0.1s cubic-bezier(0.12, 0.78, 0.52, 1.2);
    transition: 0.1s cubic-bezier(0.12, 0.78, 0.52, 1.2);
}
.numCounter > b.d1:before {
    margin-top: -24px;
}
.numCounter > b.d2:before {
    margin-top: -48px;
}
.numCounter > b.d3:before {
    margin-top: -72px;
}
.numCounter > b.d4:before {
    margin-top: -96px;
}
.numCounter > b.d5:before {
    margin-top: -120px;
}
.numCounter > b.d6:before {
    margin-top: -144px;
}
.numCounter > b.d7:before {
    margin-top: -168px;
}
.numCounter > b.d8:before {
    margin-top: -192px;
}
.numCounter > b.d9:before {
    margin-top: -216px;
}
.numCounter > span {
    display: inline-block;
    font-size: 1.1em;
    opacity: 0.7;
    line-height: 1.6;
    padding: 0;
    vertical-align: top;
    text-shadow: none;
}


.numCounter {
    overflow: hidden;

    width: 175px;
    height: 24px;
    margin: auto;
    right: 0;
    bottom: 0;
    padding: 0.2em .1em;
    text-align: right;

    border-radius: 3px;

}
.numCounter:before {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    top: -50%;
    bottom: 50%;
    background: #FFF;
    opacity: 0.04;
    z-index: 1;
    -webkit-transform: rotatez(-5deg);
    transform: rotatez(-5deg);
}


.numCounterItems {
    z-index: 50;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    color: #F1F1F1;
    text-shadow: 0 0 2px #fff;
    font-weight: bold;
    white-space: normal;
    font-size: 16px;

}
.numCounterItems > b {
    display: inline-block;
    width: 17.14286px;
    height: 100%;
    margin: 0 0.05em;
    border-radius: 3px;
    text-align: center;
    background: #348e2a;
    overflow: hidden;
}
.numCounterItems > b:before {
    content: ' 0 1 2 3 4 5 6 7 8 9 ';
    display: block;
    word-break: break-all;
    word-break: break-word;
    -webkit-transition: 0.1s cubic-bezier(0.12, 0.78, 0.52, 1.2);
    transition: 0.1s cubic-bezier(0.12, 0.78, 0.52, 1.2);
}
.numCounterItems > b.d1:before {
    margin-top: -24px;
}
.numCounterItems > b.d2:before {
    margin-top: -48px;
}
.numCounterItems > b.d3:before {
    margin-top: -72px;
}
.numCounterItems > b.d4:before {
    margin-top: -96px;
}
.numCounterItems > b.d5:before {
    margin-top: -120px;
}
.numCounterItems > b.d6:before {
    margin-top: -144px;
}
.numCounterItems > b.d7:before {
    margin-top: -168px;
}
.numCounterItems > b.d8:before {
    margin-top: -192px;
}
.numCounterItems > b.d9:before {
    margin-top: -216px;
}
.numCounterItems > span {
    display: inline-block;
    font-size: 1.1em;
    opacity: 0.7;
    line-height: 1.6;
    padding: 0;
    vertical-align: top;
    text-shadow: none;
}


.numCounterItems {
    overflow: hidden;

    width: 175px;
    height: 24px;
    margin: auto;
    right: 0;
    bottom: 0;
    padding: 0.2em .1em;
    text-align: right;

    border-radius: 3px;

}
.numCounterItems:before {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    top: -50%;
    bottom: 50%;
    background: #FFF;
    opacity: 0.04;
    z-index: 1;
    -webkit-transform: rotatez(-5deg);
    transform: rotatez(-5deg);
}