@font-face {
  font-family: 'GillSans_condensed';
  src: url('fonts/GillSans_condensed.svg');
  src: url('fonts/GillSans_condensed.ttf');
}
@font-face {
  font-family: 'GillSans';
  src: url('fonts/GillSans.svg');
  src: url('fonts/GillSans.ttf');
}
@font-face {
  font-family: 'GillSans';
  src: url('fonts/GillSans_Bold.svg');
  src: url('fonts/GillSans_Bold.ttf');
  font-weight:bold;
}

* {border:0; margin:0; padding:0; font-family:GillSans; background-size:100% 100%;}

.btSeta {position: absolute; cursor: pointer; width:50px; height:100px; left: 816px; top: 340px; opacity:.8; filter: drop-shadow(2px 2px 3px rgba(0,0,0,.5)); z-index:15;}

.btSeta.disabled {opacity:.2; pointer-events:none!important;}
.btSeta.btPrev {left:10px; top:270px; transform:rotate(180deg);}
.btSeta.btNext {left:967px; top:270px;}
.setaInicio {border: 25px solid transparent; border-top-color: #fff; position: fixed; bottom: 90px; left: 100px; opacity: .8; cursor:pointer; animation:.8s setaInicio infinite alternate; filter: drop-shadow(2px 2px 3px rgba(0,0,0,.5)); z-index:20;}

/* .btSeta:hover:before {border-left-color: #ff0;} */
.btSeta:before {border: 50px solid transparent; border-left-color: #fff; content: ""; position: absolute;}

#stage {display:block; width:1024px; height:768px; overflow:hidden; position:absolute;}
#stage #console{display:block; width:1024px; height:100px; overflow:hidden; position:absolute; top:0; left:0; pointer-events:none; z-index:100000; font-size:20px;}

#abertura {display:none; width:100%; height:100%; overflow:hidden; position:absolute; background-image:url(../assets/imagens/bg_abertura.jpg);}
#abertura .titulo {font-family: GillSans; font-size: 120px; font-weight: bold; margin: auto; text-align: center; line-height: 71px;color:#363432;} 
#abertura .titulo span{display: inline-block; font-size: 60px; letter-spacing: 55px; text-indent: 54px; font-weight: normal; text-align: left;}
#abertura .texto {position: absolute; width: 599px; top: 184px; margin: auto; left: 40px; right: 0; font-weight: bold; line-height: 21px; color:#363432;}
#abertura .menina {position: absolute; width: 368px; height: 344px; margin: 0 auto; left: 50px; right: 0; bottom: 0; background-image: url(../assets/imagens/menina_abertura.png);}


#timeline .counter {position:fixed; top:20px; left:20px; z-index:10; width:200px; height:50px; display:none;}
#timeline .cenarios {position:absolute; width:100%; height:100%; z-index:0;}
#timeline .cenario {width:100%; height:100%; position:absolute;}
#timeline .cenario[data-fase='ativo']{z-index:5;}
#timeline .cenario[data-fase='tweening']{z-index:4;}
#timeline .cenario[data-fase='abre']{z-index:3;}
#timeline .cenario[data-fase='inativo']{z-index:1; display:none;}
#timeline .cenario.dia {background-image:url(../assets/imagens/cenario_dia.png);}
#timeline .cenario.tarde {background-image:url(../assets/imagens/cenario_tarde.png);}
#timeline .cenario.noite {background-image:url(../assets/imagens/cenario_noite.png);}

#timeline .ceu {width:100%; height:100%; position:absolute;}
#timeline .ceu[data-fase='ativo']{z-index:5;}
#timeline .ceu[data-fase='tweening']{z-index:4;}
#timeline .ceu[data-fase='abre']{z-index:3;}
#timeline .ceu[data-fase='inativo']{z-index:1; display:none;}
#timeline .ceu.dia {background-image:url(../assets/imagens/ceu_dia.png);}
#timeline .ceu.tarde {background-image:url(../assets/imagens/ceu_tarde.png);}
#timeline .ceu.noite {background-image:url(../assets/imagens/ceu_noite.png);}

#timeline .cenario.abre[data-bg='dia'] {background-image:url(../assets/imagens/cenario_dia.png);}
#timeline .cenario.abre[data-bg='tarde'] {background-image:url(../assets/imagens/cenario_tarde.png);}
#timeline .cenario.abre[data-bg='noite'] {background-image:url(../assets/imagens/cenario_noite.png);}

#timeline .ceu.abre[data-bg='dia']   {background-image:url(../assets/imagens/ceu_dia.png);}
#timeline .ceu.abre[data-bg='tarde'] {background-image:url(../assets/imagens/ceu_tarde.png);}
#timeline .ceu.abre[data-bg='noite'] {background-image:url(../assets/imagens/ceu_noite.png);}



#timeline .sol {width:200px; height:200px; position:fixed; left:900px; top:350px; background-image:url(../assets/imagens/sol.png); opacity:0;}
#timeline .lua {width:90px; height:100px; position:fixed; right:100px; top:50px; background-image:url(../assets/imagens/lua.png); opacity:0;}


#timeline .page {width:1024px; height:768px; float:left; text-align:center; position:relative; z-index:10;}
#timeline .block {width:1024px; height:768px; float:left; text-align:center; position:absolute; z-index:15; display:none;}
#timeline .menina {width:260px; height:260px; position:fixed; left:0; right:0; margin:0 auto; bottom:130px; background-image:url(../assets/imagens/sprite_menina.png); background-size:500%; z-index:15;}
/* #timeline .menina[data-sentido='vai'] {transform:scale(1)} */
/* #timeline .menina[data-sentido='volta'] {transform:scale(-1,1)} */

#timeline .menina[data-anima='stopped'] {background-position-y:-0; background-position-x:-0; z-index:0;}
#timeline .menina[data-anima='anda'][data-sentido='vai'] {background-position-y:-0;}
#timeline .menina[data-anima='corre'][data-sentido='vai'] {background-position-y:-260px;}
#timeline .menina[data-anima='anda'][data-sentido='volta'] {background-position-y:-520px;}
#timeline .menina[data-anima='corre'][data-sentido='volta'] {background-position-y:-780px;}

#timeline .menina[data-anima='fotoDir'] {background-position-y:-1040px; z-index:0;}
#timeline .menina[data-anima='fotoEsq'] {background-position-y:-1300px; z-index:0;}
#timeline .menina[data-anima='vira'] {background-position-y:-1560px; z-index:0;}

#timeline {display:none; width:1024px; height:768px; position:absolute; overflow: hidden; transform: translateX(0px);}
#timeline .slide{left:0; width:5120px; height:768px; position:absolute;/*  background-image:url(../assets/imagens/!base_timeline.jpg); */}

#timeline .page .barra:before{border: 30px solid transparent; border-right-color: #fff; content: ""; position: absolute; top: -12px; transform: rotate(-90deg) scaleX(.6); right: -30px; opacity: .8; cursor:pointer;}
#timeline #con .barra:before { transform: scaleX(1.5) rotate(180deg); right: -10px; border-width: 17px; top: 2px;}
#timeline #con .barra .data {padding-right: 50px;}

#timeline .page .barra:after{border: 30px solid transparent; border-left-color: #fff; content: ""; position: absolute; top: -12px; transform: rotate(90deg) scaleX(.6); left: -30px; opacity: .8; cursor:pointer;}
#timeline #pre .barra:after {transform: scaleX(1.5) rotate(180deg); border-width: 17px; top: 2px; left: -10px;}

#timeline .barra .data .ano0{position:absolute; left:652px; top:0;}
#timeline .barra .data .ano0:before{border: 18px solid transparent; border-right-color: #fff; content: ""; position: absolute; top: -10px; transform: rotate(-90deg) scaleX(.6); right: -12px; opacity: .8; cursor: pointer;}

#timeline .barra.open{bottom:0;}
#timeline .barra{ width: 100%; height: 230px; position: absolute; bottom: -129px; overflow:hidden; transition:.5s bottom; cursor:pointer;}
#timeline .barra .data { font-family: GillSans; font-size: 24px; font-weight: bold; margin: auto; text-align: right; color: #940101; line-height: 40px; height: 40px; box-sizing:border-box; padding-right:40px; } 
#timeline .barra .titulo{ font-size: 36px; letter-spacing: 35px; text-align: center; color: #940101; line-height: 55px; }
#timeline .barra .texto { top: 184px; line-height: 21px; color: #940101; text-align: left; font-size: 18px; padding: 10px 250px 0 180px; }

#timeline .popTexto {position: absolute; display: table; width: 348px; padding: 20px 20px 30px 30px; color: #500505; opacity: .8; box-sizing: border-box; opacity:0; transition: .5s opacity; pointer-events: none; }
#timeline .popTexto h2{ font-size:20px; line-height:24px; font-weight:bold; text-align:left; margin-bottom:10px; }
#timeline .popTexto p{ font-size:18px; line-height:24px; font-weight:normal; text-align:left;}
#timeline .popTexto.open{opacity:1;}

#timeline #pre .popTexto {background-color:#f8bf3a;}
#timeline #ant .popTexto {background-color:#f68a3a;}
#timeline #med .popTexto {background-color:#ef57bf;}
#timeline #mod .popTexto {background-color:#bb5ef6;}
#timeline #con .popTexto {background-color:#3a8af6;}

#timeline .popTexto:before{border: 30px solid transparent; content: ""; position: absolute; top: 0px;}

#timeline .popTexto.setaEsq:before{transform: scaleX(.6); left: -48px;}
#timeline .popTexto.setaDir:before{transform: scaleX(.6) rotate(180deg); right:-48px;}
#timeline .popTexto.setaBaixo:before{border-right-color: #f8bf3a; top: auto; bottom: -48px; transform: scaleY(.6) rotate(-90deg); left: 0;}

#timeline #pre .popTexto:before { border-right-color:#f8bf3a;}
#timeline #ant .popTexto:before { border-right-color:#f68a3a;}
#timeline #med .popTexto:before { border-right-color:#ef57bf;}
#timeline #mod .popTexto:before { border-right-color:#bb5ef6;}
#timeline #con .popTexto:before { border-right-color:#3a8af6;}
#timeline #con .popTexto.tx1:before {top:auto; bottom:0;}
	
#timeline #pre .popTexto.tx1{left: 530px; top: 75px;}
#timeline #pre .popTexto.tx2{left: 570px; top: 30px;}

#timeline #ant .popTexto.tx1{left: 150px; top: 45px; width:370px;}
#timeline #ant .popTexto.tx2{left: 302px; top: 80px;}

#timeline #med .popTexto.tx1{left: 428px; top: 35px;}
#timeline #med .popTexto.tx2{left: 390px; top: 65px; width:320px;}

#timeline #mod .popTexto.tx1{left: 400px; top: 64px;}
#timeline #mod .popTexto.tx2{left: 267px; top: 116px; width:400px;}

#timeline #con .popTexto.tx1{left: 250px; top: 20px; width:390px;}
#timeline #con .popTexto.tx2{left: 150px; top: 24px; width:360px;}

#timeline #ant .popTexto.ano0 {width: 290px; bottom: -300px; left: 660px; border-bottom: 110px solid #f7731f; padding: 20px; display: block; box-sizing: border-box; transition: .5s all; }
#timeline #ant .popTexto.ano0:before {display:none;}
#timeline #ant .popTexto.ano0.open {bottom:0;}
#timeline #ant .popTexto.ano0 p{line-height:20px;}

#timeline .popTexto .fecharPop{ position:absolute; width:40px; height:40px; font-size:32px; line-height:40px; text-align:center; cursor:pointer; top:0; right:0; pointer-events:auto; }



#timeline .brilho {position: absolute; cursor:pointer; background-size:auto;pointer-events:none; }
#timeline #pre .brilho.b1{left: 32px; top: 70px; width: 500px; height: 250px; background-image: url(../assets/imagens/brilho_osso.png);}
#timeline #pre .brilho.b2{left: 499px; top: 237px; width: 600px; height: 200px; background-image:url(../assets/imagens/brilho_stone.png);}
#timeline #ant .brilho.b1{left: 48px;  top: 250px; width: 550px; height: 162px; background-image:url(../assets/imagens/brilho_piramide.png);}
#timeline #ant .brilho.b2{left: 640px; top: 55px;  width: 280px; height: 445px; background-image:url(../assets/imagens/brilho_clepsidra.png);}
#timeline #med .brilho.b1{left: 171px; top: 44px;  width: 235px; height: 362px; background-image:url(../assets/imagens/brilho_ampulheta.png);}
#timeline #med .brilho.b2{left: 732px; top: 24px;  width: 172px; height: 390px; background-image:url(../assets/imagens/brilho_sino.png);}
#timeline #mod .brilho.b1{left: 162px; top: 31px;  width: 215px; height: 264px; background-image:url(../assets/imagens/brilho_relogio_parede.png);}
#timeline #mod .brilho.b2{left: 629px; top: 177px; width: 340px; height: 314px; background-image:url(../assets/imagens/brilho_relogio_maritimo.png);}
#timeline #con .brilho.b1{left: 104px; top: 105px; width: 370px; height: 207px; background-image:url(../assets/imagens/brilho_relogio_industria.png);}
#timeline #con .brilho.b2{left: 540px; top: 20px;  width: 456px; height: 556px; background-image:url(../assets/imagens/brilho_cidade.png);}

#timeline #pre .barra {background-color:#f8b21f;}
#timeline #ant .barra {background-color:#f7731f;}
#timeline #med .barra {background-color:#f246a2;}
#timeline #mod .barra {background-color:#c64bf2;}
#timeline #con .barra {background-color:#4373f2;}
#timeline #con .barra .titulo {letter-spacing:25px}

#timeline #pre .barra .data {background-color:#f8bf3a;}
#timeline #ant .barra .data {background-color:#f68a3a;}
#timeline #med .barra .data {background-color:#ef57bf;}
#timeline #mod .barra .data {background-color:#bb5ef6;}
#timeline #con .barra .data {background-color:#3a8af6;}

#timeline .link {position: absolute; cursor:pointer;}
#timeline #pre .link.lk1{left: 60px; top: 127px; width: 440px; height: 140px; transform: skewY(-10deg); border-radius: 50px;}
#timeline #pre .link.lk2{left: 520px; top: 270px; width: 500px; height: 150px;}

#timeline #ant .link.lk1{left: 80px; top: 263px; width: 440px; height: 140px; border-radius: 150px 150px 0 0;}
#timeline #ant .link.lk2{left: 662px; top: 70px; width: 250px; height: 400px; border-radius: 80px 50px 80px 80px;}

#timeline #med .link.lk1{left: 198px; top: 55px; width: 180px; height: 330px; transform: rotate(-5deg);}
#timeline #med .link.lk2{left: 729px; top: 35px; width: 170px; height: 350px;}

#timeline #mod .link.lk1{left: 170px; top: 34px; width: 200px; height: 260px; border-radius: 80px;}
#timeline #mod .link.lk1a{left: 230px; top: 264px; width: 80px; height: 290px; border-radius: 0px 0px 80px 80px;}
#timeline #mod .link.lk2{left: 657px; top: 136px; width: 280px; height: 360px; border-radius: 150px 150px 0 0;}

#timeline #con .link.lk1{left: 120px; top: 114px; width: 320px; height: 340px;}
#timeline #con .link.lk2{left: 550px; top: 34px; width: 410px; height: 550px; border-bottom-left-radius: 200px;}


#timeline .page .objetos{position:absolute; width:100%; height:100%}

/* pre */
#timeline .page .animaOsso{left: 272px; top: 115px; width: 210px; height: 129px; position: absolute; background-image:url(../assets/imagens/sprite_osso.png); background-size:auto; opacity:.8;}
#timeline .page .animaStone{left: 589px; top: 219px; width: 450px; height: 135px; position: absolute; background-image:url(../assets/imagens/sprite_stone.png); background-size:auto; opacity:.6;}

/* antiga */
#timeline .page .animaPiramide{left: 49px; top: 300px; width: 630px; height: 150px; position: absolute; background-image:url(../assets/imagens/sprite_piramide.png); background-size:auto; opacity:.7;}
#timeline .page .clepsidra{left: 658px; top: 73px; width: 250px; height: 409px; position: absolute; background-image: url(../assets/imagens/clepsidra.png);}
#timeline .page .clepsidra .mask{width: 250px; height: 409px; position: absolute; background-image: url(../assets/imagens/clepsidra_mask.png);}
#timeline .page .clepsidra .chegando{width: 100px; height: 64px; position: absolute; background-image: url(../assets/imagens/clepsidra_chegando.png); background-size: auto; top: 42px; left: 69px; background-position-x: 0px;}
#timeline .page .clepsidra .agua.topo{width: 110px; height: 28px; position: absolute; background-image: url(../assets/imagens/clepsidra_agua.png); background-size: auto; top: 90px;left: 57px; animation:.6s agua infinite steps(2,end);}
#timeline .page .clepsidra .agua.baixo{width: 110px; height: 28px; position: absolute; background-image: url(../assets/imagens/clepsidra_agua.png); background-size: auto; top: 234px;left: 57px; animation:.6s agua infinite steps(2,start);}
#timeline .page .clepsidra .gota{width: 15px; height: 20px; position: absolute; background-image: url(../assets/imagens/clepsidra_gota.png); background-size: auto; background-position-x: -30px; top: 236px; left: 106px;}

/* media */
#timeline .page .ampulheta{left: 175px; top: 49px; width: 220px; height: 360px; position: absolute; background-image: url(../assets/imagens/ampulheta_base.png);}
#timeline .page .ampulheta .anima{width: 220px; height: 360px; position: absolute; background-image: url(../assets/imagens/sprite_ampulheta.png); background-size:auto;}
#timeline .page .ampulheta .mask{width: 220px; height: 360px; position: absolute; background-image: url(../assets/imagens/ampulheta_mask.png);}
#timeline .page .sino{position: absolute; left: 641px; top: 74px; width: 350px; height: 160px; background-image: url(../assets/imagens/sprite_sino.png); background-size:auto;}

/* Moderna */
#timeline .page .relogioMaritmo{left: 620px; top: 134px; width: 360px; height: 360px; position: absolute; background-image: url(../assets/imagens/relogio_maritimo_base.png);}
#timeline .page .relogioMaritmo .mask{width: 360px; height: 360px; position: absolute; background-image: url(../assets/imagens/relogio_maritimo_mask.png);}
#timeline .page .relogioMaritmo .penduloDir{left: 153px; top: 8px; width: 130px; height: 280px; position: absolute; background-image: url(../assets/imagens/relogio_maritimo_penduloDir.png); animation:3s penduloDir infinite ease-in-out;}
#timeline .page .relogioMaritmo .penduloEsq{left: 69px; top: 8px; width: 130px; height: 280px; position: absolute; background-image: url(../assets/imagens/relogio_maritimo_penduloEsq.png); animation:3s penduloEsq infinite ease-in-out;}
#timeline .page .relogioMaritmo .mola{left: 136px; top: 44px; width:  80px; height:  30px; position: absolute; background-image: url(../assets/imagens/relogio_maritimo_mola.png); animation:3s mola infinite ease-in-out;}
#timeline .page .relogioMaritmo .ponteiros{width: 50px; height: 50px; position: absolute;}
#timeline .page .relogioMaritmo .ponteiros.minutos{left: 156px; top: 191px;}
#timeline .page .relogioMaritmo .ponteiros.horas{left: 130px; top: 229px;}
#timeline .page .relogioMaritmo .ponteiros.dias{left: 183px; top: 229px;}
#timeline .page .relogioMaritmo .ponteiros.semana{left: 156px; top: 264px;}
#timeline .page .relogioMaritmo .ponteiro{left: 0; top: 0; bottom:0; right:0; margin:auto; width: 16px; height: 55px; position: absolute;}
#timeline .page .relogioMaritmo .ponteiro1{background-image: url(../assets/imagens/relogio_maritimo_ponteiro1.png); }
#timeline .page .relogioMaritmo .ponteiro2{background-image: url(../assets/imagens/relogio_maritimo_ponteiro2.png); }
#timeline .page .relogioMaritmo .ponteiro3{background-image: url(../assets/imagens/relogio_maritimo_ponteiro3.png); }
#timeline .page .relogioMaritmo .ponteiros.minutos .ponteiro2{ animation:.2s ponteirosMaritimo infinite linear;}
#timeline .page .relogioMaritmo .ponteiros.horas .ponteiro2{ animation:10s ponteirosMaritimo infinite linear;}
#timeline .page .relogioMaritmo .ponteiros.dias .ponteiro2{ animation:60s ponteirosMaritimo infinite linear;}
#timeline .page .relogioMaritmo .ponteiros.semana .ponteiro3{ animation: 2880s ponteirosMaritimo infinite steps(24,start);}

#timeline .page .relogioMaritmo .ponteiros.minutos .ponteiro1{transform:rotate(23deg)}
#timeline .page .relogioMaritmo .ponteiros.horas .ponteiro1  {transform:rotate(-68deg)}
#timeline .page .relogioMaritmo .ponteiros.dias .ponteiro1   {transform:rotate(192deg)}


#timeline .page .relogioParede{left: 138px; top: 30px; width: 260px; height: 540px; position: absolute; background-image: url(../assets/imagens/relogio_parede_base.png);}
#timeline .page .relogioParede .ponteiroHora{position: absolute; left: 122px; top: 107px; width: 21px; height: 81px; background-image: url(../assets/imagens/ponteiro_parede_hora.png);}
#timeline .page .relogioParede .ponteiroMinuto{position: absolute; left: 122px; top: 107px; width: 21px; height: 81px; background-image: url(../assets/imagens/ponteiro_parede_minuto.png);}
#timeline .page .relogioParede .pendulo{position: absolute; left: 101px; top: 252px; width: 51px; height: 250px; transform-origin: 50% 0%; background-image: url(../assets/imagens/relogio_parede_pendulo.png); animation:3s pendulo infinite ease-in-out;}
#timeline .page .relogioParede .mask{width: 260px; height: 540px; position: absolute; background-image: url(../assets/imagens/relogio_parede_mask.png);}


/* contemporanea */
#timeline .page .animaFabrica{position: absolute; left: -20px; top: 0px; width: 560px; height: 223px; background-image: url(../assets/imagens/sprite_fumaca.png); background-size:auto; animation:.8s fumaca infinite steps(4,start); opacity:.7;}
#timeline .page .cidade{position: absolute; right: 0px; top: 3px; width: 600px; height: 404px; background-image: url(../assets/imagens/sprite_cidade.png); background-size:auto; animation:1.2s cidade infinite steps(6,start);}

#timeline .page .relogioFabrica{left: 120px; top: 110px; width: 100px; height: 100px; position: absolute; transform: scale(.9);}
#timeline .page .relogioFabrica .ponteiroHora{position: absolute; left: 50px; top: 13px; width: 11px; height: 41px; transform-origin: 50% 90%; background-image: url(../assets/imagens/ponteiro_fabrica_hora.png);}
#timeline .page .relogioFabrica .ponteiroMinuto{position: absolute; left: 50px; top: 13px; width: 11px; height: 41px; transform-origin: 50% 90%; background-image: url(../assets/imagens/ponteiro_fabrica_minuto.png);}

#timeline .page .relogioIndustria{left: 340px; top: 229px; width: 100px; height: 100px; position: absolute;}
#timeline .page .relogioIndustria .ponteiroHora{position: absolute; left: 49px; top: 16px; width: 6px; height: 14px; transform-origin: 50% 73%; background-image: url(../assets/imagens/ponteiro_industria_hora.png);}
#timeline .page .relogioIndustria .ponteiroMinuto{position: absolute; left: 49px; top: 16px; width: 6px; height: 14px; transform-origin: 50% 73%; background-image: url(../assets/imagens/ponteiro_industria_minuto.png);}

#timeline .page .relogioDigital1 {    position: absolute;
    color: #fff;
    width: 150px;
    height: 80px;
    left: 558px;
    top: 41px;
    transform: skewY(25deg);
    transform-origin: 0;}
#timeline .page .relogioDigital1 div { display: inline-block; float: left; font-family: GillSans_condensed; font-size: 45px;}

#timeline .page .relogioDigital2 {position: absolute;
    color: #fff;
    width: 150px;
    height: 80px;
    left: 622px;
    top: 289px;
    transform: skewY(-9deg) scaleX(.7);
    transform-origin: 0;}
