.countdownbar { position: relative; display: block; margin-top: 60px; width: 100%; height: 10px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: var(--lightgrey); }

.countdownbar span.innerbar { height:100%; background-color: var(--pink); position: relative; display: block; }
.countdownbar span.pointer { position: absolute; right: 0; bottom: 25px; background-color: var(--pink); color: #fff; padding: 8px 15px; transform: translateX(50%); border-radius: 3px; white-space: nowrap; }
.countdownbar span.pointer:after { position: absolute; content: ""; background-color: var(--pink); width: 10px; height: 10px; bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg); }

.countdownbar .date { position: absolute; }
.countdownbar .date.start { left: 0; }
.countdownbar .date.end { right: 0; }

.row.countdown .countdownbar { border-radius: 0; }

@media screen and (max-width: 600px) {
    
    .countdownbar { margin-top: 50px; width: 100%; border-radius: 0; }

}