.timeline {
	background-color: #1075B3;
	padding-top: calc(var(--padding) + 60px) !important;
	@media screen and (max-width: 662px) {
		padding-top: calc(var(--padding) * 3) !important;	
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 2px;
		height: 90px;
		background-color: var(--wp--preset--color--white);
		z-index: 1;
		@media screen and (max-width: 662px) {
			height: 45px;
		}
	}

	&::after {
		content: '';
		mix-blend-mode: multiply;
		background: linear-gradient(67deg, #002750 33.76%, rgba(0, 39, 80, 0.00) 88.16%);
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}


	/* & .container {
		max-width: var(--wp--style--global--wide-size) !important;
	} */


	& .bg-logo {
		height: 110%;
		object-fit: cover;
		object-position: center;
		opacity: 0.1;
		position: absolute;
		right: -225%;
		top: 50%;
		transform: translateY(-50%);
		width: auto;
		path {
			fill: var(--wp--preset--color--blue);
		}
	}


	& .title-text {
		color: var(--wp--preset--color--white);
		padding-bottom: calc(var(--padding) + 40px) !important;
		position: relative;
		text-align: center;
		* {
			margin-left: auto;
			margin-right: auto;
			max-width: 700px;
		}
		*:last-child {
			margin-bottom: 0 !important;
		}
		&::before {
			content: '';
			position: absolute;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			width: 2px;
			height: 60px;
			background-color: var(--wp--preset--color--white);
			z-index: 1;
			@media screen and (max-width: 662px) {
				bottom: 0;
				height: 30px;
			}
		}
	}

	& .footer-text {

		color: var(--wp--preset--color--white);
		margin-bottom: 0 !important;
		padding-top: calc(var(--padding) + 10px);
		position: relative;
		text-align: center;

		@media screen and (max-width: 992px) {
			padding-top: calc(var(--padding) + 40px);
		}

		@media screen and (max-width: 992px) {
			padding-top: calc(var(--padding) + 70px);
		}

		* {
			margin-left: auto;
			margin-right: auto;
			max-width: 700px;
		}


		&::before {
			content: '';
			background-color: var(--wp--preset--color--white);
			top: 0px;
			height: 60px;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 2px;
			z-index: 1;
		}
		&::after {
			content: '';
			background-color: var(--wp--preset--color--white);
			top: 48px;
			clip-path: polygon(0 0, 50% 100%, 100% 0);
			height: 12px;
			left: 50%;
			position: absolute;
			transform: translateX(-50%);
			width: 15px;
			z-index: 1;
		}

	}


	& .timeline-part {

		&:not(:last-of-type) {
			padding-bottom: 60px;
			position: relative;
			&::before {
				content: '';
				background-color: var(--wp--preset--color--white);
				bottom: 0px;
				height: 60px;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width: 2px;
				z-index: 1;
			}
			&::after {
				content: '';
				background-color: var(--wp--preset--color--white);
				bottom: -1px;
				clip-path: polygon(0 0, 50% 100%, 100% 0);
				height: 12px;
				left: 50%;
				position: absolute;
				transform: translateX(-50%);
				width: 15px;
				z-index: 1;
			}
		}

		.timeline-media-text {
			align-items: center;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			padding: 30px 0;
			position: relative;
			width: 100%;

			@media screen and (max-width: 662px) {
				grid-template-columns: 1fr;
				gap: 20px;
			}
	
			/* If the media is on the left */
			&.media-left {
				.media {
					order: 1;
					@media screen and (max-width: 662px) {
						order: 3;
					}
				}
				.text {
					justify-content: end;
					text-align: left;
					@media screen and (max-width: 662px) {
						justify-content: start;
					}
					.text-content {
						right: 60px;
						@media screen and (max-width: 662px) {
							right: 0;
						}
					}
					h2 {
						justify-self: end;
						@media screen and (max-width: 662px) {
							justify-self: start;
						}
					}
				}
			}

			/* If the media is on the right */
			&.media-right {
				.media {
					order: 3;
				}
				.text {
					justify-content: start;
					text-align: left;
					.text-content {
						left: 60px;
						@media screen and (max-width: 662px) {
							left: 0;
						}
					}
				}
			}

			/* General styles */
			.media {
				height: auto;
				width: 100%;
				position: relative;
				z-index: 0;
				img {
					height: 100%;
					object-fit: cover;
					object-position: center;
					width: 100%;
				}
				&.landscape {
					aspect-ratio: 16 / 9;
				}
			}
			.text {
				align-items: center;
				display: flex;
				position: relative;
				order: 2;
				z-index: 1;
				
				.text-content {
					position: relative;
					h2 {
						color: var(--wp--preset--color--white);
						margin-bottom: 10px;
					}
					p {
						color: var(--wp--preset--color--white);
					}
					* {
						color: var(--wp--preset--color--white);
					}
					> *:last-child {
						margin-bottom: 0;
					}
				}

			}
	
		} /* .timeline-media-text */

	} /* .timeline-part */


	.wp-block-buttons {
		margin-top: 80px;
		margin-bottom: 40px;

		.wp-block-button__link {
			border: 2px solid var(--wp--preset--color--blue);
			&:hover {
				border: 2px solid var(--wp--preset--color--white);
				background-color: transparent !important;
				color: var(--wp--preset--color--white) !important;
			}
		}

	}


} /* .timeline */