/* Services */

.services {}

.services picture {
	margin-bottom: 1.5em;
}

.services header {}

.services header p {
	max-width: var(--thin-width);
	margin-left: auto;
	margin-right: auto;
}

.services ul {
	margin: calc(var(--vertical-spacing) * 0.3) -0.889rem -0.889rem;
}

.services li {
	padding: 0.889rem;
}

.services li a {
	overflow: hidden;
	padding: 1em 0.722em;
	color: rgb(var(--white));
}

.services li svg:first-child {
	position: absolute;
}

.services li svg:nth-child(2) {
	position: relative;
	font-size: 2.222em;
	margin-bottom: 0.1em;
	top: 10%;
	transform-origin: 50% 0;
	transform: scale(2);
	transition: transform 0.3s ease, top 0.3s ease;
}

.services li a:hover svg:nth-child(2), 
.services li a:focus svg:nth-child(2) {
	top: 0;
	transform: scale(1);
}

.services li h3 {
	position: relative;
	margin: 0;
	line-height: 1.1;
	max-width: 6em;
	color: inherit;
	font-weight: 900;
	top: 32%;
	transition: top 0.3s ease;
}

.services li a:hover h3, 
.services li a:focus h3 {
	top: 0;
}

.services li p {
	position: relative;
	margin: 0.25em 0;
	line-height: 1.3;
	font-size: 0.833em;
	transform: translateY(0.75em);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.services li a:hover p, 
.services li a:focus p {
	transform: translateY(0);
	opacity: 1;
}

.services li svg:last-child {
	position: relative;
	margin-top: auto;
	font-size: 1.222em;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.services li a:hover svg:last-child, 
.services li a:focus svg:last-child {
	opacity: 1;
}

/* Services */

/* Services [CTA Variations] */

.services li:nth-child(5n + 1) a {
	background-color: rgb(var(--plum));
}

.services li:nth-child(5n + 1) svg:first-child {
	color: rgb(var(--magenta));
	top: 50%;
	transform: translateY(-50%);
	left: 10%;
	font-size: 16em;
}

.services li:nth-child(5n + 2) a {
	background-color: rgb(var(--magenta));
}

.services li:nth-child(5n + 2) svg:first-child {
	color: rgb(var(--red));
	top: 50%;
	transform: translateY(-30%);
	left: 21%;
	font-size: 13.5em;
}

.services li:nth-child(5n + 3) a {
	background-color: rgb(var(--red));
}

.services li:nth-child(5n + 3) svg:first-child {
	color: rgb(var(--red-orange));
	top: 50%;
	transform: translateY(-50%);
	left: 40%;
	font-size: 16em;
}

.services li:nth-child(5n + 4) a {
	background-color: rgb(var(--red-orange));
}

.services li:nth-child(5n + 4) svg:first-child {
	color: rgb(var(--orange));
	top: 0;
	transform: translateY(-40%);
	left: 15%;
	font-size: 13em;
}

.services li:nth-child(5n + 5) a {
	background-color: rgb(var(--orange));
	text-shadow: 0 0 0.333rem rgb(var(--red-orange));
}

.services li:nth-child(5n + 5) svg:first-child {
	color: rgb(var(--yellow-orange));
	top: 50%;
	transform: translateY(-45%);
	left: -55%;
	font-size: 20em;
}

/* Services [CTA Variations] */

/* Responsive [1440px] */

@media screen and (max-width: 1440px) {
}

/* End Responsive [1440px] */

/* Responsive [1200px] */

@media screen and (max-width: 1200px) {
}

/* End Responsive [1200px] */

/* Responsive [1000px] */

@media screen and (max-width: 1000px) {
	.services li {
		width: 33.333%;
	}
}

/* End Responsive [1000px] */

/* Responsive [800px] */

@media screen and (max-width: 800px) {
	.services li {
		width: 50%;
	}
	
}

/* End Responsive [800px] */

/* Responsive [650px] */

@media screen and (max-width: 650px) {
}

/* End Responsive [650px] */

/* Responsive [550px] */

@media screen and (max-width: 550px) {
	.services picture {
		display: none;
		visibility: hidden;
	}
	
	.services ul {
		margin: calc(var(--vertical-spacing) * 0.15) -0.5rem -0.5rem;
	}
	
	.services li {
	    padding: 0.5rem;
	}
	
	.services li a {
		padding: 1.5em;
	}
	
	.services li a[class*='-column'] {
		flex-direction: row;
	}
	
	.services li svg:nth-child(2) {
		transform: none;
		top: auto;
		margin-right: 0.5em;
		margin-bottom: 0;
		font-size: 3em;
		flex: 0 0 auto;
	}
	
	.services li h3 {
		top: auto;
		max-width: none;
	}
	
	.services li p, 
	.services li svg:last-child {
		display: none;
		visibility: hidden;
	}
}

/* End Responsive [550px] */