.countdownHolder {
  width: 850px;
  margin: 0 auto;
  font: 80px/1.5 "Open Sans Condensed", sans-serif;
  text-align: center;
  letter-spacing: -3px;
}
@media screen and (min-width: 300px) and (max-width: 480px) {
  .countdownHolder {
    width: 100% !important;
    font: 33px/1.5 "Open Sans Condensed", sans-serif !important;
  }
}
@media screen and (min-width: 480px) and (max-width: 758px) {
  .countdownHolder {
    width: 100% !important;
    font: 50px/1.5 "Open Sans Condensed", sans-serif !important;
  }
}

@media screen and (min-width: 758px) and (max-width: 992px) {
  .countdownHolder {
    width: 100% !important;
    font: 60px/1.5 "Open Sans Condensed", sans-serif !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .countdownHolder {
    width: 850px !important;
    font: 80px/1.5 "Open Sans Condensed", sans-serif !important;
  }
}
.position {
  display: inline-block;
  height: 1.6em;
  overflow: hidden;
  position: relative;
  width: 1em;
}

.digit {
  position: absolute;
  display: block;
  width: 1em;
  background-color: #444;
  border-radius: 0.2em;
  text-align: center;
  color: #fff;
  letter-spacing: -1px;
}

.digit.static {
  box-shadow: 1px 1px 1px rgba(4, 4, 4, 0.35);

  background-image: linear-gradient(bottom, #3a3a3a 50%, #444444 50%);
  background-image: -o-linear-gradient(bottom, #3a3a3a 50%, #444444 50%);
  background-image: -moz-linear-gradient(bottom, #3a3a3a 50%, #444444 50%);
  background-image: -webkit-linear-gradient(bottom, #3a3a3a 50%, #444444 50%);
  background-image: -ms-linear-gradient(bottom, #3a3a3a 50%, #444444 50%);

  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.5, #3a3a3a),
    color-stop(0.5, #444444)
  );
}
.countSeconds {
  position: relative;
}
.countSeconds::after {
  position: absolute;
  content: "ثانیه";
  top:-100px;
  right: 0;
  left: 0;
  margin: auto;
  font-size: 23px;
}
.countMinutes {
  position: relative;
}
.countMinutes::after {
  position: absolute;
  content: "دقیقه";
  top:-100px;
  right: 0;
  left: 0;
  margin: auto;
  font-size: 23px;
}
.countHours {
  position: relative;
}
.countHours::after {
  position: absolute;
  content: "ساعت";
  top:-100px;
  right: 0;
  left: 0;
  margin: auto;
  font-size: 23px;
}
.countDays {
  position: relative;
}
.countDays::after {
  position: absolute;
  content: "روز";
  top:-100px;
  right: 0;
  left: 0;
  margin: auto;
  font-size: 23px;
}

/**
 * You can use these classes to hide parts
 * of the countdown that you don't need.
 */

.countDays {
  /* display:none !important;*/
}
.countDiv0 {
  /* display:none !important;*/
}
.countHours {
}
.countDiv1 {
}
.countMinutes {
}
.countDiv2 {
}
.countSeconds {
}

.countDiv {
  display: inline-block;
  width: 16px;
  height: 1.6em;
  position: relative;
}

.countDiv:before,
.countDiv:after {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #444;
  border-radius: 50%;
  top: 0.5em;
  content: "";
  left: 0;
  right: 0;
  margin: auto;
}

.countDiv:after {
  top: 0.9em;
}