/* =========================================
OUR WORKFLOW - animation - movement
========================================= */
/* clockwise rotation */
@-webkit-keyframes rotate-cw {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes rotate-cw {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
/* clockwise rotation - scaled down*/
@-webkit-keyframes sm-rotate-cw {
	from { 
		-webkit-transform: rotate(0deg) scale(.72);
	}
	to {
		-webkit-transform: rotate(360deg) scale(.72);
	}
}
@-moz-keyframes sm-rotate-cw {
	from {
		-moz-transform: rotate(0deg) scale(.72);
	}
	to {
		-moz-transform:rotate(360deg) scale(.72);
	}
}
/* for large arrows */
@-webkit-keyframes rotate-cw120 {
	from {
		-webkit-transform: rotate(120deg);
	}
	to {
		-webkit-transform: rotate(480deg);
	}
}
@-moz-keyframes rotate-cw120 {
	from {
		-moz-transform: rotate(120deg);
	}
	to {
		-moz-transform: rotate(480deg);
	}
}
@-webkit-keyframes rotate-cw240 {
	from {
		-webkit-transform: rotate(-120deg);
	}
	to {
		-webkit-transform: rotate(240deg);
	}
}
@-moz-keyframes rotate-cw240 {
	from {
		-moz-transform: rotate(-120deg);
	}
	to {
		-moz-transform: rotate(240deg);
	}
}
/* counter-clockwise rotation */
@-webkit-keyframes rotate-ccw {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(-360deg);
	}
}
@-moz-keyframes rotate-ccw {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(-360deg);
	}
}
/* for open arrows */
@-webkit-keyframes rotate-cw80 {
	from {
		-webkit-transform: rotate(-80deg);
	}
	to {
		-webkit-transform: rotate(280deg);
	}
}
@-moz-keyframes rotate-cw80 {
	from {
		-moz-transform: rotate(-80deg);
	}
	to {
		-moz-transform: rotate(280deg);
	}
}
/* for homepage */
@-webkit-keyframes rotate-cw20 {
	from {
		-webkit-transform: rotate(-20deg);
	}
	to {
		-webkit-transform: rotate(340deg);
	}
}
@-moz-keyframes rotate-cw20 {
	from {
		-moz-transform: rotate(-20deg);
	}
	to {
		-moz-transform: rotate(340deg);
	}
}
/* fade-out expand */
@-webkit-keyframes expand {
	from {
		-webkit-transform: scale(1);
		opacity: 1;
	}	
	to {
		-webkit-transform: scale(3);
		opacity: 0;
	}
}
@-moz-keyframes expand {
	from {
		-webkit-transform: scale(1);
		opacity: 1;
	}	
	to {
		-webkit-transform: scale(3);
		opacity: 0;
	}
}
/* rocking/swinging circles */
@-webkit-keyframes rock-col {
	from {
		-webkit-transform: rotate(122deg);
	}
	25% {
		-webkit-transform: rotate(128deg);
	}
	50% {
		-webkit-transform: rotate(122deg);
	}
	75% {
		-webkit-transform: rotate(116deg);
	}
	to {
		-webkit-transform: rotate(122deg);
	}
}
@-moz-keyframes rock-col {
	from {
		-moz-transform: rotate(122deg);
	}
	25% {
		-moz-transform: rotate(128deg);
	}
	50% {
		-moz-transform: rotate(122deg);
	}
	75% {
		-moz-transform: rotate(116deg);
	}
	to {
		-moz-transform: rotate(122deg);
	}
}
@-webkit-keyframes rock-des {
	from {
		-webkit-transform: rotate(250deg);
	}
	25% {
		-webkit-transform: rotate(256deg);
	}
	50% {
		-webkit-transform: rotate(250deg);
	}
	75% {
		-webkit-transform: rotate(244deg);
	}
	to {
		-webkit-transform: rotate(250deg);
	}
}
@-moz-keyframes rock-des {
	from {
		-moz-transform: rotate(250deg);
	}
	25% {
		-moz-transform: rotate(256deg);
	}
	50% {
		-moz-transform: rotate(250deg);
	}
	75% {
		-moz-transform: rotate(244deg);
	}
	to {
		-moz-transform: rotate(250deg);
	}
}
@-webkit-keyframes rock-pub {
	from {
		-webkit-transform: rotate(2deg);
	}
	25% {
		-webkit-transform: rotate(8deg);
	}
	50% {
		-webkit-transform: rotate(2deg);
	}
	75% {
		-webkit-transform: rotate(-4deg);
	}
	to {
		-webkit-transform: rotate(2deg);
	}
}
@-moz-keyframes rock-pub {
	from {
		-moz-transform: rotate(2deg);
	}
	25% {
		-moz-transform: rotate(8deg);
	}
	50% {
		-moz-transform: rotate(2deg);
	}
	75% {
		-moz-transform: rotate(4deg);
	}
	to {
		-moz-transform: rotate(2deg);
	}
}
/* swinging sectioned ring / dev */
@-webkit-keyframes swing {
	from {
		-webkit-transform: rotate(210deg);
	}
	25% {
		-webkit-transform: rotate(220deg);
	}
	50% {
		-webkit-transform: rotate(210deg);
	}
	75% {
		-webkit-transform: rotate(230deg);
	}
	to {
		-webkit-transform: rotate(210deg);
	}
}
@-moz-keyframes swing {
	from {
		-moz-transform: rotate(210deg);
	}
	25% {
		-moz-transform: rotate(220deg);
	}
	50% {
		-moz-transform: rotate(210deg);
	}
	75% {
		-moz-transform: rotate(230deg);
	}
	to {
		-moz-transform: rotate(210deg);
	}
}



