html, body{
		font-family: 'Rubik', sans-serif!important;
		/* overflow-x: hidden; */
	}
	:root {
	--my--primary-color: #2B99D0;
	--my--primary-hover-color: rgb(35, 123, 167);
	--laranja-destaque: #fab657; /* - Laranja claro ( destaques ) */
	--laranja-claro: #ee9e2e; /* - Laranja claro ( destaques ) */
	--laranja-media: #db8f02; /* - Laranja médio ( Botões ) */
    --laranja-escuro: #e36b09; /* - /* Laranja escuro ( Seletores, Hovers e menus ) */
	--vermelho: #C81504;
	--verde-escuro: #14555D;
	--verde-claro: #89AD42;
    --petroleo: #21252b; /* - /* Petróleo (Rodapé) */
    --gelo: #F6F7F9; /* - Gelo ( Corpo ) */
    --branco: #ffffff; /* - Branco ( BG) */
    --cor-fontes: #343F52;
    --cor-subfontes: #979DA9;
	}

	header{
		position: fixed;
		width: 100%;
		z-index:2;
		top: 0;
	}
	
	
	#backloading{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.5);
		display: none;
		z-index: 1000; 
	}
	/* Animação do spin de carregamento */
	div .myspin {
		width: 100px;
		height: 100px;
		background-color: var(--laranja-escuro);
		-webkit-animation: 3s cubic-bezier(.09,.57,.49,.9) infinite square-spin;
		animation: 3s cubic-bezier(.09,.57,.49,.9) infinite square-spin;
	}

	.spinerContainer{
		position: absolute;
		top: 35%;
		left: 50%;
		font-weight: 600;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	.imagemCapa{
		height: 960px;
		width: 100vw; 
		@media(max-width: 769px){
			height:1089px;
		}
	}

	.conteudo-internas .imagemCapaInternas{
		background-image: url('../midia/capa.jpeg');
		width: 100%; /* Ajusta a largura da imagem à largura da div */
		height: auto; /* Ajusta a altura da imagem à altura da div */
		object-fit: cover; /* Cobre toda a área da div, mantendo a proporção da imagem */
		object-position: center -300px;
		display: block; /* Remove o espaço extra abaixo da imagem (causado por inline elements) */
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-position: center -150px;
		background-size: cover;
	}
	
	.backcab{
		height: 100%;
		background: rgba(255,255,255,0.9);
		@media(max-width: 769px){
			height:1089px;
		}
	}

	.backcabInternas{
		height: 100%;
		background: rgba(255,255,255,0.9);
		position: absolute;
		z-index: 9999;
		@media(max-width: 769px){
			height:1089px;
		}
	}
	.mycontainer h2{
		color: var(--verde-escuro);
		font-weight: bold;
	}

	footer p{
		text-align: justify;
	}
	/* DARK MODE */

	#change-theme{
		display: none;
	}

	#iconDark{
		cursor: pointer;
		background-color: white;
		color:  var(--laranja-escuro);
		border-radius: 0px 4px 4px 0px;
		border: 1.6px solid var(--laranja-escuro);
		width: 33px;
	}

	#iconLight{
		cursor: pointer;
		background-color: var(--laranja-escuro);
		color: white;
		border-radius: 4px 0px 0px 4px;
		border: 1.6px solid var(--laranja-escuro);
		width: 33px;
	}

	.aplus{
		cursor:pointer;
		border: 1.6px solid var(--laranja-escuro);
		border-radius: 4px 0px 0px 4px;
	}

	.aminus{
		cursor:pointer;
		border: 1.6px solid var(--laranja-escuro);
		border-left: none;
		border-radius: 0px 4px 4px 0px;
	}

	.mainText{
		font-size: 0.75rem;
		color: black;
	}

	.btn-acess{
		width: 33px;
		color: var(--laranja-escuro);
		background: white;
	}

	.acess{
		font-size: 0.75rem;
		color: black;
		transition: ease-in;
	}

	.transparencia{
		background-color: white;
	}

	.pesquisa{
		background-color: var(--gelo);
	}
	
	.outros{
		background-color: white;
	}

	footer{
		background-color: var(--petroleo);
	}

	.cardCovid{
		background-color: var(--laranja-media);
	}	

	.cardTransp{
		background-color: var(--laranja-claro);
	}

	.cardInfo{
		background-color: var(--laranja-escuro);
	}

	.backheader{
		background-color: white;
		box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.2);
		transition: opacity 0.5s ease; 
	/*	transition: padding-bottom 0.3s ease; /* Adiciona uma transição suave à propriedade de margem 
		padding-bottom: 5px;*/
	}
	.dark .listagem{
		background-color: #000000;
	}

	.dark .form-select{
		background-color: #000000;
	}
	.dark label, .dark option{
		color: white;
	}

	.dark .tituloForm{
		color: white;
	}
	.backheader, .acessdiv{
		transition: margin-top 0.3s ease; /* Adiciona uma transição suave à propriedade de margem */
		margin-top: -8px;
	}

	.dark .backheader{
		background-color: #000000;
		box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.2);
		transition: opacity 0.5s ease; 
	}
	.dark .acess{
		color: white;
	}
	.dark #iconLight{
		cursor: pointer;
		background-color: rgb(0, 0, 0);
		color:  var(--laranja-escuro);
	}
	.dark #iconDark{
		background-color: var(--laranja-escuro);
		color: white;
	}

	.dark .btn-acess{
		background-color: #000000;
	}
	.dark .backcab{
		background-color: rgba(57,57,57,0.9);
		color: white!important;
	}
	
	.dark .backcabInternas{
		background-color: rgba(57,57,57,0.9);
		color: white!important;
	}

	.dark .mainText{
		color: white;
	}

	.dark .transparencia{
		background-color: #000000;
		color: white;
	}
	
	.dark .pesquisa{
		background-color: #393939;
		color:white;
	}

	.dark .outros{
		background-color: #000000;
		color: white;
	}
	
	.dark footer{
		background-color: #393939;
	}

	.tituloForm{
		font-family: 'Rubik', sans-serif;
		margin-bottom: 0;
		font-size: 1.5em;
		line-height: 1.5;
	}

	.smooth-transition {
		transition: margin-top 0.3s ease; /* Adiciona uma transição suave à propriedade de margem quando a classe original é removida */
		margin-top: 8px;
	  }

    .ofbutton{
		width:100px;
		height:100px;
	}

	/* img {
		display: block;
		width: 100%;
	  } */
	.opacity-back{
		background: rgba(242,242,242,0.7);
	}
	.img-nav{
		height: 60px;
		width:154px;
	}

	.img-brasao{
		height: 60px;
		width: 60px;
	}
	.menu-botoes{
		transform: translate(0px,22px); 
		color: #6CC5EC;
	}
	.navega{
		color: #6CC5EC;
		font-size:14px;		
	}
	.fb{
		color: #014F82;
		font-size:20px;
	}

	nav a{
		text-decoration: none;
	} 
	.fw{
			color:white;
	}

	.menu-item{
		color: var(--verde-escuro);
		cursor: pointer;
		margin:10px;
	}
	
	@media (min-width: 1200px){
		.img-principal{
			height: 160px;
			width: 400px;
		}
	}	
	@media (max-width: 1200px){
		.img-principal{
			height: 160px;
			width: 400px;
		}
	}	
	@media (max-width: 991px){
		.img-principal{
			height: 130px;
			width: 325px;
		}
	}	
	.bordamenu{
		border-bottom: 2px solid #E4D61C;
	}
	
	.menu-item-actived{
		border-bottom: 2px solid var(--verde-escuro);
	}

	.icones-info{
				height:48px;
				width:48px;
	}
	.icon-serv{
		color:var(--laranja-escuro);
		height: 20px;
		width: 20px;
	}
	.form-control{
		height: 48px;
	}
	.textyellow:hover{
		color: #E4D61C;
	}
	
	.borda-acess{
		border: 1px solid var(--laranja-escuro);
		border-radius: 3px;
	}
	
	.icon{
		width: 12px;
		height: 12px;
	}

	.redes{
		height: 35px;
		width: 35px;
		border-radius: 100%;
		background-color: var(--verde-escuro);
		color: white;
	}
	
	.cards{ 
		border-radius: 5px;
		width:338px;
		height:217px;
		color: white;
		@media(max-width: 1200px){
			width: 277px;
			height: 240px;
		}
		@media(max-width: 991px){
			width: 198px;
			height: 240px;
		}
		@media(max-width: 767px){
			width: 478px;
		 	height: 240px;
		}
		@media(max-width: 576px){
			width: 86vw;
		 	height: 217px;
		}
	}

	.cards p{
		color: white!important;
	}


	.cardss:hover{
		color: red;
	}

	/* DIVISORES DE CONTEUDO */
	.divider-50{
		height: 40px;
	}

	.divider-100{
		height: 100px;
		width: 100%;
	}

	section h3{
		color: var(--laranja-destaque);
		letter-spacing: 3px;
		font-weight: 200;
	}
	.mycontainer h3{
		color:var(--laranja-destaque);
		letter-spacing: 3px;
		font-weight: 200;
	}
	.mycontainer P{
		color:var(--verde-escuro);
	}

	.icon-lupa{
		height: 28px;
		width: 28px;
		color: var(--laranja-destaque);
	}

	.icon-transp{
		height: 35px!important;
		width: 35px!important;
		color: var(--laranja-destaque);
		@media(max-width: 576px){
			height: 32px;
			width: 32px;
		}
	}
	.icon-cont{
		height: 38px!important;
		width: 38px!important;
		color: var(--laranja-destaque);
		@media(max-width: 576px){
			height: 32px;
			width: 32px;
		}
	}

	.btnAchar{
		background-color:var(--laranja-escuro); 
	}
	@media(max-width: 576px){
		.icon-texts{
			font-size: 14px;
			font-weight: bold;
		}
	}
	.divider-transp{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 65px;
			border-bottom: 2px solid var(--verde-escuro);
	}

	p a{
		text-decoration: none;
		color: var(--laranja-escuro);
	}

	.btn-procura a{
		background-color: var(--verde-escuro);
		border-color: var(--verde-escuro);
	}

	@media (min-width: 600px) {
		.btn-procura{
			width:900px;
		}
	}
	
	@media (max-width: 600px) {
		.btn-procura{
			width:500px;
		}
	}
	@media (max-width: 400px) {
		.btn-procura{
			width:350px;
		}
	}
	@media (max-width: 350px) {
		.btn-procura{
			width:300px;
		}
	}
	

	.icon-procura{
		height: 32px;
		width: 32px;
		color: var(--laranja-destaque);
	}
	.ouvid{
		font-size: 12.8px;
		color:var(--verde-escuro);
		font-weight: bold;
	}

	.informacao{
		color: var(--verde-escuro);
	}

	.ouvidoria{
		color: var(--verde-escuro);
	}

	@media (max-width: 576px){
	.img-links{
		width: 300px;
		height: 130px;
	}
}
	@media (min-width: 577px){
	.img-links{
		width: 400px;
		height: 140px;
	}
}

