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

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

/*-----------------------------------------------------------------------*/
html, body{
    background-color:#000; background-image: none;
    font: normal 300 13px/19px 'Open Sans', serif; color: #fff;
}
h1{
    display: block; position: absolute; left: 50%; top: 20px; width: 320px; height: 45px;
    margin: 0 0 0 -160px; z-index: 10;
    background: transparent url(../imgs/id.svg) no-repeat center center;
    background-size: 320px auto; text-indent: -5555px;
}
.wrapper{
    position: absolute; top:0; left: 0; top: 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;}
ul#slide:after {
    display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    content: ""; background: rgba(0,0,0,.4);
}
.mobile ul#slide li video{display: none;}
.mobile ul#slide{
    background: transparent url(../intro/preview.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}

/* BUTTON */
.btPlayVideo{
    display: block; position: absolute; width: 210px; height: 210px; left: 50%; top: 50%;
    text-indent: -5555px; margin: -120px 0 0 -105px;
    background: transparent url(../imgs/btn-play.svg) no-repeat 0 0;    
    background-size: 210px auto;
}
.btPlayVideo:focus{border: 0; outline : none;}

/*-------------------------------------------------------------------------
= FOOTER
-------------------------------------------------------------------------*/
footer{
    display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: auto;
    background: #000; padding: 0 25px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
footer h2, footer ul{
    display: block; position: relative; max-width: 1024px; height: auto; padding: 25px;
    margin: 0 auto; overflow: hidden;
}
footer h2{padding-bottom: 5px;}
footer ul{padding-top: 0;}
footer ul li{display: block; position: relative; float: left; width: 33.333333%; height: auto;}
footer h2{text-transform: uppercase; color: #deed29; font-weight: 400;}
footer a{
    display: inline-block; position: relative;
    color: #fff; text-decoration: none;
}
footer a:after{
    display: block; position: absolute; left: 0; bottom: 0px; width: 100%; height: 1px;
    content: ""; background-color: #deed29; z-index: 0;
    -webkit-transition: all .17s ease-in-out; -moz-transition: all .17s ease-in-out; -o-transition: all .17s ease-in-out; transition: all .17s ease-in-out;
}
footer a:hover:after{background-color: #deed29; padding: 0 5px; margin-left: -5px; background-color: #fff;}
footer ul li div{display: block; position: relative; float: right;}

/*-------------------------------------------------------------------------
= LIGHTBOX
-------------------------------------------------------------------------*/
#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;}
#cboxOverlay{background:#000;}
#colorbox{}
.cboxIframe{background:#000;}
#cboxLoadedContent{background:#000;}
#cboxLoadingOverlay{background:#000;}
#cboxLoadingGraphic{background:url(../imgs/loading.gif) no-repeat center center;}
#cboxClose{
    display: block; position:absolute; top: 20px; left: 30px; content: "X";
    width: 35px; height: 35px; text-indent:-9999px; padding: 0; border: 0;
    background: transparent url(../imgs/btn-close.svg) no-repeat 0 0;    
    background-size: 35px auto;
}
#cboxClose:focus, #cboxClose:active{outline: none;}


@media screen and (max-width:980px){
    footer ul li div{float: left;}
}
@media screen and (max-width:800px){
    footer ul li{width: 50%;}
    footer ul li:first-child{width: 100%; padding-bottom: 10px;}
}
@media screen and (max-width:667px){
    h1 {width: 230px; margin-left: -115px; background-size: 230px auto;}
    .wrapper {position: relative; height: 100vh;}
    .btPlayVideo {width: 150px; height: 150px; margin: -75px 0 0 -75px; background-size: 150px auto;}
    footer{position: relative; margin-top: -60px; padding: 0;}
    footer h2 {padding-bottom: 15px;}
    footer h2:after, footer h2:before{
        display: block; position: absolute; right: 25px; top: 28px;
        width: 2px; height: 12px; background: #deed29; content: "";
    }
    footer h2:after {
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);
    }
    footer h2:before {
        -ms-transform: rotate(-45deg); /* IE 9 */
        -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
        transform: rotate(-45deg); right: 32px;
    }
    footer ul li{width: 100%; padding-bottom: 10px;}
}

/*!--------------------------------------------------------------------
STYLES "Outdated Browser"
Version:    1.0.2 - 2014
author:     Burocratik
website:    http://www.burocratik.com
* @preserve
-----------------------------------------------------------------------*/
#outdated{
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 170px;
    text-align: center; text-transform: uppercase; z-index:1500;
    background-color: #f25648; color: #ffffff;
    font-family: 'fs-mregular', Helvetica,Arial,sans-serif;
}
* html #outdated{position: absolute;}
#outdated h6{font-size: 25px; line-height: 25px; margin: 30px 0 10px;}
#outdated p{font-size: 12px; line-height: 12px;}
#outdated #btnUpdateBrowser{
    display: block; position: relative; padding: 10px 20px; margin: 30px auto 0; width: 230px;
    color: #ffffff; text-decoration: none; border: 2px solid #ffffff; cursor: pointer;
}
#outdated #btnUpdateBrowser:hover{color: #f25648; background-color:#ffffff;}
#outdated .last{position: absolute; top: 20px; right: 30px; width: 15px; height: 15px;}
#outdated #btnCloseUpdateBrowser{
    display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    text-decoration: none; color: #ffffff; font-size: 36px;
}