#main { position: relative; }
#main:before {
	content: "";
	position: absolute; top: 0; left: min(-45px, calc(((100vw - 100px - 1290px + 90px) / 2) * -1)); z-index: -1;
	display: block;
	
	background-color: #136064;
}
#main > .avatar {
	display: block; overflow: hidden;
	
	background-position: top center;
	background-size: cover;
}
#main > .avatar:before {
	content: '';
	display: block;
}
#main > .content-wrapper { position: relative; z-index: 1; }
#main > .content-wrapper > main {}
@media (min-width: 1200px) {
	#main { padding-top: 200px; }
	#main:before {
		right: 50%; bottom: 0;
		max-height: 1080px;
	}
	#main > .avatar {
		position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 0;
		max-width: 575px; max-height: 745px; width: 40%;
	}
	#main > .avatar:before { padding-top: 130%; }
}
@media (max-width: 1199.99px) {
	#main { padding-top: 100px; }
	#main:before {
		right: -45px;
		padding-top: 170%;
	}
	#main > .avatar {
		margin-left: calc((100% + (45px * 3)) * .2);
	}
	#main > .avatar:before { padding-top: 100%; }
}

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

@media (min-width: 1200px) {
	#main > .content-wrapper > main > .breadcrumbs { margin-bottom: 300px; }
	#main > .content-wrapper > main > .breadcrumbs > .cta-link {
		text-transform: capitalize;
		color: #47B0B5;
	}
	#main > .content-wrapper > main > .breadcrumbs > .cta-link:not(:first-child) { margin-left: 25px; }
}
@media (max-width: 1199.99px) {
	#main > .content-wrapper > main > .breadcrumbs { display: none; }
}

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

@media (min-width: 1200px) {
	#main > .content-wrapper > main > .controls {
		display: flex; height: 24px;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-left: 45px;
		margin-bottom: 40px;
		margin-left: calc(50% + min((100vw - 100px) * 0.2, 575px / 2));
	}
	#main > .content-wrapper > main > .controls > .control {
		position: relative;
		cursor: pointer;

		transition: opacity .2s ease-out;
	}
	#main > .content-wrapper > main > .controls > .control:before {
		content: attr(data-label);

		text-transform: uppercase;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 2px;
		color: #000; transition: color .2s ease-out;
	}
	#main > .content-wrapper > main > .controls > .control:after {
		content: "";
		position: absolute; top: 50%;
		display: block; height: 24px; width: 13px;

		background-color: #000; transition: background-color .2s ease-out;
		-webkit-mask: url("../../images/icons/arrow.simple.svg") no-repeat 50% 50%;
		mask: url("../../images/icons/arrow.simple.svg") no-repeat 50% 50%;
		-webkit-mask-size: contain;
		mask-size: contain;
	}
	#main > .content-wrapper > main > .controls > .control:hover:before { color: #E45C4A; }
	#main > .content-wrapper > main > .controls > .control:hover:after { background-color: #E45C4A; }
	#main > .content-wrapper > main > .controls > .control.prev-btn { padding-left: 25px; }
	#main > .content-wrapper > main > .controls > .control.prev-btn:after { left: 0; transform: translateY(-50%); }
	#main > .content-wrapper > main > .controls > .control.next-btn { padding-right: 25px; }
	#main > .content-wrapper > main > .controls > .control.next-btn:after { right: 0; transform: translateY(-50%) rotate(180deg); }
	#main > .content-wrapper > main > .controls > .control:not([href]) {
		pointer-events: none;
		opacity: .25;
	}
}
@media (max-width: 1199.99px) {
	#main > .content-wrapper > main > .controls { display: none; }
}

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

