.clockcase {
  width: 750px;
  height: 750px;
}


.clock {
  border-radius: 50%;
  background: #FFF url(images/CLOCKFACE_FACE.svg) no-repeat center;
  background-size: 100%;
  height: 100%;
  padding-bottom: 0%;
  position: relative;
  width: 100%;
}

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

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

.tide {
/* tide hand: 262 x 262 px size, 121 x 180 px to rotation pt */
  background: url(images/CLOCKFACE_TIDECIR.svg) no-repeat center;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  transform-origin: 0px 0px;
  width: 100%;
}

.hours {
/* 31 x 224 px size, 16 x 15 px to rotation pt */
  background: url(images/CLOCKFACE_HOURHAND.svg) no-repeat center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0%;
  top: 0%;
  transform-origin: 50% 50%;
}

.minutes {
/* 29 x 262 px size, 15 x 15 px to rotation pt */
  background: url(images/CLOCKFACE_MINHAND.svg) no-repeat center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0%;
  top: 0%;
  transform-origin: 50% 50%;
}

.seconds {
  background: #999;
  width: .25%;
  height: 42%;
  position: absolute;
  left: 49.875%; 
  top: 8%; 
  transform-origin: 50% 99.875%; 
  z-index: 8;
}

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

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



.tide-container {
  animation: rotate 1244160s infinite linear;
}
/*

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

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

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

/* remove this one, we want minutes to move continuously.

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

.seconds-container {
  animation: rotate 60s infinite steps(60);
}
*/

.minutes-container {
  transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}
.seconds-container {
  transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
}

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

.minutes.angled {
  transform: rotateZ(40deg);
}
*/
.local.steps .minutes-container {
    -webkit-animation: none;
    animation: none
}