.clock-container {
  position: relative;
}

.clock {
  position: relative;
  margin: 5em auto auto;
  border-radius: 50%;
  background: white url(../images/clock.svg) no-repeat center;
  box-shadow: 0px 1px 2px 2px rgba(128, 128, 128, 0.68);
  height: 20em;
  width: 20em;
  -webkit-transition: opacity ease-in .3s;
  transition: opacity ease-in .3s;
}

.clock.fade-out {
  opacity: 0;
}

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

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

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

.hours-hand {
  background: #000;
  height: 20%;
  left: 48.75%;
  position: absolute;
  top: 30%;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  width: 2.5%;
}

.minutes-hand {
  background: #000;
  height: 40%;
  left: 49%;
  position: absolute;
  bottom: 10%;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  width: 2%;
}

.seconds-hand {
  background: rgb(234, 14, 14);
  height: 45%;
  left: 49.5%;
  position: absolute;
  bottom: 14%;
  -webkit-transform-origin: 50% 80%;
          transform-origin: 50% 80%;
  width: 1%;
  z-index: 10;
}

.seconds-hand:after {
  background: rgb(234, 14, 14);
  content: "";
  position: absolute;
  -webkit-transform: translate(-28%, -100%) rotateZ(45deg);
          transform: translate(-28%, -100%) rotateZ(45deg);
  width: 10px;
  height: 10px;
  z-index: 15;
}
