body {
  margin: 5;
  background: #111122;
	font-family: Arial;
	font-size: 14px;
	line-height: 1.3em;
}

a:link, a:visited, a:hover, a:active {
	color: white;
}

.demo-container.clocks {
  /* background: #222222; */
  padding: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.clock {
  border-radius: 50%;
  background: -webkit-radial-gradient(#000000, #000000 0.1em, #ffffff 0.1em, #ffffff), #fff;
  background: radial-gradient(#000000, #000000 0.1em, #ffffff 0.1em, #ffffff), #fff;
  display: inline-block;
  margin: 0px 0px 50px 10px;
  position: relative;
  top: 150px;
  width: 200px;
  height: 200px;
  opacity: 0;
  -webkit-transform: translateY(-40%);
          transform: translateY(-40%);
}

.clock.show {
  opacity: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 2.5s 0.5s cubic-bezier(0.12, 1.03, 0.34, 1);
  transition: all 2.5s 0.5s cubic-bezier(0.12, 1.03, 0.34, 1);
}

.clock::after {
  background: red;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 4%;
  height: 4%;
  z-index: 10;
}

.minutes-container, .hours-container, .seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hours-container {
  -webkit-animation: rotate 43200s infinite linear;
          animation: rotate 43200s infinite linear;
}

.linear .minutes-container {
  -webkit-animation: rotate 3600s infinite linear;
          animation: rotate 3600s infinite linear;
}
.linear .seconds-container {
  -webkit-animation: rotate 60s infinite linear;
          animation: rotate 60s infinite linear;
}

.steps .minutes-container {
  -webkit-animation: rotate 3600s infinite steps(60);
          animation: rotate 3600s infinite steps(60);
}
.steps .seconds-container {
  -webkit-animation: rotate 60s infinite steps(60);
          animation: rotate 60s infinite steps(60);
}

.local.steps .minutes-container {
  -webkit-animation: none;
          animation: none;
}

.bounce .minutes-container {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 2.08, 0.55, 0.44);
  transition: -webkit-transform 0.3s cubic-bezier(0.4, 2.08, 0.55, 0.44);
  transition: transform 0.3s cubic-bezier(0.4, 2.08, 0.55, 0.44);
  transition: transform 0.3s cubic-bezier(0.4, 2.08, 0.55, 0.44), -webkit-transform 0.3s cubic-bezier(0.4, 2.08, 0.55, 0.44);
}
.bounce .seconds-container {
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);
  transition: -webkit-transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);
  transition: transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);
  transition: transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44), -webkit-transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);
}

.hours {
  background: #000;
  width: 3.5%;
  height: 40%;
  position: absolute;
  left: 48.25%;
  top: 22%;
  -webkit-transform-origin: 50% 71%;
          transform-origin: 50% 71%;
}

.minutes {
  background: #000;
  width: 3.5%;
  height: 55%;
  position: absolute;
  left: 48.25%;
  top: 7%;
  -webkit-transform-origin: 50% 78.5%;
          transform-origin: 50% 78.5%;
}

.seconds {
  background: red;
  width: 1.5%;
  height: 42%;
  position: absolute;
  left: 49.25%;
  top: 20%;
  -webkit-transform-origin: 50% 71%;
          transform-origin: 50% 71%;
  z-index: 8;
}

.label {
  background: #fff;
  border-radius: 0.25em;
  color: #000;
  font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.5em 0.75em 0.25em;
  position: absolute;
  top: -40px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
.clock.station {
  background: #fff url(station_clock.svg) no-repeat center;
  background-size: 95%;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2) inset;
}

.clock.station .seconds::before {
  background: red;
  border-radius: 50%;
  content: "";
  position: absolute;
  top: -9%;
  left: -200%;
  height: 18%;
  width: 500%;
}

.clock.ios7 {
  background: #fff url(ios_clock.svg) no-repeat center;
  background-size: 88%;
}

.clock.ios7:before {
  background: black;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 6%;
  height: 6%;
  z-index: 0;
}

.clock.ios7:after {
  width: 2%;
  height: 2%;
}

.clock.ios7 .seconds {
  border-radius: 200%/10%;
  height: 30%;
  left: 49.5%;
  top: 20%;
  width: 1%;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}

.clock.ios7 .minutes {
  border-radius: 150%/10%;
  width: 2%;
  height: 35%;
  left: 49%;
  top: 15%;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}

.clock.ios7 .hours {
  border-radius: 85%/10%;
  width: 2%;
  height: 20%;
  left: 49%;
  top: 30%;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}

.clock.simple {
  background: #fff url(ios_clock.svg) no-repeat center;
  background-size: 88%;
}

.clock.simple:after {
  background-color: #000;
  width: 5%;
  height: 5%;
}

.clock.simple .seconds {
  background-color: #000;
  height: 45%;
  left: 49.5%;
  top: 14%;
  width: 1%;
  -webkit-transform-origin: 50% 80%;
          transform-origin: 50% 80%;
}

.clock.simple .minutes {
  width: 2%;
  height: 40%;
  left: 49%;
  top: 10%;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}

.clock.simple .hours {
  width: 2.5%;
  height: 20%;
  left: 48.75%;
  top: 30%;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}

.hours.angled {
  -webkit-transform: rotateZ(-40deg);
          transform: rotateZ(-40deg);
}

.minutes.angled {
  -webkit-transform: rotateZ(40deg);
          transform: rotateZ(40deg);
}