@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');

*,*::before,*::after {box-sizing: border-box;}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, 
pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, 
form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, 
canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, 
ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;}
html, body {font-family: 'Source Sans Pro', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; height:100%;}

:root {
  --colorPrimary: #464646;
  --colorPrimaryBackground: #746A60;
  --colorPrimaryBackgroundLight: rgb(232, 239, 247);
  --colorPrimaryDark: #333333;
  --colorPrimaryLight: #dddddd;
  --colorPrimaryLightTrasparent: rgba(255, 255, 255, .8);
}

a { text-decoration:none; }
h1,h2 {color: #00377a;}

.sombra {text-shadow: 1px 1px 2px #666666; }
.collumn-title{background: #080a63; color: #fff;padding: 15px; text-align: center;}

#youtube, #facebook, #linkedin, #instagram, #email {fill: darkgray;}
#youtube:hover {fill: red;}
#instagram:hover {fill: #E7000A}
#linkedin:hover {fill: #0073B0;}
#facebook:hover {fill: #3B5998;}

.socialhub svg{padding-right: 9px;}

.banner {
  min-height: 330px; 
  color: rgb(12, 39, 99); 
  margin-bottom: 25px;
  background-image: url("./img/peso.png");
  background-repeat: no-repeat;
  background-position: 750px 80px;
}
.microregion-header{padding: 10px; background-color: rgb(5, 35, 59); color: white; margin-bottom: 2px; border-left: 2px solid #333333;}
.microregion-atention {padding: 8px 0px 8px 18px; background-color: rgb(238, 238, 238); margin-bottom: 4px;}

.microregion-header-new {padding: 10px; background-color: rgb(0, 98, 209); color: white !important; margin-bottom: 2px;}
.microregion ul li a , .microregion-verde ul li a {color: rgb(0, 98, 209) !important;}
.microregion ul li a:hover , .microregion-verde ul li a {color: rgb(0, 10, 20) !important;}
.microregion-header-atention {padding: 10px; background-color: rgb(151, 8, 8); color: white; margin-bottom: 2px;}
.microregion{padding: 8px 0px 8px 18px; background-color: rgb(179, 221, 255); margin-bottom: 2px;}
.microregion-verde{padding: 8px 0px 8px 18px; background-color: rgb(194, 249, 253); margin-bottom: 2px;}
.microregion-cinza{padding: 8px 0px 8px 18px; background-color: rgb(221, 221, 221); margin-bottom: 2px;}

.list-unstyled a{color: #333333 !important; text-decoration: none;}
.list-unstyled a:hover{color: #3b00c4 !important;}

.header-blue {
  color: #080a63; font-weight: 600;
}
.h5-blue {color:#00377a !important; font-size:16px; margin: 8px;}
.article-description{color:var(--colorPrimary); font-size: 14px; margin: 8px;}
.article-post {border-radius: 5px; background: #F5F6F6; }
.article-link {margin: 8px;font-size: 14px;}

.parallax{
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  background-size: cover;
  background-position: 50% 0;
  position: relative;
}
.centralizar{text-align: center;}

.mobile{display:none;}
.desktop{display:block;}

header{ 
  background: -moz-linear-gradient(top, #1970bf 1%, #1e85e1 36%, #1e85e1 36%, #1970bf 100%); 
  background: -webkit-linear-gradient(top, #1970bf 1%,#1e85e1 36%,#1e85e1 36%,#1970bf 100%); 
  background: linear-gradient(to bottom, #1970bf 1%,#1e85e1 36%,#1e85e1 36%,#1970bf 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1970bf', endColorstr='#1970bf',GradientType=0 ); 
  display:flex; flex-direction: column;justify-content: space-around; padding-left:50px; 
  width:100%; height:170px; background: #1970bf;
}
header a{color:#fff;}

.article-footer{display: flex;justify-content: space-between;}
.artigo{
  border: solid 1px #ebebeb;
}

video,iframe {width: 100% !important; height: 230px !important;}

/* Navegação */
#navebar{margin-bottom:15px;}

.topnav {overflow: hidden; background-color: #245289; color: #fff;}
.topnav a {float: left; display: block; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 14px;}
.topnav a:hover {background-color: #f90; color: black;}
.topnav .icon {display: none;}

.active {color: #f90;}

nav{display:flex; flex-direction:row; flex-wrap: nowrap; justify-content: space-between; padding:8px 12px;}

#who,#recycle,#contribution{display:none; list-style: none;}

.submenu li{padding-left: 15px; background-color:#1A73C4;line-height:40px; min-height:40px; min-width:100%; border-bottom:1px solid gray;}
.submenu li:hover {background-color:#369;}
.submenu a {color:#fff;}
.submenu a:hover {color:#f90;}

.lista-simples{margin-left: 15px;list-style: none;}

/* footer */
footer {background-color: #00377a; color:#fff; font-size:80%; text-decoration: none;}
.list-unstyled a{color: whitesmoke !important;}
.list-unstyled a:hover{color: orange !important;}
.copyrights {background:#003168;}

@media only screen and (max-width: 400px) {}
@media only screen and (max-width: 600px) {} 
@media only screen and (max-width: 768px) {
  div.jumbotron.p-4.p-md-5.banner{width: 100%;}
  #header{width:100%; height:125px;padding-left:30px;}
  #logo {width:264px; height:38px;}
  #entidade {color:#fff;font-size:57%;line-height:18px;}
  .mobile{display:block;}
  .desktop{display:none;}
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {float: left; display: block; }
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  video,iframe {width: 100% !important; height: 380px !important;}
} 
@media only screen and (max-width: 992px) {
  h1.display-4{font-size: calc(2em + 1vw);  }
} 
@media only screen and (max-width: 1200px) {}
@media only screen and (orientation: landscape) {}