#timeline {}
@media (min-width: 900px) {
	#timeline { margin-bottom: 210px; }
}
@media (max-width: 899.99px) {
	#timeline { margin-bottom: 70px; }
}

/*--------------------------------------------------------------------------------*/

#timeline > .events { overflow: visible; }
#timeline > .events .event {}
#timeline > .events .event > .content-wrapper {}
#timeline > .events .event > .content-wrapper > .date {
	margin-bottom: 10px;
	text-align: center;
}
#timeline > .events .event > .content-wrapper > .date > .icon {
	display: inline-block;
	margin: -10px 20px 0 0;
	
	background-color: #FF640B;
	border-radius: 50%;
	
	vertical-align: middle;
}
#timeline > .events .event > .content-wrapper > .date > .icon > img {
	height: 100%; width: 100%;
	
	object-fit: contain;
	object-position: center;
}
#timeline > .events .event > .content-wrapper > .date > .label {
	font-family: "Stretch Pro";
}
#timeline > .events .event > .content-wrapper > .title {
	margin-bottom: 50px;
	
	text-align: center;
	font-family: "Stretch Pro";
}
#timeline > .events .event > .content-wrapper > .illustrations {
	position: relative;
	display: flex;
}
#timeline > .events .event > .content-wrapper > .illustrations > .illustration {
	position: relative;
	overflow: hidden;
	
	border-radius: 30px;
	
	transition:
		margin	  .4s ease-out,
		transform .4s ease-out;
	
	isolation: isolate;
}
#timeline > .events .event.type-1 > .content-wrapper > .illustrations > .illustration:nth-child(2) { z-index: 1; }
#timeline > .events .event.type-2 > .content-wrapper > .illustrations > .illustration:nth-child(1) { z-index: 1; }
#timeline > .events .event.type-3 > .content-wrapper > .illustrations > .illustration:nth-child(1) { z-index: 1; }
#timeline > .events .event.type-3 > .content-wrapper > .illustrations > .illustration:nth-child(3) { z-index: 1; }
#timeline > .events .event > .content-wrapper > .illustrations > .illustration > img,
#timeline > .events .event > .content-wrapper > .illustrations > .illustration > video {
	height: 100%; width: 100%;
	
	object-fit: cover;
	object-position: center;
}
#timeline > .events .event > .content-wrapper > .description {
	line-height: 20px;
	font-size: 13px;
	font-weight: 500;
}

