div#main {
    position:       relative;
    width:          248px;
    height:         150px;
    margin:         3px 0;
    border:         solid 1px grey;
    overflow:       hidden;
    //background-color:   #bdc9e4;
    background:         linear-gradient(to bottom right, #bdc9e4, #fff);
}

div#main>#large_cog {
    position: absolute;
    margin-left: -122px;
    margin-top: 30px;
    transform: rotate(-7.5deg);
    
    -webkit-animation-name: large_cog;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
//  -webkit-animation-direction: alternate-reverse;
    -webkit-animation-play-state: running;

    animation-name: large_cog;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 6s;
//  animation-direction: alternate-reverse;
    animation-play-state: running;
}

div#main>#small_cog {
    position: absolute;
    margin-left: 160px;
    margin-top: 27px;
    
    -webkit-animation-name: small_cog;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 3s;
//  -webkit-animation-direction: alternate-reverse;
    -webkit-animation-play-state: running;

    animation-name: small_cog;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 3s;
//  animation-direction: alternate-reverse;
    animation-play-state: running;
}

@keyframes large_cog
{
	0%
	{
		transform: rotate(-7.5deg);
	}
	100%
	{
		transform: rotate(-367.5deg);
	}
}

@-webkit-keyframes large_cog
{
	0%
	{
		transform: rotate(-7.5deg);
	}
	100%
	{
		transform: rotate(-367.5deg);
	}
}

@keyframes small_cog
{
	0%
	{
		transform: rotate(0deg);
	}
	100%
	{
		transform: rotate(360deg);
	}
}

@-webkit-keyframes small_cog
{
	0%
	{
		transform: rotate(0deg);
	}
	100%
	{
		transform: rotate(360deg);
	}
}