@-webkit-keyframes flipTop {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg); }

    100% {
        -webkit-transform: perspective(400px) rotateX(-90deg); } }

@-webkit-keyframes flipBottom {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg); }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg); } }

@-moz-keyframes flipTop {
    0% {
        -moz-transform: perspective(400px) rotateX(0deg); }

    100% {
        -moz-transform: perspective(400px) rotateX(-90deg); } }

@-moz-keyframes flipBottom {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg); }

    100% {
        -moz-transform: perspective(400px) rotateX(0deg); } }

@-ms-keyframes flipTop {
    0% {
        -ms-transform: perspective(400px) rotateX(0deg); }

    100% {
        -ms-transform: perspective(400px) rotateX(-90deg); } }

@-ms-keyframes flipBottom {
    0% {
        -ms-transform: perspective(400px) rotateX(90deg); }

    100% {
        -ms-transform: perspective(400px) rotateX(0deg); } }

.flipTimer {
    color: #FFF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
    line-height: 33px;
    height: 33px;
}
.flipTimer .seconds,
.flipTimer .minutes,
.flipTimer .hours,
.flipTimer .days {
    height: 100%;
    display: inline;
}
.flipTimer .seconds .period,
.flipTimer .minutes .period,
.flipTimer .hours .period,
.flipTimer .days .period {
    bottom: -25px;
    left: 10px;
    font-size: 10px;
    color: #4F5D6C;
}
.flipTimer .hours .period {
    left: 7px;
}
.flipTimer .digit-set {
    width: 20px;
    height: 100%;
    display: inline-block;
    position: relative;
    margin: 0 1px;
}
.flipTimer .digit > div {
    position: absolute;
    left: 0;
    overflow: hidden;
    padding: 0 1.4px;
}
.flipTimer .digit > div.digit-top {
    background-color: #f13a30;
    box-sizing: border-box;
    top: 0;
    z-index: 0;}
.flipTimer .digit.previous .digit-top {
    opacity: 1;
    z-index: 2;
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: flipTop 0.3s ease-in both;
    -moz-transform-origin: 50% 100%;
    -moz-animation: flipTop 0.3s ease-in both;
    -ms-transform-origin: 50% 100%;
    -ms-animation: flipTop 0.3s ease-in both;
    transform-origin: 50% 100%;
    animation: flipTop 0.3s ease-in both; }
.flipTimer .digit.active .digit-top {
    z-index: 1; }
.flipTimer .separator {
    position: absolute;
    border-bottom: 1px solid rgba(0, 0, 0, 0.21);
    width: 97%;
    height: 52%;
    z-index: 888;
    left: 0;}