@media (min-width: 900px) {
	#timeline > .events .event > .content-wrapper > .date > .icon {
		height: 45px; width: 45px;
		padding: 10px;
	}
	#timeline > .events .event > .content-wrapper > .date > .label { font-size: 18px; }
	#timeline > .events .event > .content-wrapper > .title { font-size: 26px; }
	
	#timeline > .events .event > .content-wrapper > .illustrations {
		height: 370px;
		flex-direction: row;
		justify-content: center;
	}
	
	#timeline > .events .event.type-1 > .content-wrapper > .illustrations {
		align-items: flex-end;
	}
	#timeline > .events .event.type-1 > .content-wrapper > .illustrations > .illustration:nth-child(1) {
		height: 370px; max-width: 665px; flex: 1;
	}
	#timeline > .events .event.type-1 > .content-wrapper > .illustrations > .illustration:nth-child(2) {
		z-index: 1;
		margin: 0 0 -70px -70px;
		height: 320px; width: 360px; flex-grow: 0; flex-shrink: 0;
	}

	#timeline > .events .event.type-2 > .content-wrapper > .illustrations { align-items: flex-start; }
	#timeline > .events .event.type-2 > .content-wrapper > .illustrations > .illustration:nth-child(1) {
		z-index: 1;
		height: 260px; width: 290px; flex-grow: 0; flex-shrink: 0;
		margin: 20px -10px 0 0;
	}
	#timeline > .events .event.type-2 > .content-wrapper > .illustrations > .illustration:nth-child(2) {
		height: 370px; max-width: 665px; flex: 1;
	}

	#timeline > .events .event.type-3 > .content-wrapper > .illustrations { align-items: flex-end; }
	#timeline > .events .event.type-3 > .content-wrapper > .illustrations > .illustration:nth-child(1) {
		z-index: 1;
		width: 300px; height: 265px; flex-grow: 0; flex-shrink: 0;
	}
	#timeline > .events .event.type-3 > .content-wrapper > .illustrations > .illustration:nth-child(2) {
		height: 370px; max-width: 665px; flex: 1;
	}
	#timeline > .events .event.type-3 > .content-wrapper > .illustrations > .illustration:nth-child(3) {
		z-index: 1;
		width: 220px; height: 250px; flex-grow: 0; flex-shrink: 0;
		margin: 0 0 -90px -35px;
	}
	@media (min-width: 1300px) {
		#timeline > .events .event.type-1 > .content-wrapper > .illustrations > .illustration:nth-child(2) {
			margin: 0 0 -70px -70px;
		}
		
		#timeline > .events .event.type-2 > .content-wrapper > .illustrations > .illustration:nth-child(1) {
			transform: rotate(-10deg);
			margin: 20px -10px 0 0;
		}
		
		#timeline > .events .event.type-3 > .content-wrapper > .illustrations > .illustration:nth-child(1) {
			transform: rotate(12.5deg);
		}
		#timeline > .events .event.type-3 > .content-wrapper > .illustrations > .illustration:nth-child(3) {
			transform: rotate(-20deg);
			margin: 0 0 -90px -35px;
		}
		
	}
	@media (max-width: 1299.99px) {
		#timeline > .events .event.type-1 > .content-wrapper > .illustrations > .illustration:nth-child(2) { margin: 0 0 -35px -70px; }
		#timeline > .events .event.type-2 > .content-wrapper > .illustrations > .illustration:nth-child(1) { margin: 35px -70px 0 0; }
		#timeline > .events .event.type-3 > .content-wrapper > .illustrations > .illustration:nth-child(1) { margin: 0 -70px -30px 0; }
		#timeline > .events .event.type-3 > .content-wrapper > .illustrations > .illustration:nth-child(3) { margin: 0 0 -70px -70px; }
	}
	
	#timeline > .events .event > .content-wrapper > .illustrations > .hook {
		position: absolute; z-index: 1;
		max-width: 150px;
		
		text-align: left;
		font-family: "Stretch Pro";
		font-size: 13px;
		
		pointer-events: none;
		
		transition: top .4s ease-out;
	}
	#timeline > .events .event > .content-wrapper > .illustrations > .hook:before {
		content: '';
		position: absolute;
		display: block; height: 100px; width: 100px;
		
		background-image: url("../../images/arrow.gif");
		background-size: contain;
		background-repeat: no-repeat;
	}
	
	
	@media (min-width: 1300px)	  { #timeline > .events .event.type-1 > .content-wrapper > .illustrations > .hook { top: 40px; } }
	@media (max-width: 1299.99px) { #timeline > .events .event.type-1 > .content-wrapper > .illustrations > .hook { top: 5px; } }
	#timeline > .events .event.type-1 > .content-wrapper > .illustrations > .hook:before { bottom: -30px; left: -90px; transform: scaleY(-1) rotate(165deg); }
	@media (min-width: 1055px)	  { #timeline > .events .event.type-1 > .content-wrapper > .illustrations > .hook { left: calc(50% + 280px); } }
	@media (max-width: 1054.99px) { #timeline > .events .event.type-1 > .content-wrapper > .illustrations > .hook { left: calc(100% - 195px); } }
	
	#timeline > .events .event.type-2 > .content-wrapper > .illustrations > .hook { bottom: -75px; }
	#timeline > .events .event.type-2 > .content-wrapper > .illustrations > .hook:before { bottom: -35px; left: -90px; transform: rotate(150deg); }
	@media (min-width: 985px)	  { #timeline > .events .event.type-2 > .content-wrapper > .illustrations > .hook { left: calc(50% + 295px); } }
	@media (max-width: 984.99px)  { #timeline > .events .event.type-2 > .content-wrapper > .illustrations > .hook { left: calc(100% - 145px); } }
	
	@media (min-width: 1300px)	  { #timeline > .events .event.type-3 > .content-wrapper > .illustrations > .hook { top: 10px; } }
	@media (max-width: 1299.99px) { #timeline > .events .event.type-3 > .content-wrapper > .illustrations > .hook { top: 60px; } }
	#timeline > .events .event.type-3 > .content-wrapper > .illustrations > .hook:before { bottom: -40px; left: -90px; transform: scaleY(-1) rotate(160deg); }
	@media (min-width: 1145px)	  { #timeline > .events .event.type-3 > .content-wrapper > .illustrations > .hook { left: calc(50% - 450px); } }
	@media (max-width: 1144.99px) { #timeline > .events .event.type-3 > .content-wrapper > .illustrations > .hook { left: 73px; } }
	
	#timeline > .events .event > .content-wrapper > .description { max-width: 520px; }
	#timeline > .events .event.type-1 > .content-wrapper > .description { margin: 40px 0 0 max(0px, min(150px, (100vw - 1000px) / 2)); }
	#timeline > .events .event.type-2 > .content-wrapper > .description { margin: 40px 0 0 max(0px, min(150px, (100vw -  900px) / 2)); }
	#timeline > .events .event.type-3 > .content-wrapper > .description { margin: 70px 0 0 max(0px, min(150px, (100vw -  900px) / 2)); }
	@media (min-width: 1000px) {
	}
	@media (max-width: 999.99px) {
		#timeline > .events .event.type-1 > .content-wrapper > .description { max-width: calc(100% - 420px); }
	}
}
@media (max-width: 899.99px) {
	#timeline > .events .event > .content-wrapper > .date > .icon {
		height: 35px; width: 35px;
		padding: 7px;
	}
	#timeline > .events .event > .content-wrapper > .date > .label { font-size: 16px; }
	#timeline > .events .event > .content-wrapper > .title { font-size: 20px; }
	
	#timeline > .events .event > .content-wrapper > .illustrations { flex-direction: column; }
	
	#timeline > .events .event.type-1 > .content-wrapper > .illustrations > .illustration:nth-child(1) {
		flex: 0 0 475px;
	}
	#timeline > .events .event.type-1 > .content-wrapper > .illustrations > .illustration:nth-child(2) {
		align-self: flex-end;
		flex: 0 0 250px; width: 250px;
		margin-top: -50px;
	}
	
	#timeline > .events .event.type-2 > .content-wrapper > .illustrations > .illustration:nth-child(1) {
		align-self: flex-start;
		flex: 0 0 250px; width: 250px;
		margin-bottom: -50px;
	}
	#timeline > .events .event.type-2 > .content-wrapper > .illustrations > .illustration:nth-child(2) {
		flex: 0 0 475px;
	}
	
	#timeline > .events .event.type-3 > .content-wrapper > .illustrations > .illustration:nth-child(1) {
		align-self: flex-start;
		flex: 0 0 250px; width: 250px;
		margin-bottom: -50px;
	}
	#timeline > .events .event.type-3 > .content-wrapper > .illustrations > .illustration:nth-child(2) {
		flex: 0 0 375px;
	}
	#timeline > .events .event.type-3 > .content-wrapper > .illustrations > .illustration:nth-child(3) {
		align-self: flex-end;
		flex: 0 0 250px; width: 250px;
		margin-top: -50px;
	}
	
	#timeline > .events .event > .content-wrapper > .illustrations > .hook { display: none; }
	
	#timeline > .events .event > .content-wrapper > .description {
		max-width: 520px;
		margin-top: 40px;
	}
}

