.flip-clock{
    text-align:center;
    perspective:400px;
}

.flip-clock__piece{
    display:inline-block;
    margin:0 8px;
}

.flip-clock__slot{
    display:block;
    margin-top:15px;
    font-size:18px;
    color: #111827;
}

.cardcs{
    display:block;
    position:relative;
    font-size:90px;
    line-height:0.95;
    height:1.35em;
}

.cardcs__top,
.cardcs__bottom,
.cardcs__back::before,
.cardcs__back::after{

display:block;

height:0.675em;

width:1.8em;

padding:0.25em;

color: #f1e7e7;

background:#ff0000;

overflow:hidden;

box-sizing:border-box;

backface-visibility:hidden;

transform-style:preserve-3d;
}

.cardcs__top{
    border-radius:0.15em 0.15em 0 0;
}

.cardcs__bottom{

    position:absolute;

    top:50%;

    left:0;

    color:#fff;

    background:#ff0000;

    border-top:1px solid #ff0000;

    border-radius:0 0 0.15em 0.15em;
}

.cardcs__bottom::after{

    content:attr(data-value);

    display:block;

    margin-top:-0.675em;
}

.cardcs__back{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;
}

.cardcs__back::before{

    content:attr(data-value);

    position:absolute;

    top:0;

    left:0;

    z-index:1;
}

.cardcs__back .cardcs__bottom{

    transform-origin:center top;
}

.flip .cardcs__back::before{

    animation:flipTop .3s ease-in both;

    transform-origin:center bottom;
}

.flip .cardcs__back .cardcs__bottom{

    animation:flipBottom .6s ease-out both;

    transform-origin:center top;
}

@keyframes flipTop{

    0%{

        transform:rotateX(0deg);

        z-index:2;
    }

    100%{

        transform:rotateX(-90deg);

        opacity:0;
    }
}

@keyframes flipBottom{

    0%{

        transform:rotateX(90deg);

        opacity:0;
    }

    50%{

        opacity:1;
    }

    100%{

        transform:rotateX(0deg);
    }
}

.flip-clock b{

display:block;

/* font-weight:normal; */
}

.flip-clock *,
.flip-clock *::before,
.flip-clock *::after{

    box-sizing:border-box;
}

/* =========================
   COMING SOON TITLE
========================= */

.coming-title{

    font-size:60px;

    font-weight:800;

    color:#1d2939;

    margin-bottom:15px;

    text-align:center;
}

.coming-subtitle{

    max-width:700px;

    margin:0 auto 50px;

    font-size:20px;

    line-height:1.8;

    color:#667085;

    text-align:center;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:768px){

    .coming-title{

        font-size:40px;
    }

    .coming-subtitle{

        font-size:16px;

        margin-bottom:35px;
    }

    .cardcs{

        font-size:60px;
    }

    .flip-clock__slot{

        font-size:14px;
    }
}

@media (max-width:576px){

    .cardcs{

        font-size:42px;
    }

    .flip-clock__piece{

        margin:0 5px;
    }

    .flip-clock__slot{

        font-size:12px;

        margin-top:10px;
    }

    .coming-title{

        font-size:32px;
    }

    .coming-subtitle{

        font-size:14px;
    }
}