@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
:root{
    --cor1: #01448a;
    --cor2: #f5f5f5;
    --cor3: #e7e7e7;
}

html { scroll-behavior: smooth; }
h2{font-size: 30pt; font-weight: bold; letter-spacing: 2px; font-family: 'Roboto', sans-serif; text-transform: uppercase;}
p{font-size: 11pt; font-family: 'Open Sans', sans-serif;}
.mg-bottom-1{ margin-bottom: 1%; }
.mg-bottom-2{ margin-bottom: 2%; }
.mg-bottom-3{ margin-bottom: 3%; }
.mg-bottom-4{ margin-bottom: 4%; }
.mg-bottom-5{ margin-bottom: 5%; }
.mg-bottom-10{ margin-bottom: 10%; }
.mg-top-1{ margin-top: 1%; }
.mg-top-2{ margin-top: 2%; }
.mg-top-3{ margin-top: 3%; }
.mg-top-4{ margin-top: 4%; }
.mg-top-5{ margin-top: 5%; }
.mg-top-10{ margin-top: 10%; }
.text-bold{ font-weight: bold !important; }
.right-border{ border-right: 1px solid rgba(0,0,0,0.4); }

#blog-index .navbar, #post-index .navbar{ height: 80px !important; margin-top: 0;}
#posts, #post-index{ margin-top: 80px; width: 100%; height: auto;}
#posts a{ text-decoration: none; color: #333;}
#posts ol li{ margin: 5px 0 0 -15px }
#posts ol li:hover a{ color: var(--cor1); }
#posts .panel-body, #blog .panel-body{ height: 125px; }
#posts .panel-body .box-text{ margin: 5% 0;}
#posts .panel p{ margin-left: 20px; }

#posts .img-top{ width: 100%; height: auto; margin-bottom: 5%;}
#posts .img-top img{ width: 100%; height: 200px; margin-bottom: 5%;}

#post-index #section-post img{ width: 100%; height: 300px; margin: 15px auto; border-radius: 5px;}
/* CSS NAVBAR */
.navbar{height: 80px !important; margin-top: 60px;}

#menu1{display: none;}
#menu-top{background: var(--cor1); width:100%; height:60px; position:fixed; z-index: 1;}

#menu-top ul{display: flex; list-style: none; line-height: 53px;}
#menu-top ul li{ text-decoration: none; font-size: 12pt;}
#menu-top-ul1{float: left; margin-left: -40px;}
#menu-top-ul1 li{ margin-right: 40px; color: var(--cor2);}
#menu-top-ul2{float: right; margin-right: 30px;}
#menu-top-ul2 li{margin-left: 40px; }
#menu-top-ul2 li a {color: var(--cor2);}
#menu-top-ul2 li a:hover { text-decoration: none; }
.button-whatsapp{ border: 1px solid var(--cor1); padding: 10px 15px; border-radius: 8px; color: var(--cor1); background-color: var(--cor2); text-decoration: none;}

#menu2 {height:80px; display: flex; list-style: none; float: right;}
#menu2 li{padding: 0px 10px; margin: 17px auto;}
#menu2 li a{padding: 31px 15px; font-size: 12pt; line-height: 45px; text-decoration: none;}
#menu2 li a:hover{background: var(--cor3); color:  var(--cor1);}

/* CSS HEADER */
header{position: relative; top: 140px; width: 100%; height: 523px;}
header .carousel-inner .item {height: 523px; background-position: center center; }
header .carousel-indicators{z-index: -1;}

/* CSS INTRODUCAO */
#apresentacao{position: relative; top: 100px; height: auto;}
#apresentacao h2{ margin: 150px 0 0 0;}
#apresentacao .divider{width: 100px; height: 5px; background:  var(--cor1);}
#foto_somos{height: 430px; width: auto; background-position: center center;}
#apresentacao .container{margin: 50px auto;} 

/* CSS PRODUTOS E SERVIÇOS */
#produtos{position: relative; top: 100px; height: auto; background: var(--cor1);}
#produtos h2{margin: 150px 0 0 0; color: var(--cor2);}
#produtos .divider{width: 100px; height: 5px; background:  var(--cor2);}
#produtos .card-img-top{height: 150px; background-position: center center;}
/* #produtos #servicos{display: flex; justify-content: space-between; width: 33%;} */
#produtos .container{margin: 50px auto;}
#produtos .panel{height: auto; border: 1px solid  var(--cor1); padding: 3px; background: var(--cor2); }
#produtos .panel-body{width: 100%; height: 150px !important;}
#produtos .panel-footer{width: 100%; height: 50px !important;}
#produtos .panel button{background-color:  var(--cor1); color: var(--cor2); width: 60%; margin: 0 20%; outline: 0; padding: 4px; text-align: center;}
#produtos .panel:hover{transform: translateY(-10px); box-shadow: 0 10px 10px rgba(0,0,0,0.7);}

