.countdown-title {
  /*color: #396;*/
  text-align: center;
  /*font-weight: 100;*/
  font-size: x-large;
  margin: 20px 10px 20px;
}

.countdown-numbers {
    text-align: center;
}

.countdown-number {
    padding: 10px;
    border-radius: 3px;
    display: inline-block;
}

.countdown-time {
    padding: 15px;
    border-radius: 50px;
    background: #395F68;
    color: #fff;
    display: inline-block;
}



.countdown-text {
  display: block;
  padding-top: 5px;

  text-align: center;

}

.finish_date {
    color: #fff;
    text-align: center;

    font-size: 1.2rem;
    font-weight: 500;

    margin: 30px auto 20px;
    padding: 8px 15px;

    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;

    width: fit-content;
}



.countdown-image {
    text-align: center;
}

.countdown-image img {
    width: 200px;
    height: 200px;
    object-fit: contain;
}
.countdown-event {
    overflow: hidden;
    white-space: nowrap;

    margin: 5px 0 10px;


    color: rgba(155, 83, 151, 0.75);
    font-size: 1.4rem;

    mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
}

.countdown-event span {
    display: inline-block;
    padding-left: 100%;

    animation: countdown-marquee 15s linear infinite;
}

@keyframes countdown-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.countdown-event::after {
    content: '';
}

.countdown-repeat {
    display: inline-block;

    margin-left: 8px;

    font-size: 0.8em;

    opacity: 0.7;

    cursor: help;
}

@media (max-width: 480px) {

    .countdown-number {
        padding: 5px;
    }

    .countdown-time {
        padding: 10px;
    }

    .countdown-text {
        font-size: 0.85rem;
    }
}