/*-------------------------
    The clocks
--------------------------*/
#dgc_clock {
  border-radius: 5px;
  margin: 15px 0;
}

#dgc_clock .display {
  text-align: center;
  padding: 40px 20px 20px;
  border-radius: 6px;
  position: relative;
  height: 110px;
}

/*-------------------------
	Light color theme
--------------------------*/
#dgc_clock.light {
  background-color: #f3f3f3;
  color: #272e38;
}

#dgc_clock.light .display {
  background-color: #dddddd;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08) inset, 0 1px 1px #fafafa;
}

#dgc_clock.light .digits div span {
  background-color: #272e38;
  border-color: #272e38;
}

#dgc_clock.light .alarm {
  background: url("../img/alarm_light.jpg");
}

/*-------------------------
	Dark color theme
--------------------------*/
#dgc_clock.dark {
  background-color: #272e38;
  color: #cacaca;
}

#dgc_clock.dark .display {
  background-color: #0f1620;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08) inset, 0 1px 1px #2d3642;
}

#dgc_clock.dark .digits div span {
  background-color: #cacaca;
  border-color: #cacaca;
}

#dgc_clock.dark .alarm {
  background: url("../img/alarm_dark.jpg");
}

/*-------------------------
	The Digits
--------------------------*/
#dgc_clock .digits div {
  text-align: left;
  position: relative;
  width: 27px;
  height: 50px;
  display: inline-block;
  margin: 0 4px;
}

#dgc_clock .digits div span {
  opacity: 0;
  position: absolute;
  transition: 0.25s;
}

/* Digit states */
#dgc_clock .digits div.one .d5,
#dgc_clock .digits div.one .d7,
#dgc_clock .digits div.two .d1,
#dgc_clock .digits div.two .d5,
#dgc_clock .digits div.two .d2,
#dgc_clock .digits div.two .d6,
#dgc_clock .digits div.two .d3,
#dgc_clock .digits div.three .d1,
#dgc_clock .digits div.three .d5,
#dgc_clock .digits div.three .d2,
#dgc_clock .digits div.three .d7,
#dgc_clock .digits div.three .d3,
#dgc_clock .digits div.four .d5,
#dgc_clock .digits div.four .d2,
#dgc_clock .digits div.four .d4,
#dgc_clock .digits div.four .d7,
#dgc_clock .digits div.five .d1,
#dgc_clock .digits div.five .d2,
#dgc_clock .digits div.five .d4,
#dgc_clock .digits div.five .d3,
#dgc_clock .digits div.five .d7,
#dgc_clock .digits div.six .d1,
#dgc_clock .digits div.six .d2,
#dgc_clock .digits div.six .d4,
#dgc_clock .digits div.six .d3,
#dgc_clock .digits div.six .d6,
#dgc_clock .digits div.six .d7,
#dgc_clock .digits div.seven .d1,
#dgc_clock .digits div.seven .d5,
#dgc_clock .digits div.seven .d7,
#dgc_clock .digits div.eight .d1,
#dgc_clock .digits div.eight .d2,
#dgc_clock .digits div.eight .d3,
#dgc_clock .digits div.eight .d4,
#dgc_clock .digits div.eight .d5,
#dgc_clock .digits div.eight .d6,
#dgc_clock .digits div.eight .d7,
#dgc_clock .digits div.nine .d1,
#dgc_clock .digits div.nine .d2,
#dgc_clock .digits div.nine .d3,
#dgc_clock .digits div.nine .d4,
#dgc_clock .digits div.nine .d5,
#dgc_clock .digits div.nine .d7,
#dgc_clock .digits div.zero .d1,
#dgc_clock .digits div.zero .d3,
#dgc_clock .digits div.zero .d4,
#dgc_clock .digits div.zero .d5,
#dgc_clock .digits div.zero .d6,
#dgc_clock .digits div.zero .d7 {
  opacity: 1;
}

/*-------------------------
	The Alarm
--------------------------*/
#dgc_clock .alarm {
  width: 16px;
  height: 16px;
  bottom: 20px;
  background: url("../img/alarm_light.jpg");
  position: absolute;
  opacity: 0.2;
}

#dgc_clock .alarm.active {
  opacity: 1;
}

/*-------------------------
	Weekdays
--------------------------*/
#dgc_clock .weekdays {
  font-size: 12px;
  position: absolute;
  width: 100%;
  top: 10px;
  left: 0;
  text-align: center;
}

#dgc_clock .weekdays span {
  opacity: 0.2;
  padding: 0 7px;
}

#dgc_clock .weekdays span.active {
  opacity: 1;
}

/*-------------------------
			AM/PM
--------------------------*/
#dgc_clock .ampm {
  position: absolute;
  bottom: 33px;
  right: 4px;
  font-size: 11px;
}

/************************************
					Clock - 2
*************************************/
@font-face {
  font-family: "BebasNeueRegular";
  src: url("../fonts/BebasNeue-webfont.eot");
  src: url("../fonts/BebasNeue-webfont.eot?#iefix") format("embedded-opentype"),
    url("../fonts/BebasNeue-webfont.woff") format("woff"),
    url("../fonts/BebasNeue-webfont.ttf") format("truetype"),
    url("../fonts/BebasNeue-webfont.svg#BebasNeueRegular") format("svg");
  font-weight: normal;
}

#dgc_clock2 {
  margin: 0 auto;
  padding: 10px;
  color: #fff;
  background: #202020;
  font: bold 12px Arial, Helvetica, sans-serif;
  border-radius: 6px;
}

#dgc_clock2 #Date {
  font-size: 17px;
  text-align: center;
}

#dgc_clock2 ul {
  margin: 0 auto;
  margin-bottom: -10px;
  padding: 0;
  list-style: none;
  text-align: center;
}

#dgc_clock2 ul li {
  display: inline;
  font-size: 4.2em;
  font-family: "BebasNeueRegular", Arial, Helvetica, sans-serif;
}

#dgc_clock2 #point {
  position: relative;
  animation: mymove 1s ease infinite;
  padding: 0 3px;
}

@keyframes mymove {
  0% {
    opacity: 1;
    text-shadow: 0 0 20px #00c6ff;
  }
  50% {
    opacity: 0;
    text-shadow: none;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 20px #00c6ff;
  }
}