/*
TABLE OF CONTENT

1. common page styles
2. styles for illustration elements
3. animations
*/

/*
COMMON PAGE STYLES
*/
body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background: #f2f2f2;
  height: 100%;
}
/*
STYLES FOR ILLUSTRATION ELEMENTS
*/
#level {
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
}
#content {
  text-align: center;
  margin-top: -327px;
}
#gears {
  width: 478px;
  height: 655px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
#gears-static {
  background: url(gears.png) no-repeat -363px -903px;
  width: 329px;
  height: 602px;
  position: absolute;
  bottom: 5px;
  right: 0px;
  opacity: 0.4;
}
#title {
  vertical-align: middle;
  color: #9eb7b5;
  width: 43%;
  display: inline-block;
}
#title h1 {
  font-family: 'PTSansNarrowBold', sans-serif;
  font-size: 2.4em;
}
#title h2 {
  font-family: 'PTSansNarrowBold', sans-serif;
  font-size: 1.4em;
}
#title p {
  font-family: sans-serif;
  font-size: 1.2em;
  line-height: 148%;
}

/*gear-system-1*/
#gear15 {
  background: url(gears.png) no-repeat 0 -993px;
  width: 321px;
  height: 321px;
  position: absolute;
  left: 45px;
  top: 179px;

  -webkit-animation: rotate-back 24000ms linear infinite;
  -moz-animation: rotate-back 24000ms linear infinite;
  -ms-animation: rotate-back 24000ms linear infinite;
  animation: rotate-back 24000ms linear infinite;
}

#gear14 {
  background: url(gears.png) no-repeat 0 -856px;
  width: 87px;
  height: 87px;
  position: absolute;
  left: 162px;
  top: 296px;
}

#gear13 {
  background: url(gears.png) no-repeat 0 -744px;
  width: 62px;
  height: 62px;
  position: absolute;
  left: 174px;
  top: 309px;

  -webkit-animation: rotate 8000ms linear infinite;
  -moz-animation: rotate 8000ms linear infinite;
  -ms-animation: rotate 8000ms linear infinite;
  animation: rotate 8000ms linear infinite;
}

/*gear-system-2*/
#gear10 {
  background: url(gears.png) no-repeat 0 -184px;
  width: 122px;
  height: 122px;
  position: absolute;
  left: 175px;
  top: 0;

  -webkit-animation: rotate-back 8000ms linear infinite;
  -moz-animation: rotate-back 8000ms linear infinite;
  -ms-animation: rotate-back 8000ms linear infinite;
  animation: rotate-back 8000ms linear infinite;
}

#gear3 {
  background: url(gears.png) no-repeat 0 -1493px;
  width: 85px;
  height: 84px;
  position: absolute;
  left: 194px;
  top: 19px;

  -webkit-animation: rotate 10000ms linear infinite;
  -moz-animation: rotate 10000ms linear infinite;
  -ms-animation: rotate 10000ms linear infinite;
  animation: rotate 10000ms linear infinite;
}

/*gear-system-3*/
#gear9 {
  background: url(gears.png) no-repeat -371px -280px;
  width: 234px;
  height: 234px;
  position: absolute;
  left: 197px;
  top: 96px;

  -webkit-animation: rotate 12000ms linear infinite;
  -moz-animation: rotate 12000ms linear infinite;
  -ms-animation: rotate 12000ms linear infinite;
  animation: rotate 12000ms linear infinite;
}

#gear7 {
  background: url(gears.png) no-repeat -371px 0;
  width: 108px;
  height: 108px;
  position: absolute;
  left: 260px;
  top: 159px;

  -webkit-animation: rotate-back 10000ms linear infinite;
  -moz-animation: rotate-back 10000ms linear infinite;
  -ms-animation: rotate-back 10000ms linear infinite;
  animation: rotate-back 10000ms linear infinite;
}

/*gear-system-4*/
#gear6 {
  background: url(gears.png) no-repeat 0 -1931px;
  width: 134px;
  height: 134px;
  position: absolute;
  left: 305px;
  bottom: 212px;

  -webkit-animation: rotate-back 10000ms linear infinite;
  -moz-animation: rotate-back 10000ms linear infinite;
  -ms-animation: rotate-back 10000ms linear infinite;
  animation: rotate-back 10000ms linear infinite;
}

#gear4 {
  background: url(gears.png) no-repeat 0 -1627px;
  width: 69px;
  height: 69px;
  position: absolute;
  left: 337px;
  bottom: 245px;

  -webkit-animation: rotate-back 10000ms linear infinite;
  -moz-animation: rotate-back 10000ms linear infinite;
  -ms-animation: rotate-back 10000ms linear infinite;
  animation: rotate-back 10000ms linear infinite;
}

/*gear-system-5*/
#gear12 {
  background: url(gears.png) no-repeat 0 -530px;
  width: 164px;
  height: 164px;
  position: absolute;
  left: 208px;
  bottom: 85px;

  -webkit-animation: rotate 8000ms linear infinite;
  -moz-animation: rotate 8000ms linear infinite;
  -ms-animation: rotate 8000ms linear infinite;
  animation: rotate 8000ms linear infinite;
}

