/* === CSS RESET === */
html, body,  applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, 
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, 
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    text-align: center;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
*{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
img {
    margin: 0;
    border: 0;
    padding: 0;
}

ol, ul {
    list-style: none;
}
i{
    font-style: italic;
    font-weight: 300;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    background: #e2e1cf;
    color: white;
    font-size: 20px;
    font-family: "futura-pt",sans-serif;
    overflow: hidden;
}


a {
    color: #d71a21;
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: #AAA;
}

a:active {
    color: lightblue;
}

.center{
    text-align: center;
}

.sp-canvas {
    display: none;
}


.fRight{
    float: right;
}
.fLeft{
    float: left;
}
.hidden{
    display: none;
}
:focus {
    outline: 0;
}

.Clear { clear: both; height: 0; overflow: hidden; }
/*----------------------------------------------------*/
.mask{
    display: inline-block;
    overflow: hidden;
    top: 0px;
    left: 0;
    float: left;
    z-index: 10002;
    position: fixed;
}
#wrapper{
    display: inline-block;
    top: 0px;
    left: 0;
    float: left;
    z-index: 10001;
    width: 100%;
    position: absolute;
}

.page{
    position: absolute;
    overflow: hidden;
}
.pageHidden{
    display: inline-block;
    position: absolute;
    overflow: hidden;
}
.overlay{
    text-align: center;
    vertical-align: top;
}
/*
#page_0{
    background: #FFF;
}

#page_1{
    background: green;
}

#page_2{
    background: yellow;
}
#page_3{
    background: aqua;
}
#page_4{
    background: blue;
}
#page_5{
    background: darkorange;
}
#page_6{
    background: burlywood;
}
#page_7{
    background: darkmagenta;
}*/











/* NAVLeft -------------------------------------------*/
#nav{
    position: fixed;
    left: 40px;
    width: 35px;
    top: 35%; 
    display: none;
    z-index: 1000000000;
    background: transparent url(../images/bgMenu.png) top center no-repeat;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

#nav .prev{
    display: block;
    text-align: center;
    font-size: 0px;
    border-color: transparent transparent #BABABA transparent;
    border-style:solid;
    border-width:5px;
    width:0;
    height:0;
    margin: 12px;
}
#nav .next{
    display: block;
    text-align: center;
    font-size: 0px;
    border-color: #BABABA transparent transparent transparent;
    border-style:solid;
    border-width:5px;
    width:0;
    height:0;
    margin: 12px;
}
#nav a.prev:hover{
    border-color: transparent transparent #5D5D5D transparent;
}
#nav a.next:hover{
    border-color: #5D5D5D transparent transparent transparent;
}


#nav .navBtn{
    display: block;
    width: 14px;
    height: 14px;
    margin: 15px 10px;
    font-size: 0px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background: #e5e5e5;
    overflow: hidden;
}
#nav a.navBtn:hover{
    background: #444;
}
#nav .navBtnSelected{
    background: #6aa031;
}


.toolNav
{
    position: absolute;
    display: inline-block;
    width: 300px;
}
.toolNavLeft{
    display: inline-block;
    float: left;
    width: 17px;
    height: 32px;
    background: transparent url(../images/tool-left.png) top left no-repeat;
}
.toolNavRight{
    display: inline-block;
    float: left;
    width: 17px;
    height: 32px;
    background: transparent url(../images/tool-right.png) top left no-repeat;
}
.toolNavCenter{
    display: inline-block;
    float: left;
    height: 32px;
    background: transparent url(../images/tool-center.png) top left repeat-x;
    text-align: center;
    padding: 0 10px;
    line-height: 32px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
}
.navBtnHome{
    display: block;
    background: transparent url(../images/home.png) center center no-repeat;
    width: 35px;
    height: 35px;
    border-bottom: 1px solid #ececea;
}
.navBtnRedes{
    display: block;
    background: transparent url(../images/redes.png) center center no-repeat;
    width: 35px;
    height: 35px;
    border-top: 1px solid #ececea;
    
}
.toolNavCenter a img{ margin-top:3px;}
/* ------------------------------------------------- */










