/* --------------- Menu Services --------------- */
nav#menuServices01 {
	--clip-offset-text-area: 35%;
	--clip-top-skew: 10%;
	--image-holder-size-factor: 0.5;
	--image-size: 100%;
	margin-left: var(--page-margin);
	margin-right: var(--page-margin);
	margin-top: var(--gap);
}
nav#menuServices01 ul {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: 1fr 1fr;
	list-style: none;
	padding-left: 0px;
}
nav#menuServices01 li {
	--anchor-position: 0px;
	--border-radius: 30px;
	border-top-right-radius: var(--border-radius);
	height: 240px;
	position: relative;
	overflow: hidden;
}
nav#menuServices01 a:hover img.base {
	transform: scale(110%);
}
nav#menuServices01 a:hover div.overlay {
	background-color: var(--dark-gray);
}
nav#menuServices01 div.imageHolder {
	align-items: center;
	align-content: center;
	display: flex;
	height: 100%;
	left: var(--anchor-position);
	position: absolute;
	top: var(--anchor-position);
	width: calc(100% * var(--image-holder-size-factor));
}
nav#menuServices01 img {
	height: var(--image-size);
	object-fit: cover;
	object-position: 45% center;
	position: absolute;
	transition: transform 0.25s;
	width: var(--image-size);
}
nav#menuServices01 img.overlay {
	--clip-offset: calc(var(--clip-offset-text-area) / var(--image-holder-size-factor));
	clip-path: polygon(calc(var(--clip-offset) + calc(var(--clip-top-skew) / var(--image-holder-size-factor))) 0%, 100% 0%, 100% 100%, var(--clip-offset) 100%);
	filter: grayscale(100%) contrast(110%);
}
nav#menuServices01 div.textArea {
	background-color: var(--blue-overlay);
	clip-path: polygon(calc(var(--clip-offset-text-area) + var(--clip-top-skew)) 0%, 100% 0%, 100% 100%, var(--clip-offset-text-area) 100%);
	color: #FFFFFF;
	height: var(--image-size);
	left: var(--anchor-position);
	position: absolute;
	top: var(--anchor-position);
	width: var(--image-size);
}
nav#menuServices01 div.overlay {
	--clip-offset: 40%;
	align-items: center;
	background-color: var(--blue-01);
	clip-path: polygon(calc(var(--clip-offset) + var(--clip-top-skew)) 0%, 100% 0%, 100% 100%, var(--clip-offset) 100%);
	display: flex;
	height: var(--image-size);
	left: var(--anchor-position);
	position: absolute;
	top: var(--anchor-position);
	transition: background-color 0.25s;
	width: var(--image-size);
}
nav#menuServices01 *.serviceTitle {
	font-family: var(--font-gotham);
	font-size: 18px;
	font-weight: normal;
	line-height: 25px;
	margin-bottom: 0px;
	margin-left: calc(var(--clip-offset) + var(--clip-top-skew) + calc(var(--gap) / 2));
	margin-right: var(--gap);
}

/* ------------------------------ */
@media all and (max-width: 1369px) {
/* --------------- Menu Services --------------- */
nav#menuServices01 li {
	height: 160px;
}
nav#menuServices01 *.serviceTitle {
	font-size: 14px;
	line-height: 20px;
}
}

/* ------------------------------ */
@media all and (max-width: 1079px) {
/* --------------- Menu Services --------------- */
nav#menuServices01 ul {
	grid-template-columns: auto;
}
}

/* ------------------------------ */
@media all and (max-width: 769px) {
/* --------------- Menu Services --------------- */
nav#menuServices01 li {
	--border-radius: 20px;
	height: 160px;
}
nav#menuServices01 div.overlay {
	--clip-offset: 30%;
}
}