/* Global */
/* Desktop */
/* Tablet */
/* Mobile */
* {
  box-sizing: border-box; }

body {
  background: #ECF0F1;
  font-family: sans-serif; }

.clock {
  background-color: #ECF0F1;
  padding: 10px; }
  @media only screen and (max-width: 40.063em) {
    .clock {
      min-width: 430px; } }

.digit {
  width: 60px;
  height: 120px;
  background-color: #ECF0F1;
  position: relative;
  display: inline-block; }
  @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
    .digit {
      width: 40px;
      height: 80px; } }
  @media only screen and (max-width: 40.063em) {
    .digit {
      width: 30px;
      height: 60px; } }

.dots {
  display: inline-block;
  width: 20px;
  height: 120px;
  position: relative;
  background-color: #ECF0F1; }
  @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
    .dots {
      width: 12px;
      height: 80px; } }
  @media only screen and (max-width: 40.063em) {
    .dots {
      width: 10px;
      height: 60px; } }
  .dots:before, .dots:after {
    width: 10px;
    height: 10px;
    left: 5px;
    content: '';
    position: absolute;
    background: #990000; }
    @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
      .dots:before, .dots:after {
        width: 6px;
        height: 6px;
        left: 3px; } }
    @media only screen and (max-width: 40.063em) {
      .dots:before, .dots:after {
        width: 5px;
        height: 5px;
        left: 2.5px; } }
  .dots:before {
    top: 30px; }
    @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
      .dots:before {
        top: 18px; } }
    @media only screen and (max-width: 40.063em) {
      .dots:before {
        top: 15px; } }
  .dots:after {
    bottom: 30px; }
    @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
      .dots:after {
        bottom: 18px; } }
    @media only screen and (max-width: 40.063em) {
      .dots:after {
        bottom: 15px; } }

.side {
  position: absolute;
  border: 10.2px solid transparent;
  opacity: 0;
  transition: opacity 0.5s ease; }
  @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
    .side {
      border: 6.8px solid transparent; } }
  @media only screen and (max-width: 40.063em) {
    .side {
      border: 5.1px solid transparent; } }

.d1 {
  top: 2.4px;
  left: 3.6px;
  width: 52.8px;
  height: 0;
  border-top-color: #990000; }
  @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
    .d1 {
      top: 1.6px;
      left: 2.4px;
      width: 35.2px; } }
  @media only screen and (max-width: 40.063em) {
    .d1 {
      top: 1.2px;
      left: 1.8px;
      width: 26.4px; } }

.d2 {
  top: 3.6px;
  left: 2.4px;
  height: 54px;
  border-bottom-width: 6px;
  width: 0;
  border-left-color: #990000; }
  @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
    .d2 {
      top: 4px;
      left: 1.6px;
      height: 33.6px;
      border-bottom-width: 4px; } }
  @media only screen and (max-width: 40.063em) {
    .d2 {
      top: 2px;
      left: 1.2px;
      height: 27px;
      border-bottom-width: 3px; } }

.d3 {
  top: 3.6px;
  right: 2.4px;
  height: 54px;
  border-bottom-width: 6px;
  border-right-color: #990000;
  width: 0; }
  @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
    .d3 {
      top: 4px;
      right: 1.6px;
      height: 33.6px;
      border-bottom-width: 4px; } }
  @media only screen and (max-width: 40.063em) {
    .d3 {
      top: 1.8px;
      right: 1.2px;
      height: 27px;
      border-bottom-width: 3px; } }

