/* 
    Created on : 17/02/2021, 11:02:33
    Author     : aghton oliveira
*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;600;700&display=swap');
/*
font-family: 'Oswald', sans-serif;
font-family: 'Quicksand', sans-serif;
*/

* {
    padding: 0; margin: 0; outline: none; text-decoration: none; list-style: none;
    vertical-align: top; overflow: hidden; box-sizing: border-box; -webkit-box-sizing: border-box;
}

/* HACK */
div:after, ol:after, form:after, ul:after, dl:after, a:after, li:after, span:after,
div:before, ol:before, form:before, ul:before, dl:before, a:before, li:before, span:before {
    display: block; content: '.'; clear: both; visibility: hidden; height: 0;
}

/* estilos base */
html, body {
    height: 100%;
}

body {
    display: block; width: 100%; height: 100%; font: normal 100% 'Quicksand', sans-serif;
    background: url('../img/paper_rec_bg_g.jpg'); text-align: center; overflow: auto;
}

/* inicio template */

.template {
    display: block; max-width: 1366px; min-height: 290px; min-height: 100%; position: relative;
    margin: 0 auto;
}

.bgNotificacao {
    display: block; width: 100%; height: 100%; position: absolute; background: rgba(5,52,142,0.7);
    z-index: 9999; top: 0; left: 0;
}

.notificacao {
    background: url(../img/AvisoSite.png) center no-repeat; width: 800px; height:449px; margin: 8% auto 0 auto; 
}

.notificacao a {
    display: block; width: 48px; height: 48px; border-radius: 10px; background-color: #FFF; float: right;
    text-align: center; font-size: 250%; font-weight: 700; color: #3159a6; margin: 10px 10px 0 0;
    line-height: 48px;
}

.notificacao a:hover {
    color: #f00;
}

/* comuns */

h1 {
    display: block; width: 100%; padding: 10px 0; margin: 0 auto 30px auto; text-align: left;
    color: #3159a6;
}

.col {
    display: inline-block; margin: 0 -2px;
}

/* cabeçalho */
.hdr {
    display: block; width: 100%; height: 120px; background-color: #CCC;
    border-bottom: 2px solid #3159a6;
}

/* definições especificas */
.hdr .col_left {
    width: 30%; height: 100%;
}

.hdr .col_right {
    width: 70%; height: 100%;
}

/* logomarca */
.hdr .col #empresa {
    display: block; width: 120px; height: 120px; margin: 0 auto;
    background: url('../img/logomarca_mg_curva.png') center no-repeat;
    background-size: 100%;
}

/* radio */
.btnNav {
    display: none;
}

/* ctrl menu responsivo */
#menu_act, #btnMenuOn, #btnMenuOff {
    display: none;
}

/* Cabeçalho esquerdo */
.hdr .col .links_redes_sociais_topo {
    display: block; width: 100%; height: 48px; text-align: right; padding-right: 5%;
}

.hdr .col .links_redes_sociais_topo a {
    display: inline-block; width: 32px; height: 32px; margin: 1%;
}

/* redes sociais topo*/
#face {
    background: url('../ico/icon_facebook.png') center top no-repeat;
    background-size: 100%;
}

#inst {
    background: url('../ico/icon_instagram.png') center top no-repeat;
    background-size: 100%;
}

#face:hover, #inst:hover {
    background-position-y: bottom;
}


/* menu top */
.hdr .col menu {
    display: block; width: 100%; height: 100%;
}

.hdr .col menu a {
    display: inline-block; padding: 5px; margin: 3% 3% auto 3%; font-size: 120%;
    color: #3159a6; font-weight: 700;
}

.hdr .col menu a:hover {
    color: #f00;
}

/* conteúdo site */
.cdo {
    display: block; width: 100%; width: 90%; margin: 0 auto;
}

.produtos, .servicos {
    display: none;
}

/* home */
/* empresa */
.empresa {
    margin-bottom: 50px;
}

.empresa h2 {
    color: #333; margin-bottom: 20px;
}