#timeline .page .relogioDigital2 div { display: inline-block; float: left; font-family: GillSans_condensed; font-size: 27px;}

#timeline .page .relogioDigital3 {    position: absolute;
    color: #fff;
    width: 150px;
    height: 80px;
    left: 830px;
    top: 429px;
    transform: skewY(14deg) scaleX(0.7);
    transform-origin: 0;
}
#timeline .page .relogioDigital3 div { display: inline-block; float: left; font-family: GillSans_condensed; font-size: 17px;}

#timeline .page .relogioDigital4 {    position: absolute;
    color: #fff;
    width: 150px;
    height: 80px;
    left: 900px;
    top: 311px;
    transform: skewY(11deg) scaleX(.7);
    transform-origin: 0;}
#timeline .page .relogioDigital4 div { display: inline-block; float: left; font-family: GillSans_condensed; font-size: 24px;}

#timeline .page .relogioDigital5 {position: absolute;
    color: #fff;
    width: 150px;
    height: 80px;
    left: 877px;
    top: 450px;
    transform: rotate(37deg) scaleX(0.6);
    transform-origin: 0 0;}
#timeline .page .relogioDigital5 div { display: inline-block; float: left; font-family: GillSans_condensed; font-size: 50px;}

#timeline .page .relogioDigital6 {position: absolute;
    color: #fff;
    width: 300px;
    height: 150px;
    left: 734px;
    top: 180px;
    transform: scaleX(0.45) skewY(-3deg);
    transform-origin: 0 0;}
