@charset "utf-8";

body {
	background: #ffffff;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	margin: 0;

	user-select: none;
}





/* === Header UI === */
/*Page Content*/
nav a img {
	position: absolute;
	width: 10vw;
	left: 10vw;
	max-width: 200px;
	top: 1vh;
}

header nav ul {
    position: absolute;
    top: 23vh;
    display: grid;
    grid-template-columns: repeat(8, [col-start] 1fr);
    grid-template-rows: auto;
    column-gap: 2vw;
    left: 8vw;
    width: 86%;
}

header nav ul li {
	padding: .25vw;
	cursor: pointer;
	color: var(--corSecundaria);
	text-decoration: none;
	text-transform: uppercase;

	border-bottom: 2px solid var(--corSecundaria);

	list-style: none;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	font-size: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
}

header nav ul li:hover {
	color: var(--corSecundaria);
	border-bottom: 2px solid var(#fff);
	background: inherit;
}

header nav ul #botao_celebracoes {
	border-bottom: 2px solid #C24193;
}

#botao_celebracoes:focus {
	background-color: #C24193;
	color: #fff;
	border: 2px solid #C24193;
	border-radius: 30px;
}

header nav ul #botao_edificacoes {
	border-bottom: 2px solid #38B7E2;
}

#botao_edificacoes:focus {
	background-color: #38B7E2;
	color: var(--corSecundaria);
	border: 2px solid #38B7E2;
	border-radius: 30px;
}

header nav ul #botao_expressao {
	border-bottom: 2px solid #F7A400;
}

#botao_expressao:focus {
	background-color: #F7A400;
	color: var(--corSecundaria);
	border: 2px solid #F7A400;
	border-radius: 30px;
}

header nav ul #botao_lugares {
	border-bottom: 2px solid #21A538;
}

#botao_lugares:focus {
	background-color: #21A538;
	color: var(--corSecundaria);
	border: 2px solid #21A538;
	border-radius: 30px;
}

header nav ul #botao_tempo {
	border-bottom: 2px solid #234294;
}

#botao_tempo:focus {
	background-color: #234294;
	color: #fff;
	border: 2px solid #234294;
	border-radius: 30px;
}

header nav ul #botao_natureza {
	border-bottom: 2px solid #E0257E;
}

#botao_natureza:focus {
	background-color: #E0257E;
	color: #fff;
	border: 2px solid #E0257E;
	border-radius: 30px;
}

header nav ul #botao_objetos {
	border-bottom: 2px solid #E31E15;
}

#botao_objetos:focus {
	background-color: #E31E15;
	color: #fff;
	border: 2px solid #E31E15;
	border-radius: 30px;
}

header nav ul #botao_saberes {
	border-bottom: 2px solid #CA7B12;
}

#botao_saberes:focus {
	background-color: #CA7B12;
	color: #fff;
	border: 2px solid #CA7B12;
	border-radius: 30px;
}

.celebracoes,
.edificacoes,
.formadeexpressao,
.lugares,
.marcadoresdetempo,
.natureza,
.objetos,
.saberes {
	/*320x240 og*/
	width: 480px;
	height: 360px;
	transition-duration: 0.2s;
	cursor: pointer;
}

.celebracoes:hover,
.edificacoes:hover,
.formadeexpressao:hover,
.lugares:hover,
.marcadoresdetempo:hover,
.natureza:hover,
.objetos:hover,
.saberes:hover {
	box-shadow: 0px 0px 12px var(--corPrimaria);
	border: 1px solid var(--corPrimaria);
}

/*  */

.nome {
	font-family: 'Open Sans', sans-serif;
	font-size: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
	color: var(--corPrimaria);
	padding: 0 20px;
	background-color: rgba(91, 91, 91, .50);
}

#menu {
	position: absolute;
	top: 15vh;
	left: 10vw;
	display: grid;
	grid-template-columns: repeat(2, [col-start] 1fr);
	grid-template-rows: auto;
	column-gap: 1vw;
}

#menu button {
	cursor: pointer;
	color: var(--corSecundaria);
	font-family: 'Gilbert-Bold';
	font-size: 2rem;
	padding: 7.5px 20px;
	margin: 1vh 0;
	text-decoration: none;
	text-transform: uppercase;
	border: 2px solid var(--corSecundaria);
	border-radius: 50px;
	background-color: #ffffff;
}

#menu button:hover {
	color: var(--corPrimaria);
	border: 2px solid var(--corSecundaria);
	background-color: var(--corSecundaria);
}

#menu button:focus {
	color: var(--corPrimaria);
	background: var(--corSecundaria);
	outline: none;
}

#menu #sphere {
	grid-column: -3;
}

#menu #table {
	grid-column: -2;
}

