:root {
	--cor-ods-10: #dd1768;
	--cor-ods-10-tone: 335, 81%;
	--font-um: 'Arial Narrow';
	--font-dois: Arial, sans-serif;
	--top-bar-height: 80px;
}

*, *::before, *::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

html, body {
	height: 100%;
}

body {
	min-height: 100vh;
	background: #fff;
	font-family: var(--font-um);
	line-height: 1.4;
}

img, picture, video, canvas, svg {
	max-width: 100%;
}

input, button, textarea, select {
	font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

#root, #__next {
	isolation: isolate;
}

p {
	font: normal 200 1.1rem/1.5 var(--font-dois);
}

.cor-10 {
	color: var(--cor-ods-10);
}

h3 {
	margin: 0 0 1rem;
	color: var(--cor-ods-10);
	font-weight: 100;
}

h4 {
	margin: 0 0 1rem;
	color: var(--cor-ods-10);
	font-weight: 100;
}

.mobile {
	display: none;
}

/* !Versão um 

.grelha {
	display: grid;
	min-height: 100vh;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 100px 40% 25% auto 100px;
	grid-gap: 0;
	grid-template-areas:
		"ods		   ods			ods"
		"fotos		fotos		   fotos"
		"parceiros	anexos		info"
		"desc		   desc		   desc"
		"financia	financia 	financia"
		"foot			foot			foot";
} */

.grelha {
	display: grid;
	min-height: 100vh;
	grid-template-columns: 1fr;
	grid-template-rows: var(--top-bar-height) repeat(7, auto) 150px;
	grid-gap: 0;
	grid-template-areas:
		"ods"
		"fotos"
		"logo"
		"desc"
		"info"
		"anexos"
		"parceiros"
		"financia"
		"foot";
}

/* @media screen and (min-width: 740px) {
	.grelha {
			grid-template-columns: 2fr 2fr 1fr 1fr;
			grid-template-rows: 90px auto 1fr 100px 200px;
			grid-template-areas: 
				"ods		   ods		    ods			ods"
				"fotos		desc	      anexos		info"
				"fotos		desc	   	anexos		financia"
				"parceiros	parceiros	parceiros	financia"
				"foot			foot			foot			foot";
	}
} */

@media screen and (min-width: 920px) {
	.grelha {
		grid-template-columns: 1fr .8fr 2fr 1.2fr .8fr;
		grid-template-rows: 80px auto auto auto 1fr 200px;
		grid-template-areas: 
			"ods	   ods			ods	ods		ods"
			"fotos	logo	   	desc	anexos	info"
			"fotos	parceiros   desc	anexos	financia"
			"fotos	parceiros	desc	anexos	financia"
			"fotos	parceiros	desc	anexos	financia"
			"foot		foot			foot	foot		foot";
	}
	
	.grelha__info {
		padding: 190px 0 0 0;
		text-align: right;
	}

}

.g-ods {
	grid-area: ods;
	display: flex;
	background-color: var(--cor-ods-10);
	position: relative;
	/* z-index: 1; */
}

@media (min-width: 920px) {
	.g-ods {
		grid-area: ods;
		display: flex;
		background-color: var(--cor-ods-10);
		position: relative;
		height: var(--top-bar-height);
	}
}

 /* ! Logo para Mobile */

.logo {
	grid-area: logo;
	position: absolute;
	background: url(imagens/logo-gerar-identidades.svg) no-repeat center/75%, #fff;
	height: 100px;
	width: 100px;
	top: 170px;
	left: 80px;
	margin-left: -40px;
	background-color: white;
	border-radius: 50%;
	border: #ccc solid 10px;
	box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px 5px;
	transition: transform 1s cubic-bezier(0, 1, 1, 1);
}

@media (min-width: 920px) {
	.logo {
		position: relative;
		justify-self: end;
		top: inherit;
		left: inherit;
		height: 150px;
		width: 150px;
		border-radius: 50%;
		border: #ccc solid 10px;
		margin: 4rem -1rem 0;
		box-shadow: inherit;
	}
}

.logo:hover {
	transform: scale(1.2, 1.2) rotate(90deg);
	transition: .5s cubic-bezier(0, 1, 0, 1);
}

.ods__logo {
	position: absolute;
	top: 0;
	left: 2rem;
	width: 200px;
	height: calc(var(--top-bar-height) + 34px);
	background: url("imagens/simb-triangulo.svg") no-repeat 0 calc(var(--top-bar-height) - 1px), url("imagens/ods_tit-10.svg") no-repeat 2rem 30% / 80%;
}

.ods__un {
	position: absolute;
	top: 0;
	right: 2rem;
	width: 50px;
	height: calc(var(--top-bar-height) + 34px);
	background: url("imagens/icon-un.svg") no-repeat center calc(var(--top-bar-height) - 60px) / 50px;
}

.g-anexos {
	grid-area: anexos;
	position: relative;
	margin: 0 2rem;
	padding: 2rem .8rem 1rem 1rem;
	color: #fff;
	text-align: right;
}

.anexos__clip {
	width: 27px;
	height: 72px;
	background: url("imagens/symb-clip_anexos.svg") no-repeat bottom left;
	position: absolute;
	top: -60px;
	right: 4ch;
}

@media (min-width: 920px) {
	.g-anexos {
		margin: 0 1rem 0 3rem;
	}
	
	.g-anexos__info li {
		color: #000;
	}
}

.g-anexos__info ul {
	list-style: none;
}

.g-anexos__info li a:link {
	display: inline-block;
	font-size: .85rem;
	text-transform: uppercase;
	padding: .2rem .7rem;
	margin: .6rem 0 .6rem 1rem;
	text-decoration: none;
	color: #000;
	background: #eee;
}

