$skintone : #E5B887;

@include keyframes(right-punch) {
	0%, 100%   { @include transform( scale(1) rotate(0deg)); }
	50% { @include transform(scale(0.5) rotate(180deg)); }
}
@include keyframes(left-punch) {
	0%, 100%   { @include transform( scale(1) rotate(0deg)); }
	50% { @include transform(scale(0.5) rotate(-180deg)); }
}

body {
	font-size: 16px;
	padding: 2em 0;
}

.loader {
	margin: 2em auto 0 auto;
	width: 3.5em;
	height: 2.5em;
	position: relative;

	.head {
		position: absolute;
		top: -1.9em;
		left: 0.66em;
		width: 2em;
		height: 2em;
		background-color: $skintone;
		border: 0.125em solid black;
		border-radius: 50%;
		z-index: 4;
	}

	.gi {
		margin: 0 auto;
		border-top: 2.5em solid white;
		border-left: 0.625em solid transparent;
		border-right: 0.625em solid transparent;
		padding: 0 0.5em 0 0;
		height: 0;
		width: 1.25em;
		position: relative;

		&:before, &:after {
			content: "";
			position: absolute;
		}

		&:before {
			border-top: 2.8125em solid black;
			border-left: 0.75em solid transparent;
			border-right: 0.75em solid transparent;
			padding: 0 0.5em 0 0;
			height: 0;
			width: 1.5625em; 
			top: -2.625em;
			left: -0.9375em;
			z-index: -1;
		}

		&:after {
			z-index: 2;
			top: -2.5em;
			right: 0.3125em;
			background-color: black;
			width: 0.125em;
			height: 2.5em;
			@include transform(skew(-10deg));
		}
	}

	.fist {
		display: block;
		width: 1.5em;
		height: 1em;
		position: absolute;
		top: 1em;
		margin: 0;

		&:before, &:after {
			content: "";
			display: block;
			border: 1px solid black;
			border-radius: 0.5em;
			background-color: $skintone;
			position: absolute;
		}

		&:before {
			z-index: 10;
			width: 100%;
			height: 100%;
			top: 0; 
			left: 0;
		}

		&:after {
			width: 0.75em;
			height: 0.375em;
			bottom: -0.25em;
			right: -0.125em;
		}

		&.left{
			left: -0.5em;
			@include animation(left-punch 1s infinite);
		}
		&.right{
			@include animation(right-punch 1s 0.5s infinite);
			right: -0.5em;
			&:after{
				left: -0.125em;
			}
		}
		
	}
}