/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 27/04/2019, 14:34:39
    Author     : Kleberton Vilela
*/

body{float: left; width: 100%; font-family: Roboto;}
.bgazul{background-color:#004372;}
.bgcopyrosa{background-color:#05233b;}
.heigthbarmenu{max-height: 90px;}
.header{position: relative; width:100%; background: #FFFFFF; z-index: 500; box-shadow: 0 5px 5px rgba(0,0,0,0.8);}
.header .logo{float: left; width: 15%; margin: 0 0 0 1%;}
.header .logo img{ width: 100%;}/*height: 85px;*/
/*.barmenu{float: left; width: 84%; height: 90px; background-image: url("../img/barmenu.jpg"); background-repeat: no-repeat; background-color: #004372;}*/
.barmenu{float: left; width: 84%; background-color: #004372;}
/*.menu{float: left; width: 50%; margin: 0 0 0 0; padding-top:30px; box-sizing: border-box; }*/
.menu{float: left; width: 75%; margin-left: 5%; margin-right: 5%; padding-top:30px; box-sizing: border-box; }
.menu ul{float: left; width: 100%; }
.menu ul li{float: left; display: inline;color: #FFF; list-style: none; font-size: 20px; width: 20%; cursor: pointer; text-align: center;}


.barmenumobile{float: left; width: 100%; min-height: 40px; background-color: #004372; display: none;}
.btmenumobile{float: right; height: 34px; margin: 3px 5% 3px 0;}
.menumobile{position: absolute; margin: 40px 0 0 0; width: 100%; display: none; background-color: #004372;}
.menumobile ul{float: left; width: 100%; text-align: center; list-style: none; color: #FFF;}
.menumobile ul li{height: 40px; cursor: pointer; padding-top:10px; box-sizing: border-box;  border-top: 1px solid #FFF; font-family: Roboto;}
.txtmenu{float: left; margin: 10px 0 0 2%; color: #FFF; font-family: Roboto;}

.banner{float: left; margin:0 0 0 0; width: 100%; height: auto; z-index: 0;}
.conteudo{float: left; width: 100%; margin: 20px 0 50px 0; min-height: 300px;}
.conteudointerno{float: left; width: 70%; margin: 20px 15% 50px 15%;}
article{font-family:Roboto;}
/*FOOT*/
.boxfoot{float: left; width: 100%; padding-bottom:10px;  min-height: 300px; background-image: url("../img/barboton.jpg")}
.boxfoot .footer{float: left; width: 70%; margin: 0 15% 0 15%;}

.footer .logofoot{float: left; width: 15%; margin: 20px 0 0 0;}

.titlefoot{float: left; width: 100%; font-size:1.2vw; color: #FFF;}

.contatosfoot{float: left; width: 36%; margin:80px 0 0 17%;}
.spanfoot{float: left; color: #FFF; text-decoration: none; font-family: Roboto; font-size: 15px;}

.menufoot{float: left; width: 13%; margin:80px 0 0 13%;}
.menufoot ul li{color: #FFF; line-height: 25px; font-family: Roboto; list-style: none; cursor: pointer;}

/*HOME*/
.boxbols{float: left; width: 23%; margin: 20px 1% 0 1%; }
.boxbols .bol{float: left; width: 60%; margin: 0 20% 0 20%; cursor: default;}
.balao{float: left; width: 80%; margin: 10px 10% 0 10%;  border-radius: 5px; cursor: pointer;}
.bannernews{float: left; width: 100%;} 
.clientes{float: left; width: 16%;height: 100px; filter: grayscale(100%);}
.clientes img{width: 100%; max-height: 100px;  position: relative; top: 50%;  transform: translateY(-50%);}
.clientes:hover{ filter: grayscale(0%)}


/*HOME*/
.copy{float: left; width: 100%; height: 25px; font-size: 15px; color: #FFF; font-family: Roboto; text-align: center; padding-top:5px; box-sizing: border-box; }

.titlepagina{float: left; width: 100%; text-align: center; color: #323232; font-size: 30px; font-family: Roboto; font-weight: bold;}
.hr{float: left; width: 6%; margin: 20px 0 0 47%; background: #323232; border: none; height: 3px; clear: both; align-content: center;}
.title{float: left; width: 100%; font-size: 20px; color: #004372; font-family: Roboto; font-weight: bold;}

/*CONTATO*/
.boxform{float: left; width: 70%; margin: 0 15% 0 15%;}
.formcontato{float: left; margin: 5px 0 0 0;}
.duplo{float: left; width: 48%;}
.unico{float: left; width: 99%;}
.bt_enviar{float: left; width: 99%; border-radius: 5px; height: 45px; box-sizing: border-box; padding: 15px 0 0 0; background: #02306d; margin: 10px 0 0 0;}
.bt_enviar span{float: left; width: 100%; color: #FFF; text-align: center;}
.txt{float:left; width:100%;margin:20px 0 0 0; font-size:18px; color:#313131; line-height:20px; position:relative;}
.formcontato span{float: left; width: 100%; margin: 0 0 5px 0; color: #112e46; }
.formcontato .inputcontato{float: left; width: 100%; height: 40px; border: 1px solid #112e46; padding: 5px; box-sizing: border-box; border-radius: 5px;}
.tel{float:left; background:url(../img/tel.png) no-repeat; width:10px; height:14px; margin:2px 9px 0 0;}
.horario{float:left; background:url(../img/hora.png) no-repeat; width:15px; height:15px; margin:3px 4px 0 0;}
.end{float:left; background:url(../img/end.png) no-repeat; width:15px; height:15px; margin:2px 4px 0 0;}


.articleutilidades{float: left; width: 40%; margin: 0 5% 0 5%;}
.boxutilidades{float: left; width: 100%; height: 35px; margin: 10px 0 0 0; padding: 0 0 5px 0; border-bottom: 1px solid #02306d;}
.boxutilidades span{margin: 10px 0 0 0;}
.btutilidades{float: left; border-radius: 5px; padding: 5px; background: #02306d; color: #FFF; border: 1px solid #02306d;}

@media screen and (max-width: 1390px){
    .header .logo img{margin: 10% 0 0 0;}
    .conteudointerno{float: left; width: 98%; margin: 20px 1% 50px 1%;}
    .boxfoot .footer{width: 96%; margin: 0 2% 0 2%;}
    .titlefoot{font-size:1.5vw; }
}
@media screen and (max-width: 1100px){
    /*.menu{width: 90%; margin-left: 5%; margin-right: 5%;}*/

}
@media screen and (max-width: 1000px){
    .header .logo img{margin: 15% 0 0 0;}
    .boxbols .bol{float: left; width: 80%; margin: 0 10% 0 10%; }
    .balao{float: left; width: 90%; margin: 10px 5% 0 5%;  border-radius: 5px;}
}
@media screen and (max-width: 900px){
    .header .logo{width: 100%; float: left; margin: 5px 0 10px 0;}
    .header .logo img{ width: 30%; margin: 0 35% 0 35%;}
    .barmenu{display: none;}
    .barmenumobile{display: block;}
}
@media screen and (max-width: 800px){

    .titlefoot{font-size:3vw; }
    .footer .logofoot{width: 20%; margin: 20px 15% 0 15%;}

    .contatosfoot{width: 60%; margin: 20px 5% 0 5%;}
    .menufoot{width: 20%; margin: 20px 5% 0 5%;}
    .boxbols{float: left; width: 48%; margin: 20px 1% 0 1%;}

    .boxbols .bol{float: left; width: 60%; margin: 0 20% 0 20%; }
    .balao{float: left; width: 80%; margin: 10px 10% 0 10%;  border-radius: 5px;}

    .clientes{width: 35%; margin: 15px 6% 15px 6% !important;}
.articleutilidades{width: 80%; margin: 15px 10% 0 10%;}
}
@media screen and (max-width: 500px){
    .header .logo img{ width: 50%; margin: 0 25% 0 25%;}
    .titlefoot{font-size:5vw; }
    .footer .logofoot{width: 60%; margin: 20px 20% 0 20%;}
    .contatosfoot{width: 90%; margin: 50px 5% 0 5%;}
    .menufoot{width: 60%; margin: 50px 5% 0 5%;}

    .boxform{float: left; width: 90%; margin: 0 5% 0 5%;}
    /*.boxbols .bol{float: left; width: 80%; margin: 0 10% 0 10%; }*/
    .balao{float: left; width: 90%; margin: 10px 5% 0 5%;  border-radius: 5px;}
.articleutilidades{width: 90%; margin: 15px 5% 0 5%;}
}
@media screen and (max-width: 380px){
    /*.boxbols{float: left; width: 96%; margin: 20px 2% 0 2%;}*/
}