/*
 ©2012 Zein & Braytih
*/

@font-face { font-family: awesome; src: url(../fonts/fontawesome-webfont.woff); }

* { padding: 0; margin: 0; border: 0; }
ul, ol { margin: 10px; }
a { text-decoration: none; color: #999; }
a:hover { color: #C5860B; }

.direita { text-align: right; }
.centro { text-align: center; }
.esquerda { text-align: left; }
.clear { clear: both; }

html, body { height: 100%; }

body { background: #000; font-family: verdana; font-size: 100%; color: #000; }

#page { width: 1002px; margin: 0 auto; }

#topo { margin: 0 auto; width: 1012px; height: 234px; background: url(../imagens/black-topo-fundo.png) no-repeat scroll right bottom transparent; position: absolute; z-index: 9; }
#topo > a { display: block; }
#topo img.logo { margin: 16px; float: left; }
#topo div { float: right; margin: 30px 50px 0 0; color: #c5860b; }
#topo div a { color: #c5860b; }
#topo div a:hover { color: #333; }
#topo div .fone { font-weight: bold; font-size: 16px; text-align: right; }

.context { top: 136px; position: relative; }

#linhas { display: flex; padding: 30px 0; background: url("../imagens/black-linha-horizontal.jpg") no-repeat scroll center -2px transparent; width: 1002px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-image: url(../imagens/black-linha-vertical.png) 0% 50% stretch; }

.slideshow { z-index: 1; width: 100%; border-left: 4px solid transparent; border-right: 4px solid transparent; border-image: url(../imagens/black-linha-vertical-cima.png) 0% 50% stretch; }

#menu { float: left; width: 235px; margin: 0 25px 0 20px; text-align: center; }
#menu ul { list-style: none; margin: 0; padding: 25px 0; }
#menu ul li { line-height: 44px; vertical-align: middle; text-align: center; background: url("../imagens/menu-linha.jpg") no-repeat scroll center bottom transparent; }
#menu ul li a { display: block; color: #c5860b; }
#menu ul li a:hover { color: #333; background: url("../imagens/menu-linha.jpg") no-repeat scroll center bottom #eee; }
#menu ul li.ativo a { font-weight: bold; }
#menu .caixa { margin: 20px; }

.avatar { position: absolute; z-index: 999; right: 0; }

.gradiente { padding: 2px 34px 10px; }
/* Para Mozilla/Gecko (Firefox etc) */
.gradiente { background: -moz-linear-gradient(top, #0a0c0b, #000) repeat-X; }
/* Para WebKit (Safari, Google Chrome etc) */
.gradiente { background: -webkit-gradient(linear, left top, left bottom, from(#0a0c0b), to(#000)) repeat-X; }
/* Para IE 8 */
.gradiente { -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#0a0c0b, endColorstr=#00000000)"; }
/* Para IE 5.5 - 7 */
.gradiente { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0a0c0b, endColorstr=#00000000); }

#conteudo { color: #ccc; float: left; font-size: 14px; margin: 10px 0; text-align: justify; width: 652px; min-height: 400px; }
#conteudo h1 { color: #333; font-size: 16px; padding: 20px; display: none; text-align: left; }
#conteudo h2 { background: url("../imagens/black-conteudo-fundo.jpg") no-repeat scroll left bottom #000F; color: #C5860B; font-size: 16px; margin-top: 25px; padding: 0 20px 28px; text-align: left; }
#conteudo h3 { border-bottom: 1px dotted #999999; font-size: 13px; text-align: left; }
#conteudo p { margin: 10px 0; }
#conteudo ul { list-style: disc inside none; }
#conteudo ul li { position: relative; margin: 0 0 10px 5px; list-style: none; padding-left: 5px; }
#conteudo ul li:before { content: '\f111'; font-family: awesome; font-size: 6px; color: #666; position: absolute; left: -10px; top: 5px; }
#conteudo .form input { border: 1px solid #c5860b; color: #333; width: 300px; padding: 5px; font-family: verdana; background: #ccc;}
#conteudo .form textarea { border: 1px solid #c5860b; color: #333; width: 100%; padding: 5px; font-family: verdana; background: #ccc;}
#conteudo .form input.ddd { width: 50px; margin: 0 2px; }
#conteudo .form input.numero { width: 100px; }
#conteudo .form label { width: 15%; display: inline-block; text-align: left; }
#conteudo .form .click label { width: auto; margin-right: 20px; }
#conteudo .form .click input { width: auto; margin-right: 2px; }
#conteudo input.botao { border: none; width: auto; }
#conteudo input.botao:hover { opacity: 0.7; -moz-opacity: 0.75; filter: alpha(opacity=75); }

.destaque { padding: 20px; margin: 50px 0; background-color: #222; }

#rodape { width: 100%; background: url("../imagens/black-linha-horizontal.jpg") no-repeat scroll center top transparent; color: #999; font-size: 10px; height: 125px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-image: url(../imagens/black-linha-vertical-baixo.png) 0% 50% stretch; }
#rodape > div { margin-left: auto; margin-right: auto; padding: 46px; }
#rodape > div p { float: left; width: 50%; }
#rodape > div p.centro { /* width: 20%;  */ }
#rodape > div p.copyright { font-size: 10px; text-align: center; clear: both; width: 100%; margin: 45px 0 0; }

#conteudo.localizacao iframe { width: 100%; height: 400px; border: 1px solid #c5860b; }

#conteudo.imoveis .logo { float: right; margin: 0 0 10px 10px; }

button { height: 25px; cursor: pointer; background-color: transparent; }

button:hover { opacity: 0.7; }

@media (max-width: 1020px) {

    #page,
    #topo,
    #linhas,
    .slideshow,
    #menu,
    #conteudo { width: 100%; }

    #topo div { margin: 30px 10% 0 0; }

    #conteudo { margin: 10px 20px; font-size: 130%; text-align: left; }

    .contato #conteudo { font-size: 180%; }

    #conteudo h2 { font-size: 130%; }

    #topo { height: 234px; background: url(../imagens/black-topo-fundo-md.png) no-repeat scroll right bottom transparent; }
    #topo div .fone { margin: 0 45px 0 0; font-size: 180%; }

    #menu:before { font-family: awesome; font-size: 30px; color: #666; content: '\f0c9'; z-index: 1; display: block; text-align: right; cursor: pointer; }
    #menu { position: absolute; top: -104px; width: 4%; right: 0; background-color: #111; padding: 10px; border: 1px solid #eee; z-index: 99; }
    #menu.show { width: 50%; }

    #menu > ul,
    #menu .info { display: none; width: 100%; }

    #menu ul li a { padding: 14px; font-size: 300%; }
    #menu:before { font-size: 300%; }

    #linhas,
    #rodape { background: url("../imagens/black-linha-horizontal-gr.jpg") no-repeat scroll center top transparent; }

    #rodape { font-size: 200%; }
    #rodape > div p.copyright { font-size: 120%; }

    #rodape > div { padding: 30px; }

    #rodape > div p,
    #rodape > div p.centro { float: none; width: 100%; text-align: center; margin: 30px 0; }

    #conteudo .form label,
    #conteudo .form input,
    #conteudo .form input.numero,
    #conteudo .form input.ddd,
    #conteudo .form input.telefone { width: 100%; }

    #conteudo .form input,
    #conteudo .form textarea { font-size: 130%; margin-bottom: 20px; }

    button { height: auto; width: 20%; }
    button img { width: 100%; }
}

@media (max-width: 720px) {
    #topo { height: 210px; background: url(../imagens/black-topo-fundo-pq.png) no-repeat scroll right bottom transparent; }
    #topo div { margin: 30px 30px 0 0; }
    #topo div .fone { margin: 56px 0; }
    #menu { top: -115px; right: 5px; }

    #linhas,
    #rodape { background: url("../imagens/black-linha-horizontal-md.jpg") no-repeat scroll center top transparent; }
}

@media (max-width: 490px) {

    #topo { height: 248px; }

    .context { top: 200px; }

    #topo img.logo,
    #topo div { float: none; }

    #topo div { margin: -10px 20px 0 70px; }

    #topo div .fone { margin: 0; text-align: left; }

    #menu { right: -5px; top: -180px; }

    #linhas,
    #rodape { background: url("../imagens/black-linha-horizontal-pq.jpg") no-repeat scroll center top transparent; }
}

@media (max-width: 390px) {
    #topo { height: 270px; }
}