.windowPage{
    position: absolute;
    top:0;
    left: 0;
    overflow: hidden;
    z-index: 500;
}
.backGroundContent{
    position: absolute;
    top:0;
    left: 0;
    overflow: hidden;
    z-index: 0;
}
.layers{
    position: absolute;
    top:0;
    left: 0;
    overflow: hidden;
    text-align: center;
}
.layersPage0{
    position: absolute;
    top:0;
    left: 0;
    overflow: hidden;
    text-align: center;
}

.layer1{ z-index: 1; }
.layer2{ z-index: 2; }
.layer3{ z-index: 3; }
.layer4{ z-index: 4; }
.layer5{ z-index: 5; }
.layer6{ z-index: 6; }
.layer7{ z-index: 7; }
.layer8{ z-index: 8; }
.layer9{ z-index: 9; }
.layer10{ z-index: 10; }




/* SENA 1 */
#page_1 .layer1 .paralax4{
    width: 110%;
    position: absolute;
    display: inline-block;
    top: 20%;
    left: 0;
    text-align: center;
}
#page_1 .layer1 .paralax3{
    width: 110%;
    position: absolute;
    display: inline-block;
    top: 20%;
    left: 0;
    text-align: center;
}
#page_1 .layer1 .paralax2{
    width: 110%;
    position: absolute;
    display: inline-block;
    top: 200px;
    left: 0px;
    text-align: center;
}
#page_1 .layer1 .paralax1{
    width: 110%;
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    text-align: center;
}


/* SENA 2 */
#page_2 .layer1 .paralax1,
#page_2 .layer1 .paralax2,
#page_2 .layer1 .paralax3,
#page_2 .layer1 .paralax4,
#page_2 .layer1 .paralax5,
#page_2 .layer1 .paralax6
{
    width: 110%;
    position: absolute;
    display: inline-block;
    left: 0;
}

#page_2 .layer2 .objectFixed1,
#page_2 .layer2 .objectFixed2,
#page_2 .layer2 .objectFixed3
{
    width: 110%;
    position: absolute;
    display: inline-block;
    left: 0;
}

#page_2 .layer2 .objectFixed2,
#page_2 .layer2 .objectFixed3{
    width: 100%;
    text-align: right;
}

.efeitoLupa{
    display: inline-block;
    float: right;
    overflow: hidden;
    width: 409px;
    height: 350px;
}
.efeitoLupa img{
    position: relative;
    display: inline-block;
    z-index: 51;

}
.efeitoLupaCanvas{  
    display: inline-block;
    overflow: hidden;
    width: 409px;
    height: 350px;
    position: relative;
    top: -350px;
    z-index: 50;
}
.canvasLupa{  
    width: 409px;
    height: 350px;
}

/* Logo top ------------------------------------------*/

.logoTop{
    display: none;
    width: 50%;
    text-align: left;
    margin: 70px 0 0 70px;;
    position: fixed;
    top:0;
    left: 0;
    z-index: 10004;

}
.logoTop a{
    display: inline-block;
}

/* Nav icons  ------------------------------------------*/

#navTop{
    display: block;
    width: 100%;
    position: fixed;
    top:0;
    left: 0;
    z-index: 10004;
    padding-bottom: 15px;
    border-top: 3px solid #fff;

}

#barTop{
    display: none;
    width: 100%;
    height: 36px;
    color: #3E444B;
    font-size: .9em;
    background: #fff;
}
.barTopItem {
    float: left;
    display: inline-block;
    padding: 10px 1.5em 0 1.5em;
    border-left: 1px solid #DBE3E4;
    cursor: pointer;
    height: 16px;
}




/* TIME LINE ---------------------------*/

#timeLinePagerContent{
    position: fixed;
    display: none;
    width: 100%;
    height: 150px;
    padding-top: 30px;
    background:  url(../images/stages/relva.png) top left repeat-x;
    line-height: 1px;
    left: 0;
    z-index: 10999;
}

#timeLinePagerContent ul{
    list-style-type: none;
    margin:0;
    padding:0;
}
#timeLinePagerContent ul li{
    display: inline;
    list-style: none;
    list-style-type: none;
    margin:0;
    padding:0;
}
.timeLineBarLeft{
    display: inline-block;
    position: relative;
    top: -27px;
    left: 6px;
    width: 30px;
    height: 23px;
    background: transparent url(../images/timeLineBarLeft.png) top left no-repeat; 
   
}
.timeLineBarRight{
    display: inline-block;
    position: relative;
    top: -27px;
    left: -5px;
    width: 5px;
    height: 23px;
   
}