@-webkit-keyframes mini-swing {
	from {
		-webkit-transform: rotate(0deg);
	}
	25% {
		-webkit-transform: rotate(12deg);
	}
	50% {
		-webkit-transform: rotate(0deg);
	}
	75% {
		-webkit-transform: rotate(-12deg);
	}
	to {
		-webkit-transform: rotate(0deg);
	}
}
@-moz-keyframes mini-swing {
	from {
		-moz-transform: rotate(0deg);
	}
	25% {
		-moz-transform: rotate(12deg);
	}
	50% {
		-moz-transform: rotate(0deg);
	}
	75% {
		-moz-transform: rotate(-12deg);
	}
	to {
		-moz-transform: rotate(0deg);
	}
}


@-webkit-keyframes not-rotate-cw {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(115deg);
	}
}

@-webkit-keyframes not-rock {
	from {
		-webkit-transform: rotate(115deg);
	}
	25% {
		-webkit-transform: rotate(95deg);
	}
	50% {
		-webkit-transform: rotate(112deg);
	}
	75% {
		-webkit-transform: rotate(99deg);
	}
	to {
		-webkit-transform: rotate(115deg);
	}
}
/* clockwise rotation */
@-webkit-keyframes spiral-rotate-cw {
	from {
		-webkit-transform: scaleX(-1) rotate(0deg);
	}
	to {
		-webkit-transform: scaleX(-1) rotate(-360deg);
	}
}
@-moz-keyframes spiral-rotate-cw {
	from {
		-moz-transform: scaleX(-1) rotate(0deg);
		
	}
	to {
		-moz-transform: scaleX(-1) rotate(-360deg);
		
	}
}

/* 404 */

.not-found .curvedh {
	-webkit-animation: not-rotate-cw 5s, not-rock 4s linear 0s infinite;
	
}
.not-found .cog1, .not-found .cog3 {
	-webkit-animation: rock-des 1s linear 0s infinite;	
	-moz-animation: rock-des 1s linear 0s infinite;
}
.not-found .cog2 {
	-webkit-animation: rotate-cw240 120s linear 0s infinite;	
	-moz-animation: rotate-cw240 120s linear 0s infinite;
}

