@charset "utf-8";

/*
Theme Name: Extrela
Theme URI: http://www.extrelatrr.com.br
Description: Tema desenvolvido para a empresa Extrela.
Version: 1.0
Author: Tiago Freire
Author URI: mailto:c4tiago@gmail.com

General comments (optional).
*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
article, aside, figure, footer, header, hgroup, nav, section {display:block;}
ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
del {text-decoration:line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted #000; cursor:help;}
table {border-collapse:collapse; border-spacing:0; font-size:inherit; font:100%;}
th {font-weight:bold; vertical-align:bottom;}
td {font-weight:normal; vertical-align:middle;}
hr {display:block; height:1px; border:0; border-top:1px solid #CCC; margin:10px 0; padding:0;}
input, select {vertical-align:middle; -webkit-font-smoothing:antialiased;}
pre {white-space:pre; white-space:pre-wrap; white-space:pre-line; word-wrap:break-word;}
input[type="radio"] {vertical-align:text-bottom;}
input[type="checkbox"] {vertical-align:bottom; *vertical-align:baseline;}
input:focus, textarea:focus{outline:0;}
a:hover, a:active {outline:0;}
small {font-size:85%;}
strong, th {font-weight:bold;}
td, td img {vertical-align:top;}
sub, sup {font-size:75%; line-height:0; position:relative;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
pre, code, kbd, samp {font-family: monospace, sans-serif;}
.clickable, label, input[type=button], input[type=submit], button {cursor:pointer;}
body, select, input, textarea {color:#808080; -webkit-font-smoothing:antialiased;}
button, input, select, textarea {margin:0; resize:none;}
button {width:auto; overflow:visible;} 
ins {background:#FCD700; color:#000; text-decoration:none;}
mark {background:#FCD700; color:#000; font-style:italic; font-weight:bold;}
*{-moz-box-sizing: border-box; box-sizing: border-box;  -webkit-box-sizing: border-box; box-sizing: border-box;}
object { display: none; }

@font-face{font-family:nunitolight;src:url(fonts/nunito-light-webfont.woff2) format('woff2'),url(fonts/nunito-light-webfont.woff) format('woff');font-weight:400;font-style:normal}
@font-face{font-family:nunitoblack;src:url(fonts/nunito-black-webfont.woff2) format('woff2'),url(fonts/nunito-black-webfont.woff) format('woff');font-weight:400;font-style:normal}
@font-face{font-family:nunitobold;src:url(fonts/nunito-bold-webfont.woff2) format('woff2'),url(fonts/nunito-bold-webfont.woff) format('woff');font-weight:400;font-style:normal}
@font-face{font-family:nunitoextrabold;src:url(fonts/nunito-extrabold-webfont.woff2) format('woff2'),url(fonts/nunito-extrabold-webfont.woff) format('woff');font-weight:400;font-style:normal}
@font-face{font-family:nunitoextralight;src:url(fonts/nunito-extralight-webfont.woff2) format('woff2'),url(fonts/nunito-extralight-webfont.woff) format('woff');font-weight:400;font-style:normal}
@font-face{font-family:nunitomedium;src:url(fonts/nunito-medium-webfont.woff2) format('woff2'),url(fonts/nunito-medium-webfont.woff) format('woff');font-weight:400;font-style:normal}
@font-face{font-family:nunitoregular;src:url(fonts/nunito-regular-webfont.woff2) format('woff2'),url(fonts/nunito-regular-webfont.woff) format('woff');font-weight:400;font-style:normal}
@font-face{font-family:nunitosemibold;src:url(fonts/nunito-semibold-webfont.woff2) format('woff2'),url(fonts/nunito-semibold-webfont.woff) format('woff');font-weight:400;font-style:normal}

body, html { background:#ffffff; font-family:nunitoregular; font-size: 16px; color:#10547e; height: 100%; }
.container { margin: 0 auto; width: 960px; position: relative; }
.transition{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
.cf:before, .cf:after {content:''; display:table;}
.cf:after {clear:both;}
.cf {*zoom:1;}
.main .top { padding: 60px 0; background: url(img/detalhe-banner-interna-baixo.png) no-repeat center top; }
.main .bottom { background: url(img/bg-interna.png) no-repeat center bottom; }
.main .bottom2 { background: url(img/bg-interna2.png) no-repeat center bottom; }

/*
.#topo: Topo
*/
#topo { height: 136px; background: #fff url(img/header.jpg) no-repeat center top; }
#topo .logo { float: left; display: block; margin-top: 41px; margin-bottom: 21px; }
#topo .menu-principal-container { float: right; padding-top: 64px; }
#topo .menu-principal-container .menu-item { float: left; margin-left: 30px; }
#topo .menu-principal-container .menu-item a { font-family:nunitoregular; font-weight: bold; display: block; color: #115780; text-transform: uppercase; font-size: 16px; text-decoration: none; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
#topo .menu-principal-container .menu-item a:hover { color:#f8b658; }
#topo .menu-principal-container .menu-item.current-menu-item a { color:#f8b658; background: url(img/menu-current.jpg) no-repeat center bottom; padding-bottom: 25px; }

