:root {
	--color-primary-darker: #1d2e16;
	--color-primary-dark: #2f4624;
	--color-primary: #405C32;
	--color-primary-bright: #557546;
	--color-primary-brighter: rgb(107, 147, 88);

	--color-main-menu-active-page: #8e5c00;
	--color-main-menu-active-page-hover: #ae7100;

	--color-linhas: #d48a00;

	--color-white: #fff;

	--skeleton-color_A: rgba(162, 162, 162, 0.2);
	--skeleton-color_B: rgba(255, 255, 255, 0.2);
}

html {
	-webkit-text-size-adjust: 100%; /* Escala se manter em mobiles */
	scrollbar-width: none;
}

body {
	margin: 0;

	--width-column-content-desktop: 640px;
	background-color: var(--color-primary-bright);
}
body.desktop {
	min-height: calc(100vh + 1px);
}

#app {
	width: var(--width-content);
}

a.mainLogo { display: block; }

/* APP */
#app {
	background-color: var(--color-primary);
}

.desktop #app {
	display: grid;

	grid-template-areas:
	"menu      menu"
	"mainLogo  content"
	"footer    content"
	".         content";

	grid-template-columns: 320px var(--width-column-content-desktop);
	grid-template-rows: auto auto 320px auto
}
.desktop .mainLogo            { grid-area: mainLogo }
.desktop footer               { grid-area: footer }
.desktop .mainMenu            { grid-area: menu }
.desktop #elContentContainer  { grid-area: content }

/* margem ao redor do conteúdo */
.mobile .sobre-expo,
.mobile .avatarContent
{
	margin: var(--8u);
}

.desktop .sobre-expo,
.desktop .avatarContent
{
	margin: var(--12u);
}

#btn-back-to-virtual-tour {
	padding: var(--3u);
	background-color: var(--color-primary-bright);
	margin-top: var(--6u);
	width: fit-content;
	border-radius: var(--1u);
}
#btn-back-to-virtual-tour p {
	margin: 0;
}
.desktop #btn-back-to-virtual-tour:hover {
	background-color: var(--color-primary-brighter);
	cursor: pointer;
}

/* <footer> */
footer {
	background-color: var(--color-white);
	height: fit-content;
}
.footer-container img {
	height: var(--10u);
	padding-left: var(--2u);
	padding-right: var(--2u);
	margin: var(--2u) auto auto auto;
}
.apresentacao {
	display: flex;
}

.block {
	padding: var(--8u);
}

.imgAvatar {
	margin-bottom: var(--6u);
	max-width: 240px;
	height: 240px;
	width: 240px;
	background: linear-gradient(90deg, var(--skeleton-color_A), var(--skeleton-color_B), var(--skeleton-color_A));
	background-size: 200% 100%;
	animation: infinite 2s normal skeleton__animation;
}
.detail-imgAvatar {
	width: 3px;
	height: 240px;
	border-left: 3px solid var(--color-linhas);
	margin-left: -10px;

	float: left;
}

.block.instituicao img {

	width: 100%;
	margin-bottom: var(--6u);
}
.block.instituicao * {
	margin-bottom: var(--2u);
}

#elContentContainer {
	--opacity: 0;
	transition: opacity .5s ease;
	opacity: var(--opacity);
}


.skeleton__onlyText,
.skeleton__imgAndText,
.skeleton__carrouselAndText .wrapper {
	padding: var(--8u);
	min-height: 100vh;
}

.skeleton__bone__img__carrousel { width: 100%; height: 320px; }
.skeleton__bone__img__square { width: 240px; height: 240px; }
.skeleton__bone__text { height: var(--4u); }

.skeleton__bone__img__carrousel,
.skeleton__bone__img__square,
.skeleton__bone__text {
	background: linear-gradient(90deg, var(--skeleton-color_A), var(--skeleton-color_B), var(--skeleton-color_A));
	background-size: 200% 100%;
	margin-bottom: var(--4u);
	animation: infinite 2s normal skeleton__animation;
}
.skeleton__bone__text.variation1 { width: 50%; }
.skeleton__bone__text.variation2 { width: 30%; }
.skeleton__bone__text.variation3 { width: 80%; }
.skeleton__bone__text.variation4 { width: 100%; }
.skeleton__bone__text.variation5 { width: 10%; }

@keyframes skeleton__animation {
	0% {
		background-position: 0%;
	}
	50% {
		background-position: 100%;
	}
	100% {
		background-position: 0%;
	}
}