.pagesListContent{ 
    position: relative;
    display: inline-block;
    height: 50px;
    top:0;
}
.pagesList{
    position: absolute;
    top: 0;
    display: inline-block;
    height: 23px;
    overflow: hidden;
    left: 0;
    background: transparent url(../images/timeLinePointDown.png) top left repeat-x; 
}
#pageMask{
    display: inline-block;
    float: left;
    overflow: hidden;
    width: 34px;
    height: 23px;
    background: transparent url(../images/timeLinePointUp.png) top left repeat-x;
}
.pageMaskCorner{
    display: inline-block;
    position: relative;
    float: left;
    width: 2px;
    height: 23px;
    background: transparent url(../images/timeLinePointUpCorner.png) top right repeat-x;
}


.pagerPageTimeLineUp{
    display: inline-block;
    float: left;
    width: 50px;
    height: 23px;
    cursor:hand;
    cursor:pointer;
    background: transparent url(../images/timeLinePointsUp.png) center center no-repeat;
}
.pagesListUp .pagerPageTimeLineUp:last-child{
    
    background-image: none;
}
.pagesListUp{
    position: relative;
    top:-23px;
    display: inline-block;
    overflow: hidden;
    text-align: left;
    height: 23px;
    line-height: 23px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
}

a.pagesListUp{
    color: #fff;
}





.bntPress,
.timeLinebtnDrag{
    display: inline-block;
    position: absolute;
    left: 10px;
    width: 30px;
    height: 35px;
    margin: 0;
    top:-25px;
    z-index: 10000000;
    cursor:hand;
    cursor: pointer;
    cursor:move;
}
.timeLinebtnDrag{
    background: transparent url(../images/timeLinebtnMove.png) top left no-repeat;
}
.bntPress{
    background: transparent url(../images/timeLinebtnMove.png) bottom left no-repeat;
}








/* btns next prev */
a.pager{
    display: inline-block;
    position: relative;
    top:-20px;
    width: 36px;
    height: 36px;

}
.pager_left{
    background: transparent url(../images/pager_left.png) top left no-repeat;
    z-index: 14;
}
.pager_right{
    background: transparent url(../images/pager_right.png) top left no-repeat;
    z-index: 14;
}
a.pager_left:hover{
    background: transparent url(../images/pager_left.png) bottom left no-repeat;
}
a.pager_right:hover{
    background: transparent url(../images/pager_right.png) bottom left no-repeat;
}



/* PLAY -----------------------------*/

.player{
    display: none;
    height: 40px;
    width: 40px;
    text-align: left;
    position: fixed;
    top:90%;
    left: 0;
    z-index: 1000000000;
}
.playerTimer{
    display: inline-block;
    height: 5px;
    width: 0px;
    position: fixed;
    left: 0;
    z-index: 1000000000;
    background: #000;
}
a.btnPlay{
    display: inline-block;
    position: relative;
    width: 36px;
    height: 36px;
    background: transparent url(../images/player.png) top left no-repeat;
    margin-left: 10px;
}
a.btnPlay:hover{
    background: transparent url(../images/player.png) bottom left no-repeat;
}
a.btnStop{
    display: none;
    position: relative;
    width: 36px;
    height: 36px;
    background: transparent url(../images/player.png) top right no-repeat;
    margin-left: 10px;
}
a.btnStop:hover{
    background: transparent url(../images/player.png) bottom right no-repeat;
}



/* INTRO ---------------------------*/

#logoIntro{
    display: inline-block;
    vertical-align:middle;
    position: relative;
}
a#logoIntro:hover{
    opacity:1;
    filter:alpha(opacity=100); 
}
#mouseIntro{
    top: 35%;
    display: inline-block;
    position: relative;
    z-index: 100000;
}


/* Page 0 */

.matrixBlock{
    display: inline-block;
    position: relative;
    float: left;
    width: 1105px;
    height: 730px;
    margin: 0 1px 1px 0;
    overflow: hidden;
}
.matrixBlock img{
    position: absolute;
    top:0;
    left: 0;
}