.not-found .broken-flow .spiral {
/*	-webkit-animation: spiral-rotate-cw 3s linear 0s infinite;	
	-moz-animation: spiral-rotate-cw 3s linear 0s infinite;*/
	-webkit-animation: rock-col 1s linear 0s infinite;	
	-moz-animation: rock-col 1s linear 0s infinite;
}
.not-found .broken-flow .open-ring {
	-webkit-animation: rotate-cw 2s linear 0s infinite;	
	-moz-animation: rotate-cw 2s linear 0s infinite;
}
.not-found .broken-flow .open-ring-2 {
	-webkit-animation: rotate-ccw 2s linear 0s infinite;	
	-moz-animation: rotate-ccw 2s linear 0s infinite;
}
.
.not-found .ring2 {
	-webkit-animation: rotate-cw240 23s linear 0s infinite;	
	-moz-animation: rotate-cw240 23s linear 0s infinite;
}
/* =========================================
HOMEPAGE
========================================= */
/* 3 subject sectioned rings */
.home .workcycle h2.col .ring {
	-webkit-animation: rock-col 2s linear 0s infinite;	
	-moz-animation: rock-col 2s linear 0s infinite;
}

.home .workcycle h2.des .ring {
	-webkit-animation: rock-des 2s linear 0s infinite;	
	-moz-animation: rock-des 2s linear 0s infinite;
}
.home .workcycle h2.pub .ring {
	-webkit-animation: rock-pub 2s linear 0s infinite;	
	-moz-animation: rock-pub 2s linear 0s infinite;
}
/* large spins */
.workcycle .ring-faded {
	-webkit-animation: rotate-ccw 13s linear 0s infinite;	
	-moz-animation: rotate-ccw 13s linear 0s infinite;
}
.curvedh {
	-webkit-animation: rotate-cw 14s linear 0s infinite;	
	-moz-animation: rotate-cw 14s linear 0s infinite;	
}
.curved-lrg {
	-webkit-animation: rotate-cw 36s linear 0s infinite;	
	-moz-animation: rotate-cw 36s linear 0s infinite;	
}
/* cogs */
.workcycle .cog1, .workcycle .cog2, .workcycle .cog3 {
	-webkit-animation: rotate-cw 13s linear 0s infinite;	
	-moz-animation: rotate-cw 13s linear 0s infinite;
}
.workcycle .cog3 {
	-webkit-animation: rotate-ccw 13s linear 0s infinite;	
	-moz-animation: rotate-ccw 13s linear 0s infinite;	
}
/* =========================================
LARGE ARROWS (backdrop spin)
========================================= */
svg.workflow-lrgArr1 {
	-webkit-animation: rotate-cw 13s linear 0s infinite;	
	-moz-animation: rotate-cw 13s linear 0s infinite;
}
svg.workflow-lrgArr2 {
	/* 	note on layout for static presentation 
	: rotate(120deg) */
	-webkit-animation: rotate-cw120 13s linear 0s infinite;	
	-moz-animation: rotate-cw120 13s linear 0s infinite;
}
svg.workflow-lrgArr3 {
	/* 	note on layout for static presentation 
	: rotate(240deg) */
	-webkit-animation: rotate-cw240 13s linear 0s infinite;	
	-moz-animation: rotate-cw240 13s linear 0s infinite;	
}

