@charset "UTF-8";

.wp-site-blocks{
	min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.history-timeline{
	--timeline-track-height: 10px;
	position: relative;
	width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw)!important;
}

.history-timeline:before{
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
	background: linear-gradient(90deg,rgba(13, 13, 13, 1) 1%, rgba(13, 13, 13, 0) 20%, rgba(13, 13, 13, 0) 80%, rgba(13, 13, 13, 1) 99%);
	z-index: 99;
	pointer-events: none;
}

/* =========================
 * Timeline Line 
 * ========================== */
.history-timeline-line{
	height: var(--timeline-track-height);
	width: 100%;
	background-color: var(--color-red);
	border-radius: var(--timeline-track-height);
}

/* =========================
 * History Items Wrap
 * ========================== */
.history-timeline-track{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 90px;
	overflow: hidden;
	width: calc(100% - 20px);
}

/* =========================
 * History Item
 * ========================== */
.history-item{
	position: relative;
	width: auto;
	max-width: 480px;
	min-width: 26vw;
}

.history-item:first-of-type{
	margin-left: 18vw;
}

.history-item:hover{
	cursor: pointer;
}

.history-item .history-item-content{
	opacity: 0;
}

.history-item.is-visible .history-item-content{
	animation: visible 0.8s ease-in forwards;
}

.history-item.is-visible:nth-of-type(2) .history-item-content{
	animation: visible 0.8s ease-in 0.4s forwards;
}

.history-item.is-visible:nth-of-type(3) .history-item-content{
	animation: visible 0.8s ease-in 0.8s forwards;
}

@keyframes visible {
	0%{
		opacity: 0;
	}
	40%{
		opacity: 1;
		transform: scale(1.2);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
} 

.history-item:before{
	position: absolute;
	content: "";
	display: block;
	width: 4px;
	height: calc(4 * var(--timeline-track-height));
	top: calc(var(--timeline-track-height) * -1);
	left: 10px;
	background-color: var(--color-red);
}

.history-item.history-item-last,
.history-item.history-item-last.is-visible{
	opacity: 0;
	pointer-events: none;
}

.history-item h4{
	margin-top: 0!important;
}

@media only screen and (max-width: 600px){
	.history-item{
		min-width: 60vw;
	}
	
	.history-item.is-visible .history-item-content,
	.history-item.is-visible:nth-of-type(2) .history-item-content,
	.history-item.is-visible:nth-of-type(3) .history-item-content{
		animation: visible 0.4s ease-in forwards;
	}
	
	.history-item.history-item-last,
	.history-item.history-item-last.is-visible{
		max-width: 2vw;
		width: 2vw;
		min-width: 2vw;
	}
}

/* =========================
 * Pop-up
 * ========================== */
.history-popup{
	position: fixed;
	display: flex;
    justify-content: center;
    align-items: center;
	width: 100vw;
	max-width: none;
	height: 100vh;
	top: 0;
	left: 0;
	background: #000000cc;
	padding: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	z-index: 99999;
}

.history-popup.active{
	pointer-events: auto;
	animation: fade-in 0.2s ease-in forwards;
}

@keyframes fade-in {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
} 

.history-popup-inner{
	padding: 20px;
	background-color: var(--color-cream);
	color: var(--color-black);
	max-width: 490px;
	width: 90%;
	margin: 0 auto;
	transform: scale(0.1);
}

.history-popup-inner h2{
	font-size: var(--text-h3);
	margin-top: 0!important;
}

.history-popup-inner .history-popup-excerpt{
	font-size: var(--text-paragraph);
	line-height: 1.7;
	font-weight: 700;
	margin: 0 0 1em 0;
}

.history-popup.active .history-popup-inner{
	animation: pop-in 0.4s ease-in forwards;
}

@keyframes pop-in {
	0%{
		transform: scale(0.1);
	}
	80%{
		transform: scale(1.1);
	}
	100%{
		transform: scale(1);
	}
} 

.history-popup-close{
	border: none;
    background: transparent;
    color: var(--color-red);
    font-size: 42px;
    position: absolute;
    top: -42px;
    right: 0px;
    cursor: pointer;
	outline: none;
}