.block1{
    display: inline-block;
    width: 369px;
    height: 184px;
    overflow: hidden;
}
.block2{
    display: inline-block;
    width: 184px;
    height: 184px;
    overflow: hidden;
}
.block3{
    display: inline-block;
    width: 184px;
    height: 369px;
    overflow: hidden;
}
.block4{
    display: inline-block;
    width: 369px;
    height: 369px;
    overflow: hidden;
}
/*Line 1*/
.block_0_0{
  position: absolute;
  top:0;
  left: 0;
}
.block_0_1{
  position: absolute;
  top:0;
  left: 370px;
}
.block_0_2{
  position: absolute;
  top:0;
  left: 555px;
}

.block_0_3{
  position: absolute;
  top:0px;
  left: 740px;
}
.block_0_4{
  position: absolute;
  top:0px;
  left: 925px;
}
/* line 2 */
.block_1_0{
  position: absolute;
  top:185px;
  left: 0;
}
.block_1_1{
  position: absolute;
  top:185px;
  left: 185px;
}
.block_1_2{
  position: absolute;
  top:185px;
  left: 555px;
}
.block_1_3{
  position: absolute;
  top:185px;
  left: 740px;
}
/* line 3*/
.block_2_0{
  position: absolute;
  top:370px;
  left: 0;
}
.block_2_1{
  position: absolute;
  top:370px;
  left: 185px;
}
.block_2_2{
  position: absolute;
  top:370px;
  left: 370px;
}
.block_2_3{
  position: absolute;
  top:370px;
  left: 740px;
}
/* line 4*/
.block_3_0{
  position: absolute;
  top:555px;
  left: 185px;
}
.block_3_1{
  position: absolute; 
  top:555px;
  left: 370px;
}
.transicaoBlock1{
    vertical-align: top;
    margin-right: 185px;
}
.transicaoBlock3{
    
    vertical-align: top;
    margin: 185px  185px  185px 0;
}









/* Apresentacao ----------------------*/
#page_1,
#page_1 .windowPage,
#page_1 .layer0{
    overflow: visible;
}
#apresentacaoObjecto1{
    position: absolute;
    display: inline-block;
    width: 869px;
    height: 706px;
}
#apresentacaoObjecto2{
    position: absolute;
    display: inline-block;
    width: 1060px;
    height: 530px;
}
#apresentacaoObjecto3{
    position: absolute;
    display: inline-block;
    width: 770px;
    height: 560px;
}
#apresentacaoObjecto4{
    position: absolute;
    display: inline-block;
    width: 981px;
    height: 740px;
}

.conteinerApresentacao{
    position: relative;
    display: none; 
    width: 600px;
    height: 600px;
       
}

.conteinerApresentacao table {width:100%; padding: 0;margin: 0;height: 100%;}
.conteinerApresentacao .header {width:100%; height: 14px; padding: 0;margin: 0;}
.conteinerApresentacao .body { width:100%;height: 99%; background: url(../images/apresentacao/barLeft.png) top left repeat-y;}
.conteinerApresentacao .footer { width:100%; height: 14px;padding: 0;margin: 0;}
.conteinerApresentacao .td { padding: 0;margin: 0;}
.cornerTL,
.cornerTR,
.cornerBL,
.cornerBR{
    min-width: 13px;
    width: 1%;
    height: 14px;
}
.barBottom{
    width: 99%;
    background: url(../images/apresentacao/barBottom.png) top left repeat-x;
    height: 14px;
}
.barTop{
    width: 99%;
    background: url(../images/apresentacao/barTop.png) top left repeat-x;
    height: 14px;
}
.bodyContent{
    display: inline-block;
    background: url(../images/apresentacao/barRight.png) top right repeat-y;
    padding: 0 13px;
    height: 100%;
}
.bodyConteiner{
    display: inline-block;
    background:  url(../images/apresentacao/bgBlock.png)  repeat;
    height: 100%;
}