/*--------------------------------------------------------------------------------*/

#timeline > .pagination {
	overflow: visible;
	margin-top: 50px;
}
@media (min-width: 900px) {
	@media (min-width: 1300px)	  { #timeline > .pagination { padding: 0 max(50px, ((100% - 1200px) / 2)); } }
	@media (max-width: 1299.99px) { #timeline > .pagination { padding: 0 50px; } }
}
@media (max-width: 899.99px)  { #timeline > .pagination { padding: 0 25px; } }

#timeline > .pagination:before {
	content: '';
	position: absolute; top: 3px; left: 0;
	display: block; height: 4px; width: 100%;
	
	background-color: #E8E8E8;
	
	pointer-events: none;
}
#timeline > .pagination .bullet {
	width: 45px;
}
#timeline > .pagination .bullet:before {
	content: '';
	display: block; height: 10px; width: 10px;
	margin: 0 auto 10px;
	
	background-color: #DFDFDF; transition: background-color .4s ease-out;
	border-radius: 50%;
}
#timeline > .pagination .bullet > .icon {
	height: 45px; width: 45px;
	padding: 10px;
	
	background-color: #DFDFDF; transition: background-color .4s ease-out;
	border-radius: 50%;
}
#timeline > .pagination .bullet > .icon > img {
	height: 100%; width: 100%;
	
	object-fit: contain;
	object-position: center;
}
#timeline > .pagination .bullet.swiper-slide-thumb-active:before,
#timeline > .pagination .bullet.swiper-slide-thumb-active > .icon { background-color: #FF640B; }

@media (min-width: 900px) {
	#timeline > .pagination > .cta {
		position: absolute; bottom: -75px; left: max(200px, ((100% - 1200px) / 2) + 150px); z-index: 1;
		
		text-align: left;
		font-family: "Stretch Pro";
		font-size: 15px;
		
		pointer-events: none;
	}
	#timeline > .pagination > .cta:before {
		content: '';
		position: absolute; bottom: -40px; left: -90px; transform: rotate(150deg);
		display: block; height: 100px; width: 100px;
		
		background-image: url("../../images/arrow.gif");
		background-size: contain;
		background-repeat: no-repeat;
	}
}
@media (max-width: 899.99px) {
	#timeline > .pagination > .cta { display: none; }
}