.small-banners
{
	width: 100%;
	float: left;
	clear: both;
	padding: 0 0 50px 0;
}
	/*FEB 2023 */
	.small-banners.special-home-only
	{
		padding: 40px 0 0px 0;
		margin-bottom: -20px;
	}
.small-banners a
{
	box-sizing: border-box;
	display: block;
	text-decoration: none;
	width: 33.32%;
	float: left;
	border-bottom: solid 18px #fff;
	
	/* APRIL2022 added this: */
	background-image: url(images/banner-arrow.png) !important;
	background-repeat: no-repeat !important;
	background-position: 94% 89% !important;
	background-size: 13px 22px !important;
}
	/* APRIL2022 added: */
	.small-banners.not-page-with-long-text-small-banners a,
	.small-banners.special-home-only a.electrostatic-service, /* added FEB2023: */
	.small-banners.special-home-only a.gutter-service, /* added FEB2023: */
	.small-banners.special-home-only a.window-service /* added FEB2023: */
	{
		min-height: 285px;
	}
	@media screen and (max-width:870px)
	{
		.small-banners.not-page-with-long-text-small-banners a
		{
			min-height: 350px;
		}
	}

@media screen and (max-width:1010px)
{
	/*FEB 2023 */
	.small-banners.special-home-only
	{
		padding-bottom: 10px;
		margin-bottom: 0;
	}

	.small-banners a
	{
		background-position: 94% 94% !important;
	}
}

.small-banners a:hover
{
	opacity: 0.95;
}
.small-banners a img
{
	display: block;
	width: 100%;
	height: 167px !important; /* APRIL2022 was 240px */
	max-width: inherit !important;
	padding: 0 !important;
	object-fit: cover;
	object-position: top left;
}
.small-banners a span
{
	box-sizing: border-box;
	color: #fff;
	font-size: 19px;
	display: block;
	width: 92%; /* APRIL2022 was 100% */
	padding: 10px 10px 1px 20px;
	font-weight: 500;
	line-height: normal;
}
.small-banners a span.small-banner-info
{
	font-weight: 400;
	padding: 1px 10px 10px 20px;
}

/* ----------------------------------------------------------------------------------------------------------------
gaps:
------------------------------------------------------------------------------------------------------------------- */
.small-banners a.banner1
{
	border-right: solid 12px #fff;
}
.small-banners a.banner2
{
	border-left: solid 6px #fff;
	border-right: solid 6px #fff;
}
.small-banners a.banner3
{
	border-left: solid 12px #fff;
}


/* ----------------------------------------------------------------------------------------------------------------
customise focal point of specific small-banner images:
------------------------------------------------------------------------------------------------------------------- */
.small-banners a.electrostatic-service img
{
	object-position: bottom right;	
}
.small-banners a.spring-service img
{
	object-position: top right;	
}


/* ----------------------------------------------------------------------------------------------------------------
smaller screens
------------------------------------------------------------------------------------------------------------------- */

/* special br to allow floats on small screens only: */
.small-banners a br
{
	display: none;
}

/* added FEB2023: */
@media screen and (max-width:1010px)
{
	.small-banners.special-home-only a
	{
		min-height: 340px !important;
	}
}

@media screen and (max-width:920px)
{
	.small-banners a
	{
		min-height: 300px;
	}	
	.small-banners a span
	{
		width: 90%; /* APRIL2022 added */
	}
	.small-banners a span.small-banner-info
	{
		padding-top: 8px;
		font-size: 17px;
	}
}
@media screen and (max-width:640px)
{
	.small-banners a br
	{
		display: block;
	}
	.small-banners a
	{
		width: 100%;
		border-left: 0 !important;
		border-right: 0 !important;
		min-height: inherit;
		background-image: none !important;
	}	
		/* APRIL2022: */
		.small-banners.not-page-with-long-text-small-banners a
		{
			min-height: inherit;
		}
		/* FEB2023: */
		.small-banners.special-home-only a
		{
			min-height: inherit !important;
		}

	.small-banners a span
	{
		min-height: inherit;
		width: 49%;
		float: left;
		padding: 20px 10px 5px 20px;
	}
	.small-banners a img
	{
		width: 49%;
		float: right;
		height: 200px !important;
	}
}