.apresentacaoTitle{
    display: inline-block;
    width: 100%;
    padding: 40px 0 ;
    text-decoration: none;
    font-family: "futura-pt",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    color: #f3000c;
    background:  url(../images/apresentacao/sep3.png) top left no-repeat;
}
.apresentacaoDescricao{
    display: inline-block;
    margin: 0px 30px 40px 30px ;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    color: #f3000c;
    clear: both;
}
.apresentacaoCollLeft{
    display: inline-block;
    width: 42%;
    padding: 20px 0px 20px 30px ;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    color: #000;
    text-align: right;
    background: url(../images/apresentacao/separador.jpg) top right no-repeat;
}
.apresentacaoCollRight{
    display: inline-block;
    width: 42%;
    padding: 20px 30px 20px 0px ;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    color: #000;
    background: url(../images/apresentacao/separador.jpg) top left no-repeat;
    text-align: left;
}
.cornerTL{ background: url(../images/apresentacao/tl.png) top left no-repeat;}
.cornerTR{ background: url(../images/apresentacao/tr.png) top right no-repeat;}
.cornerBL{ background: url(../images/apresentacao/bl.png) bottom left no-repeat;}
.cornerBR{ background: url(../images/apresentacao/br.png) bottom right no-repeat;}
.conteinerApresentacao .sombra {display: inline-block;width:100%; height: 96px; background: url(../images/apresentacao/sombra.png) top center no-repeat; background-size:100%; }









/* Stages --------------------------------------------*/

.timeLinePage{
    background:  url(../images/stages/bg_relva.png) bottom left repeat-x;
}

.timeLinePage,
.timeLinePage .layer1,
.timeLinePage .layer2,
.timeLinePage .layer3,
.timeLinePage .layer4,
.timeLinePage .layer5,
.timeLinePage .layer6,
.timeLinePage .layer7,
.timeLinePage .layer8,
.timeLinePage .layer10,
.timeLinePage .windowPage{
    overflow: visible;
}

.letreiro{
    position: absolute;
    display: none;
    width: 196px;
    height: 220px;
    background:  url(../images/stages/letreiro.png) bottom left repeat-x;
}

.letreiro h2{
    display: block;
    color: #eb1f28;
    text-align: center;
    padding: 118px 10px 0px 10px;
    margin: 0;
    min-height: 1px;
    font-weight: 300;
    font-style: normal;
    font-size:32px; 
    clear: both;
}
.letreiro div{
    display: block;
    color: #eb1f28;
    text-align: center;
    padding: 0px 20px 0px 20px;
    font-weight: 400;
    font-style: normal;
    font-size:16px; 
    line-height: 20px;
    clear: both;
}

.textContent{
    position: absolute;
    display: none;
    width: 330px;
    margin: 0;
    padding: 0;
}
.textContent h2{
    display: block;
    padding: 0px 0px 25px 0px;
    margin: 0 0 10px 0;
    text-align: center;
    color: #eb1f28;
    clear: both;
    font-weight: 700;
    font-style: normal;
    font-size:30px; 
    background:  url(../images/stages/sep.png) bottom center no-repeat;
}
.textContent .textContentMask{
    display: block;
    height: 160px;
    overflow: hidden;
}
.textContent .textContentMask div{
    display: block;
    position: relative;
    text-align: center;
    color: #606057;
    clear: both;
    font-weight: 400;
    font-style: normal;
    font-size:16px; 
    line-height: 20px;
}
.textContentPages{
    display: none;
    height: 15px;
    margin: 10px;
    text-align: center;
}
.textContentPages a.pagerText{
    display: inline-block;
    width: 18px;
    height: 15px;
    margin-left: 5px;
}
.textContentPages .pagerTextActive{
    background:  url(../images/stages/pager.png) bottom left no-repeat;
}
.textContentPages .pagerTextInactive {
    background:  url(../images/stages/pager.png) bottom right no-repeat;
}
.textContent .textContentSep{
    display: block;
    height: 31px;
    background:  url(../images/stages/tooltip.png) bottom center no-repeat;
}






.nuvem1{
    position: absolute;
    left: 20%;
    top:10%;
    display: none;
    width: 850px;
    height: 410px;
    background:  url(../images/stages/nuvem1.png) top left repeat-x;
}
.nuvem2{
    position: absolute;
    left: 30%;
    top:0;
    display: none;
    width: 926px;
    height: 828px;
    background:  url(../images/stages/nuvem2.png) top left repeat-x;
}
.aviao{
    position: absolute;
    top:15%;
    display: none;
    width: 278px;
    height: 120px;
    background:  url(../images/stages/aviao.png) top left repeat-x;
}


.aviao{
    position: absolute;
    top:15%;
    display: none;
    width: 278px;
    height: 120px;
    background:  url(../images/stages/aviao.png) top left no-repeat;
}

#page_2 .objecto{
    position: absolute;
    display: none;
    width: 596px;
    height: 222px;
    background:  url(../images/stages/1.png) bottom center no-repeat;
}