/* =========================================
rings
========================================= */
/* outer rings (grad) */
.workflow1-ring, .workflow2-ring, .workflow3-ring {
	-webkit-animation: rotate-cw 13s linear 0s infinite;	
	-moz-animation: rotate-cw 13s linear 0s infinite;
}
.workflow1-ring {
	-webkit-animation-duration: 12s;
	-moz-animation-duration: 12s;
	animation-duration: 12s;
}
.workflow2-ring {
	-webkit-animation: rotate-ccw 6s linear 0s infinite;	
	-moz-animation: rotate-ccw 6s linear 0s infinite;
}
.workflow3-ring {
	-webkit-animation-duration: 16s;
	-moz-animation-duration: 16s;
	animation-duration: 16s;
}
.workflow svg.ripple1 {
	-webkit-animation: expand 6s linear 0s infinite;	
	-moz-animation: expand 6s linear 0s infinite;	
}
/* =========================================
WORKFLOW - team/collaboration
========================================= */
.workflow.team svg.curved {
	-webkit-animation: rotate-cw 13s linear 0s infinite;	
	-moz-animation: rotate-cw 13s linear 0s infinite;	
}
.workflow.team svg.ring1 {
	-webkit-animation: rotate-ccw 16s linear 0s infinite;	
	-moz-animation: rotate-ccw 16s linear 0s infinite;
}
/* =========================================
WORKFLOW - design/dev
========================================= */
.workflow.dev svg.cog1 {
	-webkit-animation: rotate-cw 12s linear 0s infinite;	
	-moz-animation: rotate-cw 12s linear 0s infinite;
}
.workflow.dev svg.cog2 {
	-webkit-animation: rotate-cw120 4s linear 0s infinite;	
	-moz-animation: rotate-cw120 4s linear 0s infinite;
}
.workflow.dev svg.cog3 {
	-webkit-animation: rotate-ccw 4s linear 0s infinite;	
	-moz-animation: rotate-ccw 4s linear 0s infinite;
}
.workflow.dev svg.curved.dev {
	-webkit-animation: rotate-cw240 10s linear 0s infinite;	
	-moz-animation: rotate-cw240 10s linear 0s infinite;	
} 
.workflow.dev svg.sm {
	-webkit-animation: rotate-cw120 5s linear 0s infinite;	
	-moz-animation: rotate-cw240 5s linear 0s infinite;			
}
.workflow.dev svg.ring2 {
	-webkit-animation: swing 3s linear 0s infinite;	
	-moz-animation: swing 3s linear 0s infinite;
}
/* =========================================
WORKFLOW - publish
========================================= */
.workflow.pub svg.cog1  {
	-webkit-animation: rotate-ccw 8s linear 0s infinite;	
	-moz-animation: rotate-ccw 8s linear 0s infinite;	
}
.workflow.pub svg.cog2 {
	-webkit-animation: rotate-cw 8s linear 0s infinite;	
	-moz-animation: rotate-cw 8s linear 0s infinite;
}
.workflow.pub svg.cog3 {
	-webkit-animation: rotate-cw 8s linear 0s infinite;	
	-moz-animation: rotate-cw 8s linear 0s infinite;
}
.workflow.pub svg.open-arr1 {
	-webkit-animation: mini-swing 6s linear 0s infinite;	
	-moz-animation: mini-swing 6s linear 0s infinite;		
}
.workflow.pub svg.curved.sm  {
	-webkit-animation: rotate-cw 13s linear 0s infinite;	
	-moz-animation: rotate-cw 13s linear 0s infinite;		
}
.workflow.pub svg.open-arr-sm.left {
	 	note on layout for static presentation: rotate(-80deg) 
	-webkit-animation:  rotate-cw80 6s linear 0s infinite;	
	-moz-animation:  rotate-cw80 6s linear 0s infinite;	
}

/* =========================================
thank you page
========================================= */
.thanks .ta .open-ring {
	-webkit-animation: rotate-cw 12s linear 0s infinite;	
	-moz-animation: rotate-cw 12s linear 0s infinite;
}
.thanks .ta .open-ring-2 {
	-webkit-animation: rotate-ccw 36s linear 0s infinite;	
	-moz-animation: rotate-ccw 36s linear 0s infinite;
}
.thanks .ta .curved-lrg {
	-webkit-animation: sm-rotate-cw 6s linear 0s infinite;	
	-moz-animation: sm-rotate-cw 6s linear 0s infinite;
}


