#timer li {
  display: inline-block;
  font-size: 0.9em;
  list-style-type: none;
  text-transform: uppercase;
  margin: auto 0;
}
#timer.start li{
  color: #e7ba67;
}
#timer.before li{
  color: #fff;
}
#timer.start h5.startOffer{
  display: block;
  color: #e7ba67;
  margin: 0!important;
}
#timer.start h5.beforeOffer{
  display: none;
  margin: 0!important;
}
#timer.before h5.startOffer{
  display: none;
}
#timer.before h5.beforeOffer{
  display: block;
  color: #fff;
}

#timer li span {
  display: flex;
  font-size: 1.2rem;
  width: 50px;
  height: 20px;
  border-radius: 10px;
  align-items:center;
  justify-content:center;
  color: #000;
  margin-bottom: 10px;
}

#timer.start li span{
  background-color: #e7ba67;
}
#timer.before li span{
  background-color: #fff;
}


@media all and (max-width: 768px) {
  
  #timer li {
    font-size: calc(1.125rem * var(--smaller));
  }
  
  #timer li span {
    font-size: calc(3.375rem * var(--smaller));
  }
}