/*
azul clarinho	#E0EAF7
verde bandeira	#097c3b
*/

/* ----- PÁGINA INICIAL --------------------------------------------------------- */

.home #main {
	max-width: none;
}

.home .container-home {
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 20px;
	padding-right: 20px;
}

.home #content {
    padding: 0;
}

.bloco-titulo {
	color: #2A2A2A;
	max-width: 800px;
	margin: 0 auto 1.5em;
	line-height: 1.3;
	font-size: 20px;
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
}

.contraste .bloco-titulo {
	color: #fff;
}

.home .leia-mais {
	background: #fff;
	color: #2A2A2A;
	border: 1px solid #2A2A2A;
	border-radius: 3px;
	width: 200px;
	margin: 20px auto 0;
	padding: 10px;
	display: block;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.contraste.home .leia-mais {
	background: transparent;
	color: #E1FE0A;
	border-color: #E1FE0A;
}

@media only screen and (min-width: 600px) {
	
	.bloco-titulo {
		font-size: 28px;
	}

}

@media only screen and (min-width: 1440px) {
	
	.home .container-home {
		padding-left: 0;
		padding-right: 0;
	}

	.bloco-titulo {
		font-size: 32px;
	}

}

/* ----- O QUE VOCÊ PROCURA? ---------------------------------------------------- */

#encontre-home {
	margin-top: 20px;
	background: var(--azul-claro) url(../images/busca-home-fundo.jpg) no-repeat top center/cover;
}

#encontre-home .jundiai-da-gente {
	background: url(../images/jundiai-e-da-gente.png) no-repeat center center/100% 100%;
	width: 200px;
	height: 165px;
	margin: auto;
	display: block;
	text-align: center;
	text-indent: -10000px;
	grid-area: slogan;
	align-self: center;
}

#form-busca.busca-home {
	width: 90%;
	max-width: 600px;
	margin: 30px auto 0;
	grid-area: busca;
	justify-self: stretch;
	align-self: end;
}

#form-busca.busca-home input[type="text"] {
	border: none;
	width: 75%;
	margin-bottom: 40px;
	padding: 10px 20px;
	font-weight: 600;
	font-size: 16px;
}

.contraste #form-busca.busca-home input[type="text"] {
	border: 1px solid #fff;
	border-right: none;
}

#form-busca.busca-home input[type="submit"] {
	background: #2A2A2A url(//src.cijun.sp.gov.br/img/icones-busca/buscar-branco-16x16.png) no-repeat center center;
	width: 15%;
	border: none;
	padding: 10px;
	font-weight: 600;
	font-size: 18px;
}

.contraste #form-busca.busca-home input[type="submit"] {
	background-color: transparent;
	border: 1px solid #fff;
	border-left: none;
}

@media only screen and (min-width: 600px) {

	#encontre-home .container {
		max-width: 1000px;
		padding-top: 50px;
		padding-bottom: 50px;
	}

	#form-busca.busca-home input[type="text"] {
		font-size: 18px;
	}

}

@media only screen and (min-width: 800px) {

	#encontre-home .container {
		padding-top: 80px;
		padding-bottom: 80px;
		display: grid;
		gap: 40px;
		grid-template-columns: 1fr 200px;
		grid-template-areas: "busca slogan";
		align-content: end;
	}

	#encontre-home .busca-home {
		margin: 0 auto;
	}

}

@media only screen and (min-width: 1024px) {

	#encontre-home {
		background-size: cover;
		margin-top: 30px;
	}

	#encontre-home .container {
		grid-template-columns: 1fr 250px;
		padding-top: 100px;
		padding-bottom: 100px;
	}

	#encontre-home .jundiai-da-gente {
		width: 250px;
		height: 206px;
	}

	#form-busca.busca-home input[type="text"] {
		width: 90%;
	}

	#form-busca.busca-home input[type="submit"] {
		width: 10%;
	}

}

@media only screen and (min-width: 1220px) {

	#encontre-home {
		background: #fff url(../images/busca-home-fundo-3300.jpg) no-repeat top center/cover;
	}

	#encontre-home .container {
		grid-template-columns: 1fr 300px;
		padding-top: 140px;
		padding-top: 140px;
	}
	
	#form-busca.busca-home input[type="text"] {
		margin-bottom: 0;
	}

	#encontre-home .jundiai-da-gente {
		width: 300px;
		height: 248px;
	}

}


/* ----- SLIDESHOW DA CAPA ------------------------------------------------------ */

/* http://responsiveslides.com v1.55 by @arielsalminen */

#slideshow {
	background: #e5e5e5;
	margin-top: -20px;
	padding: 20px;
}

.contraste #slideshow {
	background: none;
}

#slider {
	max-width: 1380px;
	margin: auto;
}