#botao_celebracoes,
#botao_edificacoes,
#botao_expressao,
#botao_lugares,
#botao_tempo,
#botao_natureza,
#botao_objetos,
#botao_saberes {
	transition-duration: .2s;
}



.main--nav {
	z-index: 1;
	position: absolute;
	top: 5vh;
	right: 5vw;
	width: 65%;
}


/* == MENU == */



.main--nav ul {
	/* justify-self: center; */
	padding: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.main--nav ul li {
	list-style: none;
	text-align: center;
}

.main--nav ul li a {
	padding: .25vw;
	cursor: pointer;
	color: var(--corSecundaria);
	text-decoration: none;
	text-transform: capitalize;

	border-radius: 10px;

	list-style: none;
	font-family: 'Open Sans', sans-serif;
	font-weight: 500;
	font-size: 1.45em;
	text-align: center;
	letter-spacing: 0.55px;
}

.main--nav ul li a:hover {
	font-weight: bold;
	letter-spacing: 0px;
}

#showInfo {
	position: absolute;
	top: 17%;
	right: 10%;

	opacity: 100%;

	z-index: 2;

	cursor: pointer;
}

#popupNotification {
	position: absolute;
	top: 33%;
	display: flex;
	justify-content: center;
	align-items: center;

	opacity: 100%;

	z-index: 2;
}

#popupNotification #popupContent {
	padding: 2vh 4vw;
	margin: 0 30vw;
	background-color: rgb(0, 0, 0);
	color: #f5f5f5;
	border-radius: 2vw;

	cursor: pointer;
}

#popupNotification #popupContent #topPopupContent {
	display: flex;
	justify-content: space-between;
	align-items: center;

	font-family: 'Gilbert-Bold';
	font-size: 26px;
}

#popupNotification #popupContent p {
	padding: 1vh 0 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
}

@media only screen and (max-width: 960px) {

	.main--nav {
		display: none;
	}

	#menu {
		top: 90vh;
		left: 50%;
		width: 70%;
		transform: translate(-50%, -50%);
	}

	#navmob {
		position: absolute;
		z-index: 1;
		padding: 0;
	}

	#navmob .pushbar_main_content #filtros--menu {
		/* display: block; */
		grid-column: 9 / span 10;
		grid-row: 1;
		border: none;
		color: #1b1b1b;
		padding: 10%;
		text-align: center;
		text-decoration: none;
		font-size: 16px;
		background-color: rgba(0, 0, 0, 0);
	}

	#filtro .topfiltro {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	#filtro .topfiltro p {
		padding: 0 7vw;
		cursor: pointer;
		color: var(--corSecundaria);
		font-family: 'Gilbert-Bold';
		font-size: 2rem;
	}

	#filtro .topfiltro button {
		cursor: pointer;
		color: var(--corSecundaria);
		font-family: 'Open-sans', sans-serif;
		font-weight: bold;
		font-size: 1.5rem;
		padding: 0 7vw;
		text-decoration: none;
		text-transform: uppercase;
		border: none;
		background: rgba(0, 0, 0, 0);
	}

	#filtro ul {
		padding: 5vh 0;
	}

	#filtro ul li {
		cursor: pointer;
		color: var(--corSecundaria);
		text-decoration: none;
		text-transform: capitalize;

		margin: 0 10%;

		list-style: none;
		font-family: 'Open Sans', sans-serif;
		font-weight: 500;
		font-size: 1.25rem;
		text-align: left;
		line-height: 300%;
	}

	#filtro ul li:focus {
		text-decoration: underline;
		font-weight: bold;
	}

	#showInfo {
		top: 13%;
		right: 5%;
	}

	#popupNotification {
		top: 25%;
	}

	#popupNotification #popupContent {
		padding: 2vh 5vw;
		margin: 0 5vw;
	}

	#popupNotification #popupContent #topPopupContent {
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		font-family: 'Gilbert-Bold';
		font-size: 16px;
	}

	#popupNotification #popupContent p {
		font-size: 12px;
	}

}

@media only screen and (max-width: 600px) {
	#menu {
		top: 80vh;
		left: 50%;
		width: 85%;
		transform: translate(-50%, -50%);
	}

	.celebracoes,
	.edificacoes,
	.formadeexpressao,
	.lugares,
	.marcadoresdetempo,
	.natureza,
	.objetos,
	.saberes {
		width: 360px;
		height: 270px;
		transition-duration: 0.2s;
	}

	.celebracoes:hover,
	.edificacoes:hover,
	.formadeexpressao:hover,
	.lugares:hover,
	.marcadoresdetempo:hover,
	.natureza:hover,
	.objetos:hover,
	.saberes:hover {
		box-shadow: 0px 0px 12px var(--corPrimaria);
		border: 1px solid var(--corPrimaria);
	}

	.nome {
		font-family: 'Open Sans', sans-serif;
		font-size: 30px;
	}
}