html {
    margin: 0;
    padding: 0;
}
#wrapper {
    margin: 0 auto;
    width: 600px;
}
#pendulum {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: pendulum;
    margin: 0 auto;
    position: relative;
    top: -60px;
    transform-origin: 50% 130px 0;
    width: 10px;
}
#rectangle {
    background: #5c3629 none repeat scroll 0 0;
    box-shadow: 4px 3px 0 rgba(51, 51, 51, 0.5);
    height: 270px;
    position: relative;
    width: 20px;
    z-index: 0;
}
#circle {
    background: #5c3629 none repeat scroll 0 0;
    border-radius: 135px;
    box-shadow: 4px 3px 0 rgba(51, 51, 51, 0.5);
    height: 95px;
    left: -38px;
    position: relative;
    top: 33px;
    width: 95px;
    z-index: 1;
}
@keyframes pendulum {
0% {
    transform: rotate(-15deg);
}
50% {
    transform: rotate(15deg);
}
100% {
    transform: rotate(-15deg);
}
}


@media screen and (max-width:480px) {

	#wrapper {
		margin: 0 auto;
		width: 320px;
	}
	#pendulum {
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-name: pendulum;
		margin: 0 auto;
		position: relative;
		top: 30px;
		transform-origin: 50% 130px 0;
		width: 10px;
	}
	#rectangle {
		background: #5c3629 none repeat scroll 0 0;
		box-shadow: 4px 3px 0 rgba(51, 51, 51, 0.5);
		height: 200px;
		position: relative;
		width: 10px;
		z-index: 0;
	}
	#circle {
		background: #5c3629 none repeat scroll 0 0;
		border-radius: 135px;
		box-shadow: 4px 3px 0 rgba(51, 51, 51, 0.5);
		height: 55px;
		left: -23px;
		position: relative;
		top: -30px;
		width: 55px;
		z-index: 1;
	}
}