:root {
	--color-primary: #4f2626;
	--color-primary-bright: #5f2f2f;
	--color-primary-dark:#3d1d1d;
	--color-secondary: #D28C3A;
	--color-block-background: #180b0b;
	--color-avatars-menu-blink-off: var(--color-primary-dark);
	--color-avatars-menu-blink-on: var(--color-primary-bright);

	--margin: 24px;
	--menuItemHeight : 60px;
	--menuOpenedHeight : 400px;
}

/* TIPOGRAFIA */
@font-face {
	font-family: DMSans-Regular;
	src: url(/_fontfaces/DMSans-Regular.ttf);
}
html {
	font-family: DMSans-Regular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.mobile h2 { font-size: 3.2rem; }
.tablet h2 { font-size: 3.6rem; }

.mobile .subtitle { font-size: 2.2rem; }
.tablet .subtitle { font-size: 2.5rem; }

.mobile h6 { font-size: 1.4rem; }
.tablet h6 { font-size: 1.6rem; }

.mobile #mainMenu li { font-size: 1.4rem; }
.tablet #mainMenu li { font-size: 1.6rem; }

.mobile p { font-size: 1.6rem; }
.mobile p { line-height: 20px; }

.tablet p { font-size: 1.6rem; }
.tablet p { line-height: 22px; }

/* (1999, tal lugar, onde vive e trabalha) */
.mobile .text-small { font-size: 0.9rem; }
.tablet .text-small { font-size: 1.1rem; }

.mobile .credito-fotografia { font-size: 0.8rem; }
.tablet .credito-fotografia { font-size: 1.1rem; }

.mobile .about-artwork-container p { font-size: 1.2rem; }
.tablet .about-artwork-container p { font-size: 1.2rem; }

h2, h3 ,h4, h5, h6, p, #mainMenu li { color: #fff; }

a {
	color: var(--color-secondary);
	text-decoration: underline;
	cursor: pointer;
}

.credito-fotografia { margin-top : 4px; }


#bgImg {
	position: fixed;
	z-index: -99;

	background-size: auto;
	background-repeat: repeat;
	width: 100%;
}

/* HEIGHT */
#app,
#app.tablet,
#mainLogo img,
#bgImg
{
	height: 100%;
}

/* inside app loading */
#app .loading-icon-container,
#app .loading-text-container,
#mainLogo
{
	height: 320px;
}

/* WIDTH */
#mainLogo img
{
	width: 100%;
}

#app.mobile,
#mainLogo,
.mobile .loading-icon-container,
.mobile .loading-text-container,
.mobile .pageExposition img,
.mobile .banners-carrousel
{
	width: 320px;
}

.tablet .loading-icon-container,
.tablet .loading-text-container,
.tablet .pageExposition img,
#app.tablet .banners-carrousel
{
	width: 660px;
}

#app.tablet
{
	width: 980px;
}

#mainMenu ol,
#avatarContentContainer,
.pageIndex,
.pageCurator,
.pageExposition,
.pageVisitaVirtual,
.mobile #creditos
{
	background-color: var(--color-block-background);
}

footer,
.tablet #creditos
{
	background-color: #fff;
}

#app { margin: auto; }

#mainLogo { transition: height .3s ease; }

/* MAIN MENU */
#mainMenu {
	position: sticky;
	top: 0px;

	/* On top of everything */
	z-index: 99;
}
/* 'Menu' cel */
#mainMenu li:nth-child(1) {
	border-bottom: 1px dotted var(--color-primary-dark);
}
#mainMenu ol {
	overflow-y: hidden;
	/* Collapsing */
	transition: height .5s ease;

	/* 40px x Quantas opções */
	height: 240px;

	list-style-type: none;
	padding: 0;
	margin: 0;
}
#app.tablet #mainMenu ol {
	height: 40px;
}
#app.tablet #mainMenu ol li:nth-child(1) {
	display: none;
}
#mainMenu li {

	display: flex;
	height: calc(var(--menuItemHeight) - 20px);

	cursor: pointer;
}
#mainMenu p {
	margin: auto;
}

