/** SLIDER STUFF **/

#timeline-slider {
	width: 100%;
	border: 1px solid #ccc;
	overflow: hidden;
	position: relative;
	


}


@media (min-width: 768px) {
	
	.timeline-items {
		display: block;
	}
	
	#timeline-slider {
		height: 400px;
		
	}
	.card {
		max-height: 400px;
	}
	
}

@media screen and (max-width: 768px){
	
	.timeline-items {
		display: none;
	}
	
	#timeline-slider {
		margin-bottom: 40px;
	}
	
	#timeline-slider .row {
		
		flex-direction: column-reverse;
		
	}
	#timeline-slider .row .col {
		flex-basis: auto;
	}
	
	#timeline-slider .row .col:nth-child(2) {
		max-height: 50vh;
	}
	
	
}

.card-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out; /* This creates the smooth slide */
  width: 100%;
}

.card {
  min-width: 100%; /* Each card takes up the full width of the container */
  display: flex;
  align-items: center;
  justify-content: center;
}

.card .row {
	width: 80%;
	height: 100%;
}

.card .col {
	min-height: 0;
}

.card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	
}
#back-btn, #next-btn {
	height: 100%;
	width: 10%;
	position: absolute;
	top: 0;
	background-color: rgba(255, 255, 255, 0.5);
	border: none;
	font-size: 2.67em;
	color: #253365;
}
#back-btn {
	left: 0;
	background: linear-gradient(to right, #ccc, transparent);
}
#next-btn {
	right: 0;
	background: linear-gradient(to left, #ccc, transparent);
}

/** Timeline STUFF **/

.year-numbers{
	color: #ce2030;
	font-size: 2em;
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	width: fit-content;
	margin: 0 auto 0 auto;
	padding: 0 5px;
	background: #FFF;
}


@media (min-width: 768px) {

	#timeline {
		width: calc(100% - 100px);
		margin: 0 auto;
	}
	
	#timeline-slider {
		margin-left: -90px;
		margin-right: -90px;
		width: calc(100% + 180px);
	}

	.timeline-row:nth-child(2n+1) .timeline-items {
		flex-direction: row-reverse;
	
	}
	.timeline-row:nth-child(2n+1) .timeline-item {
		direction: rtl;
	}
	
	
	.timeline-row {
		position: relative;
	}
	.timeline-items {
		display: flex;
	}
	.timeline-item {
		flex: 1; 
		height: 200px;
		position: relative;
	}
	.timeline-year {
		text-align: center;
		padding: 0;
	
	}
	
	.year-numbers{

		position: relative;
		top: -0.5em;
	}
	
	.year-numbers span {
		position: relative;
		z-index: 123456789;
	}
	
	
	.timeline-event {
		position: absolute;
		width: 250px;
		margin: 0;
		height: 40px;
		top: var(--top, 0);
		margin-inline-start: var(--left, 0);
	}
	
	/* The connecting line */
	.timeline-event-link::before {
		content: "";
		position: absolute;
		background: #515c84;
		height: calc(var(--top, 40px) - 7px); 
		width: 1px;
		bottom: 100%; 
		left: 0;
		
	}
	.timeline-row:nth-child(2n+1) .timeline-event-link::before {
		/*transform: translateX(100%);*/
		right: 0;
		left: auto;
	}
	
	/* The circle on the timeline */
	.timeline-event-link::after {
		content: "";
		position: absolute;
		width: 11px;
		height: 11px;
		background: #515c84;
		border-radius: 50%;
		bottom: calc(100% + calc(var(--top, 40px) - 7px));
		left: -5px;
	}
	.timeline-row:nth-child(2n+1) .timeline-event-link::after {
		right: -5px;
		left: auto;
	}
	
	.timeline-event-link {
		display: block;
		padding: 10px;
		position: relative;
		z-index: 10;
		color: #ccc;
		text-decoration: none;
		background: #515c84;
	}
	
	.timeline-event-link:hover {
		color: #fff;
		z-index: 67;
	}
	
	.timeline-event-link.current {
		background: #253365;
		z-index: 67;
	}
	.timeline-event-link.current::before, .timeline-event-link.current::after {
		background: #253365;
	}
	.timeline-event h4 {
		margin: 0;
	}
	
	/** TIMELINE LINES **/ 
	
	.timeline-row .horizontal-line {
		border-top: 1px solid #666666;
		width: calc(100% - 150px);
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%,0%);
	}
	
	.timeline-row .vertical-line { 
		margin: 0;
		padding: 0;
		width: 2px;
		border-right: 1px solid #666666;
		height: calc(100% - 150px);
		position: absolute;
		top: 0;
		right: 0;
		margin: auto 0; 
		bottom: 0;
	} 
	
	.timeline-row:nth-child(2n+1) .vertical-line {
		border-left: 1px solid #666666;
		border-right: 0;
		left: 0;
		right: inherit;
		
	}
	
	.corner { 
		position: absolute;
		border-right: 1px solid #666666;
		width: 76px;
		height: 76px;
		right: 0;
		border-top: 1px solid #666666;
		top: 74.9px;
		border-radius: 0 70px 0 0;
		top: 0;
	}
	.corner.bottom { 
		bottom: -76px;
		top: inherit;
		border-radius: 0;
		border-top: 0;
		border-bottom: 1px solid #666666;
		border-radius: 0 0 70px 0;
		right: 0;
		z-index: 1;
		bottom: -1px;
	}
	
	.timeline-row:nth-child(2n+1) .corner {
		right: inherit;
		left: 0;
		border-left: 1px solid #666666;
		border-right: 0;
		border-radius: 70px 0 0 0; 
	}
	.timeline-row:nth-child(2n+1) .corner.bottom {
		border-radius: 0 0 0 70px;
	}
}