body 
{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #2c3e50;
}

.pendulo 
{
	display: flex;
	border-top: 10px solid white;
}

.pendulo span 
{
	display: block;
	width: 3px;
	height: 300px;
	background-color: white;
	margin: 0 29px;
	position: relative;
	transform-origin: top;
}

.pendulo span:before 
{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: white;
	transform: translateX(-50%);
}

.pendulo span:first-child 
{
	animation: left-arm 2s ease-in infinite;
}

.pendulo span:last-child 
{
	animation: right-arm 2s ease-in infinite 1s;
}

@keyframes left-arm 
{
	0% { transform: rotate(0deg); }
	25% { transform: rotate(60deg); }
	50% { transform: rotate(0deg); }
	100% { transform: rotate(0deg); }
}

@keyframes right-arm 
{
	0% { transform: rotate(0deg); }
	25% { transform: rotate(-60deg); }
	50% { transform: rotate(0deg); }
	100% { transform: rotate(0deg); }
}