.tablet #mainMenu ol { display: flex; }
.tablet #mainMenu li {
	margin-left: auto;
	margin-right: auto;
}

/* Menu Artistas */
#selectionAvatarContainer {
	transition: height .5s ease;

	height: var(--menuItemHeight);
	overflow-y: hidden;
}

#selectionAvatarContainer div {
	display: flex;
	background-color: var(--color-avatars-menu-blink-off);

	transition: background-color .3s ease;
}
#selectionAvatarContainer_headerEl {
	position: sticky;
	top: 0px;
}

/* HEIGHT --menuItemHeight */
#selectionAvatarContainer_headerEl,
.divOptionAvatar {
	height: var(--menuItemHeight);
}

.divOptionAvatar {
	border-top: 1px solid var(--color-primary);
}

#selectionAvatarContainer { background-color: var(--color-block-background); }

#selectionAvatarContainer .divOptionAvatar:hover {
	cursor: pointer;
	background-color: var(--color-primary-bright);
}
#selectionAvatarMenu_UI,
.divOptionAvatar .spr-sz-S {
	margin-top: auto;
	margin-left: var(--margin);
	margin-bottom: auto;
}
#selectionAvatarContainer p {
	margin-top: auto;
	margin-bottom: auto;
	margin-left: var(--margin);
}
.divOptionAvatar p {
	margin-left: 10px;
}

/* IMAGENS */

/* INSTITUICAO */
.mobile .pageExposition img {
	height: 200px;
}
.tablet .pageExposition img {
	height: 410px;
}

/* BANNER */
#app.mobile .banners-carrousel {
	height: 200px;
}
#app.tablet .banners-carrousel {
	height: 410px;
}

#banner-img-0,
#banner-img-1,
#banner-img-2,
#banner-img-3,
#banner-img-4,
#banner-img-5,
#banner-img-6,
#banner-img-7,
#banner-img-8,
#banner-img-9
{
	position: absolute;
	width: inherit;
	height: inherit;

	opacity: 0;
	transition: opacity .5s ease;
}

/* CONTROLS */
/* CONTROLS */
#banners-carrousel-control_L,
#banners-carrousel-control_R {
	opacity: .4;
	z-index: 1;
	position: absolute;
}

.mobile #banners-carrousel-control_L,
.tablet #banners-carrousel-control_L
{
	margin-left: calc(var(--margin) - 4px);
}
.mobile #banners-carrousel-control_L,
.mobile #banners-carrousel-control_R
{
	margin-top: 136px;
}
.mobile #banners-carrousel-control_R
{
	margin-left: calc(252px + 4px);
}

.tablet #banners-carrousel-control_L,
.tablet #banners-carrousel-control_R
{
	margin-top: 336px;
}
.tablet #banners-carrousel-control_R
{
	margin-left: calc(592px - 4px);
}


/* OBRA */
.obraImg { margin-left: 20px; }

.mobile img.thin-mobile { width: 280px; }
.mobile img.tall-mobile { height: 560px; }

.tablet img.thin-tablet { width: 612px; }
.tablet img.tall-tablet { height: 480px; }

.hr {
	height: 2px;
	width: calc(100% - 48px);
	background-color: var(--color-primary-bright);
}



/* MARGIN-LEFT */
.hr,
.text-about-exposition-container .title,
.text-about-exposition-container p,

.visita-virtual-container,

.info-exposition-container h2,
.info-exposition-container p,
.info-exposition-container h3,
#curatorContentContainer h2,
#avatarContentContainer h2,
#avatarContentContainer h6,
#curatorContentContainer h6,
#avatarContentContainer .spr-sz-L,
#avatarContentContainer p,