.rslides {
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

.rslides li {
	width: 100%;
	margin: 0;
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-backface-visibility: hidden;
}

.rslides li:first-child {
	display: block;
	position: relative;
	float: left;
}

.rslides img {
	border: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 1300/300;
	display: block;
	float: left;
}

@media only screen and (min-width: 1024px) {

	#slideshow {
		padding: 40px 20px;
	}

}

/* ----- BANNER TEMPORÁRIO ------------------------------------------------------ */

#banner-temporario-home img {
	margin: 0 auto 2em;
	width: 100%;
	max-width: 1100px;
	height: auto;
	display: block;
}

#banner-temporario-home a:last-of-type img {
	margin-bottom: 0;
}

/* ----- SERVIÇOS MAIS ACESSADOS ------------------------------------------------ */

.home #servicos-home {
	background: #F5F5F5;
}

.home.contraste #servicos-home {
	background: none;
}

.servicos-grid {
	width: fit-content;
	margin: auto;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, 1fr);
}

#servicos-home .banner {
	display: table;
}

#servicos-home .banner-link {
	background-color: #eee;
	border-bottom: 5px solid #bbb;
	width: 160px;
	height: 140px;
	margin: 0 auto 30px;
	padding: 10px;
	display: block;
	overflow: hidden;
	text-decoration: none;
}

#servicos-home .banner-link:hover {
	border-color: #999;
}

.contraste #servicos-home .banner-link {
	background-color: transparent;
	border-bottom-color: transparent !important;
}

#servicos-home .banner img {
	width: 130px;
	height: 65px;
	margin-bottom: 10px;
}

#servicos-home .banner-titulo {
	width: 140px;
	height: 40px;
	display: table-cell;
	vertical-align: middle;
	line-height: 1;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
}

/* remove icone de links para PDFs */
.servicos-grid a {
	background-image: none; 
}

/* cores das plataformas na borda inferior */
#servicos-home .banner-botao {
	color: #000 !important;
}

/*
#servicos-home .banner-plataforma-financas {
	border-bottom-color: #00a898;
}

#servicos-home .banner-plataforma-desenvolvimento-sustentavel {
	border-bottom-color: #70be43;
}

#servicos-home .banner-plataforma-cultura-educacao {
	border-bottom-color: #ffdd00;
}

#servicos-home .banner-plataforma-seguranca {
	border-bottom-color: #faa518;
}

#servicos-home .banner-plataforma-inclusao {
	border-bottom-color: #b41d8d;
}

#servicos-home .banner-plataforma-saude {
	border-bottom-color: #00b9f1;
}

#servicos-home .banner-plataforma-desenvolvimento-economico {
	border-bottom-color: #0474bc;
}
*/

/* no mobile mostra apenas os primeiros itens pra não ocupar muito espaço */

.home #servicos-home .banner:nth-child(n+5) { /* esconde do quinto banner em diante */
	display: none;
}

@media only screen and (min-width: 600px) {

	.servicos-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px 40px;
	}

	.home #servicos-home .banner:nth-child(-n+6) { /* mostra até o sexto banner */
		display: block;
	}

	.home #servicos-home .banner:nth-child(n+7) { /* esconde do sétimo em diante */
		display: none;
	}

}

@media only screen and (min-width: 800px) {

	.servicos-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	#servicos-home .banner .greyscale {
		filter: grayscale(1); 
	}

	.contraste #servicos-home .banner .greyscale {
		filter: grayscale(0); 
	}

	.contraste #servicos-home .banner .greyscale img {
		filter: grayscale(1); 
	}

	#servicos-home .banner .greyscale:hover {
		filter: grayscale(0); 
		-webkit-filter: grayscale(0); 
	}

	.home #servicos-home .banner:nth-child(-n+12) {
		display: block;
	}

	.home #servicos-home .banner:nth-child(n+13) {
		display: none;
	}

}

@media only screen and (min-width: 1024px) {

	.servicos-grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.home #servicos-home .banner:nth-child(-n+15) {
		display: block;
	}

	.home #servicos-home .banner:nth-child(n+16) {
		display: none;
	}

}

@media only screen and (min-width: 1200px) {

	.servicos-grid {
		grid-template-columns: repeat(6, 1fr);
	}

	.home #servicos-home .banner:nth-child(-n+18) {
		display: block;
	}

	.home #servicos-home .banner:nth-child(n+19) {
		display: none;
	}

}

/*
@media only screen and (min-width: 1460px) {

	.servicos-grid {
		grid-template-columns: repeat(8, 1fr);
	}

}
*/


/* ----- CONTEÚDO DA PÁGINA INICIAL --------------------------------------------- */

.pagina-capa {
	margin-top: 60px;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 60px;
}