/* CSS CLIENTES */
#clientes{position: relative; top: 100px; height: auto;}
#clientes h2{margin: 150px 0 0 0;}
#clientes .divider{width: 100px; height: 5px; background:  var(--cor1);}
#clientes .img-thumbnail{width: 155px; height: 115px;}
#clientes .img-thumbnail:hover{filter: grayscale(0); transform: scale(1.3);}
#clientes .container{margin: 50px auto;}
#clientes #painel .col-md-2{margin: 2% 0 0 0;}
#clientes .mosaico{ width: 80%; margin: 0 auto; display: flex; flex-wrap: wrap;}
#clientes .mosaico .img-mosaico{ width: 180px; }
#clientes .mosaico .img-mosaico img{ width: 100%; background-size: cover;}

/* CSS CONTATO */
#contato{position: relative; top: 80px; height: auto; background: var(--cor1);}
#contato h2{margin: 150px 0 0 0; color: var(--cor2);}
#contato .divider{width: 100px; height: 5px; background:  var(--cor2);}
#contato #sub-titulo{margin: 2% 0;}
#contato #sub-titulo p{color: var(--cor2); font-size: 16pt;}
#contato #container-form{margin: 0 auto 10% auto; }
#contato #container-form .row{margin: 0 auto;}
#contato #container-form input{margin: 2% 0 0 0;}
#contato #container-form input::placeholder, #contato #container-form textarea::placeholder{color: var(--cor1);}
#contato #container-form textarea{margin: 1% 0 0 0;}
#contato #container-form button{color: var(--cor1); font-weight: bold; margin: 2% 0 0 0; float: right;}
#contato p{ color: var(--cor2); font-size: 21pt; margin-bottom: 30px;}
#contato a{ font-size: 16pt;}

/* CSS BLOG */
#blog{ height: auto; position: relative; top: 100px;}
#blog h2{margin: 150px 0 0 0;}
#blog .divider{width: 100px; height: 5px; background:  var(--cor1);}
#blog .panel { margin-top: 20px; }
#blog .panel button { background-color: var(--cor1); color: var(--cor2); width: 60%; margin: 0 20%; outline: 0; padding: 4px; text-align: center; }
#blog .img-top{ width: 100%; height: auto; margin-bottom: 5%;}
#blog .img-top img{ width: 100%; height: 200px; margin-bottom: 5%;}
#blog #blog-subtitulo{margin: 2% 0;}
#blog #blog-subtitulo p{ font-size: 16pt; }
#blog a{ text-decoration: none; color: #333;}

/* CSS LOCALIZAÇÃO */
#localizacao{position: relative; top: 80px; height: auto; background: var(--cor3);}
#localizacao h2{margin: 150px 0 0 0;}
#localizacao .divider{width: 100px; height: 5px; background:  var(--cor1);}
#localizacao #mapa-titulo{margin: 2% 0;}
#localizacao #mapa-titulo p{ font-size: 16pt; }
#localizacao #container-mapa{margin: 0 auto 3% auto; }
#localizacao #container-mapa #googleMap{ width: 100%; height: 400px;}
#googleMap img{height: 35px;}
.borda-direita{border-right: 2px solid var(--cor1);}
.bordas{border: 2px solid var(--cor1); border-radius: 7px; margin: 0 0 2% 1%;}
.icone{background: var(--cor1); color: var(--cor2); padding: 10% 0;}
.info{padding: 2% 0 0 3%;}

/* CSS FOOTER */
footer{background: rgba(0,0,0,0.7); width: 100%; height: auto; margin: 80px 0 0 0;}
footer .p1-footer{color: var(--cor2); position: relative; top: 5px;}
footer .p2-footer{color: var(--cor2); position: relative;}
footer .p2-footer a{color: var(--cor2);}
footer h3{color: var(--cor2); position: relative; top: 5px;}
footer span{color: var(--cor2); position: relative; top: 5px;}
footer h4{ color: var(--cor3); letter-spacing: 1px; text-transform: uppercase; font-weight: bold;}
footer .row{ margin: 40px auto; }
footer #md-sociais{display: flex; justify-content: space-between; margin: 20px 0; width: 310px;}
footer #md-sociais a .fab{ color: var(--cor3); }
footer #md-sociais a:hover .fab{ color: var(--cor1); }
footer #info-md{ display: flex; }
footer #info-md a{ color: var(--cor3); margin-right: 30px; }
footer #info-md a:hover{ color: var(--cor1); }


/* CSS DOS MODAIS DE SERVICOS E PRODUTOS */
.modal-header{background: var(--cor1); color: var(--cor2);}
.modal-header button{position: relative; top: 5px; right: -20px;}
.modal-body h4{ margin: 5% 0 2% 0;}

/* MEDIA QUERIS */

@media screen and (max-width: 1024px) and (orientation: landscape){
/* CSS INTRODUCAO */
#foto_somos{margin: 8px 0 0 0;}

/* CSS LOCALIZAÇÃO */
#localizacao #container-mapa #googleMap{ width: 100%; height: 320px;}
#localizacao #container-mapa .col-md-8{ width: 60%; height: 320px;}
.bordas{width: 120%;}

/* CSS PRODUTOS E SERVIÇOS */
#produtos .panel-body{height: 170px !important;}

#clientes .mosaico{ width: 80%; }
#clientes .mosaico .img-mosaico{ width: 180px; }
#clientes .mosaico .img-mosaico img{ width: 100%; background-size: cover;}

#contato a{ font-size: 12pt;}

footer h3{ font-size: 20px; }
}

