*,
html,
body,
ul,
li {
    margin    : 0;
    padding   : 0;
    list-style: none;
}

body {
    font       : 1em/150% Arial, sans-serif;
    font-family: 'Dosis', sans-serif;
    font-size  : 1.4em;
    color      : #808080;
    padding    : 0;
    margin     : 0;
    background : #145861;
}

/************************************************************************************
CORES DE FUNDO E IMAGENS
*************************************************************************************/

#header {
    background: #1a6f7a url(../images/sombra_header.png) bottom repeat-x;
    border-top: 4px solid #70b7b9;
}

#home,
#banner,
#interna,
#contato {
    background: #f7f7f7;
}

#empresa_interna {
    background: #f7f7f7 url(../images/img_empresa.png) center right no-repeat;
}

#footer {
    background: #1a6f7a url(../images/sombra_rodape.png) top repeat-x;
}

#copyright {
    background: #145861;
}

/************************************************************************************
BOTOES
*************************************************************************************/

.vermais {
    width          : 80%;
    font-size      : 0.8em;
    font-weight    : bold;
    text-decoration: none;
    color          : #1a6f7a;
    cursor         : pointer;
    float          : left;
    margin-top     : 0.8em;
}

.vermais a {
    text-decoration: none;
    color          : #1a6f7a;
    cursor         : pointer;
    margin-left    : 5px;
}

.vermais a:hover {
    color             : #14565e;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition   : all 0.5s ease-in-out;
    -ms-transition    : all 0.5s ease-in-out;
    -o-transition     : all 0.5s ease-in-out;
    transition        : all 0.5s ease-in-out;
}

.icon_vermais {
    background: url(../images/icon_vermais.png) no-repeat;
    width     : 20px;
    height    : 20px;
    margin-top: 6px;
    float     : left;
}

/************************************************************************************
ESTRUTURA
*************************************************************************************/

#header,
#banner,
#home,
#empresa_interna,
#interna,
#contato,
#footer,
#copyright {
    float    : left;
    min-width: 100%;
}

#pagewrap {
    max-width: 1240px;
    margin   : 0 auto;
    padding  : 0px 20px 0px 20px;
}

#header {
    height: 166px;
}

#footer {
    min-height: 180px;
}

#copyright {
    font-size  : 0.7em;
    text-align : center;
    color      : #f0f0f0;
    line-height: 1.2em;
}

/************************************************************************************
MARGINS, PADDINGS e SEPARA��ES
*************************************************************************************/

.ta-l {
    text-align: left;
}

.ta-r {
    text-align: right;
}

.ta-c {
    text-align: center;
}

.ta-j {
    text-align: justify;
}

.mt05 {
    margin-top: 0.5em;
}

.mt10 {
    margin-top: 1em;
}

.mt20 {
    margin-top: 2em;
}

.mt40 {
    margin-top: 4em;
}

.mb05 {
    margin-bottom: 0.5em;
}

.mb10 {
    margin-bottom: 1em;
}

.mb20 {
    margin-bottom: 2em;
}

.mb40 {
    margin-bottom: 4em;
}

.pt05 {
    padding-top: 0.5em;
}

.pt10 {
    padding-top: 1em;
}

.pt20 {
    padding-top: 2em;
}

.pt40 {
    padding-top: 4em;
}

.pb05 {
    padding-bottom: 0.5em;
}

.pb10 {
    padding-bottom: 1em;
}

.pb20 {
    padding-bottom: 2em;
}

.pb40 {
    padding-bottom: 4em;
}

.sep05 {
    width : 100%;
    height: 0.5em;
    float : left;
}

.sep10 {
    width : 100%;
    height: 1em;
    float : left;
}

.sep20 {
    width : 100%;
    height: 2em;
    float : left;
}

.sep40 {
    width : 100%;
    height: 4em;
    float : left;
}

/************************************************************************************
TEXTOS
*************************************************************************************/

h1,
h2,
p,
.texto,
.fonte {
    width: 100%;
    float: left;
}

h1 {
    color         : #1a6f7a;
    text-transform: uppercase;
    font-size     : 1.5em;
    line-height   : 1em;
    width         : 100%;
}

h1 a,
h1 a:hover {
    text-decoration: none;
    color          : #1a6f7a;
}

h2 {
    font-weight   : 500;
    color         : #e3b550;
    text-transform: uppercase;
    font-size     : 0.8em;
    line-height   : 1.2em;
}