#main > .content-wrapper > main > .body { position: relative; }
@media (min-width: 1200px)	  {
	#main > .content-wrapper > main > .body {
		padding-top: 70px;
		padding-bottom: 310px;
		padding-left: 70px;
		margin-left: 30%;
	}
}
@media (max-width: 1199.99px) {
	#main > .content-wrapper > main > .body {
		padding-top: 45px;
		padding-bottom: 45px;
		padding-left: 45px;
		margin-left: 20%;
	}
}
#main > .content-wrapper > main> .body:before {
	content: "";
	position: absolute; top: 0; right: min(-45px, calc(((100vw - 100px - 1290px + 90px) / 2) * -1)); bottom: 0; left: 0; z-index: -1;
	display: block;
	
	background-color: #F6F8F8;
}
#main > .content-wrapper > main > .body > .complex-title {}
@media (min-width: 1200px)	  { #main > .content-wrapper > main > .body > .complex-title { margin-bottom: 50px; } }
@media (max-width: 1199.99px) { #main > .content-wrapper > main > .body > .complex-title { margin-bottom: 10px; } }
#main > .content-wrapper > main > .body > .role {
	margin-bottom: 40px;
	
	font-weight: 600;
	color: #207175;
}
@media (min-width: 1200px)	  { #main > .content-wrapper > main > .body > .role { font-size: 18px; } }
@media (max-width: 1199.99px) { #main > .content-wrapper > main > .body > .role { font-size: 15px; } }
#main > .content-wrapper > main > .body > .contact {
	display: flex;
	flex-direction: row;
	margin-bottom: 40px;
}
@media (min-width: 1200px)	  { #main > .content-wrapper > main > .body > .contact { column-gap: 35px; } }
@media (max-width: 1199.99px) { #main > .content-wrapper > main > .body > .contact { column-gap: 15px; } }
#main > .content-wrapper > main > .body > .contact > a {
	position: relative;
	display: block; max-width: 20px; overflow: hidden;
	padding-left: 20px;
	
	white-space: nowrap;
	line-height: 20px;
	font-size: 14px;
	color: #136064;
	
	transition:
		max-width .6s ease-out,
		color 	  .6s ease-out;
}
#main > .content-wrapper > main > .body > .contact > a.twitter,
#main > .content-wrapper > main > .body > .contact > a.linkedin { max-width: 20px !important; }
#main > .content-wrapper > main > .body > .contact > a > span { padding-left: 15px; }
#main > .content-wrapper > main > .body > .contact > a:hover { color: #E45C4A; }
@media (min-width: 1200px)	  { #main > .content-wrapper > main > .body > .contact > a:hover { max-width: 350px; } }
#main > .content-wrapper > main > .body > .contact > a:before {
	content: '';
	position: absolute; top: 0; left: 0; bottom: 0;
	display: block; height: 20px; width: 20px;
	
	background-color: currentColor;
	
	-webkit-mask-size: 15px !important;
	mask-size: 15px !important;
}
#main > .content-wrapper > main > .body > .contact > a.email:before {
	-webkit-mask: url("../../images/icons/mail.svg") no-repeat 50% 50%;
	mask: url("../../images/icons/mail.svg") no-repeat 50% 50%;
}
#main > .content-wrapper > main > .body > .contact > a.phone:before {
	-webkit-mask: url("../../images/icons/phone.svg") no-repeat 50% 50%;
	mask: url("../../images/icons/phone.svg") no-repeat 50% 50%;
}
#main > .content-wrapper > main > .body > .contact > a.twitter:before {
	-webkit-mask: url("../../images/social/twitter.svg") no-repeat 50% 50%;
	mask: url("../../images/social/twitter.svg") no-repeat 50% 50%;
}
#main > .content-wrapper > main > .body > .contact > a.linkedin:before {
	-webkit-mask: url("../../images/social/linkedin.svg") no-repeat 50% 50%;
	mask: url("../../images/social/linkedin.svg") no-repeat 50% 50%;
}
#main > .content-wrapper > main > .body > .bio { line-height: 200%; }
@media (min-width: 1200px)	  { #main > .content-wrapper > main > .body > .bio { font-size: 16px; } }
@media (max-width: 1199.99px) { #main > .content-wrapper > main > .body > .bio { font-size: 14px; } }
#main > .content-wrapper > main > .body > .bio > * { margin: 0 0 30px; }
#main > .content-wrapper > main > .body > .bio > :last-child { margin: 0; }
#main > .content-wrapper > main > .body > .bio > h2 { font-weight: 600; }
@media (min-width: 1200px)	  { #main > .content-wrapper > main > .body > .bio > h2 { font-size: 18px; } }
@media (max-width: 1199.99px) { #main > .content-wrapper > main > .body > .bio > h2 { font-size: 15px; } }
#main > .content-wrapper > main > .body > .bio > ul {
	list-style: none;
	padding: 0;
}
#main > .content-wrapper > main > .body > .bio > ul > li {
	position: relative;
	padding-left: 20px;
}
#main > .content-wrapper > main > .body > .bio > ul > li:before {
	content: '';
	position: absolute; top: 10px; left: 0; transform: translateX(-50%);
	display: block; height: 8px; width: 8px;
	
	background-color: #E45C4A;
	border-radius: 50%;
}