/* ========== GERAL ========== */

@font-face {
    font-family: 'eagle';
    src: url('eagle-light.eot');
    src: url('eagle-light.eot?#iefix') format('embedded-opentype'),
         url('eagle-light.woff') format('woff'),
         url('eagle-light.ttf') format('truetype'),
         url('eagle-light.svg#eagle') format('svg');
    font-weight: 500;
    font-style: normal; }

@font-face {
    font-family: 'eagle';
    src: url('eagle-book.eot');
    src: url('eagle-book.eot?#iefix') format('embedded-opentype'),
         url('eagle-book.woff') format('woff'),
         url('eagle-book.ttf') format('truetype'),
         url('eagle-book.svg#eagle') format('svg');
    font-weight: 700;
    font-style: normal; }

@font-face {
    font-family: 'eagle';
    src: url('eagle-bold.eot');
    src: url('eagle-bold.eot?#iefix') format('embedded-opentype'),
         url('eagle-bold.woff') format('woff'),
         url('eagle-bold.ttf') format('truetype'),
         url('eagle-bold.svg#eagle') format('svg');
    font-weight: 900;
    font-style: normal; }

header .link-logo img,
header .menu ul li a,
header .menu ul li a:before,
#beneficios .link-beneficio .icone-beneficio,
#beneficios .link-beneficio .icone-mais,
#capa .link-conheca:after,
#fotos .link-anterior,
#fotos .link-proximo,
#fotos #sly .miniatura li a,
#fotos #sly .miniatura li a div,
#videos .miniatura li a .imagem,
#videos .miniatura li a .imagem .icone-play{
    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out; }

#capa .link-conheca{
    -webkit-transition: background .2s ease-in-out, color 0.2s ease-in-out;
       -moz-transition: background .2s ease-in-out, color 0.2s ease-in-out;
         -o-transition: background .2s ease-in-out, color 0.2s ease-in-out;
            transition: background .2s ease-in-out, color 0.2s ease-in-out; }

img.unveil,
img.unveil-load{
    -webkit-transition: opacity .2s ease-in-out;
       -moz-transition: opacity .2s ease-in-out;
         -o-transition: opacity .2s ease-in-out;
            transition: opacity .2s ease-in-out; }

