.countdown {
  text-align: center;
  max-width: 160px;
  padding: 0 20px;
}
.countdown-text {
  margin-top: 10px;
}
.countdown-wrapper {
  width: 100px;
  height: 100px;
  background: @brand-primary;
  border-radius: 50px;
  padding: 7px;
  position: relative;
  margin: 0 auto;
  .countdown-inner {
    background: lighten(@brand-primary, 20%);
    display: block;
    height: 86px;
    width: 86px;
    border-radius: 43px;
  }
  .path {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    stroke: white;
    .animation(dash 120s linear forwards);
  }
  .timer {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    line-height: 70px;
    text-align: center;
    color: white;
    background: @brand-primary;
    border-radius: 35px;
    font-family: @headings-font-family;
    font-size: 28px;
  }
  svg {
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}
@-webkit-keyframes dash {.dash;}
@-moz-keyframes dash {.dash;}
@-ms-keyframes dash {.dash;}
@-o-keyframes dash {.dash;}
@keyframes dash {.dash;}

.dash () {
  from {
    stroke-dashoffset: 283;
    stroke-dasharray: 283;
  }
  to {
    stroke-dashoffset: 0;
    stroke-dasharray: 283;
  }
}