@media only screen and (min-width: 1440px) {

	.pagina-capa {
		padding: 0;
	}

}

/* ----- SERVIÇOS ONLINE ACESSOS RECENTES --------------------------------------- */

#acessos-recentes-home {
	background: #eee;
}

.contraste #acessos-recentes-home {
	background: transparent;
}

#loading-acessos-recentes {
	width: 50px;
	height: auto;
	margin: auto;
	display: block;
}

#acessos-recentes-conteudo ul {
	margin: 0 0 0 20px;
	list-style: square;
	font-weight: 600;
	text-align: left;
}

#acessos-recentes-conteudo ul li:has(a[href*="seus-acessos-recentes"]) {
	display: none;
}

@media only screen and (min-width: 800px) {

	#acessos-recentes-conteudo ul {
		columns: 2;
		column-gap: 40px;
	}

}

@media only screen and (min-width: 1200px) {

	#acessos-recentes-conteudo ul {
		columns: 3;
	}

}

/* ----- MAPA ------------------------------------------------------------------- */

#mapa-home {
	background: #eee;
}

.contraste #mapa-home {
	background: transparent;
}

#mapa-home iframe {
	display: block;
	height: 300px;
}

#mapa-home .mapa-equipamentos {
	margin-bottom: 40px;
}

@media only screen and (min-width: 800px) {

	#mapa-home iframe {
		height: 600px;
	}

}

@media only screen and (min-width: 1440px) {

	#mapa-home iframe {
		height: 700px;
	}

}

/* ----- VÍDEOS ----------------------------------------------------------------- */

#videos-home {
	background: #F5F5F5;
}

#videos-home .videos-lista {
	list-style: none;
}

#videos-home .videos-lista li {
	width: 100%;
	margin-bottom: 20px;
	display: block;
}

#videos-home .video-data {
	color: #666;
	font-size: 12px;
}

#videos-home iframe {
	width: 100%;
	height: 200px;
	margin-bottom: 5px;
	display: block;
}

#videos-home .video-titulo {
	color: #2A2A2A;
	font-weight: 600;
}

@media only screen and (min-width: 480px) {

	#videos-home .videos-lista li {
		width: 49%;
		float: left;
	}

	#videos-home .videos-lista li:nth-child(odd) {
		margin-right: 2%;
	}

	#videos-home iframe {

	}

}

@media only screen and (min-width: 800px) {

	#videos-home iframe {
		height: 300px;
	}

}

@media only screen and (min-width: 1024px) {

	#videos-home .videos-lista li {
		width: 23%;
		margin-right: 2%;
		float: left;
	}

	#videos-home .videos-lista li:last-child {
		margin-right: 0;
	}

	#videos-home iframe {
		height: 200px;
	}

}

/* ----- NOTÍCIAS --------------------------------------------------------------- */

#noticias-home {}

#noticias-home .titulo-bloco {
	color: #2A2A2A;
	border-bottom-color: #2A2A2A;
}

#noticias-home .noticia-lista {
	list-style: none;
}

#noticias-home .noticia-lista li {
	width: 100%;
	margin-bottom: 30px;
	display: block;
	font-size: 16px;
}

#noticias-home .noticia-data {
	color: #666;
	font-size: 12px;
}

.contraste #noticias-home .noticia-data {
	color: #fff;
}

#noticias-home img,
#noticias-home .size-destaque {
	width: 100%;
	height: auto;
	aspect-ratio: 45/30;
	margin-bottom: 5px;
}

#noticias-home .noticia-titulo {
	color: #2A2A2A;
	font-weight: 600;
	font-size: 18px;
}

.contraste #noticias-home .noticia-titulo {
	color: #E1FE0A;
}

#noticias-home .sharethis-inline-share-buttons {
	margin: 15px 0;
}

@media only screen and (min-width: 640px) {

	#noticias-home .noticia-lista li {
		width: 49%;
		float: left;
	}

	#noticias-home .noticia-lista li:nth-child(odd) {
		margin-right: 2%;
	}

}

@media only screen and (min-width: 800px) {

	#noticias-home .noticia-lista li:last-child {
		margin-right: 0;
	}

}

@media only screen and (min-width: 1024px) {

	#noticias-home .noticia-lista li {
		width: 23%;
		margin-right: 2%;
	}

}

/* ----- VÍDEO EM DESTAQUE ------------------------------------------------------ */

#video-destaque-home {
	margin-bottom: -22px;
}

#video-destaque-home iframe {
	display: block;
	height: 200px;
}

@media only screen and (min-width: 640px) {

	#video-destaque-home iframe {
		height: 600px;
	}

}

@media only screen and (min-width: 1440px) {

	#video-destaque-home iframe {
		height: 700px;
	}

}