:root{
	--timeline-gap: 1em;
	--timeline-module: 100px;
}

	main.timeline *,
	main.timeline *::before,
	main.timeline *::after {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

main.timeline {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
}

main.timeline > header {
	grid-column: 1 / -1;
	margin-bottom: 3em;
}

main.timeline > section {
	overflow-x: scroll;
	overflow-y: hidden;
	grid-column: 1 / -1;
	display: flex;
	gap: 8em;
	padding-inline: calc( (100vw - (11 * 2.5em)) / 12 + 2.5em );
	padding-block: 3em 2em;
	background: var(--color-gray-850);
	border-bottom: 1em solid var(--color-gray-850);
	margin-inline: -1.5em;
}

main.timeline .module > header {
	font-size: .7em;
	color: #fff;
	z-index: -9999;
	width: 100%;
	margin-bottom: 3em;
	min-width: 1px;
}

	main.timeline .module > header .theme {
		font-size: 1.1em;
		height: 1.8em;
		letter-spacing: .5px;
		position: relative;
		display: block;
	}

	main.timeline .module > header h1 {
		border-top: 2px solid #fff;
		padding-top: .25em;
		font-size: 2.1em;
		line-height: 1.2;
	}
	main.timeline .module > header h1 span {
		font-size: 0.5em;
		display: block;
		font-weight: 300;
		line-height: 2.2;
	}

main.timeline .module > article {
    perspective: 600px;
    perspective-origin: 50% 50%;
	display: grid;
	gap: var(--timeline-gap);
	grid-template-columns: auto;
    grid-template-rows: repeat(5, var(--timeline-module));
    grid-auto-flow: column;
}

.horizontal-scroll::-webkit-scrollbar {
	height: .75em;
}

.horizontal-scroll::-webkit-scrollbar-track {
	box-shadow: inset 0px 0px 0px .25em var(--color-gray-850);
	background-color: var(--color-gray-700);
	margin: calc( (100vw - (11 * 2.5em)) / 12 + 2.5em );
}

.horizontal-scroll::-webkit-scrollbar-thumb {
	background-color: var(--color-theme);
	padding: 2em;
}

.stage .solid-block {
	position: relative;
	transform-style: preserve-3d;
	width: 100%;
	height: 100%;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
	transition: all .2s ease;
}

.stage .solid {
	overflow: clip;
	width: 100%;
	height: 100%;
	transition: all .2s ease;
	aspect-ratio: 1;
	display: block;
}

.stage .solid h2 {
	font-size: 2em;
	margin-bottom: .25em;
	font-weight: 800;
}

.stage .back,
.stage .left,
.stage .right,
.stage .top,
.stage .bottom {
	content: '';
	display: block;
	position: absolute;
}

.stage .back {
	top: 0;
	position: relative;
	background: #000;
	transform: translateY(-100%);
}

.stage .left {
	left: 0;
	top: 0;
	transform-origin: center left;
}

.stage .right {
	right: 0;
	top: 0;
	transform-origin: center right;
}

.stage .top {
	top: 0;
	transform-origin: top center;
}

.stage .bottom {
	bottom: 0;
	transform-origin: bottom center;
}

.stage .solid {
	background-color: #999999;
	color: var(--color-white);	
	padding: .75em;
	text-decoration: none;
}

.stage h3 {
    font-size: .9em;
	line-height: 0.95;
	margin-bottom: .5em;
}

.stage .frame {
	padding: .2em;
}

.stage .frame img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
	margin: 0;

	border-width: 1px;
    border-style: solid;
    border-color: #00000099 #ffffff44 #ffffff66 #00000099;
}

.stage .section-description{
	grid-row: span 3;
	aspect-ratio: .5;
	background-color: var(--color-white);
	color: var(--color-gray-900);
	font-weight: 300;
    font-size: 0.75em;
	width: var(--timeline-module);
}
.stage .section-gap {
	grid-row: span 2;
}

.stage .expo-module:not(.intro) .item-description  {
    opacity: 0.9;
    font-size: .3em;
    line-height: 1.4;
    font-weight: 300;
}

/* ---- */

.expo-module{
	position: relative;
	cursor: pointer;
}

.expo-module::before{
	content: '';
	display: block;
	position: absolute;
	bottom: .5em;
	right: .5em;
    width: 1.5rem;
    height: 1.5rem;
	z-index: 3;
	border-radius: 5px;
	border: 1px solid #fff;
	background-size: cover;
	background-color: #fff;
	color: #000;
	font-weight: 800;
	opacity: 0;
	transition: all .3s ease;
	background-image: url('../assets/icon_text.svg');
}

.expo-module:hover::before{
	opacity: 1;
}
.expo-module.is-museologic::before{
	content: '';
	background-image: url('../assets/icon_more.svg');
}
.expo-module.is-image::before{
	content: '';
	background-image: url('../assets/icon_more.svg');
}
.expo-module.is-image.multiple::before{
	content: '';
	border-width: 3px;
	background-image: url('../assets/icon_more_multiple.svg');
}
.expo-module.is-video::before{
	content: '';
	background-image: url('../assets/icon_play.svg');
}
.expo-module.is-video.multiple::before{
	content: '';
	border-width: 3px;
	background-image: url('../assets/icon_play_multiple.svg');
}

