.tefl_countdown_timer {
display: flex;
align-items: center;
margin-left: 20px;
}
.clock {
display: flex;
justify-content: center;
margin: 0 0 0 -5px;
}
.clock-day,
.clock-hour,
.clock-min,
.clock-sec {
display: flex;
background: rgba(0, 0, 0, 0.1);
padding: 6px 8px;
margin: 0 0 0 5px;
}
.clock>div {
display: flex;
flex-wrap: wrap;
width: 35px;
}
.clock>div:not(:last-child) {
margin-right: 10px;
}
.digit-text {
width: 100%;
font-size: 12px;
text-align: left;
padding: 0 0 5px;
}
.digit {
position: relative;
width: calc(50% - 1.5px); color: #fff;
background-color: rgba(0, 0, 0, .15);
text-align: center;
}
.digit:after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: rgb(0 0 0 / 0.01);
}
.tenday,
.tenhour,
.tenmin,
.tensec {
margin-right: 2px;
} .flap {
display: none;
position: absolute;
width: 100%;
height: 50%;
left: 0;
top: 0;
transform-origin: 50% 100%;
backface-visibility: hidden;
overflow: hidden;
}
.flap::before {
content: attr(data-content);
position: absolute;
left: 50%;
}
.flap.front::before,
.flap.under::before {
top: 100%;
transform: translate(-50%, -50%);
}
.flap.back {
transform: rotateY(180deg);
}
.flap.back::before {
top: 100%;
transform: translate(-50%, -50%) rotateZ(180deg);
}
.flap.over {
z-index: 2;
}
.flap.under {
z-index: 1;
}
.flap.front {
animation: flip-down-front 500ms ease-in both;
}
.flap.back {
animation: flip-down-back 500ms ease-in both;
}
.flap.under {
animation: fade-under 500ms ease-in both;
}
@keyframes flip-down-front {
0% {
transform: rotateX(0deg);
background-color: rgba(255, 255, 255, .25);
}
100% {
transform: rotateX(-180deg);
background-color: rgba(255, 255, 255, .5);
}
}
@keyframes flip-down-back {
0% {
transform: rotateY(180deg) rotateX(0deg);
background-color: rgba(255, 255, 255, .25);
}
100% {
transform: rotateY(180deg) rotateX(180deg);
background-color: rgba(255, 255, 255, .5);
}
}
@keyframes fade-under {
0% {
background-color: rgba(255, 255, 255, 0);
}
100% {
background-color: rgba(255, 255, 255, 1);
}
}
.tefl-timer-text {
margin-left: 1rem;
font-weight: 500;
}