::-moz-selection {
    background: #d55b68;
    color: #ffffff; }
::selection {
    background: #d55b68;
    color: #ffffff; }

*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

a{
    color: #b54e5c;
    display: inline-block;
    outline: 0;
    text-decoration: none; }

body{
    background: url(../img/body.jpg) 50% 0 no-repeat;
    color: #b54e5c;
    font-family: 'eagle', arial, helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.4em;
    margin: 0 auto;
    max-width: 1400px;
    height: 700px;
    min-width: 910px;
    overflow: hidden;
    position: relative; }

footer{
    background: url(../img/footer.jpg) 50% 146px no-repeat;
    bottom: 0;
    height: 146px;
    position: absolute;
    width: 100%;
    z-index: 100; }

h1, h2, h3, h4, h5, h6{
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1em;
    margin: 0;
    padding: 0; }
h2{
    font-size: 44px;
    text-shadow: 0 2px 2px rgba(172,82,90,1); }
h2 strong{
    font-weight: 900;
    text-transform: uppercase; }
h3{ font-weight: 500; }

header{
    display: none;
    height: 105px;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 300; }
header .link-logo{
    height: 57px;
    left: 40px;
    position: absolute;
    top: 30px;
    width: 166px; }
header .link-logo img{
    display: block;
    height: auto;
    width: 100%; }
header .link-logo:hover img{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: Alpha(Opacity=80); opacity: .8; }
header .menu{
    position: absolute;
    right: 40px;
    top: 30px; }
header .menu ul li{
    display: none;
    float: left; }
header .menu ul li + li{ margin-left: 5px; }
header .menu ul li a{
    background-image: url(../img/sprite-menu.png);
    background-repeat: no-repeat;
    height: 67px;
    position: relative; }
header .menu ul li a:hover{
    margin-top: 4px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: Alpha(Opacity=80); opacity: .8; }
header .menu ul li a:before{
    background-image: url(../img/sprite-menu.png);
    background-repeat: no-repeat;
    background-position: 0 -67px;
    content: "";
    display: inline-block;
    height: 67px;
    left: 0;
    position: absolute;
    top: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: Alpha(Opacity=0); opacity: 0; }
header .menu ul li a.ativo:before{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: Alpha(Opacity=100); opacity: 1; }
header .menu ul li a.link-beneficios{
    background-position: 0 0;
    width: 173px; }
header .menu ul li a.link-beneficios:before{
    background-position: 0 -67px;
    width: 173px; }
header .menu ul li a.link-download{
    background-position: -513px 0;
    width: 157px; }
header .menu ul li a.link-download:before{
    background-position: -513px -67px;
    width: 157px; }
header .menu ul li a.link-fotos{
    background-position: -348px 0;
    width: 155px; }
header .menu ul li a.link-fotos:before{
    background-position: -348px -67px;
    width: 155px; }
header .menu ul li a.link-videos{
    background-position: -183px 0;
    width: 155px; }
header .menu ul li a.link-videos:before{
    background-position: -183px -67px;
    width: 155px; }

html{ background-color: #ffffff; }

img{ -ms-interpolation-mode: auto; image-rendering: auto; }

ol,
ul{
    list-style: none;
    margin: 0;
    padding: 0; }

section{
    height: 700px;
    overflow: hidden;
    position: relative;
    z-index: 200; }

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

.max-margin{
    margin: 0 auto;
    position: relative;
    width: 910px; }

.pagina{
    display: none;
    height: 595px;
    left: 0;
    position: absolute;
    text-align: center;
    width: 910px; }

img.unveil{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: Alpha(Opacity=0); opacity: 0; }
img.unveil-load{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: Alpha(Opacity=100); opacity: 1; }

/* ========== CONTEUDO:BENEFICIOS ========== */

#beneficios{ padding-top: 20px; }
#beneficios .link-beneficio{
    height: 36px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 36px; }
#beneficios .link-beneficio.beneficio-fixo{
    height: 54px;
    width: 54px; }
#beneficios .link-beneficio.beneficio-fixo .icone-beneficio{
    background: #ffffff url(../img/sprite-beneficios.png) no-repeat;
    content: "";
    display: block;
    height: 54px;
    position: relative;
    width: 54px;
    -webkit-border-radius: 27px; -moz-border-radius: 27px; border-radius: 27px; }
#beneficios .link-beneficio.beneficio-fixo-1{ margin: -215px 0 0 -175px; }
#beneficios .link-beneficio.beneficio-fixo-1 .icone-beneficio{
    background-position: 0 0;
    border: #e6ab99 2px solid; }
#beneficios .link-beneficio.beneficio-fixo-1.ativo .icone-beneficio{
    background-color: #e6ab99;
    background-position: 0 -60px; }
#beneficios .link-beneficio.beneficio-fixo-2{ margin: -215px 0 0 -101px; }
#beneficios .link-beneficio.beneficio-fixo-2 .icone-beneficio{
    background-position: -60px 0;
    border: #93d0b9 2px solid; }
#beneficios .link-beneficio.beneficio-fixo-2.ativo .icone-beneficio{
    background-color: #93d0b9;
    background-position: -60px -60px; }
#beneficios .link-beneficio.beneficio-fixo-3{ margin: -215px 0 0 -27px; }
#beneficios .link-beneficio.beneficio-fixo-3 .icone-beneficio{
    background-position: -120px 0;
    border: #86c9e6 2px solid; }
#beneficios .link-beneficio.beneficio-fixo-3.ativo .icone-beneficio{
    background-color: #86c9e6;
    background-position: -120px -60px; }
#beneficios .link-beneficio.beneficio-fixo-4{ margin: -215px 0 0 47px; }
#beneficios .link-beneficio.beneficio-fixo-4 .icone-beneficio{
    background-position: -180px 0;
    border: #dcb477 2px solid; }
