.CE21_TIMER_BOX.bg-yellow:before {
    background-color: #eebb33 !important;
}

.CE21_TIMER_BOX.bg-green:before {
    background-color: #008140 !important;
}

.CE21_TIMER_BOX.bg-blue:before {
    background-color: #034c9d !important;
}

.CE21_TIMER_BOX.bg-red:before {
    background-color: #ed0000 !important;
}

.CE21_TIMER_BOX.timer-box {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    background-image: url(https://cdn.ce21.com/global/countdown-timer-background-img.jpg);
    display: none;
}

    .CE21_TIMER_BOX.timer-box:before {
        content: "";
        background-color: #f5f5f5;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.8;
    }

    .CE21_TIMER_BOX.timer-box > div {
        position: relative;
    }

    .CE21_TIMER_BOX.timer-box .timer-block {
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: center;
    }

    .CE21_TIMER_BOX.timer-box .timer-detail-section {
        display: inline-flex;
        flex-direction: column;
    }

        .CE21_TIMER_BOX.timer-box .timer-detail-section strong {
            font-size: 70px;
            font-weight: 800;
            color: #000;
            line-height: 70px;
            transition: 0.3s all ease-in;
        }

        .CE21_TIMER_BOX.timer-box .timer-detail-section span {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }

    .CE21_TIMER_BOX.timer-box .times-dots {
        font-size: 70px;
        margin: 0px 40px;
        line-height: 70px;
        transition: 0.3s all ease-in;
        color: #565656;
    }



@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.CE21_TIMER_BOX .timer-detail-section .animate__flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@media (max-width: 991px) {
    .CE21_TIMER_BOX.timer-box .timer-detail-section strong, .CE21_TIMER_BOX.timer-box .times-dots {
        font-size: 50px;
        line-height: 50px;
    }

    .CE21_TIMER_BOX.timer-box .times-dots {
        margin: 0 30px;
    }
}

@media (max-width: 900px) {
    .CE21_TIMER_BOX.timer-box .times-dots {
        margin: 0 15px;
    }
}

@media (max-width: 767px) {
    .CE21_TIMER_BOX.timer-box .timer-detail-section strong, .CE21_TIMER_BOX.timer-box .times-dots {
        font-size: 50px;
        line-height: 50px;
    }

    .CE21_TIMER_BOX.timer-box .times-dots {
        margin: 0 25px;
    }
}

@media (max-width: 576px) {
    .CE21_TIMER_BOX.timer-box .timer-detail-section strong, .CE21_TIMER_BOX.timer-box .times-dots {
        font-size: 40px;
        line-height: 40px;
    }

    .CE21_TIMER_BOX.timer-box .times-dots {
        margin: 0 8px;
    }
}

@media (max-width: 380px) {
    .CE21_TIMER_BOX.timer-box .timer-detail-section strong, .CE21_TIMER_BOX.timer-box .times-dots {
        font-size: 24px;
        line-height: 24px;
    }

    .CE21_TIMER_BOX.timer-box .times-dots {
        margin: 0 0;
    }
}


@media (max-width: 576px) {
    .CE21_TIMER_BOX.timer-box {
        padding: 30px 0;
    }
    .timer-box .timer-detail-section strong, .timer-box .times-dots {
        font-size: 32px;
        line-height: 40px;
    }
    .timer-box .timer-detail-section strong, .timer-box .times-dots {
        font-size: 32px;
        line-height: 40px;
    }
    .timer-box .timer-detail-section span{
        font-size: 13px;
    }
}