/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3K8-C8CSKlvPfE.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3K9-C8CSKlvPfE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3Kz-C8CSKlv.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body{
  margin:0px;
  padding:0px;
  overflow:hidden;
  background: #196a73; /* Old browsers */
  background-image:url(noise.gif);
  height:100%;
}
#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: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(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(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(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(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(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(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(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(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(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;
}
#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(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(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(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(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(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;
}
#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(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;
 }
}