/*
Theme Name: HTI Robotics & Automation
Theme URI: http://hti.com.br
Author: Pedro Silva
Author URI: https://pedrosilva.blog.br
Description: Layout para o site da HTI
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: HTI, responsivo, novo, 2018, mobile
Text Domain: HTI

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');

* { margin: 0px; padding: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
a { text-decoration: none; } body, input, textarea, select { color: #606062; font-size: 14px; line-height: 22px; font-weight: 400; font-family: "Open Sans", sans-serif; }
input[type=text], input[type=email], select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
body { background: #FFFFFF; }
p { margin-bottom: 20px; }
p:last-of-type { margin-bottom: 0; }

/* GERAL */
.animacao, a, img, input, textarea, select, header, li { transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; }
.responsivo img { width: 100% !important; height: auto; display: block; }
.centralizar { max-width: 1100px; padding: 0 20px; margin: 0 auto; position: relative; }
.direita { float: right !important; }
.esquerda { float: left !important; }
.miolo { position: absolute; z-index: 2; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); }
.size-full { width: 100%; height: auto; }

.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float:right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.size-full { width: 100%; height: auto; }
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }

#carregando { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #FFFFFF; z-index: 100; }
#carregando img { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }

header { float: left; width: 100%; }
header section.barra { float: left; width: 100%; padding: 20px 0; background: #f0f0f0; }
header section.barra a { color: #000000; font-weight: 700; }
header section.barra a:hover { color: #ed3237; }
header section.barra ul { list-style: none; }
header section.barra ul li { display: inline-block; margin-left: 5px; }
header section.barra .fa-phone { margin-right: 5px; }
header .logo { float: left; width: 40%; margin: 30px 0; }

header nav { float: left; width: 100%; padding: 15px 0; background: #ed3237; }
header nav .mobile { display: none; }
header nav ul { float: left; list-style: none; }
header nav ul li { display: inline-block; }
header nav ul li:after { content: "/"; color: rgba(255,255,255,0.3); }
header nav ul li a { display: inline-block; padding: 5px 20px; color: #FFFFFF; font-weight: 700; }
header nav ul li a:hover, header nav .buscar:hover { color: rgba(255,255,255,0.5); }
header nav ul li:first-of-type a { padding-left: 0; }
header nav ul li:last-of-type:after { content: none; }
header nav .buscar { float: right; color: #FFFFFF; padding: 5px 0; }

section.buscar { display: none; float: left; width: 100%; padding: 30px 0; background: #d8d8d8; }
section.buscar form { opacity: 0; }
section.buscar input[type=text] { float: left; width: 87.5%; padding: 10px; border: 2px solid #FFFFFF; outline: none; font-weight: 700; }
section.buscar input[type=text]:focus { border: 2px solid #ed3237; }
section.buscar input[type=submit] { float: right; width: 10%; padding: 10px; outline: none; border: 2px solid #FFFFFF; background: #FFFFFF; font-weight: 700; }
section.buscar input[type=submit]:hover { cursor: pointer; background: #ed3237; color: #FFFFFF; border: 2px solid #bd282c; }

section.slider { float: left; width: 100%; }

section.sobre { float: left; width: 100%; padding: 100px 0; background: url(img/engrenagem.png) no-repeat center left; }
section.sobre .esquerda { width: 66%; padding: 20px 4% 20px 0; border-right: 4px solid #F1F1F1; }
section.sobre .direita { width: 30%; position: relative; }
section.sobre .direita h1 { font-size: 50px; font-weight: 800; color: #606062; line-height: 45px; letter-spacing: -4px; }
section.sobre .direita h1 span { color: #ed3237; }
section.sobre .conteudo { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }

h5 { float: left; width: 100%; text-transform: uppercase; font-weight: 800; font-size: 22px; position: relative; color: #ed3237; z-index: 1; }
h5 span { padding: 0 10px; margin-left: 30px; background: #eeeeee; }
h5:after { content: ""; position: absolute; left: 0; top: 12px; width: 100%; height: 2px; background: #c4c5c6; z-index: -1; }

section.fazemos, section.blog { float: left; width: 100%; padding: 100px 0; background: #eeeeee; box-shadow: 0 -50px 100px rgba(0,0,0,0.1); }
section.fazemos .container { float: left; width: 100%; margin-top: 50px; }
section.fazemos .esquerda { width: 17%; }
section.fazemos .esquerda ul { list-style: none; }
section.fazemos .esquerda ul li { display: block; margin-bottom: 15px; }
section.fazemos .esquerda ul li a { display: block; padding: 10px 5px; font-size: 14px; background: #FFFFFF; color: #000000; text-align: center; text-transform: uppercase; font-weight: 700; }
section.fazemos .esquerda ul li a:hover { background: #CCCCCC; }
section.fazemos .esquerda ul li a.ativo { background: #ed3237; color: #FFFFFF; position: relative; }
section.fazemos .esquerda ul li a.ativo:after { content: ""; position: absolute; right: -32px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid #ed3237; }
section.fazemos .direita { width: 80%; }
section.fazemos .direita .box { display: none; float: left; width: 100%; padding: 20px; background: #FFFFFF; }
section.fazemos .direita .box:first-of-type { display: block; }
section.fazemos .direita .box.ativo { border-left: 6px solid #ed3237; }
section.fazemos .direita .box .imagem { float: left; width: 35%; margin-right: 20px; }
section.fazemos .direita .box h2 { text-transform: uppercase; font-size: 18px; line-height: 20px; margin-bottom: 20px; }
section.fazemos .direita .box ul { list-style: none; margin-top: 20px; }
section.fazemos .direita .box ul li { margin-bottom: 5px; }
section.fazemos .direita .box ul li:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px; font-size: 10px; }

section.banner { float: left; width: 100%; height: 700px; background: url(img/banner.jpg) no-repeat center 85%; background-size: cover; position: relative; }
section.banner:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 80px; background: url(img/banner-before.png) no-repeat center bottom; background-size: cover; }
section.banner:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; background: url(img/banner-after.png) no-repeat center bottom; background-size: cover; }
section.banner .miolo { width: 100%; }
section.banner h1 { color: #FFFFFF; /*transform: rotate(-3deg);*/ font-size: 30px; line-height: 35px; text-shadow: 0 0 10px rgba(0,0,0,0.8); }
section.banner h1 span { color: #ed3237; }

section.blog h3 { float: left; width: 100%; text-align: center; font-weight: 300; font-size: 14px; margin: 50px 0; }
section.blog .container { float: left; width: 103%; }
section.blog .box { float: left; width: 22%; height: 400px; margin: 0 3% 3% 0; background: #FFFFFF; border-bottom: 5px solid #ed3237; }
section.blog .box:hover { transform: scale(1.1); box-shadow: 0 0 50px rgba(0,0,0,0.2); }
section.blog .box .miniatura { float: left; width: 100%; }
section.blog .box .conteudo { float: left; width: 100%; padding: 15px; }
section.blog .box h2 { float: left; width: 100%; margin-bottom: 15px; font-size: 18px; line-height: 22px; }
section.blog .box h2 a { color: #606062; }
section.blog .box p { font-size: 14px; line-height: 20px; }
section.blog .box p a { color: #606062; }
section.blog .mais { float: left; width: 100%; text-align: center; margin-top: 30px; font-size: 16px; }
section.blog .mais a { color: #ed3237; }
section.blog .mais a:hover { color: #000000; }

section.parceiros { float: left; width: 100%; padding: 100px 0 60px 0; }
section.parceiros h5 span { background: #FFFFFF; }
section.parceiros .container { float: left; width: 100%; margin-top: 50px; text-align: center; }
section.parceiros ul { list-style: none; }
section.parceiros ul li { display: inline-block; vertical-align: middle; max-width: 15%; margin: 0 4% 4% 0; }
section.parceiros ul li img { width: 100%; height: auto; }
section.parceiros ul li:hover { transform: scale(1.1); }

section.contato { float: left; width: 100%; padding: 100px 0; background: #ed3237 url(img/contato.jpg) no-repeat center center; background-size: cover; color: #FFFFFF; position: relative; }
section.contato h5 { color: #FFFFFF; }
section.contato h5 span { background: #5a181a; }
section.contato h5:after { background: #e69a9d; }
section.contato h3 { float: left; width: 100%; margin-bottom: 50px; font-weight: 400; font-size: 14px; color: rgba(255,255,255,0.5); }
section.contato .wpcf7 { float: left; width: 100%; margin-top: 50px; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 textarea { padding: 10px; border: 0; outline: none; background: rgba(255,255,255,0.2); color: #FFFFFF; }
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: rgba(255,255,255,0.6); }
.wpcf7 input[type=text], .wpcf7 input[type=email] { width: 22.75%; margin-right: 3%; margin-bottom: 3%; }
.wpcf7 input.direita { margin-right: 0; }
.wpcf7 textarea { width: 100%; margin }
.wpcf7 input[type=submit] { float: right; padding: 10px 0; width: 22.75%; border: 0; background: #99282b; color: #FFFFFF; }
.wpcf7 input[type=submit]:hover { cursor: pointer; background: #FFFFFF; color: #000000; }
.wpcf7 small { float: left; color: rgba(255,255,255,0.2); margin-top: 20px; }

.wpcf7-response-output { float: left; width: 100%; margin: 20px 0 0 0 !important; padding: 10px !important; text-align: center; font-size: 14px; }
.wpcf7-validation-errors { float: left; width: 100%; margin: 20px 0 0 0 !important; padding: 10px !important; text-align: center; font-size: 14px; color: #FFFFFF; background: #F00000; border: 0 !important; }
.wpcf7-not-valid-tip { display: none !important; }
.wpcf7-not-valid { background: #FBB4B4 !important; }
.wpcf7-not-valid::placeholder { color: #000000 !important; }
.wpcf7-mail-sent-ok { background: #398f14; }

section.atendimento { float: left; width: 100%; background: #606062; padding: 50px 0; color: #FFFFFF; }
section.atendimento .box { width: 33.33%; }
section.atendimento .box .icone { float: left; margin: 5px 20px 0 0; font-size: 26px; }
section.atendimento .box .dados { float: left; }
section.atendimento .box .dados p { margin: 0; }
section.atendimento .box .dados a, section.atendimento .box .dados strong { font-weight: 700; color: #FFFFFF; font-size: 18px; }
section.atendimento .box .dados a:hover { color: rgba(255,255,255,0.5); }

footer { float: left; width: 100%; padding: 50px 0 30px 0; border-bottom: 10px solid #ed3237; }
footer .logo { float: left; width: 10%; margin-right: 10%; }
footer nav { float: left; width: 22%; }
footer ul { list-style: none; }
footer nav ul li { display: block; }
footer nav ul li a { font-weight: 700; color: #606062; font-size: 15px; }
footer nav ul li a:hover { color: #ed3237; }
footer .social { float: left; width: 40%; }
footer .social ul li { display: inline-block; margin: 0 5px; }
footer .social ul li a { display: inline-block; position: relative; width: 40px; height: 40px; border-radius: 50%; background: #606062; color: #FFFFFF; font-size: 18px; }
footer .social ul li a i { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
footer .social ul li a:hover { background: #ed3237; }
footer .subir { float: right; width: 10%; text-align: center; }
footer .subir a { padding: 5px 10px; background: #e69a9c; color: #FFFFFF; }
footer .subir a:hover { background: #ed3237; }
footer .copy { float: left; width: 100%; text-align: center; margin-top: 50px; color: #000000; font-size: 14px; }
footer .copy a { color: #CCCCCC; }
footer .copy a:hover { color: #ed3237; }
footer .logo, footer .social, footer .subir { height: 110px; position: relative; }
footer .logo a, footer .social ul, footer .subir a { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }

/* SINGLE */
section.titulo { float: left; width: 100%; padding: 50px 0; background: #F1F1F1; }
section.titulo h1 { font-size: 35px; letter-spacing: -1px; margin-bottom: 15px; line-height: 35px; }
section.categoria { float: left; width: 100%; margin: 32px 0 0 0; }
section.categoria ul { list-style: none; }
section.categoria ul li { display: inline-block; }
section.categoria ul li a { display: inline-block; padding: 0 10px; color: #999999; font-size: 14px; }
section.categoria ul li a:hover { text-decoration: underline; color: #000000; }
section.categoria ul li:first-of-type a { padding-left: 0; }
section.categoria ul li:after { content: "/"; }
section.categoria ul li:last-of-type:after { content: none; }

article { float: left; width: 100%; margin: 20px 0 50px 0; }
article a { color: #000000; font-weight: 700; }
article a:hover { color: #ed3237; }
article ul, article ol { margin-bottom: 20px; list-style: inside; }
aside { float: right; width: 100%; border-top: 3px solid #F1F1F1; padding: 50px 0 30px 0; }
aside h2 { margin-bottom: 20px; color: #CCCCCC; }
section.relacionados { float: left; width: 100%; }
section.relacionados .container { float: left; width: 102%; }
section.relacionados .box { float: left; width: 23%; margin: 0 2% 20px 0; }
section.relacionados .box .miniatura { float: left; width: 100%; margin-bottom: 15px; border-bottom: 5px solid #ed3237; overflow: hidden; }
section.relacionados .box h3 { float: left; width: 100%; margin-bottom: 10px; }
section.relacionados .box h3 a { color: #999999; font-size: 18px; }
section.relacionados .box:hover h3 a { color: #ed3237; }
section.relacionados .box:hover .miniatura img { transform: scale(1.1); }
section.relacionados .box p { line-height: 20px; }
section.relacionados .box p a { color: #999999; }

/* CATEGORIA */
.nenhuma { float: left; width: 100%; margin: 100px 0 50px 0; text-align: center; }
.nenhuma h3 { font-size: 55px; margin-bottom: 15px; }

article.categoria { margin: 50px 0; }
article.categoria .box { float: left; width: 100%; margin-bottom: 30px; position: relative; }
article.categoria .box .miniatura { float: left; width: 20%; overflow: hidden; }
article.categoria .box .conteudo { position: absolute; right: 0; top: 0; width: 80%; height: 100%; padding: 20px; }
article.categoria .box:hover .miniatura img { transform: scale(1.1); }
article.categoria .box:hover .conteudo { background: #F1F1F1; }
article.categoria .box:hover h2 a { color: #ed3237; }
article.categoria .box h2 { float: left; width: 100%; margin-bottom: 20px; }
article.categoria .box h2 a { color: #606062; }
article.categoria .box p a { color: #606062; font-weight: 400; }

.paginacao { float: left; width: 100%; text-align: center; margin: 50px 0 30px 0; }
.paginacao ul { list-style: none; }
.paginacao ul li { display: inline-block; vertical-align: middle; }
.paginacao ul li a { display: inline-block; color: #999999; padding: 10px; }
.paginacao ul li a:hover { color: #ed3237; }
.paginacao .pages { margin-right: 10px; }
.paginacao .current { margin: 0 10px; padding: 5px 10px; border-radius: 50%; background: #ed3237; color: #FFFFFF; }

/* MOBILE */
@media (max-width: 720px){

	header .logo { width: 100%; }
	header nav .mobile { display: block; float: right; color: #FFFFFF; font-size: 30px; }
	header nav ul { width: 100%; display: none; }
	header nav ul li { display: block; }
	header nav ul li:after { content: none; }
	header nav ul li a { display: block; padding: 5px 0; }

	header nav .buscar { float: left; }

	section.buscar { padding: 20px 0; }
	section.buscar input[type=text] { width: 70%; }
	section.buscar input[type=submit] { width: 25%; }

	section.sobre, section.fazemos, section.blog, section.parceiros, section.contato { padding: 30px 0; }
	section.sobre .esquerda { width: 100%; padding: 0; border-right: 0; }
	section.sobre .direita { width: 100%; padding: 30px 0; }
	section.sobre .direita h1 { font-size: 14vw; font-weight: 13vw; }
	section.sobre .conteudo { top: auto; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; }

	section.fazemos .esquerda { width: 100%; }
	section.fazemos .esquerda ul li a.ativo:after { display: none; }
	section.fazemos .direita { width: 100%; }
	section.fazemos .direita .box .imagem { width: 100%; margin: 0 0 20px 0; }

	section.banner { height: 400px; }

	section.blog .container { width: 100%; }
	section.blog .box { width: 100%; height: auto; margin: 0 0 20px 0; }

	section.parceiros ul li { max-width: 30%; }

	section.contato .wpcf7 { margin-top: 30px; }
	section.contato h3 { margin-bottom: 30px; }
	.wpcf7 input[type=text], .wpcf7 input[type=email] { width: 100%; margin-right: 0; }

	section.atendimento { padding: 30px 0; }
	section.atendimento .box { width: 100%; margin: 10px 0; }
	section.atendimento .box .dados a, section.atendimento .box .dados strong { font-size: 16px; }

	footer { padding: 30px 0; }
	footer .logo { width: 20%; margin: 0 40%; }
	footer nav { width: 100%; margin: 30px 0; }
	footer nav ul li { float: left; width: 50%; text-align: center; }
	footer .social, footer .social ul { width: 100%; text-align: center; }
	footer .subir { width: 100%; margin-top: 30px; }
	footer .logo, footer .social, footer .subir { height: auto; }
	footer .logo a, footer .social ul, footer .subir a { position: initial; -webkit-transform: none; top: auto; -moz-transform: none; top: auto; -ms-transform: none; top: auto; -o-transform: none; top: auto; transform: none; top: auto; }
	footer .copy { margin-top: 30px; }

	section.titulo { padding: 30px 0; }
	section.titulo h1 { font-size: 26px; line-height: 28px; }
	section.relacionados .container { width: 100%; }
	section.relacionados .box { width: 100%; margin: 0 0 30px 0; }

	article.categoria { margin: 30px 0; }
	article.categoria .box .miniatura { width: 100%; margin-bottom: 20px; }
	article.categoria .box .conteudo { position: initial; float: left; width: 100%; top: auto; right: auto; height: auto; padding: 0; }
	article.categoria .box h2 { line-height: 24px; font-size: 18px; }

}