.d4 {
  position: relative;
  width: 60px;
  border: 0;
  background: pink; }
  @media only screen and (max-width: 40.063em) {
    .d4 {
      width: 30px; } }
  .d4:before {
    position: absolute;
    top: 48px;
    box-sizing: border-box;
    content: "";
    display: block;
    margin-left: 3.6px;
    width: 52.2px;
    border: 6px solid transparent;
    border-left-width: 10.2px;
    border-right-width: 10.2px;
    border-bottom-color: #990000; }
    @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
      .d4:before {
        top: 33px;
        margin-left: 3.2px;
        width: 34px;
        border: 3.2px solid transparent;
        border-left-width: 6.8px;
        border-right-width: 6.8px;
        border-bottom-color: #990000; } }
    @media only screen and (max-width: 40.063em) {
      .d4:before {
        top: 24px;
        margin-left: 1.8px;
        width: 25.8px;
        border: 3px solid transparent;
        border-left-width: 5.1px;
        border-right-width: 5.1px;
        border-bottom-color: #990000; } }
  .d4:after {
    position: absolute;
    top: 60px;
    box-sizing: border-box;
    content: "";
    display: block;
    margin-left: 3.6px;
    width: 52.2px;
    border: 6px solid transparent;
    border-left-width: 10.2px;
    border-right-width: 10.2px;
    border-top-color: #990000; }
    @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
      .d4:after {
        top: 39px;
        margin-left: 4px;
        width: 32.4px;
        border: 4px solid transparent;
        border-left-width: 6.8px;
        border-right-width: 6.8px;
        border-top-color: #990000; } }
    @media only screen and (max-width: 40.063em) {
      .d4:after {
        top: 30px;
        margin-left: 1.8px;
        width: 25.8px;
        border: 3px solid transparent;
        border-left-width: 5.1px;
        border-right-width: 5.1px;
        border-top-color: #990000; } }

.d5 {
  bottom: 3.6px;
  right: 2.4px;
  height: 54px;
  border-top-width: 6px;
  border-right-color: #990000;
  width: 0; }
  @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
    .d5 {
      bottom: 4px;
      right: 1.6px;
      height: 36px;
      border-top-width: 4px; } }
  @media only screen and (max-width: 40.063em) {
    .d5 {
      bottom: 1.8px;
      right: 1.2px;
      height: 27px;
      border-top-width: 3px; } }

.d6 {
  bottom: 3.6px;
  left: 2.4px;
  height: 54px;
  border-top-width: 6px;
  border-left-color: #990000;
  width: 0; }
  @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
    .d6 {
      bottom: 4px;
      left: 1.6px;
      height: 36px;
      border-top-width: 4px; } }
  @media only screen and (max-width: 40.063em) {
    .d6 {
      bottom: 1.8px;
      left: 1.2px;
      height: 27px;
      border-top-width: 3px; } }

.d7 {
  bottom: 2.4px;
  left: 3.6px;
  width: 52.8px;
  height: 0;
  border-bottom-color: #990000; }
  @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
    .d7 {
      bottom: 1.6px;
      left: 2.4px;
      width: 35.2px; } }
  @media only screen and (max-width: 40.063em) {
    .d7 {
      bottom: 1.2px;
      left: 1.8px;
      width: 26.4px; } }

/* 1 */
.digit.one .d3,
.digit.one .d5 {
  opacity: 1; }

/* 2 */
.digit.two .d1,
.digit.two .d3,
.digit.two .d4,
.digit.two .d6,
.digit.two .d7 {
  opacity: 1; }

/* 3 */
.digit.three .d1,
.digit.three .d3,
.digit.three .d4,
.digit.three .d5,
.digit.three .d7 {
  opacity: 1; }

/* 4 */
.digit.four .d2,
.digit.four .d3,
.digit.four .d4,
.digit.four .d5 {
  opacity: 1; }

/* 5 */
.digit.five .d1,
.digit.five .d2,
.digit.five .d4,
.digit.five .d5,
.digit.five .d7 {
  opacity: 1; }

/* 6 */
.digit.six .d1,
.digit.six .d2,
.digit.six .d4,
.digit.six .d5,
.digit.six .d6,
.digit.six .d7 {
  opacity: 1; }

/* 7 */
.digit.seven .d1,
.digit.seven .d3,
.digit.seven .d5 {
  opacity: 1; }

/* 8 */
.digit.eight .d1,
.digit.eight .d2,
.digit.eight .d3,
.digit.eight .d4,
.digit.eight .d5,
.digit.eight .d6,
.digit.eight .d7 {
  opacity: 1; }

/* 9 */
.digit.nine .d1,
.digit.nine .d2,
.digit.nine .d3,
.digit.nine .d4,
.digit.nine .d5 {
  opacity: 1; }

/* 0 */
.digit.zero .d1,
.digit.zero .d2,
.digit.zero .d3,
.digit.zero .d5,
.digit.zero .d6,
.digit.zero .d7 {
  opacity: 1; }

/* Labels */
.labels {
  display: block;
  margin-top: 0;
  background-color: #FFF; }

.each {
  width: 140px;
  height: 150px;
  position: relative;
  display: inline-block;
  font-size: 0.7em;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center; }
  @media only screen and (min-width: 40.064em) and (max-width: 49.999em) {
    .each {
      width: 92px;
      height: 110px; } }
  @media only screen and (max-width: 40.063em) {
    .each {
      width: 70px;
      height: 90px;
      font-size: 0.6em; } }
  .each .text {
    position: absolute;
    bottom: 0;
    text-align: center;
    margin: 0;
    display: block;
    width: 100%; }

.years {
  /*display: none;*/ }

.seconds .dots {
  display: none; }