/* :root {
    --e-global-color-primary: #d8a3cd;
    --e-global-color-secondary: #dda309;
    --e-global-color-text: #515151;
    --e-global-color-accent: #d088b1;
    --e-global-color-480306d: #f8ebec;
    --e-global-color-fa39baf: #d8a3cd;
    --e-global-color-5c24791: #333333;
    --e-global-color-d0a19b1: #fbfbfb;
    --e-global-color-a3d2afd: #ffffff;
    --e-global-color-ebb5f1b: #8a9eb5;
    --e-global-color-8e8a8a2: #bdbdbd;
    --e-global-color-e7ed2e8: #4f4f4f;
    --e-global-typography-primary-font-family: "Graphit";
    --e-global-typography-primary-font-size: 7.5rem;
    --e-global-typography-primary-font-weight: bold;
    --e-global-typography-secondary-font-family: "Open Sans";
    --e-global-typography-secondary-font-size: 7rem;
    --e-global-typography-secondary-font-weight: 400;
    --e-global-typography-text-font-family: "Open Sans";
    --e-global-typography-text-font-weight: 400;
    --e-global-typography-accent-font-family: "Open Sans";
    --e-global-typography-accent-font-weight: 500;
} */

/* body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background: var(--e-global-color-d0a19b1);
} */
/* 
html {
    font-size: 10px;
    font-family: Open Sans;
} */

/* :root {
    font-size: 10px;
} */

/* h1,
h2 {
    color: black;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    font-weight: 800;
} */

.anything {
	width: 50vw;
	max-width: 1080px;
	height: 50px;
	background: #fbbb33;

	margin: 0 auto;
}

.anything:nth-child(2) {
	background-color: blue;
}

#timeline {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100vw;

	cursor: grab;
}

#timeline:active {
	cursor: grabbing;
}

#timeline::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);

	width: 24vw;
	max-width: 500px;
	height: 100%;

	background-color: none;
	background: rgb(251, 251, 251);
	background: -moz-linear-gradient(
		90deg,
		rgba(251, 251, 251, 0) 0%,
		(var--e-global-color-d0a19b1) 90%
	);
	background: -webkit-linear-gradient(
		90deg,
		rgba(251, 251, 251, 0) 0%,
		var(--e-global-color-d0a19b1) 90%
	);
	background: linear-gradient(
		90deg,
		rgba(251, 251, 251, 0) 0%,
		var(--e-global-color-d0a19b1) 90%
	);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbfbfb", endColorstr="#fbfbfb", GradientType=1);

	/* background-color: var( --e-global-color-d0a19b1); */
	z-index: 3;
	pointer-events: none;
}

#timeline .line-element {
	position: absolute;
	top: 37px;
	width: 100vw;
	height: 2px;
	background-color: #c4c4c4;
	z-index: 0;
}

#section-wrapper-timeline {
	display: flex;

	max-width: 1320px;
	position: relative;
	padding-left: 8rem;
	/* padding: 12rem; */
}

#timeline-wrapper {
	position: relative;
	left: 0;
	/* transform: translateX(-20%); */

	display: flex;
	align-items: center;
	justify-content: flex-start;

	width: 100vw;
	/* max-width: 1080px; */
	font-size: 2rem;

	padding-left: 4rem;
	overflow-x: scroll;
	z-index: 2;
}

#scroll img {
	position: absolute;
	bottom: 0;

	transform: translate(-90%, 0%);
	z-index: 3;
}

#timeline-wrapper::-webkit-scrollbar {
	display: none;
}

#scroll::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 8rem;
	transform: translateY(-50%);

	width: 5rem;
	height: 100%;

	/* background-color: red; */
	background: -moz-linear-gradient(
		270deg,
		rgba(251, 251, 251, 0) 0%,
		(var--e-global-color-d0a19b1) 90%
	);
	background: -webkit-linear-gradient(
		270deg,
		rgba(251, 251, 251, 0) 0%,
		var(--e-global-color-d0a19b1) 90%
	);
	background: linear-gradient(
		270deg,
		rgba(251, 251, 251, 0) 0%,
		var(--e-global-color-d0a19b1) 90%
	);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbfbfb", endColorstr="#fbfbfb", GradientType=1);
	z-index: 3;
	pointer-events: none;
}

.wrapper-timeline-item {
	display: flex;
	flex-direction: column;

	width: 356px;
	min-width: 320px;

	/* margin-top: -40px; */
	margin-right: 64px;
}

.wrapper-timeline-item:last-child {
	margin-right: 35vw;
}

.wrapper-timeline-item .year-timeline {
	margin-top: 16px;

	color: #d088b1;
	/* color: var(--e-global-color-accent); */
	font-weight: 700;
}

.wrapper-timeline-item .title-timeline {
	color: #333333;
	color: var(--e-global-color-5c24791);
	font-weight: 700;
}

/*NAV ARROWS*/

.slide-nav-buttons-timeline {
	display: none;
}

.slide-nav-buttons-timeline {
	display: flex;
	justify-content: center;
	align-items: center;
}

.slide-nav-buttons-timeline .button-right-timeline {
	cursor: pointer;
}

.button-right-timeline svg path {
	transition: all 0.3s ease-in-out;
}

.button-right-timeline:hover svg path {
	fill: #d088b1;
}

.button-right-timeline:hover svg path + path {
	fill: #fff;
}

.slide-nav-buttons-timeline .button-left-timeline {
	margin-right: 10px;
	cursor: pointer;
}

.button-left-timeline svg {
	transform: rotate(-180deg);
}

.button-left-timeline svg path {
	transition: all 0.3s ease-in-out;
}

.button-left-timeline:hover svg path {
	fill: #d088b1;
}

.button-left-timeline:hover svg path + path {
	fill: #fff;
}

.mobile-button-timeline-left {
	display: none;
}
.mobile-button-timeline-right {
	display: none;
}

@media (max-width: 1366px){
	#section-wrapper-timeline{
		width: 75%;
	}
	#scroll img {
		width: 20%;
	}
}

@media (max-width: 1024px){
	#scroll img {
		display: none;
	}
}

@media (max-width: 767px) {
	#section-wrapper-timeline {
		padding-left: 0;
	}

	.wrapper-timeline-item{
		min-width: 180px;
		margin-right: 30px;
	}
	.year-timeline{
		font-size: 20px;
	}
	.title-timeline{
		font-size: 18px;
	}

	.wrapper-timeline-item span{
		font-size: 16px;
	}



	#scroll img {
		display: none;
	}

	#scroll::before {
		left: 0;
		max-width: 80px;
	}

	#timeline::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: 24vw;
		max-width: 80px;
	}

	.slide-nav-buttons-timeline {
		display: flex;
	}

	.mobile-button-timeline-left {
		display: initial;
	}
	.mobile-button-timeline-right {
		display: initial;
	}

	.mobile-button-timeline-left svg {
		width: 40px;
	}

	.mobile-button-timeline-right svg {
		width: 40px;
	}

	.slide-nav-buttons-timeline {
		order: 2;
		/* width: 25%; */
		margin: 0;
		padding: 0;
	}
}