h2 a,
h2 a:hover {
    text-decoration: none;
    color          : #e3b550;
}

h3 {
    font-weight   : 400;
    color         : #1a6f7a;
    text-transform: uppercase;
    font-size     : 0.6em;
    line-height   : 1.2em;
}

h3 a,
h3 a:hover {
    text-decoration: none;
    color          : #e3b550;
}

.texto,
.fonte {
    font-size  : 0.8em;
    line-height: 1.3em;
    color      : #808080;
}

.texto a,
.texto a:hover,
.fonte a,
.fonte a:hover {
    text-decoration: underline;
    color          : #808080;
}

.subtitulo {
    font-style : italic;
    font-size  : 0.7em;
    line-height: 1.3em;
    color      : #b3b3b3;
}

.subtitulo a,
.subtitulo a:hover {
    text-decoration: underline;
    color          : #b3b3b3;
}

.obrigatorio {
    color: #a82c51;
}


/************************************************************************************
HEADER
*************************************************************************************/

.header_logoprincipal {
    width     : 30%;
    float     : left;
    margin-top: 50px;
}

.header_logoprincipal img {
    max-width : 100%;
    max-height: 70px;
}

.header_telefone {
    width     : 60%;
    float     : right;
    margin-top: 10px;
    text-align: right;
}

.icon_telefone {
    width : 100%;
    height: 35px;
    float : right;
}

.email_telefone {
    font-size : 0.71em;
    color     : #70b7b9;
    width     : 100%;
    margin-top: -5px;
    float     : right;
}

.menu {
    font-weight: 400;
    width      : 70%;
    float      : right;
    margin-top : 25px;
}

/************************************************************************************
BLOCOS
*************************************************************************************/

.bloco1-1 {
    width: 100%;
    float: left;
}

.bloco1-2 {
    width: 50%;
    float: left;
}

.bloco1-4 {
    width: 25%;
    float: left;
}

.bloco2-3 {
    width: 66.66%;
    float: left;
}

.bloco1-3 {
    width: 33.33%;
    float: left;
}

#conteudo_interna {
    text-align : left;
    width      : 70%;
    float      : left;
    margin-left: 5%;
}

#sidebar {
    text-align   : left;
    width        : 22.5%;
    float        : left;
    padding      : 1%;
    background   : #FFFFFF;
    border-bottom: 4px solid #e1e1e1;
    border-radius: 6px;
}

#sidebar_interna {
    text-align   : left;
    width        : 80%;
    float        : left;
    padding      : 5%;
    margin-left  : 10%;
    background   : #FFFFFF;
    border-bottom: 4px solid #e1e1e1;
    border-radius: 6px;
}

/************************************************************************************
HOME
*************************************************************************************/

.col_home_1,
.col_home_2,
.col_home_3 {
    width: 32%;
    float: left;
}

.col_home_1,
.col_home_2 {
    margin-right: 2%;
}

/************************************************************************************
ORIENTA��O
*************************************************************************************/

.orientacao {
    text-transform: uppercase;
    font-size     : 0.6em;
    font-weight   : 500;
    line-height   : 1.4em;
    color         : #808080;
    width         : 100%;
    float         : left;
}

.orientacao a {
    text-decoration: none;
    color          : #808080;
}

.orientacao a:hover {
    text-decoration: none;
    color          : #70b7b9;
    border-bottom  : 1px solid #70b7b9;
}

/************************************************************************************
CATEGORIAS
*************************************************************************************/

.categorias_mobile {
    font-size     : 1em;
    color         : #e3b550;
    text-align    : center;
    text-transform: uppercase;
    width         : 100%;
    height        : 2em;
    float         : left;
    margin-top    : 1em;
    cursor        : pointer;
    background    : #FFFFFF;
    border-radius : 6px;
    border        : 1px solid #e3b550;
    border-bottom : 4px solid #e3b550;
}

.categorias_mobile a {
    text-decoration: none;
    color          : #70b7b9;
}

.linha_categoria,
.linha_categoria a,
.linha_categoria:hover {
    font-size      : 1em;
    text-align     : left;
    text-transform : uppercase;
    text-decoration: none;
    line-height    : 1em;
    color          : #70b7b9;
    width          : 94%;
    padding        : 3%;
    float          : left;
    cursor         : pointer;
    border         : 1px solid #70b7b9;
    margin-top     : 0.5em;
    background     : #FFFFFF;
    border-radius  : 6px;
}

