body {
	background-color: #ddd;
	font: 100% Arial;
}
.column {
	float: left;
	border-right: 1px solid black;
	margin-right: 1em;
	text-align: center;
	padding-right: 3em;
}
.column:last-of-type {
	border: 0;
}
.column:last-of-type:after {
	clear: both;
}
h3 {
	font: bold 1em 'Aclonica', sans-serif;
}

.gear {
	width: 3em;
	height: 3em;
	position: relative;
	margin: 2em;
	left: 1em;
	top: 1em;
	background-color: #474747;
	border-radius: 50%;
	border: 6px solid #474747;
	box-shadow: 0 3px 8px #aaa, inset 0 2px 3px #fff;
	box-shadow: 2px 2px 10px rgba(255,255,255,.25) inset, -2px -2px 10px rgba(0,0,0,.9) inset;

}
.gear:before {
	z-index: -1;
	content:"";
	width: 5em;
	height: 5em;
	top: -1em;
	left: -1em;
	position: absolute;
	background-size: 5em 5em;
	border-radius: 50%;
}
.gear:after {
	z-index: 1;
	content:"";
	background: #ddd;
	width: 1em;
	height: 1em;
	top: 1em;
	left: 1em;
	border: 1px solid #333;
	position: absolute;
	border-radius: 50%;
	background-size: 1em 1em;
    background-image:
       linear-gradient(45deg,
           transparent 0,
           transparent .6em,
           #474747 .6em,
           #474747 .8em,
	       transparent .8em,
           transparent 1em);
}
.gear4:before {
    background-image:
       linear-gradient(0deg,
           transparent 0,
           transparent 2em,
           #474747 2em,
           #474747 3em,
	       transparent 3em,
           transparent 5em),
       linear-gradient(90deg,
           transparent 0,
           transparent 2em,
           #474747 2em,
           #474747 3em,
	       transparent 3em,
           transparent 5em);
}
.gear6:before {
    background-image:
       linear-gradient(0deg,
           transparent 0,
           transparent 2em,
           #474747 2em,
           #474747 3em,
	       transparent 3em,
           transparent 5em),
       linear-gradient(60deg,
           transparent 0,
           transparent 2.9em,
           #474747 2.9em,
           #474747 3.9em,
	       transparent 3.9em,
           transparent 5em),
       linear-gradient(120deg,
           transparent 0,
           transparent 2.9em,
           #474747 2.9em,
           #474747 3.9em,
	       transparent 3.9em,
           transparent 5em);
}
.gear8:before {
    background-image:
       linear-gradient(0deg,
           transparent 0,
           transparent 2em,
           #474747 2em,
           #474747 3em,
	       transparent 3em,
           transparent 5em),
       linear-gradient(45deg,
           transparent 0,
           transparent 3em,
           #474747 3em,
           #474747 4em,
	       transparent 4em,
           transparent 5em),
       linear-gradient(90deg,
           transparent 0,
           transparent 2em,
           #474747 2em,
           #474747 3em,
	       transparent 3em,
           transparent 5em),
       linear-gradient(135deg,
           transparent 0,
           transparent 3em,
           #474747 3em,
           #474747 4em,
	       transparent 4em,
           transparent 5em);
}
.gear10:before {
    background-image:
       linear-gradient(0deg,
           transparent 0,
           transparent 2em,
           #474747 2em,
           #474747 3em,
	       transparent 3em,
           transparent 5em),
       linear-gradient(36deg,
           transparent 0,
           transparent 3em,
           #474747 3em,
           #474747 4em,
	       transparent 4em,
           transparent 5em),
       linear-gradient(72deg,
           transparent 0,
           transparent 2.65em,
           #474747 2.65em,
           #474747 3.65em,
	       transparent 3.65em,
           transparent 5em),
       linear-gradient(108deg,
           transparent 0,
           transparent 2.65em,
           #474747 2.65em,
           #474747 3.65em,
	       transparent 3.65em,
           transparent 5em),
       linear-gradient(144deg,
           transparent 0,
           transparent 3em,
           #474747 3em,
           #474747 4em,
	       transparent 4em,
           transparent 5em);
}
.gear12:before {
    background-image:
       linear-gradient(0deg,
           transparent 0,
           transparent 2em,
           #474747 2em,
           #474747 3em,
	       transparent 3em,
           transparent 5em),
       linear-gradient(30deg,
           transparent 0,
           transparent 2.9em,
           #474747 2.9em,
           #474747 3.9em,
	       transparent 3.9em,
           transparent 5em),
       linear-gradient(60deg,
           transparent 0,
           transparent 2.9em,
           #474747 2.9em,
           #474747 3.9em,
	       transparent 3.9em,
           transparent 5em),
       linear-gradient(90deg,
           transparent 0,
           transparent 2em,
           #474747 2em,
           #474747 3em,
	       transparent 3em,
           transparent 5em),
       linear-gradient(120deg,
           transparent 0,
           transparent 2.9em,
           #474747 2.9em,
           #474747 3.9em,
	       transparent 3.9em,
           transparent 5em),
       linear-gradient(150deg,
           transparent 0,
           transparent 2.9em,
           #474747 2.9em,
           #474747 3.9em,
	       transparent 3.9em,
           transparent 5em);
}