#beneficios .link-beneficio.beneficio-fixo-4.ativo .icone-beneficio{
    background-color: #dcb477;
    background-position: -180px -60px; }
#beneficios .link-beneficio.beneficio-fixo-5{ margin: -215px 0 0 121px; }
#beneficios .link-beneficio.beneficio-fixo-5 .icone-beneficio{
    background-position: -240px 0;
    border: #9ecf99 2px solid; }
#beneficios .link-beneficio.beneficio-fixo-5.ativo .icone-beneficio{
    background-color: #9ecf99;
    background-position: -240px -60px; }
#beneficios .link-beneficio .icone-mais{
    background: #d55b68 url(../img/icone-mais.png) 50% 50% no-repeat;
    content: "";
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
    -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; }
#beneficios .link-beneficio.ativo .icone-mais{ -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
#beneficios .link-beneficio .caixa{
    background-color: #d55b68;
    display: none;
    left: 100%;
    margin-left: -18px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    width: 297px;
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
    -webkit-box-shadow: 0 0 36px rgba(0,0,0,.4); -moz-box-shadow: 0 0 36px rgba(0,0,0,.4); box-shadow: 0 0 36px rgba(0,0,0,.4); }
#beneficios .link-beneficio.beneficio-fixo .caixa{ margin: 0 0 0 -27px; }
#beneficios .link-beneficio .caixa.grande{ width: 397px; }
#beneficios .link-beneficio .caixa img{
    display: block;
    height: auto;
    width: 100%; }
#beneficios .link-beneficio.esquerda .caixa{
    left: 0;
    margin-left: -280px; }
#beneficios .link-beneficio.esquerda .caixa.grande{ margin-left: -380px; }
#beneficios .link-beneficio.beneficio-fixo.esquerda .caixa{ margin-left: -270px; }
#beneficios .produto{ margin-top: 70px; }

/* ========== CONTEUDO:CAPA ========== */

#capa{
    padding-top: 100px;
    text-align: left; }
#capa h2{    
    font-size: 30px;
    font-weight: 500;
    margin-left: 10px;
    text-transform: uppercase; }
#capa .produto{
    bottom: 0;
    margin: 0 0 5px 0;
    position: absolute;
    right: -190px; }
#capa .link-conheca{
    background-color: #b1525a;
    color: #ffffff;
    font-size: 23px;
    margin: -20px 0 0 10px;
    padding: 16px 20px;
    position: relative;
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
#capa .link-conheca:hover{
    background-color: #ffffff;
    color: #b1525a; }
#capa .link-conheca:after{
    background: url(../img/seta-direita.png) 100% 0 no-repeat;
    content: "";
    display: inline-block;
    height: 14px;
    margin-left: 10px;
    width: 8px; }
#capa .link-conheca:hover:after{ background-position: 0 0; }

/* ========== CONTEUDO:FOTOS ========== */

#fotos .ampliada{
    background: #ffffff url(../img/carregando.gif) 50% 50% no-repeat;
    border: #262624 1px solid;
    display: inline-block;
    height: 402px;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
    width: 602px;
    -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; }
#fotos .ampliada img{
    display: block;
    position: relative;
    -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; }
#fotos .col-ampliada{
    float: right;
    padding-top: 20px;
    width: 760px; }
#fotos .col-miniatura{
    float: left;
    width: 140px; }
#fotos .link-anterior,
#fotos .link-proximo{
    background: url(../img/setas-miniatura.png) 50% 0 no-repeat;
    display: block;
    height: 37px;
    text-indent: -9999px;
    width: 134px; }
#fotos .link-anterior:hover{ background-position: 50% -10px; }
#fotos .link-anterior.desativado{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: Alpha(Opacity=20); opacity: .2; }
#fotos .link-anterior.desativado:hover{ background-position: 50% 0; }
#fotos .link-proximo{ background-position: 50% -37px; }
#fotos .link-proximo:hover{ background-position: 50% -27px; }
#fotos .link-proximo.desativado{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: Alpha(Opacity=20); opacity: .2; }
#fotos .link-proximo.desativado:hover{ background-position: 50% -37px; }
#fotos #sly{
    height: 483px;
    width: 134px; }