#timeline .page .relogioDigital6 div { display: inline-block; float: left; font-family: GillSans_condensed; font-size: 72px;}






@keyframes mola {
    0% 	{transform:scaleX(1.2); }
    50% {transform:scaleX(.52); }
    100%{transform:scaleX(1.2); }
}

@keyframes penduloDir {
    0% 	{transform:rotate(7deg); }
    50% {transform:rotate(-7deg); }
    100% 	{transform:rotate(7deg); }
}

@keyframes penduloEsq {
    0% 	{transform:rotate(-7deg); }
    50% {transform:rotate(7deg); }
    100% 	{transform:rotate(-7deg); }
}

@keyframes pendulo {
    0% 	{transform:rotate(20deg); }
    50% {transform:rotate(-20deg); }
    100% 	{transform:rotate(20deg); }
}

@keyframes fumaca {
    0% 	{background-position-x:0px; }
    100% 	{background-position-x:-2240px; }
}

@keyframes cidade {
    0% 	{background-position-x:0px; }
    100% 	{background-position-x:-3600px; }
}

@keyframes ponteirosMaritimo {
    0% 	{transform:rotate(0deg); }
    100% 	{transform:rotate(354deg)}
}

@keyframes agua {
    0% 	{background-position-x:0px; }
    100% 	{background-position-x:-220px; }
}

@keyframes setaInicio {
    0% 		{bottom:90px; }
    80% 	{bottom:60px;}
    100% 	{bottom:60px;}
}