/*-------------------------------------------------------------------------
LAYOUT - SIA (modern browsers)

Version:    1.0 - 2013
author:     Burocratik (alexandre r. gomes)
email:      alex@burocratik.com
website:    http://www.burocratik.com
-------------------------------------------------------------------------*/
@import url(body.css);

/*-----------------------------------------------------------------------*/
html, body{background-color:#ffffff; background-image: none;}
div.wrapper{
    position: absolute; top:0%; left: 0;
    width: 100%; height: 100%; overflow: hidden;
}

/*slide*/
ul#slide{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000;}
ul#slide li{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
ul#slide li video, ul#slide li img{position: absolute; top: 0; left: 0;}
.mobile ul#slide li video{display: none;}

/* BLOCOS */
.introTop{
    position: absolute; top:50%; left: 50%; text-align: center;
    width: 740px; height: auto; margin: -255px 0 0 -370px;
}
.introBottom{
    position: absolute; bottom: 30px; left: 0;
    width: 100%; height: auto; margin: 0;
}
.sepDot{
    display: inline-table; width: 11px; height: 21px; margin-top: -7px; text-indent: -5555px;
    background: transparent url(../intro/imgs/intro-dot.png) no-repeat center top;
}
.introTop h2 img{width: 100%;}

/* BUTTONS */
.btPlayVideo{
    display: inline-block; position: relative; width: 99px; height: 88px; text-indent: -5555px; margin: 40px 0;
    background: transparent url(../intro/imgs/intro-btnPlay-hover.png) no-repeat 0 0;
}
.btPlayVideo span{
    display: block; position: absolute; left: 0; top: 0; width: 99px; height: 88px; z-index: 10;
    background: transparent url(../intro/imgs/intro-btnPlay-active.png) no-repeat 0 0;
}
.btPlayVideo.out{background: transparent url(../intro/imgs/intro-btnPlay-out.png) no-repeat 0 0;}
.btPlayVideo:focus{outline:0;}

a.underline{display: inline-block;}
a.underline span{
    display: block; width: 100%; height: 13px; padding: 0;
    background: transparent url(../intro/imgs/intro-underline.png) no-repeat 0 0; margin-top: -7px;
}
a.arrow{display: inline-block;}
a.arrow img{display: inline-block; position: relative; float: left; margin-right: 7px;}
a.arrow span{
    display: inline-block; position: relative; float: left; width: 60px; height: 37px; padding: 0;
    background: transparent url(../intro/imgs/intro-skip-arrow.png) no-repeat 0 0;
}
.pLeft, .pRight{display: block; position: relative; float: left; margin: 0 30px;}
.pRight{float: right; margin-top: -14px;}
.pt .linkPt, .en .linkEn, .fr .linkFr, .es .linkEs{display: none;}
.pt .dotEn, .en .dotEn, .fr .dotFr, .es .dotEs{display: none;}

/*-------------------------------------------------------------------------
= LIGHTBOX
-------------------------------------------------------------------------*/
/* ColorBox Core Style:
   The following CSS is consistent between example themes and should not be altered. */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* User Style:
   Change the following styles to modify the appearance of ColorBox.  They are
   ordered & tabbed in a way that represents the nesting of the generated HTML. */
#cboxOverlay{background:#FFF;}
#colorbox{}
#cboxContent{/*margin-top:40px;*/}
.cboxIframe{background:#FFF;}
#cboxError{/*padding:50px; border:1px solid #ccc;*/}
#cboxLoadedContent{
	background:#FFF;
	/*-moz-box-shadow: 0px 1px 0px #b4b4b4; -webkit-box-shadow: 0px 1px 0px #b4b4b4; box-shadow: 0px 1px 0px #b4b4b4;*/
}
/*#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(../imgs/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:bottom left;}
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../imgs/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
#cboxNext:hover{background-position:bottom right;}*/
#cboxLoadingOverlay{background:#FFF;}
#cboxLoadingGraphic{/*background:url(/imgs/loading-anim.gif) no-repeat center center;*/}
#cboxClose{
    display:block; position:absolute; top: 20px; right: 20px;
    width: 126px; height: 30px; text-indent:-9999px; padding: 0; border: 0;
    background:url(/intro/imgs/intro-cboxClose-pt.png) no-repeat top left;
}
.en #cboxClose{background:url(/intro/imgs/intro-cboxClose-en.png) no-repeat top left;}
.fr #cboxClose{background:url(/intro/imgs/intro-cboxClose-fr.png) no-repeat top left;}
.es #cboxClose{background:url(/intro/imgs/intro-cboxClose-es.png) no-repeat top left;}

#cboxClose:focus, #cboxClose:active{outline: none;}

#cboxClose span{
    display:block; position:absolute; top: 0; right: 0; content: "x";
    width: 35px; height: 30px; text-indent:-9999px; padding: 0; border: 0;
    background:url(/intro/imgs/intro-cboxClose-bt.png) no-repeat 0 0;
}
/*#cboxClose:hover{background-position:bottom center;}*/

@media only screen and (max-width: 960px){
	.introTop {width: 540px; margin: -215px 0 0 -270px;}
}