#fotos .alinhar{
    margin-top: 75px; }
#fotos #sly .miniatura li{ padding: 1px 0; }
#fotos #sly .miniatura li a{
    background-color: transparent;
    display: block;
    height: 119px;
    overflow: hidden;
    padding: 1px;
    width: 134px;
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
#fotos #sly .miniatura li a:hover div{ border-color: #b44f54; }
#fotos #sly .miniatura li.ativo a{ background-color: #b44f54; }
#fotos #sly .miniatura li a div{
    background: #ffffff url(../img/carregando.gif) 50% 50% no-repeat;
    border: #262624 1px solid;
    height: 100%;
    overflow: hidden;
    width: 100%;
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
#fotos #sly .miniatura li.ativo a div{ border-color: #b44f54; }
#fotos #sly .miniatura li a div img{
    display: block;
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
#fotos .titulo{
    height: 25px;
    margin-top: 5px;
    position: relative; }
#fotos .titulo h3{
    bottom: 0;
    color: #b54e5c;
    font-size: 23px;
    position: absolute;
    width: 100%; }

/* ========== CONTEUDO : INTRO ========== */

#intro{ height: 700px; }
#intro h1{
    background: url(../img/logo-tramontina-slogan.png) 50% 50% no-repeat;
    background-size: 100% 100%;
    height: 57px;
    left: 50%;
    margin: 35px 0 0 -83px;
    overflow: hidden;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 166px; }
#intro .produto-slogan{
    left: 0;
    margin: -240px 0 0 0;
    position: absolute;
    top: 50%; }

/* ========== CONTEUDO:VIDEOS ========== */

#videos{ padding-top: 20px; }
#videos .miniatura{ margin-top: 20px; }
#videos .miniatura li{
    display: inline-block;
    margin: 20px 15px 0 15px;
    vertical-align: top; }
#videos .miniatura li:nth-child(1){ margin: 10px 15px 0 150px; }
#videos .miniatura li:nth-child(2){ margin: 10px 150px 0 15px; }
#videos .miniatura li a h3{
    font-size: 21px;
    margin-top: 5px;
    text-shadow: 0 2px 2px rgba(172,82,90,1); }
#videos .miniatura li a .imagem{
    background: rgba(255,255,255,.4);
    padding: 6px;
    position: relative;
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,.4); -moz-box-shadow: 0 0 8px rgba(0,0,0,.4); box-shadow: 0 0 8px rgba(0,0,0,.4);
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
#videos .miniatura li a:hover .imagem{ background: rgba(255,255,255,1); }
#videos .miniatura li a .imagem img{ display: block; }
#videos .miniatura li a .imagem .icone-play{
    background: url(../img/icone-play.png) 50% 50% no-repeat;
    content: "";
    height: 95px;
    margin: -48px 0 0 -48px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 95px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: Alpha(Opacity=60); opacity: .6; }
#videos .miniatura li a:hover .imagem .icone-play{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: Alpha(Opacity=100); opacity: 1;
    -webkit-transform: scale(.94); -o-transform: scale(.94); -ms-transform: scale(.94); -moz-transform: scale(.94); transform: scale(.94); }

/* ========== RESPONSIVO ========== */

@media screen and (max-width: 960px) {

    body{
        height: 700px;
        margin: 0 auto;
        max-width: inherit;
        zoom: 80%; }
    body.msie{
        position: absolute;
        width: 125%; }
    body.mozilla{
        width: 125%;
        -moz-transform-origin: 0 0;
        -moz-transform: scale(0.8); }

}

/* ========== DEBUG ========== */

body.debug a{ background-color: rgba(255,255,255,.15); }
body.debug header{ background-color: rgba(0,255,255.15); }
body.debug section{ background-color: rgba(255,0,255,.15); }
body.debug .pagina{ background-color: rgba(255,255,0,.15); }