#page_3 .objecto{
    position: absolute;
    display: none;
    width: 748px;
    height: 305px;
    background:  url(../images/stages/2.png) bottom left no-repeat;
}


#page_4 .objecto{
    position: absolute;
    display: none;
    width: 722px;
    height: 283px;
    background:  url(../images/stages/3.png) bottom left no-repeat;
}


#page_5 .objecto{
    position: absolute;
    display: none;
    width:  657px;
    height: 262px;
    background:  url(../images/stages/4.png) bottom left no-repeat;
}

#page_6 .objecto{
    position: absolute;
    display: none;
    width:  689px;
    height: 252px;
    background:  url(../images/stages/5.png) bottom left no-repeat;
}
#page_7 .objecto{
    position: absolute;
    display: none;
    width:  633px;
    height: 304px;
    background:  url(../images/stages/6.png) bottom left no-repeat;
}
#page_7 .bola1{
    position: absolute;
    display: inline-block;
    width:  180px;
    height: 180px;
    margin-left: 10%;
    background:  url(../images/stages/bola1.png) top left no-repeat;
}
#page_7 .bola2{
    position: absolute;
    display: inline-block;
    width:  180px;
    height: 180px;
    margin-left: 70%;
    margin-top: 40%;
    background:  url(../images/stages/bola2.png) top left no-repeat;
}
#page_7 .bola3{
    position: absolute;
    display: inline-block;
    width:  180px;
    height: 180px;
    margin-top: 40%;
    margin-left: 20%;
    background:  url(../images/stages/bola3.png) top left no-repeat;
}

#page_8 .objecto{
    position: absolute;
    display: none;
    width:  633px;
    height: 317px;
    background:  url(../images/stages/7.png) bottom left no-repeat;
}
#page_8 .gaivota1{
    position: absolute;
    display: inline-block;
    width:  180px;
    height: 180px;
    margin-left: 10%;
    background:  url(../images/stages/gaivota1.png) top left no-repeat;
}
#page_8 .gaivota2{
    position: absolute;
    display: inline-block;
    width:  180px;
    height: 180px;
    margin-left: 70%;
    margin-top: 40%;
    background:  url(../images/stages/gaivota2.png) top left no-repeat;
}


#page_9 .objecto{
    position: absolute;
    display: none;
    width:  665px;
    height: 442px;
    background:  url(../images/stages/8.png) bottom left no-repeat;
}

#page_10 .objecto{
    position: absolute;
    display: none;
    width:  712px;
    height: 441px;
    background:  url(../images/stages/9.png) bottom left no-repeat;
}

#page_11 .objecto{
    position: absolute;
    display: none;
    width:  528px;
    height: 356px;
    background:  url(../images/stages/10.png) bottom left no-repeat;
}

#page_12 .objecto{
    position: absolute;
    display: none;
    width:  492px;
    height: 403px;
    background:  url(../images/stages/11.png) bottom left no-repeat;
}

#page_13 .objecto{
    position: absolute;
    display: none;
    width:  604px;
    height: 354px;
    background:  url(../images/stages/12.png) bottom left no-repeat;
}
#page_14 .objecto{
    position: absolute;
    display: none;
    width:  707px;
    height: 410px;
    background:  url(../images/stages/13.png) bottom left no-repeat;
}
#page_15 .objecto{
    position: absolute;
    display: none;
    width:  760px;
    height: 446px;
    background:  url(../images/stages/14.png) bottom left no-repeat;
}
#page_16 .objecto{
    position: absolute;
    display: none;
    width:  617px;
    height: 400px;
    background:  url(../images/stages/15.png) bottom left no-repeat;
}
#page_17 .objecto{
    position: absolute;
    display: none;
    width:  744px;
    height: 409px;
    background:  url(../images/stages/16.png) bottom left no-repeat;
}
#page_18 .objecto{
    position: absolute;
    display: none;
    width:  622px;
    height: 400px;
    background:  url(../images/stages/17.png) bottom left no-repeat;
}
#page_19 .objecto{
    position: absolute;
    display: none;
    width:  582px;
    height: 337px;
    background:  url(../images/stages/18.png) bottom left no-repeat;
}
#page_20 .objecto{
    position: absolute;
    display: none;
    width:  528px;
    height: 356px;
    background:  url(../images/stages/19.png) bottom left no-repeat;
}
#page_21 .objecto{
    position: absolute;
    display: none;
    width:  492px;
    height: 429px;
    background:  url(../images/stages/20.png) bottom left no-repeat;
}
#page_22 .objecto{
    position: absolute;
    display: none;
    width:  594px;
    height: 384px;
    background:  url(../images/stages/21.png) bottom left no-repeat;
}
#page_23 .objecto{
    position: absolute;
    display: none;
    width:  500px;
    height: 376px;
    background:  url(../images/stages/22.png) bottom left no-repeat;
}

