div.ImageSquare {position:relative}

img { width: 593px; height: 335px; max-width:100% }



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

	img { height: 286px; }
	/* Image width should be 507px, so height estimated at 286px */

	div.ImageSquare::after { display: block; height: 507px; bottom: 9px; left: -126px; position: absolute; width: calc(507px - 286px - 9px - 77px - 9px); content: '';
							 transform: rotate(90deg) scaleY(-1) translate(0, 100%); transform-origin: bottom right;
							 background-image: url('/images/rightspace.png'); background-size: 100% 100%; background-repeat: no-repeat; }
}

@media screen and (max-width:527px) {
	img { height: 189px; }

	/*div.CustomPage > header + * { background-position-y: calc(189px + 9px) !important; background-size: 100% calc(100% - 189px - 9px - 9px) !important;}

	div.ImageSquare::after { display: none; }

	ACA 28/08/2017 changed to:*/

	div.ImageSquare::after {  height: 335px; bottom: 0px; left: -58px; position: absolute; width: 58px; }
}


/* ACA Added 28/08/2017 */
@media screen and (max-width:355px) {
	div.ImageSquare::after {display:none}

	img {height:auto}
}