#clockwork-orange {
    text-align: start;
  position: relative;
}

#HMSremainingDay {
  position: absolute;
  top: 20%;
  right: 46%;
  font-family: futura;
  color: #fefefe;
  max-width: 100px;
  max-height: 130px;
  width: 16%;
  height: auto;
}

@media (min-width: 1024px){
    #HMSremainingDay {
        right: 40%;
    }
    #HMSremainingHour {
        right: 27%;
    }
    #HMSremainingMinute {
        right: 14%;
    }
    #HMSremainingSecond {
        right: 1%;
    }
}
@media (max-width: 767px){
    #HMSLetterImage {
        width: 75%;
    }
}

@media (min-width: 768px){
    #HMSLetterImage {
        width: 65%;
    }
}


@media (max-width: 640px){
  #clockwork-orange #HMSremainingDay {
    width: 16%;
    right: 46%;
    top: 20%;
  }
}

#HMSremainingHour {
  position: absolute;
  top: 20%;
  right: 31%;
  font-family: futura;
  color: #fefefe;
  max-width: 100px;
  max-height: 130px;
  width: 16%;
  height: auto;
}

@media (max-width: 640px){
  #clockwork-orange #HMSremainingHour {
    width: 16%;
    right: 31%;
    top: 20%;
  }
}

#HMSremainingHourImage {
  max-width: 100%;
  height: auto;
    position: absolute;
    bottom: 1%;
}

#HMSremainingMinuteImage {
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 1%;
}

#HMSremainingSecondImage {
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 1%;
}

#HMSremainingMinute {
  position: absolute;
  top: 20%;
  right: 16%;
  font-family: futura;
  color: #fefefe;
  max-width: 100px;
  max-height: 130px;
  width: 16%;
  height: auto;
}

@media (max-width: 640px){
  #clockwork-orange #HMSremainingMinute {
    width: 16%;
    right: 16%;
    top: 20%;
  }
}

#HMSremainingSecond {
  position: absolute;
  top: 20%;
  right: 1%;
  font-family: futura;
  color: #fefefe;
  max-width: 100px;
  max-height: 130px;
  width: 16%;
  height: auto;
}

@media (max-width: 640px){
  #clockwork-orange #HMSremainingSecond {
    width: 16%;
    right: 1%;
    top: 20%;
  }
}


.lotd-HMSremaining {
    display: inline-block;
}

.lotd-HMSremainingText {
    position: relative;
    width: 100%;
    font-size: 58px;
    bottom: 35px;
    letter-spacing: 4px;
    padding-left: 15%;
}


@media only screen and (max-width: 320px) {
    .lotd-HMSremainingText {
        font-size: 20px;
        bottom: 10px;
        letter-spacing: 2px;
        padding-left: 22%;
    }
}

@media only screen and (min-width: 321px) and (max-width: 479px) {
    .lotd-HMSremainingText {
        font-size: 30px;
        bottom: 16px;
        letter-spacing: 3px;
        padding-left: 15%;
    }
}

@media only screen and (min-width: 479px) and (max-width: 639px) {
    .lotd-HMSremainingText {
        font-size: 40px;
        bottom: 19px;
        letter-spacing: 3px;
        padding-left: 15%;
    }
}

@media only screen and (min-width: 640px) and (max-width: 767px) {
    .lotd-HMSremainingText {
        font-size: 44px;
        bottom: 35px;
        letter-spacing: 3px;
        padding-left: 20%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .lotd-HMSremainingText {
        font-size: 54px;
        bottom: 30px;
        letter-spacing: 3px;
        padding-left: 16%;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) {
    .lotd-HMSremainingText {
        font-size: 58px;
        bottom: 35px;
        letter-spacing: 3px;
        padding-left: 15%;
    }
}

.HMSremainingText {
  position: absolute;
  width: 100%;
  top: 0px;
  right: 0px;
  margin-top: 15%;
  padding-left: 12%;
  letter-spacing: 7px;
  font-size: 52px;
}

@media (max-width: 640px){
  .HMSremainingText {
    padding-left: 11%;
  }
}

@media (max-width: 1024px) {
  .HMSremainingText {
    font-size: 45px;
  }
}

@media (max-width: 768px) {
  .HMSremainingText {
    font-size: 25px;
    margin-top: 25%;

  }
}

@media (max-width: 640px) {
  .HMSremainingText {
    font-size: 22px;
    margin-top: 20%;
  }
}

@media (max-width: 480px) {
  .HMSremainingText {
    font-size: 14px;
    margin-top: 20% ;
  }
}

@media (max-width: 320px) {
  .HMSremainingText {
    font-size: 11px;
    margin-top: 20%;
  }
}

#HMSremainingHour #HMSremainingHourImage {
  max-width: 100%;
  height: auto;
  width: auto\9;
}