#countdown {
    font-family: 'OmegaCT', Arial, Helveltica, sans-serif;
    display: flex;
    position: relative;
    color: #000;
    cursor: pointer;
}

._160x166 {
    width: 160px;
    height: 166px;
}

._160x266 {
    width: 160px;
    height: 266px;
}
._250x220 {
    width: 250px;
    height: 220px;
}
._300x250 {
    width: 300px;
    height: 250px;
}
._1600x175 {
    width: 1600px;
    height: 175px;
}

.countdown._red._160x166 {
  background-image: url(./images/bg_160x166_red.svg);
}
.countdown._red._160x266 {
  background-image: url(./images/bg_160x266_red.svg);
}
.countdown._red._250x220 {
  background-image: url(./images/bg_250x220_red.svg);
}
.countdown._red._300x250 {
  background-image: url(./images/bg_300x250_red.svg);
}

.countdown._grey._160x166 {
  background-image: url(./images/bg_160x166_grey.svg);
}
.countdown._grey._160x266 {
  background-image: url(./images/bg_160x266_grey.svg);
}
.countdown._grey._250x220 {
  background-image: url(./images/bg_250x220_grey.svg);
}
.countdown._grey._300x250 {
  background-image: url(./images/bg_300x250_grey.svg);
}

/* LOGO ---------------- */

.logo {
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: contain;
    width: 100%;
}

._grey .logo,
._white .logo {
    background-image: url(./images/logo-dakar-colors.svg);
}
._red .logo {
    background-image: url(./images/logo-dakar-white.svg);
}

._160x166 .logo {
    height: 75px;
    margin-top: 5px;
}
._160x266 .logo {
    height: 85px;
    margin-top: 15px;
}
._250x220 .logo {
    height: 115px;
    margin-top: 5px;
}
._300x250 .logo {
    height: 140px;
}


/* COUNTDOWN ------------------ */

.countdown-wrapper {
    position: absolute;
    display: flex;
    justify-content: space-around;
    width: 90%;
    margin: 0px 5px;
}

._grey._160x166 .countdown-wrapper {
    top: 83px;
}
._red._160x166 .countdown-wrapper {
    top: 93px;
}
._160x266 .countdown-wrapper {
    top: 119px;
}
._grey._250x220 .countdown-wrapper {
    top: 124px;
    margin-left: 7px;
}
._red._250x220 .countdown-wrapper {
    top: 136px;
    margin-left: 7px;
}
._300x250 .countdown-wrapper {
    top: 136px;
    margin-left: 9px;
    padding-top: 10px;
}

[data-role="time-unit-days"] {
    min-width: 23px;
}
._250x220 [data-role="time-unit-days"] {
    min-width: 27px;
}
._300x250 [data-role="time-unit-days"] {
    min-width: 35px;
}

/* labels ------------ */

.number {
    font-size: 14px;
    text-align: center;
}

._250x220 .number {
    font-size: 18px;
}
._300x250 .number {
    font-size: 22px;
}

.unit-label {
    font-size: 7px;
    text-transform: uppercase;
    text-align: center;
}

._250x220 .unit-label {
    font-size: 8px;
}
._300x250 .unit-label {
    font-size: 10px;
    margin-top: 3px;
}


/* TEXT----------------------- */

.countdown-text {
    font-size: 10px;
    text-align: center;
    position: absolute;
    top: 122px;
    width: 100%;
}
._red .countdown-text {
    color: white;
}
._160x166 .countdown-text {
    font-size: 9px;
    top: 118px;
}
._red._160x166 .countdown-text {
    top: 123px;
}
._160x266 .countdown-text {
    top: 165px;
}
._grey._250x220 .countdown-text {
    top: 175px;
}
._red._250x220 .countdown-text {
    top: 181px;
}
._300x250 .countdown-text {
    top: 204px;
    font-size: 12px;
}

.text-before {
    padding: 5px;
}
.text-after {
    display: none;
    padding: 10px;
}

._FR._grey._160x166 .countdown-text {
    top: 119px;
}
._FR._red._160x166 .countdown-text {
    top: 125px;
}
._FR._grey._250x220 .countdown-text {
    top: 174px;
}
._FR._160x166 .countdown-text .text-before {
    font-size: 8px;
}
._FR._250x220 .countdown-text .text-after,
._FR._300x250 .countdown-text .text-after {
    padding: 5px;
}

/* Clock-time ----------- */

.clock-time .countdown-wrapper {
    background-color: white;
    width: 80%;
    left: 10px;
}
._160x166.clock-time .countdown-wrapper {
    height: 24px;
    padding-top: 5px;
}
._160x266.clock-time .countdown-wrapper {
    top: 120px;
    padding-top: 4px;
    height: 24px;
}
._250x220.clock-time .countdown-wrapper {
    height: 35px;
    padding-top: 5px;
    left: 20px;
}
._red._250x220.clock-time .countdown-wrapper {
    top: 136px;
}
._300x250.clock-time .countdown-wrapper {
    top: 144px;
    height: 40px;
    left: 20px;
}

.clock-time .countdown-wrapper [data-role="hours"]:after,
.clock-time .countdown-wrapper [data-role="minutes"]:after {
    content: ":";
    margin-left: 15px;
}
._250x220.clock-time .countdown-wrapper [data-role="hours"]:after,
._250x220.clock-time .countdown-wrapper [data-role="minutes"]:after,
._300x250.clock-time .countdown-wrapper [data-role="hours"]:after,
._300x250.clock-time .countdown-wrapper [data-role="minutes"]:after {
    margin-left: 30px;
}

.clock-time .countdown-wrapper .unit-label {
    display: none;
}
.clock-time .countdown-text .text-before {
    display: none;
}
.clock-time .countdown-text .text-after {
    display: block;
}