body{
    background: #196a73; /* Old browsers */
    background-image:url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/noise.gif');
    height:100%;
}
#level{
    width:100%;
    height:1px;
    position:absolute;
    top:57%;
}
#content{
    text-align:center;
    margin-top:-327px;
}
#gears{
    width:478px;
    height:655px;
    position:relative;
    display:inline-block;
    vertical-align:middle;
    float: left;
    left: 17%;
}
#gears-static{
    background:url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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;
    margin-top: 180px;
    text-align: center;
}
#title h1{
    font-family: 'PTSansNarrowBold', sans-serif;
    font-size:3.6em;
    text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;
}
#title p{
    font-family: sans-serif;
    font-size:1.2em;
    line-height:148%;
    text-shadow:rgba(0, 0, 0, 0.36) 1px 1px 0px;
}

.shadow{
    -webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
    -moz-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
    box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
}

/*gear-system-1*/
#gear15{
    background: url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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;
}
#shadow15{
    width:306px;
    height:306px;
    -webkit-border-radius:153px;
    -moz-border-radius:153px;
    border-radius:153px;
    position:absolute;
    left:52px;
    top:186px;
}
#gear14{
    background: url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/gears.png') no-repeat 0 -856px; 
    width: 87px; 
    height: 87px;
    position:absolute;
    left:162px;
    top:296px;
}
#shadow14{
    width:70px;
    height:70px;
    -webkit-border-radius:35px;
    -moz-border-radius:35px;
    border-radius:35px;
    position:absolute;
    left:171px;
    top:304px;
}
#gear13{
    background: url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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;
}
#shadow13{
    width:36px;
    height:36px;
    -webkit-border-radius:18px;
    -moz-border-radius:18px;
    border-radius:18px;
    position:absolute;
    left:187px;
    top:322px;
}

/*gear-system-2*/
#gear10{
    background: url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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;
}
#shadow10{
    width:86px;
    height:86px;
    -webkit-border-radius:43px;
    -moz-border-radius:43px;
    border-radius:43px;
    position:absolute;
    left:193px;
    top:18px;
}
#gear3{
    background: url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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;
}
#shadow3{
    width:60px;
    height:60px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
    position:absolute;
    left:206px;
    top:31px;
}

/*gear-system-3*/
#gear9{
    background: url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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;
}
#shadow9{
    width:200px;
    height:200px;
    -webkit-border-radius:100px;
    -moz-border-radius:100px;
    border-radius:100px;
    position:absolute;
    left:214px;
    top:113px;
}
#gear7{
    background: url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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;
}
#shadow7{
    width:76px;
    height:76px;
    -webkit-border-radius:38px;
    -moz-border-radius: 38px;
    border-radius: 38px;
    position:absolute;
    left:276px;
    top:175px;
}

/*gear-system-4*/
#gear6{
    background: url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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;
}
#shadow6{
    width:98px;
    height:98px;
    -webkit-border-radius:49px;
    -moz-border-radius: 49px;
    border-radius: 49px;
    position:absolute;
    left:323px;
    bottom:230px;
}
#gear4{
    background: url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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;
}
#shadow12{
    width:124px;
    height:124px;
    -webkit-border-radius:62px;
    -moz-border-radius:62px;
    border-radius:62px;
    position:absolute;
    left:225px;
    bottom:107px;
}
#gear11{
    background: url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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;
}
#shadow11{
    width:88px;
    height:88px;
    -webkit-border-radius:44px;
    -moz-border-radius:44px;
    border-radius:44px;
    position:absolute;
    left:247px;
    bottom:123px;
}
#gear8{
    background: url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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;
}
#shadow8{
    width:42px;
    height:42px;
    -webkit-border-radius:21px;
    -moz-border-radius: 21px;
    border-radius: 21px;
    position:absolute;
    left:269px;
    bottom:146px;
}

/*gear1*/
#gear1{
    background: url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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;
}
#shadow1{
    width:96px;
    height:96px;
    -webkit-border-radius:48px;
    -moz-border-radius:48px;
    border-radius:48px;
    position:absolute;
    left:103px;
    bottom:130px;
}

/*gear-system-6*/
#gear5{
    background: url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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;
}
#shadow5{
    width:96px;
    height:96px;
    -webkit-border-radius:48px;
    -moz-border-radius:48px;
    border-radius:48px;
    position:absolute;
    left:41px;
    top:127px;
}
#gear2{
    background: url('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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;
}
#shadowweight{
    width:10px;
    height:80px;
    position:absolute;
    left:12px;
    bottom:0px;
    
    -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('https://d2qcctj8epnr7y.cloudfront.net/images/jayson/contrib/bg/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 #C8D94A;
    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*/
@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);
}
}

@-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);
 }
}
/*rotate-back*/
@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);
}
}

@-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);
 }
}
/*weight up*/
@keyframes "up" {
   from {
    bottom: 0px;
}
to {
    bottom: 340px;
}
}

@-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;
 }
}
/*chain up and down*/
@keyframes "collapse" {
   from {
    height: 387px;
}
to {
    height: 48px;
}
}

@-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;
 }
}
/* medium desktop */
@media (max-width: 1024px) {
   #gears{
      left: 5%;
  }
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
   #title{
      background-color: rgba(25, 106, 115, 0.5);
      margin-top: 70px;
      padding: 50px 0;
  }
  #level{
      top: 50%;
  }
}
/* Landscape phones and down */
@media (max-width: 480px) {
   #title{
      background-color: rgba(25, 106, 115, 0.5);
      margin-top: 70px;
      padding: 50px 0;
  }
}