.footer-links{
	color: var(--branco)!important;
}

.copy{
	padding-top: 6%;
	padding-bottom: 6%;
	color: white;
}

@media(min-width:768px){
	#secao-transparencia{
		margin-top: 60px;
	}
}

@media(max-width:768px){
	#secao-transparencia{
		padding-top: 50px;
	}

	.img-principal{
		height: 100px;
		width: 250px;
	}

	.img-capa{
		height: 126vh;
		width:100vh;
	}

	
}
/* PAGINA INTERNA */

.conteudo{
	padding: 0px 1.5em 0px 0px!important;

	@media(max-width: 992px){
		padding: 0px 1.5em 0px 1.5em!important;
	}
}


/* PAGINA INTERNA */

/* MENU LATERAL */

/* .menu-lateral{
	background-color: #2D99CD;
	width: 90%;
	height:100%;
	padding-top: 1em;
	display: flex;
	flex-direction: column;
}

.menu-lateral span a{
	text-decoration: none;
	color: white!important;

}

.menu-lateral .item-lateral{
	padding: 1em 0px 1em 1em;
}
.menu-lateral .item-lateral:hover{
	background-color: var(--laranja-escuro);
}

.icon-transp-lateral{
	height: 20px!important;
	width: 20px!important;
	color: #E4D61D;
	/* @media(max-width: 576px){
		height: 32px;
		width: 32px;
	} 
} */