.expo-modal{
	display: none;
	width: min(800px, 90%);
	max-height: 90vh;
	overflow-x: hidden;
	overflow-y: auto;
	color: #000;
	padding: 3em 5em !important;
}

.expo-modal h2{
	margin-bottom: .5em;
	font-size: 1.8em;
}
.expo-modal .item-description{
    font-size: 1.2em;
    line-height: 1.5;
}
.expo-modal-list{
	display: flex;
    flex-direction: column;
	gap: 3em;
	margin-top: 2.5em;
}

.expo-modal-item{
	display: flex;
	align-items: start;
	gap: 1.75em;
}

.expo-modal-image{
	flex: 0 0 40%;
    display: flex;
    justify-content: center;
}

.expo-modal-image a{
	display: inline-block;
	position: relative;
}
.expo-modal-image a::before{
	position: absolute;
	content: "";
	width: 3.5em;
	height: 3.5em;
	background-color: #00000099;
	background-image: url('../assets/icon_show_img.svg');
	border-radius: 50%;
	transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
	opacity: 0;
	transition: opacity	.3s ease;
}

.expo-modal-image a.is-video::before{
	background-image: url('../assets/icon_show_play.svg');
}

.expo-modal-image a:hover::before{
	opacity: 1;
}

.expo-modal-image img{
	max-width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: contain;
    object-position: center right;
	display: block;
}

.expo-modal-text h4{
    align-items: baseline;
    font-size: 1.2em;
    margin-bottom: 0.5em;
}

.expo-modal-text .expo-modal-addType{
	color: var(--color-theme);
	text-transform: uppercase;
	font-size: .6em;
	font-weight: 400;
	margin-left: .75em;
}

.expo-modal-text div{
    font-size: 0.9em;
    font-weight: 300;
    color: var(--color-gray-600);
}

.expo-modal-link{
    background: var(--color-gray-400);
    text-decoration: none;
    display: inline-block;
    padding: .25em .5em .1em .5em;
    font-weight: 500;
    font-size: .8em;
    margin-top: .5em;
}

.expo-modal-link:hover{
    background: var(--color-gray-900);
    text-decoration: none;
}

.expo-modalview-name{
	font-size: 1.25em;
	font-weight: 600;
}

.expo-modalview-type{
	font-size: .8em;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-theme) ;
}

.expo-modalview-desc{
	margin-top: .75em;
	color: var(--color-gray-400);
}

.expo-modalview-link{
	display: inline-block;
	padding: .25em 1.5em .1em 1.5em;
	border: 1px solid var(--color-white);
	color: var(--color-white);
	margin: 1em auto 0 auto;
	font-weight: 400;
}

.expo-modalview-link:hover{
	background-color: var(--color-white);
	color: #000000 !important;
	text-decoration: none !important;
}

.fancybox-caption__body {
    max-width: 950px !important;
    margin-inline: auto !important;
}

/* ---- */

.expo-module.vertical {
	display: flex !important;
	gap: .25rem;
}
.expo-module.vertical h3 {
	writing-mode: sideways-lr;
	line-height: 1;
	text-align: end;
	font-size: 1.5em;
}
.expo-module.vertical .item-description {
	margin-top: 0;
}

.vermelho {
	background-color: rgba(200, 0, 0) !important;
	color: var(--color-white);
}
.amarelo {
	background-color: #ffca11 !important;
	color: var(--color-gray-900);
}
.laranja {
	background-color: #e65600 !important;
	color: var(--color-white);
}
.bege {
	background-color: rgb(204, 167, 125) !important;
	color: var(--color-white);
}
/* .marrom {
	background-color: #76664c !important;
	color: var(--color-white);
} */
.vinho {
	background-color: #8f5047 !important;
	color: var(--color-white);
}
.preto {
	background-color: #1b1b1b !important;
	color: var(--color-white);
}

/* ---- */

.stage .intro {
	grid-row: span 3;
	aspect-ratio: .5;
	background-color: var(--color-white);
	color: var(--color-gray-900);
	font-weight: 300;
	width: var(--timeline-module);
}

.stage a.intro {
    font-size: .8em;
}

/* .stage .intro {
	grid-column-start: 2;
	grid-row-start: 1;
} */


.stage .row2 {
	grid-row: span 2;
	aspect-ratio: .5;
}
.stage .col2 {
	grid-column: span 2;
	aspect-ratio: 2;
}
.stage .row2.col2 {
	aspect-ratio: 1;
}
.stage .row3 {
	grid-row: span 3;
	aspect-ratio: .33;
}
.stage .col3 {
	grid-column: span 3;
	aspect-ratio: 3;
}
.stage .row2.col3 {
	aspect-ratio: 1.5;
}
.stage .row3.col2 {
	aspect-ratio: .66;
}
.stage .row3.col3 {
	aspect-ratio: 1;
}