@font-face {
  font-family: 'dincondensedcregular';
  src: url("pt_din_condensed_cyrillic-webfont.eot");
  src: url("pt_din_condensed_cyrillic-webfont.eot?#iefix") format("embedded-opentype"), url("pt_din_condensed_cyrillic-webfont.woff2") format("woff2"), url("pt_din_condensed_cyrillic-webfont.woff") format("woff"), url("pt_din_condensed_cyrillic-webfont.ttf") format("truetype"), url("pt_din_condensed_cyrillic-webfont.svg#dincondensedcregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
body {margin: 0;}
.clock-wrapper {
  width: 300px;
  height: 200px;
  position: relative;
  background: url("../images/legacy-countdown.jpg");
}

.logo {
  position: absolute;
  left: 52px;
  top: 26px; }

.clock {
  font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
  font-weight: 600;
  font-stretch: condensed;
  position: relative;
  width: 244px;
  margin: 0 auto;
  height: 78px;
  top: 95px;
  color: #fff;
}
.clock ul {
  margin: 0 auto 0 -4px;
  -webkit-transition: all 0.1s;
          transition: all 0.1s;
  padding: 60px 0 0 0;
  text-align: center;
}
.clock li {
  position: relative;
  display: inline-block;
  font: 600 33px "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
  font-stretch: condensed;
  text-align: center;
  color: #fff;
}
.clock li:after {
  content: '';  
  font: 200 13px 'dincondensedcregular', 'Open Sans', sans-serif;
  font-stretch: condensed;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  color: #fff;
  opacity: .6;
}
.clock li:not(.colon) {
  width: 38px;
  top: -1px;
}
.clock .colon {
  position: absolute;
  color: #fff;
  font: 32px "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
}
  .clock .seconds {
    margin-left: 12px;
  }
    .clock .seconds:after {
      content: 'seconds';
      left: -1px; }
  .clock .minutes {
    margin-left: 12px;
    margin-right: 1px; }
    .clock .minutes:after {
      content: 'minutes';
      left: 0; }
  .clock .hours {
    margin-left: 12px;
    margin-right: 1px; }
    .clock .hours:after {
      content: 'hours';
      left: 0; }
  .clock .days:after {
    content: 'days'; }
  .clock .transparent {
    opacity: 0; }