.btnLateral{
	cursor: pointer;
	margin-bottom: 5px;
}

.btnLateral:hover{
	background-color: var(--laranja-escuro);
}

.btnAberto{
	display: block;
}

.fechado .btnAberto{
	display: none;
}

.btnFechado{
	display: none;
}

.fechado .btnFechado{
	display: block;
}

.fechado .menu-lateral{
	width: 62px;
}

.aberto .menu-lateral{
	width: 16%;
}

.menu-lateral{
	/* position: fixed; */
	height: inherit;
	background-color: var(--laranja-escuro);
	/* padding: 1em 0px 5px 0px; */
	display: flex;
	flex-direction: column;
	transition: width 1s ease;
	
}

.menu-lateral-scroll {
	scrollbar-width: none; /* Largura da barra de rolagem: thin (fina), auto, ou qualquer valor específico */
    scrollbar-color: #888 #f1f1f1; /* Cor do polegar e do trilho */
}
/* Seleciona toda a barra de rolagem */
.menu-lateral-scroll::-webkit-scrollbar {
    width: 10px; /* Largura da barra de rolagem */
}

/* Seleciona o trilho da barra de rolagem */
.menu-lateral-scroll::-webkit-scrollbar-track {
    background: #f1f1f1; /* Cor do trilho */
    border-radius: 10px; /* Bordas arredondadas */
}