.about-avatar-container p,
#avatarContentContainer img,
#curatorContentContainer img,
#creditos * {
	margin-left: var(--margin);
}

/* MARGIN-RIGHT */
.hr,
.text-about-exposition-container .title,
.text-about-exposition-container p,
#avatarContentContainer p,
.about-avatar-container p,
.info-exposition-container h3,
.info-exposition-container h2,
.info-exposition-container p {
	margin-right: var(--margin);
}

/* MARGIN-TOP */
.hr,
.text-about-exposition-container p,
.info-exposition-container p,
#avatarContentContainer img,
#curatorContentContainer img,
.info-exposition-container h3,
div.about-avatar-container,
div.about-artwork-container,
.obraImg,
.visita-virtual-container iframe {
	margin-top: var(--margin);
}

/* 1/2 */
#avatarContentContainer p,
#curatorContentContainer p,
#avatarContentContainer h6,
#curatorContentContanier h6,
.visita-virtual-container .text-small {
	margin-top: calc(var(--margin)/2);
}

/* MARGIN-BOTTOM */
.about-artwork-container {
	margin-bottom: calc(2 * var(--margin));
}

/* NONE */
#avatarContentContainer .about-artwork-container p { margin-top: 0; }

/* PADDING-TOP */
.text-about-exposition-container,
#avatarContentContainer,
#curatorContentContainer,
.info-exposition-container,
.visita-virtual-container {
	padding-top: var(--margin);
}

/* PADDING-BOTTOM */
.text-about-exposition-container,
#avatarContentContainer,
#curatorContentContainer,
.info-exposition-container,
.visita-virtual-container {
	padding-bottom: var(--margin);
}

/* MENU */
#mainMenu {
	padding-top: 4px;
	margin-bottom: 4px;
}
#mainMenu ol {
	border-radius: 8px;
	border: 3px solid var(--color-block-background);
	border: 2px solid var(--color-primary);
}

/* VISITA VIRTUAL */
.mobile .visita-virtual-container iframe {
	width: 272px;
	height: 480px;
}
.tablet .visita-virtual-container iframe {
	width: 612px;
	height: 400px;
}

/* FOOTER */
p.este-projeto-foi {
	font-size: 1.2rem;
	line-height: 15px;
	margin-bottom: var(--margin);
}
#footer {
	height: 492px;
}

footer p {
	color: #000;
}
.footer-container {
	padding: var(--margin);
}

.footer-logomarcas-group {
	margin-bottom: var(--margin);
}

#fundo-de-arte,
#secult-goias,
#associacao-mapa,
#mapa,
#logo-secretaria {
	margin-top: calc(var(--margin)/2);
}



/* CREDITOS */
/* Commom */
.mobile #creditos,
.tablet #creditos {
	padding-top: var(--margin);
	padding-bottom: var(--margin);
}
.mobile #creditos *,
.tablet #creditos * {
	margin-right: var(--margin);
}

/* Mobile */
.mobile #creditos {
	border-top: 1px dotted var(--color-block-background);
}
.mobile #creditos * { color: #fff; }

/* Tablet */
.tablet #creditos {
	border-top: 1px dotted var(--color-block-background);
	border-bottom: 16px solid var(--color-block-background);
}
.tablet #creditos * { color: #000; }

.tablet body { display: flex; }
#app.tablet {
	display: grid;
	grid-template-areas: "menuHeader menuHeader" "mainLogo contentArea" "footer contentArea" ". creditArea";
	grid-template-columns: 320px 660px auto auto;
	grid-template-rows: auto 320px auto;
}

/* ## GRID AREAS ## */
.tablet #mainLogo { grid-area: mainLogo; }
.tablet #mainMenu { grid-area: menuHeader; }
.tablet #appContent { grid-area: contentArea; }
.tablet #footer { grid-area: footer; }
.tablet #creditos { grid-area: creditArea; }

.tablet #mainMenu ol { width: 974px; }