@media screen and (max-width: 768px){
/* CSS NAVBAR */
#menu-top-ul1 li{ margin-right: 5px; }
.button-whatsapp{ padding: 10px 10px; }
#menu2{ margin-top: -53px; }
#menu2 li{padding: 0;}
#menu2 li a{font-size: 11pt;}

/* CSS PRODUTOS E SERVIÇOS */
#produtos .panel {margin: 0 0 15px 0;}

#clientes .mosaico .img-mosaico { width: 120px; }

#contato p{ color: var(--cor2); font-size: 18pt; margin-bottom: 30px;}
#contato a{ font-size: 9pt;}

/* CSS LOCALIZAÇÃO */
#localizacao #container-mapa .col-md-8 { width: 99%; height: 320px; }
#localizacao #container-mapa #googleMap{ width: 100%; height: 305px; }
#p-email, .p-tel{top: 0 !important;}
.icone{padding: 2% 0;}

/* CSS FOOTER */
footer{height: auto; text-align: center;}
footer #md-sociais{ margin: 0 27.5% 10% 27.5%; }
footer #info-md{ margin: 0 40%;}
footer .p1-footer{ top: 0;}
}

@media screen and (max-width: 480px){
h2{font-size: 22pt;}
/* CSS NAVBAR */
.navbar-header{margin: 0; height: 80px;}
.navbar-header button{margin: 20px 50px;} 
.navbar-brand img{margin: 5px 0 0 15px;}
#menu2{ background: rgba(1, 68, 138, 0.7); z-index: 1; height: auto; width: 480px; text-align: center; display: block; margin: 0 -15px 0 0;}
#menu2 li a{font-size: 14pt; color: var(--cor2);}
#menu-top{z-index: 999;}
#menu-top-ul1{margin: 0 auto;width: 100%;}
#menu-top-ul1 li{padding: 0 10px;}
#menu1{display: flex; list-style: none; background: rgba(1, 68, 138, 1.2); width: 480px; margin: 0 0 0 -15px;}
#menu1 li{padding: 30px 50px;}
#menu1 li a{font-size: 14pt; color: var(--cor2);}
.hidden-480{display: none !important;}

/* CSS HEADER */
header{height: 500px;}
header .carousel-inner .item {height: 500px;}

/* CSS INTRODUCAO */
#foto_somos{height: 280px;}

/* CSS PRODUTOS E SERVIÇOS */
#produtos .panel{ margin: 0 0 15px 0;}

#clientes .mosaico{ display: none; }

#contato-form a{ font-size: 18pt;}
#contato-form .row .col-md-4:nth-child(1){ margin-bottom: 30px;}

/* CSS LOCALIZAÇÃO */
.borda-direita{border-right: 2px solid var(--cor3); margin: 0 -3px 10px 0;}

/* CSS FOOTER */
footer{height: auto; text-align: center;}
footer #md-sociais{ margin: 0 13% 10% 13%; }
footer #info-md { margin: 5% 28%; }
footer .p1-footer{ top: 0;}
}

@media screen and (max-width: 375px){
h2{font-size: 20pt;}

/* CSS NAVBAR */
.navbar-header button{margin: 20px 50px;} 
.navbar-brand img{margin: 5px 0 0 15px;}
#menu1{display: flex; list-style: none; background: rgba(1, 68, 138, 1.2); width: 385px; margin: 0 0 0 -15px;}
#menu1 li{padding: 30px;}
#menu2{  width: 385px; margin: 0 -15px 0 0;}
#menu2 li a, #menu1 li a{font-size: 14pt; color: var(--cor2);}
#menu-top{z-index: 999;}
#menu-top-ul1{display: none !important;}
.hidden-480 {
    text-align: center;
    display: block !important;
    margin-top: 20px;
}
.hidden-480 .button-whatsapp { font-size: 13px !important;}
.hidden-480 span{margin-right: 6px; color: var(--cor2);}


/* CSS HEADER */
header{height: 500px;}
header .carousel-inner .item {height: 510px;}

/* CSS INTRODUCAO */
#foto_somos{height: 280px;}

/* CSS PRODUTOS E SERVIÇOS */
#produtos .panel{ margin: 0 0 15px 0;}
#produtos .panel .panel-body{height: 120px !important;}
#produtos .panel .panel-title .second-2{background-position: bottom center;}

#contato-form a{ font-size: 13pt;}

#clientes .mosaico{ display: none; }

/* CSS LOCALIZAÇÃO */
.borda-direita{border-right: 2px solid var(--cor3); margin: 0 -3px 10px 0;}

/* CSS FOOTER */
footer{height: auto;}
footer #md-sociais { margin: 10% 0; }
footer h3{ font-size: 20px; }
footer #info-md { margin: 5% 28%; }
}