/* Seleciona o "polegar" (a parte que se move) */
.menu-lateral-scroll::-webkit-scrollbar-thumb {
    background: #888; /* Cor do polegar */
    border-radius: 10px; /* Bordas arredondadas */
}

/* Estilo ao passar o mouse sobre o polegar */
.menu-lateral-scroll::-webkit-scrollbar-thumb:hover {
    background: #555; /* Cor do polegar ao passar o mouse */
}


.fechado .conteudo-internas{
	width: 100%;
}

/* .fechado .menu-lateral span:hover{
	/* width: 250px; */
	/* .menu-lateral{
		width: 250px;
	} 
} */

/* 
.menu-lateral span a{
	display: block;
	transition: opacity 0.5s ease;
  	opacity: 0;
}

.fechado .menu-lateral span a{
	display: none;
	opacity: 1;
} */


.fechado .menu-lateral aside span{
	display: none;
	transition: opacity 0.5s ease-in-out;
  	opacity: 0;
}

.fechado .menu-lateral .btnRecolher{
	display: none;
	transition: opacity 0.5s ease-in-out;
  	opacity: 0;
}

/* .fechado .menu-lateral:hover span a {
	display: block;
	transition: opacity 0.5s ease-in-out;
	opacity: 1;
} */

.fechado .menu-lateral .img-logo{
	display: none;
  	opacity: 0;
}

.menu-lateral .img-logo{
	display: block;
	opacity: 1;
	transition: opacity 0.5s ease-out;
}

.menu-lateral .img-brasao{
	display: none;
	opacity: 1;
	transition: opacity 0.5s ease;
}

.fechado .menu-lateral .img-brasao {
	display: block;
	opacity: 1;
}

/* .fechado .menu-lateral:hover img {
	opacity: 1;
} */

/* .fechado .menu-lateral:hover .icon-transp-lateral{
	height: 20px!important;
	width: 20px!important;
} */

.menu-lateral .item-lateral:hover{
	background-color: var(--laranja-escuro);
}

.menu-lateral a{
	text-decoration: none;
	color: white!important;
}

.menu-lateral .btnRecolher{
	text-decoration: none;
	color: white!important;
}

.menu-lateral .item-lateral{
	padding: 1em 0px 1em 1em;
	transition: width 1s;
}

.menu-lateral span a{
	font-size: 14px;
}


.icon-transp-lateral{
	height: 27px!important;
	width: 27px!important;
	color: #E4D61D;
	transition: width 1s;
	/* @media(max-width: 576px){
		height: 32px;
		width: 32px;
	} */
} 

/* MENU LATERAL */

/* CONTEUDO DAS PAGINAS INTERNAS */
.dark .conteudo-internas::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(57,57,57,0.9);
	pointer-events: none; /* Garante que a sobreposição não afete cliques */
	z-index:0;
}

.aberto .conteudo-internas{
	width: 85%;
	@media(max-width: 992px){
		width: 100%;
	}
}
.conteudo-internas{	
	overflow-x: hidden;
	transition: width 1s;
	position: relative;
}

.conteudo-internas::before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.9); /* Opacidade branca */
		pointer-events: none; /* Garante que a sobreposição não afete cliques */
		z-index:0;
}


/* CONTEUDO DAS PAGINAS INTERNAS */

/* CONTAINER ATUALIZADO */

/* Estilos aplicados aqui serão exibidos em telas com largura acima de 1200px */
@media (min-width: 1200px) {
	.mycontainer {
		width: 1110px; /* O elemento não ultrapassará 1110px de largura */
	}
}
@media (max-width: 1200px) {
	.mycontainer {
		width: 930px; /* O elemento não ultrapassará 1110px de largura */
	}
}

 /* Estilos aplicados aqui serão exibidos em telas com largura até 991px */
 @media (max-width: 991px) {
	.mycontainer {
		width: 690px; /* O elemento não ultrapassará 690px de largura */
	}
}
@media (max-width: 767px) {
	.mycontainer {
	width: 510px; /* O elemento não ultrapassará 510px de largura */
	}
}	
@media (max-width: 576px) {
	.mycontainer {
	width: 100vw; /* O elemento não ultrapassará 510px de largura */
	}
}	
 

  
  @keyframes  square-spin {
  0% {
	  -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
	  transform: perspective(100px) rotateX(0) rotateY(0);
  }
   25% {
	  -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
	  transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
	  -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
	  transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
	  -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
	  transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
	  -webkit-transform: perspective(100px) rotateX(0) rotateY(360deg);
	  transform: perspective(100px) rotateX(0) rotateY(360deg);
  }
  }