/*
Theme Name: Treville-child Portal
Template: treville
*/


.site-header {
	background: #386FA4; 
	/* background: #9738a4; */
	color: #fff;
}

.parlamentares-container {
  display: grid;
  grid-template-columns: 130px 130px 130px 130px 130px;
  grid-template-rows: 240px 240px 240px;
  grid-template-areas: "presidente 1-vice 2-vice 1-secretario 2-secretario" "vereador1 vereador2 vereador3 vereador4 vereador5" "vereador6";
}

.parlamentar {
	text-align: center;
}

.site-footer .site-info {
	float: none;
}

.footer-container{
  display: grid;
  grid-template-columns: 300px auto auto auto;
  grid-template-rows: 300px;
  grid-template-areas: "institucional atividade servicos atendimento";
}

.site-footer a:link {
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

.breadcrumbs-custom {
	padding: 0 2em;
	max-width: 1180px;
	width: 100%;
	margin: 0 auto;
}

.breadcrumbs-custom a {
	color: #FFFFFF;
}

.accessibility-bar {
	color: #FFFFFF;
	width: 100%;
	margin: 0 auto;
	padding-top: 0.5rem;
	padding-bottom: 0.4rem;
}

.accessibility-bar a {
	color: #FFFFFF;
}

.accessibility-bar a:hover {
	text-decoration: underline;
}

.accessibility-bar ul {
	list-style-type: none;
	display: inline-block;
}

.accessibility-bar li { 
	display: inline;
	margin-right: 1rem;
}

.atalhos {
	font-size: 0.80em;
	margin-left: 5rem;
}

.atalhos span {
	color: #158593;
	background: #ffffff;
	padding: 0 0.2rem;
}

.links {
	text-align: right;
	float: right;
	text-transform: uppercase;
	font-size: 0.9em;
}

#atalho-busca {
	cursor: pointer;
}

.aumentar-fonte {
	margin-top: -1.5rem;
	float: right;
}

.parlamentar > img{
	  width: 90%;
	}

@media only screen and (max-width: 30em) {
    
 
	.accessibility-bar { 
		display: none;
	}
	
	.atalhos {
		margin-left: 2rem;
	}
	
	.links {
		text-align: left;
		margin-left: 0rem;
	}
	
	.textwidget {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.parlamentares-container {
	  display: inline-block;
	}
	
	.parlamentar {
	  padding-bottom: 3rem;
	}
	
	.parlamentar > img{
	  width: 40%;
	}
	
	.parlamentar span {
		display: block;
		height: 0.2rem;
	}
	
	
	.footer-container{
		display: inline-block;
	}
		
}

.sbl-circ {
  height: 60px;
  width: 60px;
  color: #5a5a5a;
  position: relative;
  display: inline-block;
  border: 5px solid;
  border-radius: 50%;
  border-top-color: transparent;
  animation: rotate 1s linear infinite;
  }

@keyframes rotate {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } 
}

a > svg {
    display: none;
 } 

img {
  max-width: 100%;
  height: auto;
}


/* --- CSS para trocar imagem por tamanho de tela --- */

/* * 1. Regra "Mobile-First": 
 * Por padrão, escondemos a imagem de desktop 
 * e mostramos a de mobile.
*/
.img-desktop {
  display: none;  /* Esconde a imagem de desktop por padrão */
}

.img-mobile {
  display: block; /* Mostra a imagem de mobile por padrão */
  width: 100%;    /* Faz a imagem mobile ocupar 100% do espaço */
  height: auto;   /* Mantém a proporção */
  margin-bottom: 5px;
}


/* * 2. Regra para Desktop (Telas maiores):
 * Usamos uma "media query". Se a tela tiver 768px de largura OU MAIS,
 * as regras aqui dentro serão aplicadas.
*/
@media (min-width: 768px) {
  
  .img-desktop {
    display: block; /* Mostra a imagem de desktop */
    width: 100%;
    height: auto;
	margin-bottom: 5px;
  }
  
  .img-mobile {
    display: none;  /* Esconde a imagem de mobile */
  }
  
}