*{
margin: 0;
padding: 0;
}
html {
overflow: hidden;
}
body {
font: 15px/1.3 Arial, sans-serif;
color: transparent;
z-index: 1;
}
a:hover {
text-decoration: none;
}
section, footer, header, aside {
display: block;
}
#clock {
width: 170px;
padding: 0px;
margin: 0px auto 0px;
position: relative;
}
#clock:after {
content: '';
position: absolute;
width: 170px;
height: 20px;
border-radius: 100%;
left: 50%;
margin-left: -160px;
bottom: 2px;
z-index: -1;
}
#clock .display {
text-align: center;
position: relative;
height: 30px;
padding-top: 5px;
padding-right: 22px;
padding-bottom: 5px;
padding-left: 0px;
}
#clock.light {
background-color: #CCC;
color: #930; 
}
#clock.light .digits div span {
background-color: #16BCEE;
border-color: #16BCEE;	
}
#clock.light .digits div.dots:before,
#clock.light .digits div.dots:after {
background-color: tr;
}
#clock.light .display {
background-color: #FFF;
}
#clock .digits div {
text-align: left;
position: relative;
width: 15px;
height: 50px;
display: inline-block;
margin:0 3px;
}
#clock .digits div span {
opacity: 0;
position: absolute;
-webkit-transition: 0.25s;
-moz-transition :0.25s;
transition: 0.25s;
}
#clock .digits div span:before,
#clock .digits div span:after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}
#clock .digits .d1 { height:3px;width:5px;top:0;left:15px; }
#clock .digits .d1:before {	border-width:0 5px 3px 0;border-right-color:inherit;left:-5px; }
#clock .digits .d1:after {	border-width:0 0 3px 5px;border-left-color:inherit;right:-5px; }
#clock .digits .d2 { height:3px;width:5px;top:13px;left:15px; }
#clock .digits .d2:before {	border-width:1px 4px 2px;border-right-color:inherit;left:-8px; }
#clock .digits .d2:after {	border-width:1px 4px 2px;border-left-color:inherit;right:-8px; }
#clock .digits .d3 { height:3px;width:5px;top:26px;left:15px; }
#clock .digits .d3:before {	border-width:3px 5px 0 0;border-right-color:inherit;left:-5px; }
#clock .digits .d3:after {	border-width:3px 0 0 5px;border-left-color:inherit;right:-5px; }
#clock .digits .d4 { width:3px;height:5px;top:5px;left:10px; }
#clock .digits .d4:before {	border-width:0 3px 5px 0;border-bottom-color:inherit;top:-5px; }
#clock .digits .d4:after {	border-width:0 0 5px 3px;border-left-color:inherit;bottom:-5px; }
#clock .digits .d5 { width:3px;height:5px;top:5px;left:22px; }
#clock .digits .d5:before {	border-width:0 0 5px 3px;border-bottom-color:inherit;top:-5px; }
#clock .digits .d5:after {	border-width:5px 0 0 3px;border-top-color:inherit;bottom:-5px; }
#clock .digits .d6 { width:3px;height:5px;top:19px;left:10px; }
#clock .digits .d6:before {	border-width:0 3px 5px 0;border-bottom-color:inherit;top:-5px; }
#clock .digits .d6:after {	border-width:0 0 5px 3px;border-left-color:inherit;bottom:-5px; }
#clock .digits .d7 { width:3px;height:5px;top:19px;left:22px; }
#clock .digits .d7:before {	border-width:0 0 5px 3px;border-bottom-color:inherit;top:-5px; }
#clock .digits .d7:after {	border-width:5px 0 0 3px;border-top-color:inherit;bottom:-5px; }
#clock .digits div.one .d5,
#clock .digits div.one .d7 {
opacity: 1;
}
#clock .digits div.two .d1,
#clock .digits div.two .d5,
#clock .digits div.two .d2,
#clock .digits div.two .d6,
#clock .digits div.two .d3 {
opacity: 1;
}
#clock .digits div.three .d1,
#clock .digits div.three .d5,
#clock .digits div.three .d2,
#clock .digits div.three .d7,
#clock .digits div.three .d3 {
opacity: 1;
}
#clock .digits div.four .d5,
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d7 {
opacity: 1;
}
#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d4,
#clock .digits div.five .d3,
#clock .digits div.five .d7 {
opacity: 1;
}
#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d4,
#clock .digits div.six .d3,
#clock .digits div.six .d6,
#clock .digits div.six .d7 {
opacity: 1;
}
#clock .digits div.seven .d1,
#clock .digits div.seven .d5,
#clock .digits div.seven .d7 {
opacity: 1;
}
#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7 {
opacity: 1;
}
#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7 {
opacity: 1;
}
#clock .digits div.zero .d1,
#clock .digits div.zero .d3,
#clock .digits div.zero .d4,
#clock .digits div.zero .d5,
#clock .digits div.zero .d6,
#clock .digits div.zero .d7 {
opacity:1;
}
#clock .digits div.dots{
width:5px;
}
#clock .digits div.dots:before,
#clock .digits div.dots:after {
width: 3px;
height: 3px;
content: '';
position: absolute;
left: 11px;
top: 10px;
}
#clock .digits div.dots:after {
top: 20px;
}