/* Inclusão das fontes Roboto e Cinzel */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative&display=swap');

/* USO GERAL: */
body {
	overflow-x:hidden;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* Padronização das DIVS */
.centraliza-coluna {
	display:flex;
	flex-direction: column;
	align-items:center;
}
.centraliza-linha {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
}
.centraliza-div {
	display: flex;
    align-items: center;
    justify-content: center;
}
.linha-coluna-responsiva {
	/* Usada para cabeçalho e rodapé */
	display:flex;
	flex-direction :row;
	justify-content:space-evenly;
	align-items:center;
}
@media only screen and (max-width: 800px){
	.linha-coluna-responsiva {
		flex-direction: column;
	}
}

/* Padronização das fontes e dos TEXTOS */
h1, h2, h3, .roboto {
	font-family: "Roboto", sans-serif;
}
.texto {
	color:black;
	font-size:16px;
	font-family: "Roboto", sans-serif;
}
@media only screen and (min-width: 1400px){
	.texto {
		font-size:18px;
	}
}
@media screen and (min-width: 421px) and (max-width: 900px) {
    .texto {
		font-size:15px;
	}
}
@media only screen and (max-width: 420px){
	.texto {
		font-size:13px;
	}
}
.inicio {
	text-align:start;
}
.centro {
	text-align:center;
}
.fim {
	text-align:end;
}

/* Padronização dos BOTÕES */
.botao-generico {
	border: none;
	background: none;
	font-family: "Roboto", sans-serif;
	font-weight: bold;
	font-size: 19px;
	letter-spacing: 1px;
}
@media only screen and (max-width: 420px) {
	.botao-generico {
		font-size:15px;
	}
}

#botao_retorno {
	color:#AAAAAA;
	text-decoration: none;
}
@media only screen and (max-width: 420px){
	#botao_retorno {
		font-size:15px;
	}
}
#botao_retorno:hover {
	color:#8459A1;
}

.sem_hyperlink {
	text-decoration: none;
	color: #0000EE;
}

/* Padronização das CORES */
.preto {color: black;}
.branco {color: white;}
.fundo-verde-agua{background-color:#3eb7ab;}
.fundo-roxo-fraco{background-color:#dbcee4;}
.fundo-branco-escuro{background-color: #F3F1F1;}
.fundo-indigo{background-color: indigo;}
.botao-vermelho {color: red;cursor: pointer;}

/* CABECALHO */
/* Logo usada no cabeçalho e rodapé */
.logo-gapsi {
	display: center;
	text-align: center;
	width: 15vw;
	height: auto;
}
@media screen and (min-width: 481px) and (max-width: 900px) {
    .logo-gapsi {
		width: 200px;
		margin: 15px 0;
	}
}
@media only screen and (max-width: 480px) {
	.logo-gapsi {
		width: 150px;
		margin: 8px 0;
	}
}

.navbar-gapsi {
	padding: 5px 0 5px 0;
	position:sticky;
	top:0;
	z-index: 9999;
	transition: background 0.5s;
}

#navbar_transparente {
	background-color:transparent;
}
#navbar_roxa {
	background-color: indigo;
}

/* Dropdown do cabeçalho */
.botao-dropdown {
	margin: 0 10px;
	padding: 0;
}

.conteudo_dropdown {
	/*Esconde os links que estão dentro*/
	display: none;
	position: absolute;
	z-index: 1;
	min-width: 350px;
}

.conteudo_dropdown .hover:hover, .botao-hover:hover {
	color:#3FB7AB;
	cursor: pointer;
}

.dropdown_background {
	background-color: rgba(200,200,200, 0.8);
}
.dropdown_background_novo {
	background-color: rgba(75,0,130,0.6);
}

.conteudo_dropdown button {
	/* Distanciamento entre os botoes */
	float: none;
	padding: 10px 0px;
	text-decoration: none;
	display: block;
}

.dropdown:hover .conteudo_dropdown {
	/* Mostra o conteúdo quando passa o mouse */
	display: block;
}

/*Div com os 3 botões*/
#menu {
	display:flex;
	justify-content:space-around;
}

/* DISTÂNCIA para o conteúdo da página */
.distancia {
	margin: 0 140px;
}
@media only screen and (min-width: 1400px){
	.distancia {
		margin:0 180px;
	}
}
@media screen and (min-width: 421px) and (max-width: 900px) {
    .distancia {
		margin:0 90px;
	}
}
@media only screen and (max-width: 420px) {
	.distancia {
		margin:0 40px;
	}
}

/* APOIADORES */
.texto_apoiadores {
	font-family: "Cinzel Decorative", cursive;
}
.centraliza-apoiadores {
	justify-content: space-around;
	align-items: center;
}
.logo_apoiador {
	margin: 40px;
	width: 200px;
	height: auto;
}
@media screen and (min-width: 421px) and (max-width: 900px) {
    .logo_apoiador {
		width: 160px;
	}
}
@media only screen and (max-width: 420px){
	.logo_apoiador {
		width: 130px;
	}
}

/* RODAPE */
#footer {
	padding:40px 0;
}
@media screen and (max-width: 900px) {
    #footer {
		padding:20px;
	}
}

.icone {
	width: 2vw;
	height: 4vh;
}

.sintese-final {
	font-size:15px;
	width: 20vw;
}
@media only screen and (min-width: 801px){
	#contato {
		width: 20vw;
	}
}
@media screen and (min-width: 421px) and (max-width: 800px) {
    .sintese-final {
		width:60vw;
		text-align:center;
	}
}
@media only screen and (max-width: 420px){
	.sintese-final {
		width: 70vw;
		padding:20px;
		font-size:14px;
		text-align:center;
	}
}

/* Filtros */
.filtro_seletor {
	max-width: 150px;
	margin: 0 30px;
	padding: 5px 10px;
}

/* Classes retiradas de historias.css */
.entrada {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}
.bloco {
	padding:40px;
	margin:30px 0 0 0;
	border:5px;
	border-style:solid;
	border-radius:10px;
	border-color:#8459a0;
}
@media screen and (min-width: 421px) and (max-width: 900px) {
    .bloco {
		padding:20px;
	}
}
@media only screen and (max-width: 420px) {
	.bloco {
		padding:10px;

		border:2px;
		border-style:solid;
		border-radius:10px;
		border-color:#8459a0;
	}
}