@charset "UTF-8";
/*
Theme Name: TAG Tubos
Theme URI: https://a2a.com.br/tema_tagtubos
Author: A2A Soluções
Author URI: https://a2a.com.br/
Description: Tema desenvolvido para a TAG Tubos (Twig)
Tested up to: 5.6
Requires PHP: 7.3
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tagtubos
Tags: one-column, custom
*/

/******************* BASE */
@import url("static/css/materialize.min.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700&display=swap');
:root{

    --cor-primaria: #16425F;
    --cor-primaria-trans: rgba(22, 66, 95, .9);
    --cor-secundaria: #26BF69;
    --cor-secundaria-trans: rgba(38, 191, 105, .9);
    --cor-terciaria: #7B7B7B;
    --cor-branco: #FDFDFD;
    --cor-preto: #000000;
    --cor-texto:#333333;
    --cor-texto-claro:#B3B3B3;
}

html{
    scroll-behavior: smooth;
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}
body{
    color: var(--cor-texto);
    font-size: 1rem;
}

h1, h2, h3, h4, h5, h6{
    font-family: "Roboto", sans-serif;
    margin:0 0 20px;
    font-weight: 300;
}
h1{ font-size: 3rem;}
h2{ font-size: 2.5rem;}
h3{ font-size: 2rem;}
h4{ font-size: 1.5rem;}
h5{ font-size: 1.2rem;}
h6{ font-size: 1rem;}

a {
    text-decoration: none;
    color: var(--cor-secundaria);
}
a:hover{
    color: var(--cor-terciaria);
    text-decoration: underline;
    text-underline-offset: .3em;
}
strong{
    font-weight: 700 !important;
}
form{
    width: 100%;
}
section#content{
    overflow: hidden;
}
/************************** MENU */
nav{
    background-color: var(--cor-branco);
    border-top: 15px solid var(--cor-primaria);
    height: 30vh;
    box-shadow: none;
}
nav .nav-wrapper{
    border-top: 5px solid var(--cor-secundaria);
    padding: 20px;
}
img.logotipo{
    height: 145px;
    width: auto;
}
nav a{
    font-size: 1.2em !important;
    color: var(--cor-secundaria) !important;
    padding:10px;
    text-transform: uppercase;
}
nav a:hover{
    text-decoration: none;
}


/************************** TOPO */
.thumb-page{
    filter: blur(1px);
}


/************************** CONTEUDO */
#topo{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 65vh;
    background-image: url("static/img/topo.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 80px;
    padding-bottom: 40px;
}
.chamada {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--cor-branco);
    background-color: var(--cor-primaria-trans);
    padding: 35% 1% 6%;
    box-shadow: 0 0 10px var(--cor-secundaria);
}
#galeria{
    position:relative;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: minmax(100px, auto);
    grid-auto-flow: dense;
    grid-gap: 5px;
}
#galeria .box{
    overflow: hidden;
    place-items: center;
    min-height: 300px;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: end;
    cursor: pointer;
}
#galeria .descricao{
    font-weight: normal;
    font-size: 12px;
    line-height: .5px;
}
#galeria .box:nth-child(1){
    background-image: url("static/img/base_acessorios.jpg");
}
#galeria .box:nth-child(2){
    background-image: url("static/img/base_hidrante.jpg");
}
#galeria .box:nth-child(3){
    background-image: url("static/img/img-conexoes.jpg");

}
#galeria .box:nth-child(4){
    background-image: url("static/img/base_intrumento.jpg");
}
#galeria p{
    font-size: .8rem;
}
#galeria .ico{
    height: 6vh;
    margin-right: 10px;
}
#galeria div.texto{
    z-index: 101;
    position: relative;
    width: 100%;
    padding: 5px;
    background-color: var(--cor-secundaria-trans);
    font-size: 1.4rem;
    color:var(--cor-branco);
    margin-bottom: 0px;
    height: 8vh;
    transition: height 1s;
}
.texto-ativo{
    height: 30vh !important;
}

#catalogos{
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    margin-bottom: 50px;
    padding: 20px;
    text-align: center;
}
#catalogos .lista{
    display: flex;
    justify-content: space-around;
    font-size: 1.4rem;
}


.content-wrapper, .content{
    min-height: 100vh;
    margin-bottom: 50px;
}
.content article{
    margin-top: 20px;
}
.tease-img{
    min-width: 100%;
    height: 150px;
    overflow: hidden;
}

/************************** PARCEIROS */
#logos{
    display: flex;
    justify-content: center;
}
#logos .parceiros{
    width: 70%;
}
.parceiros .parceiros_logo{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#logos .distribuidor{
    width: 30%;
}
#logos figure{
    max-width: 150px;
}
figure > img, div.tease-img img{
    width: 100%;
    height: auto;
}
/************************** CONTATO */
.article-body form{
    width: 60%;
    margin: 10px auto;
}
.wpcf7 .botao{
    width: 20%;
}
.wpcf7 .formulario{
    width: 70%;
}
.wpcf7 input[type="email"], .wpcf7 input[type="text"], .wpcf7 textarea{
    background-color: var(--cor-branco);
    border:1px solid var(--cor-primaria);
    padding: 5px;
}
.wpcf7 textarea{
    width: 102%;
    min-height: 150px;
}
.wpcf7 input[type="submit"]{
    padding: 15px;
    background-color: var(--cor-secundaria);
    color: var(--cor-branco);
    margin-bottom: -5px;
    border:none;
}

.wpcf7-response-output {
    background-color: var(--cor-secundaria);
    margin: -11em 3.5em 0 !important;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2;
    position: absolute;
}
/************************** RODAPE */
footer{
    border-bottom: 15px solid var(--cor-secundaria);
    color: var(--cor-branco);
}


#rodape{
    position: relative;
    background-color: var(--cor-primaria);
    border-top: 5px solid var(--cor-primaria);
    border-bottom: 5px solid var(--cor-branco);
    padding: 10px;
    display: flex;
    justify-content: center;
    min-height: 40vh;
    z-index: 1000;
}
#rodape .endereco, #sitemap{
    width: 50%;
}
#rodape .endereco{
    padding-right: 30px;
}
#rodape .endereco p:nth-child(1){
    margin-bottom: 40px;
}
#rodape a{
    color: var(--cor-branco);
}
#rodape .fa-mobile-alt{
    margin-left: 20px;
}
#sitemap{
    display:flex;
    justify-content: space-around;
}
#sitemap div{
    width: 30%;
}
#sitemap p{
    font-size: .9em;
}

#rodape .redes{
    font-size: 3rem;
    padding-left: 50px;
    padding-top: 20px;
}


#assinatura{
    position: relative;
    text-align: center;
    padding: 10px;
    color: var(--cor-texto);
}