/* =FontFace
----------------------------------------------- */
@font-face {
    font-family: 'Knockout-HTF28';
    src: url('../fonts/Knockout-HTF28-JuniorFeatherwt.eot');
    src: url('../fonts/Knockout-HTF28-JuniorFeatherwt.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Knockout-HTF28-JuniorFeatherwt.woff') format('woff'),
         url('../fonts/Knockout-HTF28-JuniorFeatherwt.ttf') format('truetype'),
         url('../fonts/Knockout-HTF28-JuniorFeatherwt.svg#Knockout-HTF28-JuniorFeatherwt') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Knockout-HTF30';
    src: url('../fonts/Knockout-HTF30-JuniorWelterwt.eot');
    src: url('../fonts/Knockout-HTF30-JuniorWelterwt.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Knockout-HTF30-JuniorWelterwt.woff') format('woff'),
         url('../fonts/Knockout-HTF30-JuniorWelterwt.ttf') format('truetype'),
         url('../fonts/Knockout-HTF30-JuniorWelterwt.svg#Knockout-HTF30-JuniorWelterwt') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body{
    padding-bottom: 53px;
}
header{
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 212px;
    background: url(../img/textura.jpg) no-repeat;
    background-size: cover;
}
#player{
    position: absolute !important;
    margin: -12px 0 0 10px;
}
.wrapper{
    position: relative;
    width: 930px;
    margin: 0 auto;
    overflow: hidden;
}
nav{
    width: 785px;
    margin: 20px auto 0 auto;
    overflow: hidden;
}
.logo{
    display: block;
    float: left;
    width: 243px;
    height: 174px;
    margin: 0 12px 0 10px;
    background: url(../img/logoSteakMe.png) no-repeat;
    background-size: cover;
    text-indent: -500px;
    overflow: hidden;
}
.sub-nav{
    display: block;
    float: left;
    width: 233px;
    padding: 12px 0 9px 5px;
    margin: 45px 0 0 0;
    border-top: 2px solid #a89985;
    border-bottom: 2px solid #a89985;
    overflow: hidden;
}
.sub-nav.right{
    width: 238px;
    padding-left: 40px; 
}
.sub-nav a{
    display: block;
    float: left;
    font-family: 'Knockout-HTF28';
    font-size: 36px;
    height: 36px;
    font-weight: normal;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    margin: 0 20px 0 0;
    text-shadow: 1px 1px 6px #000;
    background: url(../img/menu.png) no-repeat 0 0;

    /*-webkit-transition: 0.3s ease;
    transition: 0.3s ease;   */

    overflow: hidden;
    text-indent: -1000px;
    /*outline: none; */
}
.sub-nav.left a:first-child{
    width: 65px;
}
.sub-nav.left a:nth-child(2){
    width: 105px;
    background-position: -88px 0;
}
.sub-nav.left a:first-child:hover,
.sub-nav.left a:first-child.mPS2id-clicked{
    background-position: 0 -36px; 
}
.sub-nav.left a:nth-child(2):hover,
.sub-nav.left a:nth-child(2).mPS2id-clicked{
    background-position: -88px -36px; 
}
.sub-nav.right a:first-child{
    width: 115px;
    background-position: -210px 0;
}
.sub-nav.right a:first-child:hover,
.sub-nav.right a:first-child.mPS2id-clicked{
    background-position: -210px -36px; 
}
.sub-nav.right a:nth-child(2){
    width: 102px;
    background-position: -340px 0;
}
.sub-nav.right a:nth-child(2):hover,
.sub-nav.right a:nth-child(2).mPS2id-clicked{
    background-position: -340px -36px; 
}
.sub-nav a:last-child{
    margin: 0;
}
.sub-nav a:hover,
.sub-nav a.mPS2id-clicked{
    color: #d82438;
}
section{
    z-index: 1;
}
.home{
    margin: 212px 0 0 0;
}
.home .texto{
    height: 400px;
    background: url(../img/bg-home.jpg) no-repeat center;
    background-size: cover;
}
.home .texto h2{
    display: block;
    width: 450px;
    margin: 115px auto 0 auto;
    font-family: 'Knockout-HTF28';
    font-size: 68px;
    line-height: 52px;
    font-weight: normal;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 1px 1px 6px #000;    
    word-spacing: 5px;
    letter-spacing: 2px;
}
.home .texto h3{
    display: block;
    width: 400px;
    margin: 12px auto 0 auto;
    font-family: 'Knockout-HTF28';
    font-size: 26px;
    line-height: 26px;
    font-weight: normal;
    color: #d82438;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
}