#gear11 {
  background: url(gears.png) no-repeat 0 -356px;
  width: 125px;
  height: 124px;
  position: absolute;
  left: 228px;
  bottom: 105px;

  -webkit-animation: rotate-back 10000ms linear infinite;
  -moz-animation: rotate-back 10000ms linear infinite;
  -ms-animation: rotate-back 10000ms linear infinite;
  animation: rotate-back 10000ms linear infinite;
}

#gear8 {
  background: url(gears.png) no-repeat -371px -158px;
  width: 72px;
  height: 72px;
  position: absolute;
  left: 254px;
  bottom: 131px;

  -webkit-animation: rotate 6000ms linear infinite;
  -moz-animation: rotate 6000ms linear infinite;
  -ms-animation: rotate 6000ms linear infinite;
  animation: rotate 6000ms linear infinite;
}

/*gear1*/
#gear1 {
  background: url(gears.png) no-repeat 0 0;
  width: 135px;
  height: 134px;
  position: absolute;
  left: 83px;
  bottom: 111px;

  -webkit-animation: rotate-back 10000ms linear infinite;
  -moz-animation: rotate-back 10000ms linear infinite;
  -ms-animation: rotate-back 10000ms linear infinite;
  animation: rotate-back 10000ms linear infinite;
}

/*gear-system-6*/
#gear5 {
  background: url(gears.png) no-repeat 0 -1746px;
  width: 134px;
  height: 135px;
  position: absolute;
  left: 22px;
  top: 108px;

  -webkit-animation: rotate 10000ms linear infinite alternate;
  -moz-animation: rotate 10000ms linear infinite alternate;
  -ms-animation: rotate 10000ms linear infinite alternate;
  animation: rotate 10000ms linear infinite alternate;
}

#gear2 {
  background: url(gears.png) no-repeat 0 -1364px;
  width: 80px;
  height: 79px;
  position: absolute;
  left: 49px;
  top: 136px;

  -webkit-animation: rotate-back 10000ms linear infinite alternate;
  -moz-animation: rotate-back 10000ms linear infinite alternate;
  -ms-animation: rotate-back 10000ms linear infinite alternate;
  animation: rotate-back 10000ms linear infinite alternate;
}

/*weight*/
#weight {
  background: url(gears.png) no-repeat -371px -564px;
  width: 34px;
  height: 92px;
  position: absolute;
  left: 1px;
  bottom: 0;

  -webkit-animation: up 10000ms linear infinite alternate;
  -moz-animation: up 10000ms linear infinite alternate;
  -ms-animation: up 10000ms linear infinite alternate;
  animation: up 10000ms linear infinite alternate;
}

/*chain*/
#chain-circle {
  background: url(gears.png) no-repeat -371px -706px;
  width: 146px;
  height: 147px;
  position: absolute;
  left: 17px;
  top: 102px;

  -webkit-animation: rotate 10000ms linear infinite alternate;
  -moz-animation: rotate 10000ms linear infinite alternate;
  -ms-animation: rotate 10000ms linear infinite alternate;
  animation: rotate 10000ms linear infinite alternate;
}
#chain {
  width: 1px;
  height: 380px;
  border-left: 2px dotted #808080;
  position: absolute;
  left: 17px;
  top: 175px;
  opacity: 0.7;

  -webkit-animation: collapse 10000ms linear infinite alternate;
  -moz-animation: collapse 10000ms linear infinite alternate;
  -ms-animation: collapse 10000ms linear infinite alternate;
  animation: collapse 10000ms linear infinite alternate;
}

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

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

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

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

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*rotate-back*/
@-moz-keyframes rotate-back {
  from {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

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

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

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

@keyframes rotate-back {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
/*weight up*/
@-moz-keyframes up {
  from {
    bottom: 0px;
  }
  to {
    bottom: 340px;
  }
}

@-webkit-keyframes "up" {
  from {
    bottom: 0px;
  }
  to {
    bottom: 340px;
  }
}

@-ms-keyframes "up" {
  from {
    bottom: 0px;
  }
  to {
    bottom: 340px;
  }
}

@-o-keyframes "up" {
  from {
    bottom: 0px;
  }
  to {
    bottom: 340px;
  }
}

@keyframes up {
  from {
    bottom: 0px;
  }
  to {
    bottom: 340px;
  }
}
/*chain up and down*/
@-moz-keyframes collapse {
  from {
    height: 387px;
  }
  to {
    height: 48px;
  }
}

@-webkit-keyframes "collapse" {
  from {
    height: 387px;
  }
  to {
    height: 48px;
  }
}

@-ms-keyframes "collapse" {
  from {
    height: 387px;
  }
  to {
    height: 48px;
  }
}

@-o-keyframes "collapse" {
  from {
    height: 387px;
  }
  to {
    height: 48px;
  }
}

@keyframes collapse {
  from {
    height: 387px;
  }
  to {
    height: 48px;
  }
}