@keyframes spin {
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}
@keyframes swing {
	0%{transform: rotate(30deg);}
	100%{transform: rotate(-30deg);}
}

.clockarea {
	/*position: relative;*/
	width: 222px;
	height: 378px;
}
	
.clockbox {
	border-radius: 0;
	position: absolute;
	left: 100px;
	top: 100px;
}
.clock {
	width: 554px;
	height: 945px;
	/*position: relative;*/
	transform-origin: 0% 0%;
	transform: scale(.4);
}

.clock * {
	position: absolute;
}

.pendulum {
	left: 194px;
	top: 420px;
	transform-origin: 50% 0%;
	/*transform: rotate(30deg);*/
	animation: swing 1s ease-in-out infinite alternate both;
}

.clockface {
	width: 369px;
	height: 369px;
	left: 92px;
	top: 88px;
}

.clockhand {
	top: 10px;
	left: 158px; 
	transform-origin: 50% 177px;
	/*animation-name: spin;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: both;
	animation-play-state: running;*/
}
.minutehand {
	animation-duration: 60s;
}
.hourhand {
	animation-duration: 720s;
}
/*.secondhand {
	animation-duration: 10s;	
}/*