.home .texto img{
    display: block;
    width: 459px;
    margin: 118px auto 0 auto;
}
.home .meatpacking{
    height: 735px;
    background: url(../img/meatpacking.jpg) no-repeat center;
    background-size: cover;    
}

.historia .texto{
    font-family: 'Knockout-HTF30';
    font-size: 19px;
    line-height: 23px;
    color: #000;
    height: 544px;
    background: url(../img/historia.jpg) no-repeat center;
    background-size: cover;
}
.historia .texto .content{
    width: 411px;
    margin: 80px 45px 0 0;
    padding: 0 15px 0 0;
    float: right;
}
.historia .texto .frase{
    display: block;
    font-size: 30px;
    line-height: 30px;
    padding: 15px 0 0 0;
    text-transform: uppercase;
    color: #d82438;
}
.historia .tom-butcher{
    height: 270px;
    background: #d82438;
}
.historia .tom-butcher .wrapper{
    height: inherit;
    background: url(../img/TomButcher.png) no-repeat center left;
}
.historia .tom-butcher .content{
    font-family: 'Knockout-HTF30';
    font-size: 19px;
    line-height: 22px;
    color: #fff;    
    width: 425px;
    margin: 40px 45px 0 0;
    float: right;
}
.historia .great-times-are-comming{
    height: 538px;
    background: url(../img/great-times-are-coming.jpg) no-repeat center;
    background-size: cover;  
}
.cardapio{
    height: auto;
    padding: 35px 0 40px 0;
    text-align: center;
    background: #161113;
}
.cardapio img{
    padding: 0 20px 0 0; 
}
.steak-me-please{
    height: 739px;
    background: url(../img/steak-me-please.jpg) no-repeat center;
    background-size: cover;  
}
.contato{
    height: 424px;
    padding: 100px 0 0 0;
    background: url(../img/contato.jpg) no-repeat center;
    background-size: cover;  
    text-align: center;
}

.mapa{
    position: relative;
    text-align: left;
    display: inline-block;
    width: 785px;
    height: 275px;
    margin: 0;
    padding: 0;
    /*background: url(../img/bgMapa.png) no-repeat;*/
}
.mapa .titulo{
    width: 100%;
    position: absolute;
    display: block;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    height: 25px;
    line-height: 25px;
    font-family: 'Knockout-HTF30';
    font-size: 16px;
    background: #d6283f;
    margin: -35px 0 0 0;
}

footer{
    font-family: 'Knockout-HTF30';
    font-size: 19px;
    line-height: 23px;
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 53px;
    background: #d82539 url(../img/img-footer-new.png) no-repeat center;
}
footer .wrapper{
    height: inherit;
    /*background: url(../img/pin.png) no-repeat center right;*/
    overflow: hidden;
}
footer a{
    text-decoration: none;
    color: #fff;
}
footer div{
    display: block;
    padding: 12px 0 0 0;    
}
footer div span{
    color: #4c060e;    
}
footer .tel{
    float: left;
    width: 200px;
    color: #4c060e; 
}
footer .endereco{
    float: right;
    width: 320px;
}
footer .pin{
    display: block;
    float: right;
    width: 46px;
    height: 46px;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: #000; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width: 243px;
    height: 174px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../img/logoSteakMe.png); /* path to your loading animation */
    background-size: 100%;
    background-repeat:no-repeat;
    background-position:center;
    margin:-87px 0 0 -121.5px; /* is width and height divided by two */
}

@media screen and (device-aspect-ratio: 3/4) {
    /*.sub-nav{
        width: 245px;
        padding: 0 0 0 5px;
    }*/
    /*.sub-nav a{
        line-height: 60px;
    }*/
    body{
        text-shadow: 1px 1px 1px #000;    
    }
    .historia .texto{
        text-shadow: 1px 1px 1px #ddd;
    }
    .home .texto h3{
        margin-top: 0;
    }    
}

/* CSS espcifico para Safari (Mac) */
body.mac-os {
    text-shadow: 1px 1px 1px #000;    
}
body.mac-os .historia .texto{
    text-shadow: 1px 1px 1px #ddd;
}