.flip-clock {
    --border-radius: .15em;
    --font-size: 4.5em;
    --font-family: "Helvetica Neue", Helvetica, sans-serif;
    --width: 1em;
    --height: 1.45em;
    --animation-duration: 250ms;
    --animation-delay: var(--animation-duration);
    font-family: var(--font-family);
    font-size: var(--font-size);
    user-select: none;
    text-align: center;
    position: relative;
    width: 100%;
    display: inline-flex;
    box-sizing: border-box;
    justify-content: center;
    gap: .25rem;
    margin-bottom: 20px;
}

.flip-clock .flip-clock-label {
    font-size: 1rem;
    margin-bottom: .5rem;
    color: #fff;
    font-weight: 700;
    font-family: 'Titillium Web', sans-serif;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.8);
}

.flip-clock .flip-clock-meridium {
    line-height: 1em;
    top: 50%;
    left: 100%;
    flex: 0;
    width: auto;
    text-transform: uppercase;
    font-weight: 200;
    transform: translate(.5em, -50%);
}

.flip-clock .flip-clock-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: serif;
    color: #fff;
    height: var(--height);
    text-shadow: 0px 0px 5px rgba(0,0,0,0.8);
}

.flip-clock .flip-clock-divider .flip-clock-divider-inner {
    font-size: 1.25em;
}

.flip-clock .flip-clock-divider[data-value=" "] {
    min-width: 1rem;
}

.dark .flip-clock .flip-clock-divider {
    color: #ccc;
}

.flip-clock .flip-clock-group {
    display: flex;
    flex-direction: column;
}

.flip-clock .flip-clock-group + .flip-clock-group {
    margin-left: 1rem;
}

.flip-clock .flip-clock-group .flip-clock-group-items {
    display: flex;
    align-items: end;
    gap: .25rem;
}

.flip-clock .flip-clock-card {
    width: var(--width);
    height: var(--height);
    position: relative;
    border-radius: var(--border-radius);
    box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.24), 0 3px 8px rgba(0, 0, 0, 0.05);
    font-weight: bold;
    color: #333;
    flex-shrink: 0;
}

.flip-clock .flip-clock-card:not(.animate) .active .flip-clock-card-item-inner {
    z-index: 4;
}

.flip-clock .flip-clock-card:not(.animate) .flip-clock-card-item-inner .top:after, .flip-clock .flip-clock-card:not(.animate) .flip-clock-card-item-inner .bottom:after {
    display: none;
}

.flip-clock .flip-clock-card .flip-clock-card-item-inner {
    position: absolute;
    width: 100%;
    height: 100%;
}

.flip-clock .flip-clock-card .flip-clock-card-item-inner:first-child {
    z-index: 2;
}

.flip-clock .flip-clock-card .flip-clock-card-item-inner .top, .flip-clock .flip-clock-card .flip-clock-card-item-inner .bottom {
    width: 100%;
    height: 50%;
    overflow: hidden;
    position: relative;
    font-size: 1em;
    background: #fff;
    box-shadow: inset 0 0 .2em rgba(0, 0, 0, .5);
}

.flip-clock .flip-clock-card .flip-clock-card-item-inner .top:after, .flip-clock .flip-clock-card .flip-clock-card-item-inner .bottom:after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.flip-clock .flip-clock-card .flip-clock-card-item-inner .top:before, .flip-clock .flip-clock-card .flip-clock-card-item-inner .bottom:before {
    content: " ";
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
}

.flip-clock .flip-clock-card .flip-clock-card-item-inner .top {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    line-height: var(--height);
}

.flip-clock .flip-clock-card .flip-clock-card-item-inner .top:after {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.flip-clock .flip-clock-card .flip-clock-card-item-inner .top:before {
    background: #333;
    opacity: .4;
    bottom: 0;
}

.flip-clock .flip-clock-card .flip-clock-card-item-inner .bottom {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    line-height: 0;
}

.flip-clock .flip-clock-card .flip-clock-card-item-inner .bottom:after {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.flip-clock .flip-clock-card .flip-clock-card-item-inner .bottom:before {
    background: #ccc;
    opacity: .1;
}

.flip-clock .flip-clock-card.animate {
    animation-duration: var(--animation-duration);
    animation-delay: var(--animation-delay);
}

.flip-clock .flip-clock-card.animate .flip-clock-card-item-inner {
    perspective: 15em;
}

.flip-clock .flip-clock-card.animate .top, .flip-clock .flip-clock-card.animate .bottom, .flip-clock .flip-clock-card.animate .active, .flip-clock .flip-clock-card.animate .active > div, .flip-clock .flip-clock-card.animate .before, .flip-clock .flip-clock-card.animate .before > div {
    animation-delay: inherit;
    animation-fill-mode: forwards;
    animation-duration: inherit;
    animation-timing-function: inherit;
}

.flip-clock .flip-clock-card.animate .top:after, .flip-clock .flip-clock-card.animate .bottom:after, .flip-clock .flip-clock-card.animate .active:after, .flip-clock .flip-clock-card.animate .active > div:after, .flip-clock .flip-clock-card.animate .before:after, .flip-clock .flip-clock-card.animate .before > div:after {
    animation-duration: inherit;
    animation-fill-mode: inherit;
}

.flip-clock .flip-clock-card.animate .before {
    animation-delay: 0s;
    animation-timing-function: ease-in;
}

.flip-clock .flip-clock-card.animate .before .top {
    animation-name: flip-clock-top;
}

.flip-clock .flip-clock-card.animate .before .top:after, .flip-clock .flip-clock-card.animate .before .bottom:after {
    animation-name: flip-clock-show-shadow;
}

.flip-clock .flip-clock-card.animate .active {
    animation-timing-function: ease-out;
}

.flip-clock .flip-clock-card.animate .active > div {
    animation-name: flip-clock-indexing;
}

.flip-clock .flip-clock-card.animate .active .top:after, .flip-clock .flip-clock-card.animate .active .bottom:after {
    animation-name: flip-clock-hide-shadow;
}

.flip-clock .flip-clock-card.animate .active .bottom {
    animation-name: flip-clock-bottom;
}

.flip-clock .flip-clock-card .active {
    z-index: 2;
}

.flip-clock .flip-clock-card .active .bottom {
    z-index: 2;
    transform-origin: top center;
}

.flip-clock .flip-clock-card .before {
    z-index: 3;
}

.flip-clock .flip-clock-card .before .top {
    z-index: 2;
    transform-origin: bottom center;
}

.flip-clock .flip-clock-card .before .top:after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
}

.flip-clock .flip-clock-card .before .bottom:after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
}

@keyframes flip-clock-indexing {
    0% {
        z-index: 2;
    }
    1% {
        z-index: 3;
    }
    100% {
        z-index: 4;
    }
}

@keyframes flip-clock-bottom {
    0% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0);
    }
}

@keyframes flip-clock-top {
    0% {
        transform: rotateX(0);
    }
    100% {
        transform: rotateX(-90deg);
    }
}

@keyframes flip-clock-show-shadow {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes flip-clock-hide-shadow {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@media (max-width: 769px) {
    .flip-clock {
        font-size: 3.2em
    }
}
@media (max-width: 540px) {
    .flip-clock {
        font-size: 2.2em
    }
}