.linha_categoria:hover {
    text-decoration: none;
    color          : #FFFFFF;
    background     : #70b7b9;
    border         : 1px solid #469296;
}

.linha_categoria_active {
    font-size      : 1em;
    text-align     : left;
    text-transform : uppercase;
    text-decoration: none;
    line-height    : 1em;
    color          : #e3b550;
    width          : 94%;
    padding        : 3%;
    float          : left;
    cursor         : pointer;
    border         : 1px solid #e3b550;
    margin-top     : 0.5em;
    background     : #f7f7f7;
    border-radius  : 6px;
}


/************************************************************************************
LISTAS
*************************************************************************************/

.lista {
    width        : 88%;
    float        : left;
    padding      : 4%;
    margin-right : 4%;
    background   : #FFFFFF;
    border-radius: 6px;
    border-bottom: 4px solid #e1e1e1;
}

.lista:hover {
    cursor       : pointer;
    border-bottom: 4px solid #e3b550;
    background   : #FFFFFF;
    border-radius: 6px;
}

.img_lista {
    width: 30%;
    float: left;
}

.img_lista img {
    border-radius: 6px;
    border       : 1px solid #e1e1e1;
}

.conteudo_lista {
    width      : 62%;
    float      : left;
    margin-left: 5%;
}

.lista_produto {
    width        : 42.5%;
    float        : left;
    padding      : 2%;
    float        : left;
    margin       : 0 1.5% 0 1.5%;
    background   : #FFFFFF;
    border-radius: 6px;
    border-bottom: 4px solid #e1e1e1;
}

.lista_produto:hover {
    cursor       : pointer;
    border-bottom: 4px solid #e3b550;
    background   : #FFFFFF;
    border-radius: 6px;
}

.img_lista_produto {
    width: 25%;
    float: left;
}

.img_lista_produto img {
    border-radius: 6px;
}

.conteudo_lista_produto {
    width      : 67%;
    float      : left;
    margin-left: 5%;
}

/* usada para alinhar as divs */
.linha100 {
    width        : 100%;
    float        : left;
    margin-bottom: 0.5em;
}


/************************************************************************************
REDES SOCIAS / COMPARTILHAR
*************************************************************************************/


.compartilhar_facebook {
    width: 175px;
    float: left;
}

.compartilhar_twitter {
    width      : 120px;
    padding-top: 9px;
    float      : left;
}

.compartilhar_linkedin {
    width      : 140px;
    padding-top: 9px;
    float      : left;
}

.compartilhar_google {
    width      : 150px;
    padding-top: 9px;
    float      : left;
}


/************************************************************************************
PAGINA��O
*************************************************************************************/


.paginacao {
    width: 100%;
    float: left;
}

.paginacao .pag_menos,
.paginacao .pag_mais {
    min-width: 50%;
    float    : left;
}

.paginacao .pag_menos .bt_pagina_menos img {
    height: 40px;
    float : left;
}

.paginacao .pag_mais .bt_pagina_mais img {
    height: 40px;
    float : right;
}


/************************************************************************************
RODAP�
*************************************************************************************/


#footer h2,
#footer .texto,
#copyright {
    color      : #F8F9F0;
    line-height: 1.2em;
    width      : 100%;
    float      : left;
}

#footer h2 {
    font-size: 1em;
}

#footer .texto {
    font-size  : 0.7em;
    padding-top: 5px;

    opacity: .8;
}

#copyright {
    font-size: 0.6em;
}

#footer h2 a,
#footer .texto a,
#copyright a {
    text-decoration: none;
    color          : #F8F9F0;
}

#footer h2:hover,
#footer a:hover,
#copyright:hover {
    text-decoration: none;
    color          : #F8F9F0;
}

#footer .rodape_endereco {
    width: 60%;
    float: left;
}

/* #footer .rodape_face {
    text-align: right;
    width     : 40%;
    min-height: 60px;
    float     : right;
} */

#footer .social-footer {
    text-align: right;
    width     : 40%;
    min-height: 60px;
    float     : right;
    position  : relative;
}

#footer .social-footer .icon-social {
    position : absolute;
    right    : 0;
    top      : 50%;
    transform: translateY(-50%);
    display  : flex;
    gap      : 10px;
}

#footer .social-footer .icon-social a img {
    width        : 34px;
    height       : 34px;
    transition   : transform 0.2s ease;
    background   : #F8F9F0;
    border-radius: 50%;
}

#footer .social-footer .icon-social a:hover img {
    transform: scale(1.2);
}