.fluid .gear:before {
	animation: 2s gear-rotate-right linear infinite;
}
.steps .gear:before {
	animation: 2s gear-rotate-right steps(10) infinite;
}
.ticks .gear4:before {
	animation: 2s gear-rotate-ticks4-right linear infinite;
}
.ticks .gear6:before {
	animation: 2.5s gear-rotate-ticks6-right linear infinite;
}
.ticks .gear8:before {
	animation: 3s gear-rotate-ticks8-right linear infinite;
}
.ticks .gear10:before {
	animation: 3.5s gear-rotate-ticks10-right linear infinite;
}
.ticks .gear12:before {
	animation: 4s gear-rotate-ticks12-right linear infinite;
}
.gear:hover:before {
	animation-direction: reverse;
}
@keyframes gear-rotate-right {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}
@keyframes gear-rotate-ticks4-right {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(92deg); }
  50% { transform: rotate(90deg); }
  90% { transform: rotate(182deg); }
  100% { transform: rotate(180deg); }
}
@keyframes gear-rotate-ticks6-right {
  0% { transform: rotate(0deg); }
  23% { transform: rotate(62deg); }
  33% { transform: rotate(60deg); }
  56% { transform: rotate(122deg); }
  66% { transform: rotate(120deg); }
  90% { transform: rotate(182deg); }
  100% { transform: rotate(180deg); }
}
@keyframes gear-rotate-ticks8-right {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(47deg); }
  25% { transform: rotate(45deg); }
  40% { transform: rotate(92deg); }
  50% { transform: rotate(90deg); }
  65% { transform: rotate(132deg); }
  75% { transform: rotate(135deg); }
  90% { transform: rotate(182deg); }
  100% { transform: rotate(180deg); }
}
@keyframes gear-rotate-ticks10-right {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(38deg); }
  20% { transform: rotate(36deg); }
  30% { transform: rotate(74deg); }
  40% { transform: rotate(72deg); }
  50% { transform: rotate(110deg); }
  60% { transform: rotate(108deg); }
  70% { transform: rotate(146deg); }
  80% { transform: rotate(144deg); }
  90% { transform: rotate(182deg); }
  100% { transform: rotate(180deg); }
}
@keyframes gear-rotate-ticks12-right {
  0% { transform: rotate(0deg); }
  6.67% { transform: rotate(32deg); }
  16.67% { transform: rotate(30deg); }
  23.34% { transform: rotate(62deg); }
  33.34% { transform: rotate(60deg); }
  40% { transform: rotate(92deg); }
  50% { transform: rotate(90deg); }
  56.67% { transform: rotate(122deg); }
  66.67% { transform: rotate(120deg); }
  73.34% { transform: rotate(152deg); }
  83.34% { transform: rotate(150deg); }
  90% { transform: rotate(182deg); }
  100% { transform: rotate(180deg); }
}