@charset "utf-8";
/* CSS Document */

/*barra de carregamento
.pace {-webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none;}
.pace .pace-progress {background: #00632f; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 6px;}*/
.no-pointer {pointer-events: none;}
.headroom {transition: transform 200ms linear;}
.headroom--pinned {transform: translateY(0%);}
.headroom--unpinned {transform: translateY(-100%);}

body {font-family: "Swiss 721 Condensed", Arial, sans-serif; color: #222;}
.container {max-width: 1055px; padding: 0 20px; margin: auto;}


/*PADRÃO DE FORMULÁRIOS*/
form input {min-height: 45px; background: transparent;}
form select, form input[type=text], form input[type=tel], form input[type=email], form input[type=number], form textarea {font-size: 1.2rem; border: 1px solid #ccc; background: transparent; margin-bottom: 10px; font-family: inherit; width: 100%; padding: 10px; color: #666; -webkit-appearance: none; border-radius: 0;}
form select {height: 45px; -webkit-appearance: menulist;}

form textarea {max-width: 100%;}
form button {background: transparent; border: none; padding: 15px 25px; text-transform: uppercase; text-align: center; display: inline-block; cursor: pointer;}


/*HEADER*/
header {width: 100%; min-height: 155px; background: #fff; position: absolute; top: 0; left: 0;}
header #logo {width: 100%; max-width: 280px; margin-top: 15px; float: left;}
header #logo img {width: 70%;}

header #barra {width: 100%; min-height: 45px; background: #333; font-size: 1.2rem; color: #f2f2f2; text-align: right; padding-top: 11px;}

#barra .email {float: left; margin-top: 3px;}
#barra .email a i {font-size: 15px; margin-right: 8px;}
#barra .email a > * {display: inline; vertical-align: middle;}

#barra .contatos {float: right; padding: 0;}

#barra .contatos li {display: inline-block; margin-left: 14px;}
#barra .contatos i {height: 22px; width: 22px; background: #999; padding-top: 4px; font-size: 14px; text-align: center; color: #fff; border-radius: 50%; margin-right: 6px;}
#barra .contatos i.fa-envelope {font-size: 12px; padding-top: 5px}
#barra .contatos i.fa-whatsapp {padding-right: 1px;}

#barra .contatos img {display: inline-block; vertical-align: middle; margin-top: -2px; margin-right: 6px;}

@media screen and (max-width: 46em) {
  #barra .contatos li {margin-left: 10px}
  #barra .contatos li span {display: none;}  
}


/* ----------------------
      MENU PRINCIPAL
------------------------*/
header ul.menu {font-size: 1.4rem; font-weight: normal; color: #666; position: relative; z-index: 4; display: inline-block; vertical-align: middle; margin-right: -5px;}

@media screen and (min-width: 55.05em) {
header #touch-menu {display: none;}    
header ul.menu li {line-height: 110px; padding: 0 5px; display: inline-block;}
header ul.menu li + li {margin-left: 19px;}
header ul.menu li a {display: block; transition: .1s; }
header ul.menu li a:hover {opacity: .6;}

header ul.menu li a.current {border-top: 6px solid #EE0000; line-height: 100px; color: #EE0000}
header ul.menu li a.current:hover {opacity: 1;}
}

header .selo {display: inline-block; vertical-align: middle; margin-left: 30px;}

header #touch-menu {position: absolute; right: 20px; top: 34px; width: 26px; height: 20px; text-align: left;}
header #touch-menu:after {content: ''; position: absolute; width: 100%; height: 3px; background: #666; box-shadow: 0 8px 0 #666, 0 16px 0 #666;}

@media screen and (max-width: 55em) {
  header {min-height: 134px;}
  header #logo {float: none; margin-top: 15px}
  header .container {position: relative;}
  header .menuprincipal {float: none; clear: both; margin-top: 10px}
  
  header ul.menu {display: none; text-align: center; border-top: 1px solid rgba(0,0,0,.1);}
  header ul.menu li {display: inline-block; padding: 15px; border-right: 1px solid #e6e6e6}
  header ul.menu li:last-child {border: none;}   

  header .selo {display: none;}
}

@media screen and (max-width: 41em) {  
  header ul.menu li {display: block; margin: 0; border-bottom: 1px solid #e6e6e6; border-right: none}
}

@media screen and (max-width: 380px) {
  header #logo {max-width: 210px; margin-top: 23px;}
}

/*HEADER FIXO*/
header.fixed {min-height: 110px; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; box-shadow: 0 0 3px rgba(0,0,0,.2)}
/*header.fixed #barra {display: none;}*/
header.fixed {}

@media screen and (max-width: 640px) {
	header #barra {padding: 10px 0;}
	#barra .contatos {float: none; text-align: center;}
	ul.contatos li.wpp span {display: none;}
}


/*COLUNAS*/
.gridCol {text-align: justify;}
.gridCol:after {content: ''; width: 100%; display: inline-block;}
.gridCol .col {display: inline-block; vertical-align: top; text-align: left;}


/*----------------------
   SLIDER PRINCIPAL
----------------------*/
#slider {position: relative; margin-top: 155px;}
#slider .item {overflow: hidden;}
#slider .owl-item img {position: relative; left: 50%; transform: translateX(-50%);}


#slider .owl-nav {position: absolute; top: 45%; left: 0; right: 0;}
#slider .owl-prev, #slider .owl-next {background: #333; color: #fff; padding: 20px 13px; position: absolute; transition: .1s}
#slider .owl-prev:hover, #slider .owl-next:hover {background: #A31313}

#slider .owl-nav .owl-prev {left: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
#slider .owl-nav .owl-next {right: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px;}

.chevron::before {content: ''; border-style: solid; border-width: 0.25em 0.25em 0 0; width: 1.1em; height: 1.1em; display: inline-block; position: relative; transform: rotate(-45deg); vertical-align: top; transition: .1s;}
.chevron.right:before {transform: rotate(45deg);}
.chevron.left:before {transform: rotate(-135deg);}


/* responsivo slide */
@media screen and (max-width: 880px) {
	#slider {margin-top: 128px;}
	#slider .owl-item img {left: 42%; width: 130%!important; min-width: initial;}
}

@media screen and (max-width: 640px) {
	#slider {margin-top: 160px;}
}

@media screen and (max-width: 50em) {#slider .owl-nav {display: none;}}


/*----------------------
    ATALHOS HOME
----------------------*/

#atalhos {padding: 50px 0 0; position: relative;}
#atalhos:before {content: ''; display: block; height: 3px; width: 100%; background: #A31313; position: absolute; left: 0; right: 0; top: 40%; z-index: -1}

#atalhos .container {max-width: 960px; margin: auto; padding: 0 20px;}

#atalhos .item {width: 28%; text-align: center; font-size: 1.3rem;}
#atalhos .item img {width: 60%; border-radius: 50%; height: auto; -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: .3s}
#atalhos .item h4 {font-size: 1.8rem; font-weight: normal; color: #A31313; margin: 15px auto 10px}
#atalhos .item p {line-height: 140%;}

#atalhos .item:hover img {-webkit-filter: none; filter: none;}

@media screen and (max-width: 40em) {
  #atalhos:before {display: none;}
  #atalhos .item {width: 100%; max-width: 340px; display: block; margin: 0 auto 30px;}
  #atalhos .item:last-of-type {margin: 0 auto}
}


/*-----------------------
     BANNERS HOME
-----------------------*/
.home .banner img {width: 100%;}
.home .banner {padding: 20px 0;}
.home .banner a {transition: .2s; display: block;}
.home .banner a:hover {opacity: .8;}
#empresa.banner {background: #dbdcd7; padding: 0 20px; margin: 40px 0 -12px; position: relative; z-index: 5}
#empresa.banner .container {max-width: 1024px;}

@media screen and (max-width: 40em) {
  .home #obras.banner img {width: 160%; position: relative; right: 50%; transform: translateX(-5%);}
  .home .banner a {overflow: hidden;}
}

/*-----------------------
 ESTRUTURA DAS PÁGINAS
-----------------------*/
main.page {min-height: 300px; padding: 40px 20px; max-width: 980px; box-sizing: border-box;}
.page > .title {position: relative; margin-bottom: 20px}
.page > .title:after {content: ''; display: block; border-top: 3px solid #A31313; position: absolute; left: 0; right: 0; top: 50%;} 
.page .title h2 { background: #fff; padding-right: 10px; color: #A31313; font-size: 2.8rem; font-weight: 600; display: inline-block; position: relative;; z-index: 2;}

article p, article li, article b {font-size: 1.4rem;}
article p {margin-bottom: 25px;}

article h3, article h4, article h5 {color: #222; margin-bottom: 7px}

article li {margin-left: 9px;}
article ul li:before {content: '- '; display: inline-block; margin: 0 4px 0 -9px;}

@media screen and (max-width: 45em) {
    main.page {padding: 40px 20px;}
    .duasCol .col {width: 100% !important; display: block;}    
}


/*----------------------------
    PAGINA INSTITUCIONAL
----------------------------*/
.fotos-empresa {margin: 20px auto;}
.fotos-empresa .item {width: 31.66%; float: left;}
.fotos-empresa .item:nth-child(2) {margin: 0 2.5%;}
.fotos-empresa .item img {width: 100%; height: auto; display: block;}

@media screen and (max-width: 500px) {
  .fotos-empresa .item {width: 100%; float: none;}
  .fotos-empresa .item:nth-child(2) {margin: 25px 0;} 
}


/*----------------------------
    PAGINA - CONHEÇA NRs
----------------------------*/
.content.nrs {}
.content.nrs div.area {margin-bottom: 35px;}
.content.nrs div.area .texto p {margin-bottom: 15px;}
.content.nrs .area h3 {font-size: 18px; margin-bottom: 15px;}
.content.nrs .area li {display: block; padding: 20px; cursor: pointer;}
.content.nrs .area li:nth-child(even) {background: #f2f2f2;}
.content.nrs .area li:before {content: '•';}
.content.nrs .area li .texto {display: none; margin-top: 20px;}


/*----------------------------
    PAGINA ÁREA DE ATUAÇÃO
----------------------------*/
#atuacao.page .gridCol li {width: 30%; padding: 5px 0; display: inline-block; vertical-align: top; text-align: left;}
#atuacao.page .gridCol li:before {content: ''; display: inline-block; width: 7px; height: 11px; border: solid #333; border-width: 0 0.23em 0.23em 0; transform: rotate(45deg); vertical-align: middle; margin-top: -5px; margin-right: 10px;}
@media screen and (max-width: 50em) {#atuacao.page .gridCol li {width: 100%; display: block;}}

/*----------------------
    PAGINA SERVICOS
----------------------*/
#servicos .grid-servicos {display: flex; flex-wrap: wrap; width: calc(100% + 140px); margin: 40px 0 0 -70px; padding: 0 25px; box-sizing: content-box;}
#servicos .grid-servicos .item {width: 32%; text-align: center;}

@media screen and (min-width: 901px) {
	#servicos .grid-servicos .item:nth-child(3n+2) {margin: 0 2%;}
	#servicos .grid-servicos .item:nth-child(n+4) {margin-top: 50px;}
}

#servicos .grid-servicos .item .imagem {height: 245px; overflow: hidden;}
#servicos .grid-servicos .item img {width: 100%; height: 100%; object-fit: cover; display: block;}
#servicos .grid-servicos .item h3 {min-height: 80px; font-size: 1.6rem; margin-top: 20px; padding-bottom: 30px; border-bottom: 4px solid #F7CB47;}


#servicos .list-serv div > li {line-height: 120%; margin-bottom: 30px; font-weight: bold;}
#servicos .list-serv div > li:before {content: ''; display: inline-block; width: 7px; height: 11px; border: solid #333; border-width: 0 0.23em 0.23em 0; transform: rotate(45deg); vertical-align: middle; margin-top: -5px; margin-right: 10px;}
/*#servicos .list-serv div > li > a:after {content: '\f078'; font-family: FontAwesome; font-size: 12px; display: inline-block; vertical-align: middle; margin: -2px 0 0 4px; color: #999;}*/
#servicos .list-serv > .col {width: 48%;}
#servicos .list-serv div > li > a.open:after {transform: rotate(180deg);}
#servicos .list-serv ul {/*display: none;*/ font-weight: normal; margin-top: 10px}
#servicos .list-serv ul li {padding: 5px 0; margin-left: 25px}


@media screen and (max-width: 1200px) {
	#servicos .grid-servicos {width: calc(100% + 40px); margin: 40px 0 0 -20px; padding: 0 25px; box-sizing: border-box;}
}

@media screen and (max-width: 900px) and (min-width: 541px) {
	#servicos .grid-servicos .item {width: 48.5%;}
	#servicos .grid-servicos .item:nth-child(even) {margin-left: 3%;}
	#servicos .grid-servicos .item:nth-child(n+3) {margin-top: 50px;}
}

@media screen and (max-width: 540px) {
	#servicos .grid-servicos .item {width: 100%;}
	#servicos .grid-servicos .item:nth-child(n+2) {margin-top: 50px;}
}


/*PÁGINA SUB-SERVICOS*/
.page.servicos article p, .page.servicos article ul li {font-size: 1.5rem; color: #666;}

.page .sub-servicos {margin-top: 50px; display: flex; flex-wrap: wrap;}
.page .sub-servicos:not(.col2) .item {width: 31.33%;}
@media screen and (min-width: 781px) {
	.page .sub-servicos:not(.col2) .item:nth-child(3n+2) {margin-left: 3%; margin-right: 3%;}
	.page .sub-servicos:not(.col2) .item:nth-child(n+4) {margin-top: 50px;}
}


@media screen and (max-width: 780px) {
	.page .sub-servicos:not(.col2) .item {width: 100%;}
	.page .sub-servicos:not(.col2) .item:nth-child(n+2) {margin-top: 50px;}
}


/*uma coluna*/
.page .sub-servicos.col1 {display: block;}
.page .sub-servicos.col1 .item {width: 100%; display: flex; text-align: justify;}
.page .sub-servicos.col1 .item + .item {margin: 50px 0 0;}
.page .sub-servicos.col1 .item .imagem {max-height: 400px; overflow: hidden; cursor: default; width: 300px; flex-shrink: 0}
.page .sub-servicos.col1 .item .texto {margin-left: 50px;}
.page .sub-servicos.col1 .item .texto h3 {margin-top: 0}

.page .sub-servicos.col1 + .form {margin: 50px auto 0; max-width: 800px;}
.page .sub-servicos.col1 + .form h4 {font-size: 1.8rem; margin-bottom: 20px; text-align: center;}
.page .sub-servicos.col1 + .form form {width: 100%;}
.page .sub-servicos.col1 + .form button {background: #A31313; color: #fff;}
/*.page .sub-servicos.col1 .item:nth-child(n+3) {margin-top: 50px;}*/

/*duas colunas*/
@media screen and (min-width: 681px) {
	.page .sub-servicos.col2 .item {width: 48%;}
	.page .sub-servicos.col2 .item:nth-child(even) {margin-left: 4%;}
	.page .sub-servicos.col2 .item:nth-child(n+3) {margin-top: 50px;}
}

@media screen and (max-width: 680px) {
	.page .sub-servicos.col2 .item {width: 100%;}
	.page .sub-servicos.col2 .item:nth-child(n+2) {margin-top: 50px;}	
}

.page .sub-servicos .item {text-align: justify;}
.page .sub-servicos .item .imagem {max-height: 190px; overflow: hidden; cursor: pointer;}
.page .sub-servicos .item img {width: 100%; height: auto; display: block;}
.page .sub-servicos .item h3 {font-size: 1.8rem; color: #333; margin-top: 20px; padding-bottom: 10px; text-align: left;}
.page .sub-servicos .item p {font-size: 1.5rem; margin-bottom: 15px;}
.page .sub-servicos .item p:last-of-type {margin-bottom: 0;}
.page .sub-servicos .item a.saiba-mais {margin-top: 20px; color: #DD2330; border-bottom: 2px solid #DD2330; padding-bottom: 10px; font-size: 1.5rem; font-weight: bold; display: inline-block;}


.modal {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999;}
.modal .overlay {position: absolute; background: rgba(0, 0, 0, 0.8); left: 0; top: 0; width: 100%; height: 100%;}
.modal .modal-content {width: 100%; max-width: 960px; max-height: 90vh; overflow: auto; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #fff; padding: 35px; border-radius: 5px;}
.modal .modal-content a.close {font-size: 20px; position: absolute; right: 0; top: 0; padding: 11px 15px;}
.modal .modal-content h3.title {color: #A31313; font-size: 2.2rem; font-weight: 600; margin-bottom: 15px;}
.modal .modal-content article p {margin-bottom: 15px;}
.modal .modal-content article p:last-child {margin-bottom: 0;}
.modal .modal-content article p b {color: inherit;}

.modal-content .imagem-form {display: flex; justify-content: space-between; margin-top: 40px;}
.modal-content .imagem-form h4 {font-size: 1.6rem; margin-bottom: 15px;}
.modal-content .imagem-form .imagem {width: 40%;}
.modal-content .imagem-form .imagem img {width: 100%; height: auto; display: block;}
.modal-content .imagem-form .imagem h5 {font-size: 1.4rem; text-align: center; margin-bottom: 15px;}
.modal-content .imagem-form .imagem .grid {display: flex; flex-wrap: wrap;}
.modal-content .imagem-form .imagem .grid a {flex: 1; min-width: 50%; padding: 2px; position: relative;}
.modal-content .imagem-form .imagem .grid a img {width: 100%; height: 100%; object-fit: cover;}

.modal-content .imagem-form .form {width: 55%;}
.modal-content .imagem-form .form button {background: #A31313; color: #fff;}


@media screen and (max-width: 680px) {
	.modal-content .imagem-form {display: block;}
	.modal-content .imagem-form .imagem {width: 100%}
	.modal-content .imagem-form .form {width: 100%; margin-top: 40px;}
}

.modal-content {}
.modal-content {}

.modal-content .imagem-form .imagem .grid  img {
  /* Same as first example */
  min-height: 50px;
}

.modal-content .imagem-form .imagem .grid img:before {content: " "; display: block; position: absolute; top: 3px; left: 3px; bottom: 3px; right: 3px; background-color: rgb(230,230,230); /*border: 1px dotted rgb(200, 200, 200);*/}
.modal-content .imagem-form .imagem .grid  img:after {content: "\f127";  display: block; font-size: 16px; font-style: normal; font-family: FontAwesome; color: rgb(100, 100, 100); position: absolute; top: 50%; left: 0; width: 100%; text-align: center; transform: translateY(-50%);}


@media screen and (max-width: 35em) {#servicos .list-serv > .col {width: 100%; display: block;}}


/*----------------------------
    PAGINA DE CLIENTES
----------------------------*/
.gridClientes .col {width: 13%; margin-bottom: 1.5%}
.gridClientes .col img {width: 100%; height: auto;}

@media screen and (max-width: 40em) {.gridClientes .col {width: 23.5%;}}
@media screen and (max-width: 25em) {.gridClientes .col {width: 31.5%; margin-bottom: 2%}}

/*----------------------------
    PAGINA OBRAS EXECUTADAS
----------------------------*/
#obras .galeria .col {width: 32%; height: 240px; position: relative; overflow: hidden; margin-top: 2%; position: relative;}
#obras .galeria .col img {position: absolute; left: 50%; top: 50%; width: auto; height: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-backface-visibility: hidden;}
#obras .galeria .legenda {position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; background: rgba(0,0,0,.6); color: #f2f2f2; font-size: 1.3rem; line-height: 1.4}

/*------------------------
    PÁGINA DE CONTATO
------------------------*/
#contato .formulario {width: 48%}
#contato .formulario h4 {font-size: 1.5rem; margin-bottom: 10px; font-weight: 400; letter-spacing: -0.2px}
#contato .formulario h4 b {font-size: 1.5rem; letter-spacing: 0 }
#contato .formulario h4 i {margin: 0 4px 0 0; width: 22px; height: 22px; line-height: 22px; font-size: 14px; background: #ddd; color: #777; border-radius: 50%; text-align: center; border-radius: 50%;}

#contato .formulario button {background: #000; padding-top: 12px 18px; color: #fff;}

#contato .formulario article {margin-bottom: 25px;}

#contato .mapa {width: 46%}
#contato .mapa p {font-size: 1.5rem; margin-bottom: 5px;}

@media screen and (max-width: 42em) {
  #contato .formulario, #contato .mapa {width: 100%; display: block; margin: auto;}  
  #contato .formulario {margin: 0 auto 40px;}
}

/*---------------------
        FOOTER
---------------------*/
footer {background: #444444; color: #999; padding: 60px 0 30px; font-size: 1.3rem}
footer .col {vertical-align: top !important;}
footer .col.mapa {width: 50%;}
footer .col.mapa img {width: 100%; height: auto;}

footer .col.mapa p {color: inherit; margin-top: 15px; line-height: 1.5; font-size: 1.4rem}
footer .col.mapa a:hover {color: #fff}

footer .col.atendimento {width: 38%;}
footer .col.atendimento h4 {color: #fff; font-size: 1.5rem; font-weight: normal; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #666}
footer .contatos li {display: block; margin-right: 15px; margin-bottom: 5px}
footer .contatos li span {min-width: 64px; display: inline-block; font-weight: 600}
footer .contatos li i {height: 22px; width: 22px; background: #999; padding-top: 4px; font-size: 14px; text-align: center; color: #fff; border-radius: 50%; margin-right: 6px;}

footer .selos {margin-top: 20px}
footer .selos img {width: 19%; display: inline-block; margin-right: 2px}

footer .positiva {display: block; margin-top: 20px; transition: .3s}
footer .positiva:hover {opacity: .7;}

@media screen and (max-width: 50em) {
  footer {padding: 20px 0 0;}
  footer .gridCol .col {display: block !important; width: 100% !important; max-width: 420px; margin: auto; text-align: center;}
  footer .col:first-child {margin: 0 auto 30px;}

  footer .contatos li {margin: 10px auto 0;}
  footer .contatos li span {min-width: initial;}
  footer .contatos li.tel {margin: 10px 0 0 10px;}
  footer .gridCol .container {padding: 0;}
}

@media screen and (max-width: 23em) {footer .contatos li {display: block;}}