.stage {
    width: 100%; max-width: 960px;
    overflow: hidden;
    height: 300px;
    margin: 0 auto;
    position: relative;
}

.hold {
    background: url(../../img/animation/conveyor-tile.png) repeat-x 0 234px, url(../../img/animation/leader-bg-home.png) no-repeat top center, url(../../img/animation/skybluenoise.gif) repeat 0 0;
    width: 100%; 
}

.interface-items div,
.interface-items img {
    position: absolute;
}

.pulley {
    background: url(../../img/animation/pulley.svg);
    background-size: 100%;
    height: 83px;
    width: 83px;
}

.gear {
    background: url(../../img/animation/gear-white.svg);
    background-size: 100%;
    height: 35px;
    width: 35px; 
}

.gearblk {
    background: url(../../img/animation/gear-black.svg);
    background-size: 100%;
}

.hook {
    background: url(../../img/animation/hook.svg);
    height: 107px;
    left: 12px;
    opacity: 1;
    top: 0;
    width: 26px;
}

.hook2 {
    left: 25px;
    top: -33px;
}

.pulley1 {
    opacity: 0.8;
    top: 134px;
}

.pulley2 {
    left: 672px;
    opacity: 1;
    top: 151px;
}

.pulley3 {
    height: 46px;
    left: 755px;
    opacity: 1;
    top: 141px;
    width: 47px;
}

.pulley4 {
    height: 36px;
    left: 865px;
    opacity: 1;
    top: 117px;
    width: 36px;
}
.pulley5 {
    background: url(../../img/animation/pulley2.svg);
    background-size: 100%;
    height: 48px;
    left: 818px;
    opacity: 1;
    top: -16px;
    width: 48px;
}

.pulley6 {
    height: 47px;
    left: 905px;
    opacity: 1;
    top: 143px;
    width: 48px;
}

.pulley7 {
    left: 970px;
    opacity: 1.0;
    top: 15px; 
}

.gear1 {
    left: 795px;
    opacity: .9;
    top: 58px;
}

.gear2 {
    left: 827px;
    opacity: .9;
    top: 45px;
}

.foot-gear-hold {
    margin-top: 30px;
    position: relative;
}

.foot-gear1 {
    height: 55px;
    right: 84px;
    opacity: .3;
    top: 20px;
    width: 55px; position: absolute;
}

.foot-gear2 {
    height: 85px;
    right: 0px;
    opacity: .3;
    width: 85px;  position: absolute;
}

.non-pf-page.foot-gear-hold {
    margin: 0 auto 40px;
}


/* --------------------- Rotate clockwise ----------*/
@-moz-keyframes rotate {
    from {-moz-transform:rotate(0deg);}
    to {-moz-transform:rotate(360deg);}
}

@-o-keyframes rotate {
    from {-o-transform:rotate(0deg);}
    to {-o-transform:rotate(360deg);}
}

@keyframes rotate {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to { -webkit-transform:rotate(360deg);}
}
/* --------------------- end Rotate clockwise ----------*/



/* --------------------- Rotate counter clockwise ----------*/
@-moz-keyframes rotate2 {
    from {-moz-transform:rotate(0deg);}
    to {-moz-transform:rotate(-360deg);}
}

@-o-keyframes rotate2 {
    from {-o-transform:rotate(0deg);}
    to {-o-transform:rotate(-360deg);}
}

@keyframes rotate2 {
    from {transform:rotate(0deg);}
    to {transform:rotate(-360deg);}
}

@-webkit-keyframes rotate2 {
  from {-webkit-transform:rotate(0deg);}
  to { -webkit-transform:rotate(-360deg);}
}
/* --------------------- end Rotate counter clockwise ----------*/



/* --------------------- Hook swings  ----------*/
@-moz-keyframes arm {
    from {-moz-transform:rotate(-4deg);}
    to {-moz-transform:rotate(4deg);}
}

@-o-keyframes arm {
    from {-o-transform:rotate(-4deg);}
    to {-o-transform:rotate(4deg);;}
}

@keyframes arm {
    from {transform:rotate(-4deg);}
    to {transform:rotate(4deg);}
}

@-webkit-keyframes arm {
  from {-webkit-transform:rotate(-4deg);}
  to {-webkit-transform:rotate(4deg);}  
}
/* --------------------- end Hook swings  ----------*/



.arm {
  -webkit-transform-origin:0% 60%;
  -moz-transform-origin:0% 60%;
  -o-transform-origin:0% 60%;
  transform-origin:0% 60%;
  -webkit-animation:arm 1.9s ease-in-out infinite alternate;
  -moz-animation:arm 1.9s ease-in-out infinite alternate;
  -o-animation:arm 1.9s ease-in-out infinite alternate;
  animation:arm 1.9s ease-in-out infinite alternate;
}

.turn {
    -webkit-animation-name: rotate;  animation-name: rotate;  -moz-animation-name: rotate;  -o-animation-name: rotate;
    -webkit-animation-duration: 11s;  animation-duration: 11s; -moz-animation-duration: 11s; -o-animation-duration: 11s; 
    -webkit-animation-iteration-count:  infinite; animation-iteration-count:  infinite; -moz-animation-iteration-count:  infinite; -o-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear; animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear;
}

.turn2 {
    -webkit-animation-name: rotate2;  animation-name: rotate2;  -moz-animation-name: rotate2;  -o-animation-name: rotate2;
    -webkit-animation-duration: 11s;  animation-duration: 11s; -moz-animation-duration: 11s; -o-animation-duration: 11s;
    -webkit-animation-iteration-count:  infinite; animation-iteration-count:  infinite; -moz-animation-iteration-count:  infinite; -o-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear; animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear;
}

.slowturn {
    -webkit-animation-duration: 24s;  animation-duration: 24s; -moz-animation-duration: 24s; -o-animation-duration: 24s;
}