#fields {
	position: relative;
	margin-top: 170px;
}

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

#fields > .background {
	position: absolute; top: 0; left: 0; right: 0; z-index: -1;
	display: block;
	
	background-position: center;
	background-size: cover;
}
@media (min-width: 900px)	 { #fields > .background { height: 700px; } }
@media (max-width: 899.99px) { #fields > .background { height: 500px; } }

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

#fields > .content-wrapper {}
@media (min-width: 900px) {
	#fields > .content-wrapper {
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-start;
		padding-top: 500px;
	}
}
@media (max-width: 899.99px) {
	#fields > .content-wrapper {
		padding-top: 300px;
	}
}

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

#fields > .content-wrapper > div { position: relative; }
@media (min-width: 900px) {
	#fields > .content-wrapper > div {
		flex: 0 0 50%;
		padding: 70px 70px 85px;
	}
}
@media (max-width: 899.99px) {
	#fields > .content-wrapper > div {
		padding: 45px 45px 60px;
	}
}
#fields > .content-wrapper > div:before {
	content: "";
	position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
}
#fields > .content-wrapper > div > .complex-title { margin-bottom: 45px; }
#fields > .content-wrapper > div > .crosslinks {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	grid-row-gap: 10px;
}
@media (min-width: 600px) { #fields > .content-wrapper > div > .crosslinks { padding-left: 45px; } }
@media (max-width: 599.99px) {}
#fields > .content-wrapper > div > .crosslinks > .crosslink {
	position: relative;
	display: block; max-width: max-content;
	padding-left: 20px;
	
	transition:
		padding-left .2s ease-out,
		color 	 	 .2s ease-out;
}
#fields > .content-wrapper > div > .crosslinks > .crosslink:before {
	content: "";
	position: absolute; top: 10px; left: 1px; transform: translateY(-50%);
	display: block; height: 7px; width: 7px;
	
	border-radius: 50%;
}
#fields > .content-wrapper > div > .crosslinks > .crosslink:hover {
	padding-left: 50px;
	color: #E45C4A;
}

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

#fields > .content-wrapper > .expertises {
	padding-right: 0 !important;
	color: #FFF;
}
#fields > .content-wrapper > .expertises:before {
	right: min(-45px, calc(((100vw - 100px - 1290px + 90px) / 2) * -1));
	background-color: #207175;
}
@media (min-width: 900px) { #fields > .content-wrapper > .expertises { min-height: 300px; } }
@media (max-width: 899.99px) { #fields > .content-wrapper > .expertises { margin-left: 20%; } }
#fields > .content-wrapper > .expertises > .crosslinks > .crosslink { color: #FFF; }
#fields > .content-wrapper > .expertises > .crosslinks > .crosslink:before { background-color: #FFF; }

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

#fields > .content-wrapper > .profiles {
	padding-left: 0 !important;
}
#fields > .content-wrapper > .profiles:before {
	left: min(-45px, calc(((100vw - 100px - 1290px + 90px) / 2) * -1));
	background-color: #FFF;
}
@media (min-width: 900px) { #fields > .content-wrapper > .profiles:not(:only-child) { margin-top: 200px; } }
@media (max-width: 899.99px) { #fields > .content-wrapper > .profiles { margin-right: 20%; } }
#fields > .content-wrapper > .profiles > .crosslinks > .crosslink { color: #000; }
#fields > .content-wrapper > .profiles > .crosslinks > .crosslink:before { background-color: #207175; }