.empresa .col_left {
    width: 40%;
}

.empresa video {
    background-color: #333; border: 1px solid #A7A7A7;
}

.empresa .col_right {
    width: 60%;
}

.empresa .card_emp {
    display: block; width: 95%; min-height: 80px; margin: 0 0 10px auto;
    padding: 20px; background-color: #CCC; border: 1px solid #A7A7A7;
}

.empresa .card_emp figure {
    display: inline-block; width: 64px; min-height: 10vh; position: relative;
    float: left; margin-right: 10px;
}

.missao figure {
    background: url('../ico/icon_missao.png') center no-repeat;
    background-size: 100%;
}

.visao figure {
    background: url('../ico/icon-visao.png') center no-repeat;
    background-size: 100%;
}

.valores figure {
    background: url('../ico/icon-valores.png') center no-repeat;
    background-size: 100%;
}

.empresa .card_emp p {
    display: block; width: 88%; text-align: justify; float: right; margin-bottom: 10px;
}

/* servicos */

.servicos p {
    text-align: justify; margin-bottom: 10px; line-height: 1.5em;
}

.servicos .col {
    width: 50%;
}

.bar_right {
    border-right: 1px solid #A7A7A7;
}

.servicos .bg_svc {
    background-color: #CCC; padding: 10px 0;
}

.servicos .col p {
    padding: 20px;
}

.servicos .col p img {
    margin: 0 10px 0 auto; float: left; border: 1px solid #A7A7A7;
}

.obs_servicos {
    display: block; width: 100%; text-align: justify; margin: 40px auto;
}

.obs_servicos li {
    display: block; margin: 20px 0;
}

/* produtos */
.produtos {
    margin-bottom: 70px;
}

.card_prod {
    display: inline-block; width: 20%; height: 300px; margin: 2.5% 5%;
    background-color: #fff; border: 1px solid #A7A7A7;
}

.card_prod img {
    margin: auto; vertical-align: central; margin-top: 25%;
}

.card_prod h3 {
    display: block; width: 100%; margin-top: 20px; color: #3159a6;
}

/* 404 */
#erro404 {
    display: block; width: 290px; height: 402px; margin: 0 auto; 
    background: url('../img/erro404.png') center no-repeat;

}

/* rodapé */
.tail {
    display: block; width: 100%; min-height: 380px; background: #015f00 url('../img/background_tail_green.png') center top no-repeat; 
    border-top: 2px solid #003300; color: #fff; padding-bottom: 100px;
}

.atendimento_online h1 {
    color: #fff; width: 90%;
}

/* whatsapp */
.tail .col_left {
    width: 60%; 
}

.tail .col_left h5 {
    margin-bottom: 30px;
}

.tail .col_left a {
    display: inline-block; width: 140px; height: 185px; margin: 2%;
    background: #000066; border: 2px solid #000066;
}

/* avatares chat*/
#comercial {
    background: url('../img/whats/Kamilla_whats.png') center no-repeat;
    background-size: 100%;
}

#financeiro {
    background: url('../img/whats/Adriana_whats.png') center no-repeat;
    background-size: 100%;
}

#diretoria {
    background: url('../img/whats/Itamar_whats.png') center no-repeat;
    background-size: 100%;
}

/* formulário e-mail*/
.tail .col_right {
    width: 40%;
}

#siteMail {
    display: block; max-width: 320px; min-width: 290px; margin: 30px auto 0 auto;
    background:  rgba(51,133,247,0.3);
}

#siteMail #notice {
    display: block; width: 90%; height: 45px; padding: 5px; margin: 0 auto;
}

#siteMail input, #siteMail textarea {
    width: 90%; padding: 5px 5px; margin: 10px auto 5px auto; border: 1px solid #003399;
}

#siteMail textarea {
    height: 180px; margin-bottom: 10px;
}

#siteMail #painel_count {
    display: block; width: 90%; height: 20px; padding: 5px; font-size: 70%;
    margin: 0 auto 20px auto;
}