.g-anexos__info li a:visited {
	color: hsl(var(--cor-ods-10-tone), 45%);
	background: hsl(var(--cor-ods-10-tone), 90%);
	background: #eee;
}

.g-anexos__info li a:hover {
	color: #fff;
	background: var(--cor-ods-10);
}

@media screen and (min-width: 920px) {
	.g-anexos {
		border-right: dashed 1px #000000;
	}
	.g-anexos__info {
		transition: 2s;
	}
}

.g-content {
	grid-area: desc;
	padding: 2rem 2rem 4rem 2rem;
	max-width: 90ch;
}

@media (min-width: 920px) {
	.g-content {
		padding: 2rem 0 4rem 3rem;
	}
}

.g-content__tit {
	color: #000;
	display: block;
	line-height: 1.2;
}

.g-content__data {
	color: #999;
	font: 1.2em var(--font-um);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 1.5rem 0 3rem;
}

.g-content h2 {
	font: normal 600 3rem/1.2 var(--font-um);
	margin: 4rem 0 0;
	color: var(--cor-ods-10);
}

.g-content h3 {
	margin: 4rem 0 1rem;
	font: normal 800 2rem/1.2 var(--font-um);
	color: var(--cor-ods-10);
}

.g-content h3:first-of-type {
	margin: 3rem 0 1rem;
}

.g-content ul {
	list-style: none;
	margin: 1rem 0;
}

.g-content li {
	font: 1.5em var(--font-um);
	margin: 3rem 0 1rem 1rem;
}

.g-content li li {
	font: .9em var(--font-um);
	display: inline-block;
	margin: 1rem 1rem 1.5rem 0;
}

.g-content li a:link {
	font-size: .85rem;
	text-transform: uppercase;
	padding: .8rem .8rem;
	text-decoration: none;
	color: #000;
	background: #eee;
	white-space: pre-line;
}

.g-content li a:visited {
	color: hsl(var(--cor-ods-10-tone), 45%);
	background: hsl(var(--cor-ods-10-tone), 90%);
	background: #eee;
}

.g-content li a:hover {
	color: #fff;
	background: var(--cor-ods-10);
}

.g-financiamento {
	grid-area: financia;
	margin: 1rem 2rem 0;
	text-align: right;
}

.g-financiamento img, .g-parceiros img {
	max-width: 90px;
	max-height: 40px;
	margin: 0 0 2rem 0;
}
.g-financiamento p, .g-parceiros p {
	font-size: .8rem;
	line-height: 1.7;
	/* margin: 0 0 2rem 0; */
}

.g-fotos {
	grid-area: fotos;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	/* padding: 0 3rem 0 0; */
	/* border: solid px #FFFFFF; */
}

.g-fotos img {
	height: 150px;
	padding: 0 2px 0 0;
}

@media (min-width: 920px) {
	.g-fotos {
		white-space: initial;
		padding: 0 0 2rem;
	}

	.g-fotos img {
		max-height: 110px;
	}
}

@media (min-width: 2000px) {
	.g-fotos img {
		max-height: 140px;
	}
}

.g-info {
	grid-area: info;
	padding: 1rem 2rem;
	text-align: right;
}

.g-info img {
	margin: 0 0 -5px;
}

.g-info p {
	line-height: 1.3;
	color: #666;
	/* hyphens: auto; */
}

.g-info .euro {
	font-size: 3rem;
	font-weight: 900;
	color: var(--cor-ods-10);
}

.g-parceiros {
	grid-area: parceiros;
	padding: 2rem 0;
	text-align: right;
	margin: 0 2rem;
}

@media (min-width: 920px) {
	.g-parceiros {
		padding: 2rem 0 0 1rem;
		text-align: right;
		margin: 0;
	}
}

.g-parceiros p a {
	display: inline-block;
	padding: 0px .5rem;
	text-decoration: none;
	color: #000;
	background: #eee;
}

.g-parceiros p a:hover {
	color: #fff;
	background: var(--cor-ods-10);
}

.g-parceiros img {
	max-width: 140px;
	max-height: 80px;
}

.footer {
	position: relative;
	display: grid;
	grid-area: foot;
	color: #FFF;
	background: var(--cor-ods-10);
	text-align: center;
	place-content: center;
	margin: 2rem 0 0 0;
}

.logo-monte {
	width: 150px;
	height: 100px;
	background: url("imagens/logo-monte-white.svg") center/150px no-repeat;
}

.btn-top {
	left: 60px;
	top: -33px;
	width: 120px;
	height: 34px;
	position: absolute;
	transform: rotate(180deg);
	background: url("imagens/simb-triangulo.svg") no-repeat;
}

.nickname {
	font: normal 3rem 600 var(--font-um);
	font-size: 3em;
	font-weight: 600;
	line-height: 1;
	color: var(--cor-ods-10);
	display: block;
	padding: 1rem 0 2rem;
	margin: 20px 0 10px 0;
	hyphens: auto;
}

@media (min-width: 920px) {
	.nickname {
		font-size: 4em;
	}
}

@media (max-width: 920px) {	
	#js-popMenu1 {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		margin: 0px;
		background-color: rgba(0, 0, 0, 0.85);
		animation: fade .3s cubic-bezier(0.12, 0.76, 0.44, 0.98);
	}
}

.txt-seccoes {
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	margin: 2rem 0 1rem;
}

.txt-seccoes[top] {
	margin: 0 0;
}

.txt-co-financiamento {
	font-size: .8rem;
	text-transform: uppercase;
}

@-webkit-keyframes fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

#revistas, #calendarios, #folhetos, #livros, #news { scroll-margin-top: 50px; }