.circle {
    position: relative;
    width: 220px;
    height: 220px;
    margin: auto;
}
.e-c-base {
    fill: none;
    stroke: #ddd;
    stroke-width: 10;
}
.e-c-progress {
    fill: none;
    stroke: #c33400; /* rojo */
    stroke-width: 10;
    stroke-dasharray: 628; /* 2*pi*r = 2*3.14*100 */
    stroke-dashoffset: 628;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset 1s linear;
}
.display-remain-time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-family: Arial, sans-serif;
    color: #333;
}