body {
	background:#aaa;

	
}


section {
	width:80%;
	height:100%;
	margin: 100px auto;
	text-align:center;padding:100px 0px;
	background:none;
	background-color:transparent;
	box-shadow:none;
	

	}



.clock {
	border-radius:50%;
	background:radial-gradient(#000, #000 0.1em, #fff 0.1em, #fff), #fff;
	display:inline-block;
	padding-bottom:31.333%;
	position:relative;
	width:31.333%;
	opacity:1;
	background:#fff url(clock.svg) no-repeat center;
	background-size:88%;
	
	transition:all 2.5s cubic-bezier(0.12, 1.03, 0.34, 1);
	border:5px solid #963929;
	
}
.clock.simple {
	background:#DDD url(clock.svg) no-repeat center;
	background-size:88%
}
.clock::after {
	background:#963929;
	border-radius:50%;
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	width:5%;
	height:5%;
	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
}


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

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

.seconds {
	background:#963929;
	height:45%;
	left:49.5%;
	top:14%;
	width:1%;
	-webkit-transform-origin:50% 80%;
	transform-origin:50% 80%;
	position:absolute;
	z-index:8
}
.hours.angled {
	-webkit-transform:rotateZ(-40deg);
	transform:rotateZ(-40deg)
}
.minutes.angled {
	-webkit-transform:rotateZ(40deg);
	transform:rotateZ(40deg)
}
@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}
.hours-container {
  animation: rotate 43200s infinite linear;
}

.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);
}*/
@-webkit-keyframes rotate { 100% {
-webkit-transform:rotateZ(360deg);
transform:rotateZ(360deg)
}
}