#timer h1 {
  font-weight: normal;
}
#timer .hide{
    display:none;
}
#timer .message li{
    display:block;
    font-size: 4.5rem;
}
#timer li {
  display: inline-block;
  /*font-size: 1.5em;*/
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}

#timer li span {
  display: block;
  font-size: 4.5rem;
  
}
#timer li{
  font-family: rhode-wide, sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.0375rem;}
@media (min-width: 1024px) {
    #timer li {
      font-size: 24px;
      letter-spacing: 0.04688rem; } }
#timer {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #ffd54f;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Roboto, 
    Oxygen-Sans, 
    Ubuntu, 
    Cantarell, 
    "Helvetica Neue", 
    sans-serif;
}

.timer {
  color: #333;
  margin: 0 auto;
  padding: 0.5rem;
  text-align: center;
}
.timer h1 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  padding-right: 7.5px;
  padding-left: 7.5px;
  font-family: rhode-wide, sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 26px;
  text-transform: uppercase;
  letter-spacing: 0.04688rem;
  text-align: center;
  margin-top: 10px; }
@media (min-width: 360px) {
  .timer h1 {
      padding-right: 7.5px;
      padding-left: 7.5px; } }
@media (min-width: 640px) {
  .timer h1 {
      padding-right: 12.5px;
      padding-left: 12.5px; } }
@media (min-width: 1024px) {
  .timer h1 {
      padding-right: 12.5px;
      padding-left: 12.5px; } }
@media (min-width: 1200px) {
  .timer h1 {
      padding-right: 15px;
      padding-left: 15px; } }
@media (min-width: 1024px) {
  .timer h1 {
      font-size: 30px;
      line-height: 37px; } }