:root { --e-global-color-primary: #FFD012; --e-global-color-secondary: #0B3665; } .eel-cntdwn { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; justify-content: center; } .eel-cntdwn-days-label, .eel-cntdwn-hours-label, .eel-cntdwn-minutes-label, .eel-cntdwn-seconds-label { color: var(--e-global-color-secondary); justify-content: center; font-size: 14px; line-height: 1.4; font-weight: 300; } .eel-cntdwn-days, .eel-cntdwn-hours, .eel-cntdwn-minutes, .eel-cntdwn-seconds { text-align: center; display: inline-block; font-size: 44px; font-weight: 400; line-height: 1; color: var(--e-global-color-primary); } .eel-cntdwn-item { position: relative; } /* divider bullets style */ .eel-cntdwn-bullets::before, .eel-cntdwn-bullets::after { content: ""; display: block; width: 6px; height: 6px; background: var(--e-global-color-secondary); position: absolute; left: 112%; bottom: 30%; } .eel-cntdwn-bullets::after { bottom: inherit; top: 35%; } .eel-cntdwn-bullets:last-child::after, .eel-cntdwn-bullets:last-child::before { display: none; } /* divider Dash style */ .eel-cntdwn-dash::before { content: ""; display: block; width: 10px; height: 5px; background: var(--e-global-color-secondary); position: absolute; left: 110%; top: 50%; transform: translateY(-50%); } .eel-cntdwn-dash:last-child::before { display: none; } @media screen and (max-width: 767px) { .eel-cntdwn-days-label, .eel-cntdwn-hours-label, .eel-cntdwn-minutes-label, .eel-cntdwn-seconds-label { font-size: 12px; } .eel-cntdwn-days, .eel-cntdwn-hours, .eel-cntdwn-minutes, .eel-cntdwn-seconds { font-size: 22px; } }