:root {
    --flipClock_item_font_size: 16px;
    --flipClock_item_color: var(--document_general_color_use);
    --flipClock_flip_width: 32px;
    --flipClock_flip_height: 64px;
    --flipClock_flip_margin: 8px;
    --flipClock_flip_padding: 4px;
    --flipClock_flip_font_size: 32px;
    --flipClock_flip_color_base: var(--document_general_color_use);
    --flipClock_flip_color_half: var(--document_general_color_half);
    --flipClock_flip_color_use: var(--document_general_color_base);
    --flipClock_transition: 0.25s;
}

.flipClock {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.flipClock > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 var(--flipClock_flip_margin);
}
.flipClock > div:first-child {
    margin-left: 0;
}
.flipClock > div:last-child {
    margin-right: 0;
}

.flipClock > div > .item {
    text-transform: uppercase;
    font-family: var(--document_general_font_code);
    font-size: var(--flipClock_item_font_size);
    color: var(--flipClock_item_color);
}
.flipClock > div > .flips {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    font-family: var(--document_general_font_code);
    font-size: var(--flipClock_flip_font_size);
}

.flipClock > div > .flips > .flip {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--flipClock_flip_width);
    height: var(--flipClock_flip_height);
    margin: 0 var(--flipClock_flip_padding);
    border-radius: 2px;
    background-color: var(--flipClock_flip_color_use);
    transition-property: width;
    transition: var(--flipClock_transition);
}
.flipClock > div > .flips > .flip:first-child {
    margin-right: 0;
}
.flipClock > div > .flips > .flip:last-child {
    margin-left: 0;
}

.flipClock > div > .flips > .flip > div {
    overflow: hidden;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    color: var(--flipClock_flip_color_use);
    background-color: var(--flipClock_flip_color_base);
}
.flipClock > div > .flips > .flip > .top {
    top: 0;
    height: calc(50% - 1px);
}
.flipClock > div > .flips > .flip > .bottom {
    top: calc(50% + 1px);
    height: calc(50% - 1px);
}
.flipClock > div > .flips > .flip > .after.bottom {
    opacity: 0;
}
.flipClock > div > .flips > .flip > .before.bottom.move {
    animation-name: flip-before-bottom;
    animation-duration: calc(var(--flipClock_transition) / 2);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.flipClock > div > .flips > .flip > .before.top.move {
    transform-origin: bottom;
    animation-name: flip-before-top;
    animation-duration: calc(var(--flipClock_transition) / 2);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.flipClock > div > .flips > .flip > .after.bottom.move {
    transform-origin: top;
    animation-name: flip-after-bottom;
    animation-duration: calc(var(--flipClock_transition) / 2);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.flipClock > div > .flips > .flip > div > span {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    width: 100%;
    height: 100%;
    transform: perspective(256px) rotateX(0deg);
}
.flipClock > div > .flips > .flip > .top > span {
    top: 50%;
}
.flipClock > div > .flips > .flip > .bottom > span {
    top: calc(-50% - 1px);
}
.flipClock > div > .flips > .flip > div > span:nth-of-type(1) {
    left: 0;
}
.flipClock > div > .flips > .flip > div > span:nth-of-type(2) {
    left: 50%;
}
.flipClock > div > .flips > .flip.digit3 > div > span {
    width: 33.3333%;
}
.flipClock > div > .flips > .flip.digit3 > div > span:nth-of-type(1) {
    left: 0;
}
.flipClock > div > .flips > .flip.digit3 > div > span:nth-of-type(2) {
    left: 33.3333%;
}
.flipClock > div > .flips > .flip.digit3 > div > span:nth-of-type(3) {
    left: 66.6666%;
}
.flipClock > div > .flips > .flip.digit4 > div > span {
    width: 25%;
}
.flipClock > div > .flips > .flip.digit4 > div > span:nth-of-type(1) {
    left: 0;
}
.flipClock > div > .flips > .flip.digit4 > div > span:nth-of-type(2) {
    left: 25%;
}
.flipClock > div > .flips > .flip.digit4 > div > span:nth-of-type(3) {
    left: 50%;
}
.flipClock > div > .flips > .flip.digit4 > div > span:nth-of-type(4) {
    left: 75%;
}

@keyframes flip-before-bottom {
    0% {
        background-color: var(--flipClock_flip_color_base);
    }
    50% {
        background-color: var(--flipClock_flip_color_base);
    }
    50.01% {
        background-color: var(--flipClock_flip_color_base);
    }
    100% {
        background-color: var(--flipClock_flip_color_half);
    }
}
@keyframes flip-before-top {
    0% {
        background-color: var(--flipClock_flip_color_base);
        transform: perspective(256px) rotateX(0deg);
        opacity: 1;
    }
    50% {
        background-color: var(--flipClock_flip_color_half);
        transform: perspective(256px) rotateX(-90deg);
        opacity: 1;
    }
    50.01% {
        background-color: var(--flipClock_flip_color_half);
        transform: perspective(256px) rotateX(-90.01deg);
        opacity: 0;
    }
    100% {
        background-color: var(--flipClock_flip_color_half);
        transform: perspective(256px) rotateX(-180deg);
        opacity: 0;
    }
}
@keyframes flip-after-bottom {
    0% {
        background-color: var(--flipClock_flip_color_base);
        transform: perspective(256px) rotateX(0deg);
        opacity: 0;
    }
    50% {
        background-color: var(--flipClock_flip_color_base);
        transform: perspective(256px) rotateX(90deg);
        opacity: 0;
    }
    50.01% {
        background-color: var(--flipClock_flip_color_base);
        transform: perspective(256px) rotateX(90.01deg);
        opacity: 1;
    }
    100% {
        background-color: var(--flipClock_flip_color_base);
        transform: perspective(256px) rotateX(0deg);
        opacity: 1;
    }
}

@media screen and (max-width: 1220px) {
    :root {
        --flipClock_item_font_size: 12px;
        --flipClock_flip_width: 24px;
        --flipClock_flip_height: 48px;
        --flipClock_flip_font_size: 24px;
    }
}