.btnSubmit {
    display: block; width: 90%; padding: 5px 0; margin: 0 auto 20px auto; color: #fff;
    background-color: #003399; font-weight: 700;        
}

.btnSubmit:hover {
    background-color: #33ccff;
}

/* endereço */
.tail .endereco {
    display: block; width: 90%; min-height: 90px; margin: 40px auto 0 auto; 
    border: 1px solid #000066; padding: 20px;
}

.endereco .col {
    display: inline-block; width: 50%;    
}

#face_bottom, #inst_bottom {
    display: inline-block; width: 32px; height: 32px; margin: 1%;
}

#face_bottom {
    background: url('../ico/icon_face_link2.png') center top no-repeat;
    background-size: 100%;
}

#inst_bottom {
    background: url('../ico/icon_inst_link2.png') center top no-repeat;
    background-size: 100%;
}

#face_bottom:hover, #inst_bottom:hover {
    background-position-y: bottom;
}

.link_maps {
    color: #fff;
}

/* copyright */
.tail .copyright {
    display: block; width: 100%; padding: 20px 0 10px 0 ; position: absolute; 
    bottom: 0; color: #fff;
}

.tail .copyright a {
    color: #fff; margin-top: 10px;
}

@media screen and (max-width: 1024px){
    
    #btnMenuOn {
        display: block; font-size: 160%; font-weight: 700; color: #3159a6;
        width: 160px; float: right; cursor: pointer; 
    }
    
    #btnMenuOn:hover {
        color: #f00;
    }
    
    
    #btnMenuOff {
        display: inline-block; width: 48px; height: 32px; background-color: #f00;
        color: #fff; font-size: 180%; line-height: 32px; float: left; font-weight: 700;
        cursor: pointer; margin-bottom: 20px;
    }
    
    #btnMenuOff:hover {
        background-color: #990000;
    }
    
    .hdr .col menu {
        width: 320px; width: 320px; height: 100vh; position: fixed; top: 0;
        right: -380px; background-color: #003399; transition: 0.7s;
    }
    
    .hdr .col menu a {
        display: block; width: 100%; color: #fff; margin: 10px auto; text-align: left;
        padding-left: 20px; 
    }
    
    .card_prod {
         width: 220px; height: 260px; margin: 3%;
    }
    
}

@media screen and (max-width: 768px){
    .empresa .col_left, .empresa .col_right, 
    .servicos .col_left, .servicos .col_right,
    .atendimento_online .col_left, .atendimento_online .col_right {
        width: 100%;
    }
    
    .empresa .col_left, .empresa .col_right { 
        margin-bottom: 50px;
    }
    
    .empresa .card_emp {
        width: 100%;
    }
    
    .bar_right {
        border: none;
    }
    
    .card_prod {
         width: 220px; margin: 0.5%;
    }
    
    .atendimento_online .col_left {
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 480px) {
    
    #btnMenuOn {
        width: 120px;
    }
    
    .card_prod {
         width: 220px; margin: 5%;
    }
    
    .servicos .col p img {
        width: 50%;
    }
    
    .tail .col_left a {
        margin: 5% 20%;
    }
    
    .empresa .card_emp figure {
        margin-bottom: 20px;
    }
    
    .empresa .card_emp p {
        width: 100%;
    }
    
    .endereco .col {
        width: 100%;
    }
    
    .endereco .mb {
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 320px){
    
    .hdr .col_left, .hdr .col_right {
        width: 50%;
    }
    
    #btnMenuOn {
        width: 90px;
    }
    
    .servicos h3 {
        padding: 0 10px;
    }
    
    .servicos .col p img {
        width: 100%;
    }
    
}

#menu_act:checked ~menu {
    right: 0;
}

#pServico:checked ~ .empresa,
#pProduto:checked ~ .empresa {
    display: none;
}

#pServico:checked ~ .servicos {
    display: block;
}

#pProduto:checked ~ .produtos {
    display: block;
}