/* Container */
.animation-container {
	position: relative;
	height: 5em;
}
.animation-container svg {
	max-width: 80%;
	max-height: 80%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	fill: #333333;
}

/* Air Conditioner */
svg.air-conditioner path.wave {
	fill-opacity: 0;
	stroke: #333;
	stroke-width: 15;
	stroke-linecap: round;
	stroke-dasharray: 150;
	/* stroke-dashoffset: 150;
	animation: air-draw 10s infinite linear; */
	animation-direction: reverse;
}
@keyframes air-draw {
	to {
		stroke-dashoffset: -360;
	}
}

/* Lightbulb */
svg.lightbulb path.dots {
	/* animation: star-flash 3s ease infinite; */
	transform-origin: 50% 50%;
}
@keyframes star-flash {
	0% { opacity:1 }
	16.66667% { opacity:0 }
	33.33333% { opacity:1 }
	50% { opacity:0 }
	66.66667% { opacity:1 }
	100% { opacity:1 }
}

/* Record Player */
svg.record path.spiral-grooves {
	animation: record-spin 4.5s linear infinite;
	transform-origin: 50% 50%;
}
@keyframes record-spin {
	0% { transform:rotate(0deg) }
	33.33333% { transform:rotate(359deg) }
	100% { transform:rotate(359deg) }
}

/* Shower */
svg.shower path.water {
	fill-opacity: 0;
	stroke: #333;
	stroke-width: 15;
	stroke-linecap: round;
	stroke-dasharray: 100;
	/* stroke-dashoffset: 100;
	animation: water-flow 10s infinite linear; */

}
@keyframes water-flow {
	to {
		stroke-dashoffset: -360;
	}
}

/* Clothes Washer */
svg.clothes-washer path.drum {
	animation: shake-drum 1.875s ease infinite;
	transform-origin: 50% 50%;
}
@keyframes shake-drum {
	0% { transform: rotate(-12deg) }
	10.66667% { transform: rotate(12deg) }
	13.33333% { transform: rotate(24deg) }
	24% { transform: rotate(-24deg) }
	26.66667% { transform: rotate(-24deg) }
	37.33333% { transform: rotate(24deg) }
	40% { transform: rotate(24deg) }
	50.66667% { transform: rotate(-24deg) }
	53.33333% { transform: rotate(-24deg) }
	64% { transform: rotate(24deg) }
	66.66667% { transform: rotate(24deg) }
	77.33333% { transform: rotate(-24deg) }
	80% { transform: rotate(-24deg) }
	90.66667% { transform: rotate(24deg) }
	100% { transform: rotate(0deg) }
}

/* Wrench */
svg.wrench  {
	/* animation: rotate-wrench 4.875s ease infinite; */
	transform-origin: 50% 50%;
}
@keyframes rotate-wrench {
	0% { transform:rotate(-3deg) }
	4.10257% { transform:rotate(3deg) }
	5.1282% { transform:rotate(6deg) }
	9.23077% { transform:rotate(-6deg) }
	10.25641% { transform:rotate(-6deg) }
	14.35897% { transform:rotate(6deg) }
	15.38462% { transform:rotate(6deg) }
	19.48718% { transform:rotate(-6deg) }
	20.51282% { transform:rotate(-6deg) }
	24.61538% { transform:rotate(6deg) }
	25.64103% { transform:rotate(6deg) }
	29.74359% { transform:rotate(-6deg) }
	30.76923% { transform:rotate(-6deg) }
	34.8718% { transform:rotate(6deg) }
	38.46154% { transform:rotate(0deg) }
	100% { transform:rotate(0deg) }
}