#clock,
#clock::before,
#clock::after,
.mark-hour,
.mark-hour::before,
.mark-hour .mark-minute-1::before,
.mark-hour .mark-minute-2::before,
.mark-hour .mark-minute-1::after,
.mark-hour .mark-minute-2::after,
.pane,
.hand,
#second .outer::after {
  position: absolute;
  top: 50%;
  left: 50%;
}
#container {
	position: absolute;
    top: 80px;
    bottom: 0;
    left: 15px;
    right: 0;
}
@media (max-width: 768px) {
  #container {
    font-size: 12px;
  }
}
#clock {
  width: 26em;
  height: 26em;
  margin: -13em 0 0 -13em;
  background: -webkit-linear-gradient(top, #f9f9f9, #e74c3c);
  background: -moz-linear-gradient(top, #f9f9f9, #e74c3c);
  background: -o-linear-gradient(top, #f9f9f9, #e74c3c);
  background: -ms-linear-gradient(top, #f9f9f9, #e74c3c);
  background: linear-gradient(to bottom, #f9f9f9, #e74c3c);
  -webkit-border-radius: 2em;
  border-radius: 2em;
  -webkit-box-shadow: 0.3em 0.5em 2em #333, inset 0 0 2em rgba(221,221,221,0.4), inset 0 -0.2em 0.2em rgba(0,0,0,0.3);
  box-shadow: 0.3em 0.5em 2em #333, inset 0 0 2em rgba(221,221,221,0.4), inset 0 -0.2em 0.2em rgba(0,0,0,0.3);
}
#clock::before {
  content: "";
  width: 24em;
  height: 24em;
  margin: -12em 0 0 -12em;
  background: -webkit-linear-gradient(310deg, #e74c3c 0%, #e74c3c 50%, #e74c3c 51%, #f5f7f9 100%);
  background: -moz-linear-gradient(310deg, #e74c3c 0%, #e74c3c 50%, #e74c3c 51%, #f5f7f9 100%);
  background: -o-linear-gradient(310deg, #e74c3c 0%, #e74c3c 50%, #e74c3c 51%, #f5f7f9 100%);
  background: -ms-linear-gradient(310deg, #e74c3c 0%, #e74c3c 50%, #e74c3c 51%, #f5f7f9 100%);
	background: linear-gradient(140deg, #e74c3c 0%, #e74c3c 50%, #e74c3c 51%, #f5f7f9 100%);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -webkit-border-radius: 12em;
  border-radius: 12em;
  -webkit-box-shadow: 0.1em 0.3em 1em rgba(51,51,51,0.2);
  box-shadow: 0.1em 0.3em 1em rgba(51,51,51,0.2);
}
#clock::after {
  content: "";
  width: 23em;
  height: 23em;
  margin: -11.5em 0 0 -11.5em;
  background: -webkit-linear-gradient(top, #fff, #fff);
  background: -moz-linear-gradient(top, #fff, #fff);
  background: -o-linear-gradient(top, #fff, #fff);
  background: -ms-linear-gradient(top, #fff, #fff);
  background: linear-gradient(to bottom, #fff, #fff);
  border: 0.1em solid rgba(0,0,0,0.2);
  -webkit-border-radius: 12.5em;
  border-radius: 12.5em;
  -webkit-box-shadow: inset rgba(0,0,0,0.2) 0.2em 0.2em 1em, inset 12em 14em 0 -10em rgba(255,255,255,0.3);
  box-shadow: inset rgba(0,0,0,0.2) 0.2em 0.2em 1em, inset 12em 14em 0 -10em rgba(255,255,255,0.3);
}
.mark-hour {
  width: 4em;
  height: 20em;
  margin: -10em 0 0 -2em;
  text-align: center;
  z-index: 2;
}
.mark-hour::before {
  content: "";
  width: 0.2em;
  height: 0.5em;
  margin: -0.25em 0 0 -0.1em;
  text-align: center;
  -webkit-box-shadow: 0 -10.5em #777, 0 10.5em #777;
  box-shadow: 0 -10.5em #777, 0 10.5em #777;
  z-index: 2;
}
.mark-hour .mark-minute-1::before,
.mark-hour .mark-minute-2::before,
.mark-hour .mark-minute-1::after,
.mark-hour .mark-minute-2::after {
  content: "";
  width: 0.2em;
  height: 0.2em;
  margin: -0.1em 0 0 -0.1em;
  -webkit-box-shadow: 0 -10.5em #777, 0 10.5em #777;
  box-shadow: 0 -10.5em #777, 0 10.5em #777;
  z-index: 2;
}
.mark-hour .mark-minute-1::before {
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  transform: rotate(6deg);
}
.mark-hour .mark-minute-1::after {
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.mark-hour .mark-minute-2::before {
  -webkit-transform: rotate(12deg);
  -moz-transform: rotate(12deg);
  -o-transform: rotate(12deg);
  -ms-transform: rotate(12deg);
  transform: rotate(12deg);
}
.mark-hour .mark-minute-2::after {
  -webkit-transform: rotate(-12deg);
  -moz-transform: rotate(-12deg);
  -o-transform: rotate(-12deg);
  -ms-transform: rotate(-12deg);
  transform: rotate(-12deg);
}
.mark-hour .text-top,
.mark-hour .text-bottom {
  line-height: 2em;
  font-size: 1.5em;
  color: #445;
  text-shadow: #667 0 0.05em 0.1em;
}
.mark-hour .text-bottom {
  margin: 9.333333333333334em 0 0;
}
#mark-hour-1 {
  -webkit-transform: rotate(29.99999999999988deg);
  -moz-transform: rotate(29.99999999999988deg);
  -o-transform: rotate(29.99999999999988deg);
  -ms-transform: rotate(29.99999999999988deg);
  transform: rotate(29.99999999999988deg);
}
#mark-hour-1 .text-top,
#mark-hour-1 .text-bottom {
  -webkit-transform: rotate(-29.99999999999988deg);
  -moz-transform: rotate(-29.99999999999988deg);
  -o-transform: rotate(-29.99999999999988deg);
  -ms-transform: rotate(-29.99999999999988deg);
  transform: rotate(-29.99999999999988deg);
}
#mark-hour-2 {
  -webkit-transform: rotate(60.000000000000114deg);
  -moz-transform: rotate(60.000000000000114deg);
  -o-transform: rotate(60.000000000000114deg);
  -ms-transform: rotate(60.000000000000114deg);
  transform: rotate(60.000000000000114deg);
}
#mark-hour-2 .text-top,
#mark-hour-2 .text-bottom {
  -webkit-transform: rotate(-60.000000000000114deg);
  -moz-transform: rotate(-60.000000000000114deg);
  -o-transform: rotate(-60.000000000000114deg);
  -ms-transform: rotate(-60.000000000000114deg);
  transform: rotate(-60.000000000000114deg);
}
#mark-hour-3 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
#mark-hour-3 .text-top,
#mark-hour-3 .text-bottom {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
#mark-hour-4 {
  -webkit-transform: rotate(119.99999999999987deg);
  -moz-transform: rotate(119.99999999999987deg);
  -o-transform: rotate(119.99999999999987deg);
  -ms-transform: rotate(119.99999999999987deg);
  transform: rotate(119.99999999999987deg);
}
#mark-hour-4 .text-top,
#mark-hour-4 .text-bottom {
  -webkit-transform: rotate(-119.99999999999987deg);
  -moz-transform: rotate(-119.99999999999987deg);
  -o-transform: rotate(-119.99999999999987deg);
  -ms-transform: rotate(-119.99999999999987deg);
  transform: rotate(-119.99999999999987deg);
}
#mark-hour-5 {
  -webkit-transform: rotate(150.0000000000001deg);
  -moz-transform: rotate(150.0000000000001deg);
  -o-transform: rotate(150.0000000000001deg);
  -ms-transform: rotate(150.0000000000001deg);
  transform: rotate(150.0000000000001deg);
}
#mark-hour-5 .text-top,
#mark-hour-5 .text-bottom {
  -webkit-transform: rotate(-150.0000000000001deg);
  -moz-transform: rotate(-150.0000000000001deg);
  -o-transform: rotate(-150.0000000000001deg);
  -ms-transform: rotate(-150.0000000000001deg);
  transform: rotate(-150.0000000000001deg);
}
#mark-hour-6 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
#mark-hour-6 .text-top,
#mark-hour-6 .text-bottom {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.pane {
  z-index: 3;
  width: 16em;
  height: 16em;
  margin: -8em 0 0 -8em;
}
.outer,
.inner {
  width: 100%;
  height: 100%;
}
.inner {
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  -o-animation: spin 1s linear infinite;
  -ms-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}
.hand {
  -webkit-box-shadow: rgba(0,0,0,0.8) 0 0 0.2em;
  box-shadow: rgba(0,0,0,0.8) 0 0 0.2em;
}
#hour .inner {
  -webkit-animation-duration: 43200s;
  -moz-animation-duration: 43200s;
  -o-animation-duration: 43200s;
  -ms-animation-duration: 43200s;
  animation-duration: 43200s;
}
#hour .hand {
  width: 0.6em;
  height: 4em;
  margin: -4em -0.3em 0;
  -webkit-border-radius: 0.5em 0.5em 0 0/4em 4em 0 0;
  border-radius: 0.5em 0.5em 0 0/4em 4em 0 0;
  background: #333;
}
#minute .inner {
  -webkit-animation-duration: 3600s;
  -moz-animation-duration: 3600s;
  -o-animation-duration: 3600s;
  -ms-animation-duration: 3600s;
  animation-duration: 3600s;
}
#minute .hand {
  width: 0.3em;
  height: 7em;
  margin: -7em -0.15em 0;
  -webkit-border-radius: 0.5em 0.5em 0 0/7em 7em 0 0;
  border-radius: 0.5em 0.5em 0 0/7em 7em 0 0;
  background: #333;
}
#second .inner {
  -webkit-animation-duration: 60s;
  -moz-animation-duration: 60s;
  -o-animation-duration: 60s;
  -ms-animation-duration: 60s;
  animation-duration: 60s;
  -webkit-animation-timing-function: steps(60);
  -moz-animation-timing-function: steps(60);
  -o-animation-timing-function: steps(60);
  -ms-animation-timing-function: steps(60);
  animation-timing-function: steps(60);
}
#second .outer {
  -webkit-animation: tiktoc 1s infinite;
  -moz-animation: tiktoc 1s infinite;
  -o-animation: tiktoc 1s infinite;
  -ms-animation: tiktoc 1s infinite;
  animation: tiktoc 1s infinite;
}
#second .outer::after {
  content: "";
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  background: #c00;
  -webkit-border-radius: 1em;
  border-radius: 1em;
  -webkit-box-shadow: rgba(0,0,0,0.8) 0 0 0.2em;
  box-shadow: rgba(0,0,0,0.8) 0 0 0.2em;
}
#second .hand {
  width: 0.2em;
  height: 11em;
  margin: -11em -0.1em 0;
  -webkit-border-radius: 0.5em 0.5em 0 0/11em 11em 0 0;
  border-radius: 0.5em 0.5em 0 0/11em 11em 0 0;
  background: #c00;
  margin-top: -9em;
}
@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes tiktoc {
  0%, 100% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  8% {
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  16% {
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
}
@-webkit-keyframes tiktoc {
  0%, 100% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  8% {
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  16% {
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
}
@-o-keyframes tiktoc {
  0%, 100% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  8% {
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  16% {
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
}
@keyframes tiktoc {
  0%, 100% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  8% {
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  16% {
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
}