.service-sub-page{
	display: block;
	position: relative;
	text-decoration: none !important;
	text-transform: uppercase;
	color:black;
	text-decoration: none !important;
	transition: all var(--dur);
	-moz-transition: all var(--dur);
	-webkit-transition: all var(--dur);
	font-family: var(--font-extra-bold);
}
.service-sub-page:hover{
	color: var(--color-main)
}
.service-sub-page img{width: 100%}
.service-sub-page-name-hover{font-family: var(--font-bold); font-size: 65%;display: inline-block;height: 0;overflow: hidden;padding-bottom: 0; position: relative; color:black; margin-top: 0}
.service-sub-page-name-hover:after{
	content: "";
	width: 0;
	height: 3px;
	background: var(--color-main);
	position: absolute;
	bottom: 0;
	left: 0;
	transition: all var(--dur);
	-moz-transition: all var(--dur);
	-webkit-transition: all var(--dur);
}
.service-sub-page:hover .service-sub-page-name-hover{
	display: inline-block;
	height: auto;
	padding-bottom: 5px;
}

.service-sub-page:hover .service-sub-page-name-hover:after{
	width: 100%
}

.service-sub-page-name{
	background: #f2f1f2;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 40%;
	min-width: 250px;
	padding: 31px 0  6px 35px;
} 

.service-sub-page-name-text{
	font-size: 85%;
}

.service-sub-page:hover .service-sub-page-name-text{
	margin-bottom: 8px;
}

@media(max-width: 550px){
	.service-sub-page-name{padding: 10px 0 10px 10px; font-size: 80%; min-width: 50%}
	.service-sub-page-name-hover{display: none !important}
}