/* realign when screen wide enough */
@media (min-width : 620px) {
	/* disable animations, activate on hover */
	.workflow svg.ripple1, .workflow.team svg.curved, .workflow.team svg.ring1, .workflow.dev svg.cog1, .workflow.dev svg.cog2, .workflow.dev svg.cog3, .workflow.dev svg.curved.dev, workflow.dev svg.sm, .workflow.dev svg.ring2, .workflow.pubr svg.cog1, .workflow.pub svg.cog2, .workflow.pub svg.cog3, .workflow.dev svg.curved.dev, .workflow.dev svg.sm, .workflow.dev svg.ring2, .workflow.pub svg.cog1, .workflow.pub svg.cog2, .workflow.pub svg.cog3, .workflow.pub svg.open-arr1, .workflow.pub svg.curved.sm, .workflow.pub svg.open-arr-sm.left   {
		-webkit-animation: none;	
		-moz-animation: none;
	}

	/* =========================================
	WORKFLOW - team/collaboration
	========================================= */
	
	.workflow:hover svg.ripple1 {
		-webkit-animation: expand 6s linear 0s infinite;	
		-moz-animation: expand 6s linear 0s infinite;	
	}
	.workflow.team:hover svg.curved {
		-webkit-animation: rotate-cw 13s linear 0s infinite;	
		-moz-animation: rotate-cw 13s linear 0s infinite;	
	}
	.workflow.team:hover svg.ring1 {
		-webkit-animation: rotate-ccw 16s linear 0s infinite;	
		-moz-animation: rotate-ccw 16s linear 0s infinite;
	}

	/* =========================================
	WORKFLOW - design/dev
	========================================= */
	
	.workflow.dev:hover svg.cog1 {
		-webkit-animation: rotate-cw 12s linear 0s infinite;	
		-moz-animation: rotate-cw 12s linear 0s infinite;
	}
	.workflow.dev:hover svg.cog2 {
		-webkit-animation: rotate-cw120 4s linear 0s infinite;	
		-moz-animation: rotate-cw120 4s linear 0s infinite;
	}
	.workflow.dev:hover svg.cog3 {
		-webkit-animation: rotate-ccw 4s linear 0s infinite;	
		-moz-animation: rotate-ccw 4s linear 0s infinite;
	}
	.workflow.dev:hover svg.curved.dev {
		-webkit-animation: rotate-cw240 10s linear 0s infinite;	
		-moz-animation: rotate-cw240 10s linear 0s infinite;	
	} 
	.workflow.dev:hover svg.sm {
		-webkit-animation: rotate-cw120 5s linear 0s infinite;	
		-moz-animation: rotate-cw240 5s linear 0s infinite;			
	}
	.workflow.dev:hover svg.ring2 {
		-webkit-animation: swing 3s linear 0s infinite;	
		-moz-animation: swing 3s linear 0s infinite;
	}
	/* =========================================
	WORKFLOW - publish
	========================================= */
	.workflow.pub:hover svg.cog1  {
		-webkit-animation: rotate-ccw 8s linear 0s infinite;	
		-moz-animation: rotate-ccw 8s linear 0s infinite;	
	}
	.workflow.pub:hover svg.cog2 {
		-webkit-animation: rotate-cw 8s linear 0s infinite;	
		-moz-animation: rotate-cw 8s linear 0s infinite;
	}
	.workflow.pub:hover svg.cog3 {
		-webkit-animation: rotate-cw 8s linear 0s infinite;	
		-moz-animation: rotate-cw 8s linear 0s infinite;
	}
	.workflow.pub:hover svg.open-arr1 {
		-webkit-animation: mini-swing 6s linear 0s infinite;	
		-moz-animation: mini-swing 6s linear 0s infinite;		
	}
	.workflow.pub:hover svg.curved.sm  {
		-webkit-animation: rotate-cw 13s linear 0s infinite;	
		-moz-animation: rotate-cw 13s linear 0s infinite;		
	}
	.workflow.pub:hover svg.open-arr-sm.left {
		-webkit-animation:  rotate-cw80 6s linear 0s infinite;	
		-moz-animation:  rotate-cw80 6s linear 0s infinite;	
	}
}