.timer-progress {
  font-size: 36px;
  font-weight: 400;
  color: #ffffff;
  font-family: 'Saira Condensed', sans-serif;
  text-align: center;
  line-height: normal;
  width: 90px;
  height: 90px;
  position: relative; }
  .timer-progress .digit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

.timer-wrapper {
  display: flex;
  flex-direction: column; }

.text {
  color: #ffffff;
  text-align: center;
  font-family: 'Saira Condensed', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 12px; }

.timer-circle {
  width: 90px;
  height: 90px;
  transform: rotate(-82deg); }

.timer-circle__background {
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1.5px; }

.timer-circle__progress {
  fill: none;
  stroke-linecap: round;
  stroke: url(#timer-gradient);
  stroke-dasharray: 100 100;
  stroke-width: 1.5px; }

.timer-stop01 {
  stop-color: #67003B; }

.timer-stop02 {
  stop-color: #790033; }

.timer-stop03 {
  stop-color: #8B002B; }

.timer-stop04 {
  stop-color: #9D0023; }

.timer-stop05 {
  stop-color: #AF001B; }

.timer-stop06 {
  stop-color: #C10013; }

.timer-stop07 {
  stop-color: #D3000B; }

.timer-stop08 {
  stop-color: #E50003; }

.timer-stop09 {
  stop-color: #F70003; }

.timer-stop10 {
  stop-color: #FF0003; }

.timer-stop11 {
  stop-color: #DB0010; }

@media (max-width: 768px) {
  .timer-progress {
    width: 67.5px;
    height: 67.5px;
    font-size: 27px; }

  .timer-circle {
    width: 67.5px;
    height: 67.5px;
    transform: rotate(-82deg); }

  .text {
    font-size: 14px;
    margin-top: 9px; } }

/*# sourceMappingURL=timer.css.map */