/*
.page-id-2: Contato
*/
.page-id-2 .banner { height: 630px; background: url(img/banner-contato.jpg) no-repeat center top; }
.page-id-2 .main { background: url(img/background.jpg) no-repeat center bottom; }
.page-id-2 .main .padding { width: 560px; margin: 0 auto; text-align: center; }
.page-id-2 .main .page-title { font-size: 67px; color:#10547e; font-weight: bold; border-bottom: solid 10px #ffed00; padding-bottom: 15px; margin-bottom: 30px; text-transform: uppercase; }
.page-id-2 .main .page-description { font-size: 20px; margin-bottom: 40px; }
.page-id-2 .main form .form-control { padding: 0 20px; font-size: 26px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;font-family:nunitoregular; margin: 0 0 20px 0; border: solid 2px #fff; height: 80px; outline: none; width: 100%; resize: none; text-decoration: none; overflow: hidden; color:#10547e; }
.page-id-2 .main form .form-control:focus { border: solid 2px #10547e; }
.page-id-2 .main form textarea.form-control { height: 332px; padding: 20px; overflow: auto; }
.page-id-2 .main form .btn-default { background:#27afcc; color:#fff; font-family:nunitoregular; font-size: 38px; padding: 20px 90px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 0; outline: none; resize: none; overflow: hidden; float: right; }
.page-id-2 .main form .btn-default:hover { background:#188ea7; }
.page-id-2 .main form ::-webkit-input-placeholder { color:#10547e; }
.page-id-2 .main form :-moz-placeholder { color:#10547e; }
.page-id-2 .main form ::-moz-placeholder { color:#10547e; }
.page-id-2 .main form :-ms-input-placeholder { color:#10547e; }

/*
.page-id-2: Pré-Cadastro
*/
.page-id-7 .banner { height: 630px; background: url(img/banner-pre-cadastro.jpg) no-repeat center top; }
.page-id-7 .main { background: url(img/background.jpg) no-repeat center bottom; }
.page-id-7 .main .page-title { font-size: 47px; line-height: 47px; color:#10547e; font-weight: bold; border-left: solid 10px #ffed00; padding-left: 20px; margin-bottom: 60px; text-transform: uppercase; }
.page-id-7 .main .page-title small { display: block; font-size: 21px; line-height: 21px; }
.page-id-7 .main .page-description { padding: 0 20px; font-size: 20px; line-height: 22px; margin-bottom: 60px; }
.page-id-7 .main .page-description p { margin-bottom: 20px; }
.page-id-7 .main form .form-control { padding: 0 20px; font-size: 26px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;font-family:nunitoregular; margin: 0 0 20px 0; border: solid 2px #fff; height: 80px; outline: none; width: 100%; resize: none; text-decoration: none; overflow: hidden; color:#10547e; }
.page-id-7 .main form .form-control:focus { border: solid 2px #10547e; }
.page-id-7 .main form .btn-default { background:#27afcc; color:#fff; font-family:nunitoregular; font-size: 38px; padding: 20px 90px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 0; outline: none; resize: none; overflow: hidden; float: right; }
.page-id-7 .main form .btn-default:hover { background:#188ea7; }
.page-id-7 .main form .form-group { float: left; width: 310px; }
.page-id-7 .main form .form-group-full { width: 960px; }
.page-id-7 .main form .form-group.mid { margin:0 15px;}
.page-id-7 .main form .check { float: left; font-family:nunitoregular; font-size: 21px; padding-top: 30px; margin-left: 20px; }
.page-id-7 .main form .check input { margin-right: 10px; position: relative; top: -5px; }
.page-id-7 .main form ::-webkit-input-placeholder { color:#10547e; }
.page-id-7 .main form :-moz-placeholder { color:#10547e; }
.page-id-7 .main form ::-moz-placeholder { color:#10547e; }
.page-id-7 .main form :-ms-input-placeholder { color:#10547e; }

/*
.page-id-11: Institucional
*/
.page-id-11 .banner { height: 630px; background: url(img/banner-institucional.jpg) no-repeat center top; }
.page-id-11 .main { background: url(img/background.jpg) no-repeat center bottom; }
.page-id-11 .main .page-title { font-size: 47px; line-height: 47px; color:#10547e; font-weight: bold; border-left: solid 10px #ffed00; padding-left: 20px; margin-bottom: 60px; text-transform: uppercase; }
.page-id-11 .main .page-title small { display: block; font-size: 21px; line-height: 37px; }
.page-id-11 .main .page-description { padding: 0 30px; font-size: 18px; line-height: 28px; margin-bottom: 60px; }
.page-id-11 .main .page-description p { margin-bottom: 20px; }

/*
.page-id-9: Soluções
*/
.page-id-9 .banner { height: 630px; background: url(img/banner-solucoes.jpg) no-repeat center top; }
.page-id-9 .main { background: url(img/background-3.jpg) no-repeat center bottom; }
.page-id-9 .main .page-title { font-size: 45px; color:#10547e; font-weight: bold; border-bottom: solid 10px #ffed00; padding-bottom: 40px; margin-bottom: 40px; text-transform: uppercase; position: relative; }
.page-id-9 .main .page-title small { display: block; font-size: 21px; }
.page-id-9 .main .page-title span { display: block; font-size: 18px; position: absolute; top: 35px; right: 0px; }
.page-id-9 .main .page-description { font-size: 18px; line-height: 28px; }
.page-id-9 .main .page-description p { margin-bottom: 20px; }
.page-id-9 .main .abas { padding-top: 50px; }
.page-id-9 .main .abas .body {padding: 80px 0;position:relative;}
.page-id-9 #kit-extrela-abas .abas .body { padding: 0; }
.page-id-9 .abas .body .detalhe-bg { height: 917px; background: url(img/bg-interna.png) no-repeat center bottom; width: 100%; position: absolute; bottom: 0px; left: 0px; z-index: 5; }
.page-id-9 .main .abas .body li { float: left; width: 480px; font-size: 30px; }
.page-id-9 .main .abas .body li table {width: 100%;}
.page-id-9 .main .abas .body li table td { vertical-align: middle; }
.page-id-9 .main .abas .body li .icone { padding-right: 25px; width: 150px; }
.page-id-9 .main .abas .body ul li.marginB { margin-bottom: 60px; }
.page-id-9 .main .abas .body .imagem { height: 483px; }
.page-id-9 .main .top { padding: 100px 0 0 0; }
.page-id-9 #produtos-topo { background:#e9e05f; padding: 50px 0; margin-bottom: 50px; }
.page-id-9 #produtos-topo .page-description { margin-bottom: 0px; }
.page-id-9 #produtos-topo .page-description p { margin-bottom: 0px; }
.page-id-9 .main .top { padding: 0; }
.page-id-9 #kit-extrela-topo { padding-top: 50px; }

/*
.abas: Kit Extrela / Produtos
*/
.abas .header label { float: left; font-size: 27px; color:#10547e; text-transform: uppercase; text-transform: uppercase; margin: 34px 0 0 30px;}
.abas .header ul li { float: left; height: 72px; position: relative; width: 300px; }
.abas .header ul li a { padding: 20px 20px 10px 20px; display: block; color: #10547e; font-size: 42px; text-transform: uppercase; text-decoration: none; position: absolute; z-index: 10; left: 0px; top: 0px; }
.abas .header ul li a:hover {color:#cfbe3b;}
.abas .header ul li a.active {background:#f2f2f2;color:#cfbe3b;}
.abas .body { background:#f2f2f2; }

/*
.home: Home
*/
.home #banners { height: 625px; position: relative; width: 100%; }
.home #banners .detalhe { height: 132px; width: 100%; display: block; background: url(img/header-top.png) no-repeat center top; position: absolute; top: 0px; left: 0px; z-index: 2; }
.home #banners .banner { height: 625px; width: 100%;  }
.home #banners .banner a { height: 625px; display: block; width: 100%; }
.home #banners .owl-controls .owl-pagination { display: none; }
.home #banners .owl-controls .owl-buttons { position: absolute; bottom: 30px; width: 100%; z-index: 100; text-align: center; }
.home #banners .owl-controls .owl-buttons .owl-prev { margin-right: 5px; text-indent: -9999px; display: inline-block; width: 55px; height: 55px; background: url(img/prev.png) no-repeat; }
.home #banners .owl-controls .owl-buttons .owl-next { text-indent: -9999px; display: inline-block; width: 55px; height: 55px; background: url(img/next.png) no-repeat; }
.home #chamada { position: relative; padding: 60px 0; background:#e8e05e url(img/detalhe-banner-meio.png) no-repeat center top; }
.home #chamada p { margin: 0 35px; border-bottom: solid 5px #ffffff; padding-bottom: 10px; font-family:nunitobold; text-align: center; font-size: 38px; color:#10547e; text-transform: uppercase; }
.home #chamada .detalhe { width: 100%; display: block; position: absolute; top: -44px; background: url(img/detalhe-banner-topo.png?v=1) no-repeat center top; height: 44px; }
.home #atuacao { padding: 60px 0 83px 0; background: url(img/detalhe-banner-baixo.png) no-repeat center top; }
.home #atuacao p.tit { border-left: solid 10px #ffed00; padding-left: 20px; font-size: 36px; line-height: 38px; color:#10547e; font-weight: bold; text-transform: uppercase; margin-bottom: 60px; }
.home #atuacao table {position: relative; width: 100%; }
.home #atuacao table td {vertical-align: top; width: 240px;padding: 0 25px; }
.home #atuacao table td p { padding: 0 15px; margin-bottom: 50px; text-align: center; text-transform:uppercase; font-size: 16px; line-height: 18px; }
.home #atuacao table td small { display: block; font-size: 12px; }
.home #atuacao table td img{ display:block; margin: 0 auto 15px auto; }
.home #clientes #clientes-topo { background: url(img/home-clientes-topo.jpg) no-repeat center top; height: 253px; }
.home #clientes #clientes-topo p { float: right; margin-top: 85px; border-left: solid 10px #ffed00; padding-left: 20px; font-size: 36px; line-height: 36px; color:#10547e; font-weight: bold; text-transform: uppercase; }
.home #clientes #clientes-lista { background: url(img/home-clientes.jpg) no-repeat center top; height: 436px; }
.home #clientes #clientes-obs { padding: 47px 0; background: #e8e05e url(img/home-faixa-rodape.png) no-repeat center top; font-size: 14px; text-transform: uppercase; color:#575756; }
.home #clientes #clientes-lista .padding { width: 500px; float: right; padding: 51px 0; margin-right: 15px; }
.home #clientes #clientes-lista .cliente a { display: block; }
.home #clientes #clientes-lista .cliente .marca { display: block; margin: 0 auto; }
.home #clientes #clientes-lista .owl-pagination { display: none; }
.home #clientes #clientes-lista .owl-buttons { display: block; }
.home #clientes #clientes-lista .owl-buttons .owl-prev { -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out; width: 20px; height: 33px; display: block; background: url(img/cliente-prev.jpg) no-repeat; position: absolute; top: 50%; left: -10px; margin-top: -16px; text-indent: -9999px; }
.home #clientes #clientes-lista .owl-buttons .owl-prev:hover {left: -20px;}
.home #clientes #clientes-lista .owl-buttons .owl-next { -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out; width: 20px; height: 33px; display: block; background: url(img/cliente-next.jpg) no-repeat; position: absolute; top: 50%; right: -10px; margin-top: -16px; text-indent: -9999px; }
.home #clientes #clientes-lista .owl-buttons .owl-next:hover {right: -20px;}
.home #bg-ser-extrela { background: url(img/bg-extrela.jpg) no-repeat center bottom; padding-bottom: 440px; }
.home #ser-extrela p { width: 600px; float: right; text-align: right; border-right: solid 10px #ffed00; padding-right: 20px; font-size: 34px; line-height: 38px; color:#10547e; font-weight: bold; text-transform: uppercase; }
.home #ser-extrela p .grande { font-size: 42px; }
.home #qualidades { padding: 80px 0; background:#fffed7; }
.home #qualidades li {width:480px;float:left;margin-bottom: 40px;}
.home #qualidades li table { width: 100%; }
.home #qualidades li table td { height: 120px; border-left: solid 10px #ffed00; vertical-align: middle; padding-left: 20px; }
.home #qualidades li p { font-size: 47px; line-height: 47px; color:#10547e; font-weight: bold; text-transform: uppercase; }
.home #qualidades li p small { display: block; font-size: 21px; line-height: 21px; }
.home #qualidades li.last {margin:0;}
.home #padrao-qualidade { margin-top: 60px; height: 658px; background:#fff url(img/home-padrao-qualidade.jpg) no-repeat center bottom; }
.home #padrao-qualidade.sem-cliente { background:#fff url(img/home-padrao-qualidade-sem-cliente.jpg) no-repeat center bottom; }
.home #padrao-qualidade .padding { width: 589px; }
.home #padrao-qualidade .estrelas { margin-bottom: 40px; border-top: solid 10px #ffed00; padding-top: 40px; }
.home #padrao-qualidade p { text-align: center; width: 589px; font-family:nunitobold; font-size: 47px; color:#10547e; text-transform: uppercase; margin-bottom: 25px; }
.home #padrao-qualidade li { text-transform: uppercase; font-size: 14px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: solid 5px #f2e960; }
.home #padrao-qualidade li.last { padding-bottom: 0; margin-bottom: 0; border: 0; }

/*
.#rodape: Rodapé
*/
#rodape { background: #c6c6c6; position: relative; }
#rodape .bg_esquerda { background: url(img/rodape-esquerda-baixo.png) no-repeat center top; }
#rodape .bg_direita { background: url(img/rodape-direita-baixo.png) no-repeat center top; padding: 60px 0; }
#rodape .esquerda { width: 220px; float: left; margin-right: 60px; }
#rodape .esquerda .logo { margin-bottom: 30px;}
#rodape .esquerda a { display: block; }
#rodape .direita { width: 680px; float: left; padding-top: 25px; } 
#rodape .direita .formas-pagamento { margin-top: 40px; }
#rodape .direita .formas-pagamento label { cursor: default; font-weight: bold; color:#1d1d1b; margin-bottom: 20px; display: block; font-size: 13px; }
#rodape .direita .formas-pagamento img { display: block; }
#rodape .direita .cima { position: relative; }
#rodape .direita .cima .menu-principal-container { float: left; margin-right: 70px; }
#rodape .direita .cima .menu-principal-container .menu-item { margin-bottom: 20px; }
#rodape .direita .cima .menu-principal-container .menu-item a { font-family:nunitoregular; font-weight: bold; display: block; color: #115780; text-transform: uppercase; font-size: 16px; text-decoration: none; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
#rodape .direita .cima .menu-principal-container .menu-item a:hover { color:#f8b658; }
#rodape .direita .cima .menu-principal-container .menu-item.current-menu-item a { color:#f8b658; }
#rodape .direita .cima .endereco { margin-top: -3px; float: left; font-size: 14px; color:#115780; line-height: 25px; font-weight: bold; width: 305px; }
#rodape .direita .cima .endereco .btn { background:#10547e; color:#fff; padding: 8px 15px; text-decoration: none; display: inline-block; margin-top: 20px; }
#rodape .direita .cima .endereco .btn:hover { background:#0b466b; }
#rodape .direita .cima .anp { position: absolute; top: 0px; right: 0px; display: block; }
.abs-bottom-left { display: none; width: 229px; height: 668px; position: absolute; bottom: 325px; left: 0%; background: url(img/abs-bottom-left.png) no-repeat; }
.abs-bottom-right { display: none; width: 183px; height: 424px; position: absolute; bottom: 98px; right: 0%; background: url(img/abs-bottom-right.png) no-repeat; }
.abs-middle-right { display: none; width: 214px; height: 497px; position: absolute; bottom: -373px; right: 0%; background: url(img/abs-middle-right.png) no-repeat; }
.banner { position: relative; }