#footer .social-footer .icon-social a:last-child {
    display: none;
}

.floating-icons {
    position      : fixed;
    top           : 50%;
    right         : 0;
    transform     : translateY(-50%);
    display       : flex;
    flex-direction: column;
    gap           : 0;
    z-index       : 9999;
}

.floating-icons .icon {
    width          : 50px;
    height         : 50px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 0;
    transition     : background-color 0.2s ease;
}

.floating-icons .whatsapp {
    background-color: #25D366;
}

.floating-icons .instagram {
    background-color: #E1306C;
}

.floating-icons .facebook {
    background-color: #1877F2;
}

.floating-icons .call {
    background-color: #808080;
}

.floating-icons .icon img {
    width     : 34px;
    height    : 34px;
    filter    : brightness(0) invert(1);
    transition: transform 0.2s ease;
}

.floating-icons .icon:hover {
    filter: saturate(120%);
}

.floating-icons .icon:hover img {
    transform: scale(1.2);
}

.floating-icons .icon:last-child {
    display: none;
}


/************************************************************************************
FORMUL�RIOS
*************************************************************************************/


.form_campo,
.form_select,
.form_textarea {
    font-family  : 'Dosis', sans-serif;
    font-size    : 1em;
    color        : #808080;
    float        : left;
    padding      : 1%;
    border       : 1px solid #ebebeb;
    background   : #FFFFFF;
    border-radius: 6px;
}

.form_campo {
    width: 95%;
}

.form_select {
    width: 97.5%;
}

.form_textarea {
    width   : 95%;
    height  : 235px;
    overflow: auto;
}

.bt_al,
.bt_ac,
.bt_100 {
    font-family    : 'Dosis', sans-serif;
    font-size      : 1em;
    text-decoration: none;
    text-transform : uppercase;
    color          : #FFFFFF;
    border         : 0;
    cursor         : pointer;
    background     : #70b7b9;
    border         : 1px solid #469296;
    border-radius  : 6px;
}

.bt_al:hover,
.bt_ac:hover,
.bt_100:hover {
    text-transform    : uppercase;
    color             : #FFFFFF;
    background        : #e3b550;
    border            : 1px solid #c9a047;
    -webkit-transition: all 0.5ms ease-in-out;
    -moz-transition   : all 0.5ms ease-in-out;
    -ms-transition    : all 0.5ms ease-in-out;
    -o-transition     : all 0.5ms ease-in-out;
    transition        : all 0.5ms ease-in-out;
}

.bt_al {
    float  : left;
    padding: 0.5% 20% 0.5% 20%;
}

.bt_ac {
    padding: 0.5% 10% 0.5% 10%;
}

.bt_100 {
    width     : 91%;
    float     : left;
    text-align: center;
    padding   : 0.5% 0 0.5% 0;
    margin    : 0 5% 5% 5%;
}


/************************************************************************************
FADE
*************************************************************************************/


.fade1 {
    -webkit-animation: fadeIn 0.5s ease-in-out;
    -moz-animation   : fadeIn 0.5s ease-in-out;
    -o-animation     : fadeIn 0.5s ease-in-out;
    animation        : fadeIn 0.5s ease-in-out;
}

.fade2 {
    -webkit-animation: fadeIn 1s ease-in-out;
    -moz-animation   : fadeIn 1s ease-in-out;
    -o-animation     : fadeIn 1s ease-in-out;
    animation        : fadeIn 1s ease-in-out;
}

.fade3 {
    -webkit-animation: fadeIn 1.5s ease-in-out;
    -moz-animation   : fadeIn 1.5s ease-in-out;
    -o-animation     : fadeIn 1.5s ease-in-out;
    animation        : fadeIn 1.5s ease-in-out;
}

.fade4 {
    -webkit-animation: fadeIn 2s ease-in-out;
    -moz-animation   : fadeIn 2s ease-in-out;
    -o-animation     : fadeIn 2s ease-in-out;
    animation        : fadeIn 2s ease-in-out;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/************************************************************************************
Imagem 100%
*************************************************************************************/

.img100 {
    width : 100%;
    border: 1px solid #e1e1e1;
}

.max100 {
    max-width    : 100%;
    border-radius: 6px;
    border       : 1px solid #e1e1e1;
}

.max90 {
    max-width    : 90%;
    border-radius: 6px;
    border       : 1px solid #e1e1e1;
}

.maxh400 {
    max-height: 400px;
    border    : 1px solid #e1e1e1;
}