.in-circle{
	max-width:76px;
	width:100%;
	max-height:76px;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin: auto;
	animation-name:rotate;
	animation-duration:3s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
	animation-direction:alternate;
	}
	@keyframes rotate{
		0%{
			transform:rotate(0deg);
		}
		15%{
			transform:rotate(30deg);
		}
		25%{
			transform:rotate(-10deg);
		}
		35%{
			transform:rotate(65deg);
		}
		45%{
			transform:rotate(105deg);
		}
		60%{
			transform:rotate(105deg);
		}
		75%{
			transform:rotate(125deg);
		}
		90%{
			transform:rotate(110deg);
		}
		100%{
			transform:rotate(180deg);
		}
	}
.trapezoid{
	max-width:220px;
	width:100%;
	max-height:220px;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin: auto;
	animation-name:trap;
	animation-duration:3s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
	animation-direction:alternate;
	}
	@keyframes trap{
		0%{
			transform:rotate(0deg);
		}
		15%{
			transform:rotate(45deg);
		}
		25%{
			transform:rotate(-20deg);
		}
		35%{
			transform:rotate(85deg);
		}
		45%{
			transform:rotate(115deg);
		}
		60%{
			transform:rotate(135deg);
		}
		75%{
			transform:rotate(-15deg);
		}
		90%{
			transform:rotate(110deg);
		}
		100%{
			transform:rotate(180deg);
		}
		}
.out-square{
	max-width:275px;
	width:100%;
	max-height:275px;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin: auto;
	animation-name:square;
	animation-duration:3s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
	animation-direction:alternate;
}
@keyframes square{
		0%{
			transform:rotate(0deg);
		}
		15%{
			transform:rotate(15deg);
		}
		25%{
			transform:rotate(-20deg);
		}
		35%{
			transform:rotate(65deg);
		}
		45%{
			transform:rotate(85deg);
		}
		60%{
			transform:rotate(-25deg);
		}
		75%{
			transform:rotate(37deg);
		}
		90%{
			transform:rotate(100deg);
		}
		100%{
			transform:rotate(180deg);
		}