.containerOverlay{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background: transparent url(../images/bg_error.png) top left repeat;
    z-index:  999999999999;
    text-align:center;
    
}
.msgOverlay{
    top:25%;
    width: 350px;
    position: relative;
    display: inline-block;
    text-align:left;
    padding: 20px;
    font-size: 36px;
    font-weight: 700;
    font-style: normal;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background: transparent url(../images/bg_error.png) top left repeat;
}
.msgClose{
    float: right;
    clear: both;
    width: 32px;
    height: 32px;
    position: relative;
    left: 40px;
    top:-40px;
    display:inline-block;
    background: transparent url(../images/close.png) top right no-repeat;
    cursor: pointer;
	cursor: hand;
}
.msgOverlay h2{
    display:inline-block;
    float:left;
    clear:both;
    width:100%;
    padding-bottom:30px;
    text-align:center;
    color: #eb1f28;
}
#containerError .msg{
    display:inline-block;
    float:left;
    clear:both;
    width:310px;;
    min-height:70%;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    padding:20px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background: transparent url(../images/bg_error.png) top left repeat;
}
#containerFicha .msg{
    display:inline-block;
    float:left;
    clear:both;
    width:310px;;
    min-height:70%;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    padding:20px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    text-align: center;
    background: #fff;
}

.btnFixedFicha{
    position: fixed;
    z-index: 99999999;
    top: 96%;
    left: 90%;
    display: inline-block;
    min-width: 80px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    font-size: 11px;
    padding: 0 10px;
    
}
.btnFixedFicha a{
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 1px  1px #000;
}
.btnFixedFicha a:hover{
    color: #eb1f28;
}

/* ---------------------------------------------- */
/* Large desktop */
@media (min-width: 1200px) { 
         .conteinerApresentacao{
            width: 600px;
            height: 600px;
        }  
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
       .conteinerApresentacao{
            width: 600px;
            height: 600px;
        }
        .logoTop{
            margin: 10px 0 0 10px;
        }
}
 
/* Landscape phone to portrait tablet */
@media  (min-width: 480px) and (max-width: 767px){
       
        .logoTop{
            margin: 10px 0 0 10px;
        }
        .logoTop img{
            width:80px;
            height:80px;
        }
        
        #mouseIntro {
            top: 25%;
        }
        .apresentacaoDescricao{
           font-size:14px;
        }
        .apresentacaoTitle {
            margin: 20px 0;
        }
        .conteinerApresentacao{
            width: 400px;
            height: 500px;
            
        }
        .apresentacaoCollLeft {
            display: block;
            width: 320px;
            padding: 20px 20px 20px 30px;
            text-decoration: none;
            text-align: center;
            font-size: 14px;
            color: black;
            background: url(../images/apresentacao/separador.jpg) top center no-repeat;
        }
        .apresentacaoCollRight {
            display: block;
            float:left;
            width: 320px;
            padding: 20px 20px 20px 30px;
            text-decoration: none;
            text-align: center;
            font-size: 14px;
            color: black;
            background: url(../images/apresentacao/separador.jpg) top center no-repeat;
        }
        #timeLinePagerContent ul{
            width:550px;
            -webkit-transform: scale(0.6) translateZ(0);
            -moz-transform: scale(0.6) translateZ(0);
            -o-transform: scale(0.6) translateZ(0);
            transform: scale(0.6) translateZ(0);
        }
        .timeLinePage .layers{
            left:-200px;
        }
}
 
/* Landscape phones and down */
@media (max-width: 480px) { 
     conteinerApresentacao{
            width: 200px;
            height: 200px;
        }
        .logoTop{
            margin: 10px 0 0 10px;
        }
        .logoTop img{
            width:80px;
            height:80px;
        }
        #mouseIntro {
            top: 25%;
        }
}