.herocoltwo-block {
position: relative;
padding: 0;
overflow: hidden;
}
.herocoltwo-block .center {
width: 100% !important;
max-width: none;
margin: 0;
}
.herocoltwo-block .hero {
display: block;
position: relative;
}
.herocoltwo-block .herotext {
position: relative;
max-width: 1440px;
width: 90%;
box-sizing: border-box;
padding: 90px 0 90px 0;
margin: 0 auto;
z-index: 2;
}
.herocoltwo-block .herotext .maxwidth {
width: 48.25%;
max-width: 600px;
}
.herocoltwo-block figure {
position: absolute;
top: 0;
right: 0;
width: 48.25%;
height: 100%;
margin: 0 0 0 auto;
}
.herocoltwo-block figure img {
display: block;
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: 50% 50%;
}
/* Text aligned right */
.herocoltwo-block .hero.hero-textright .herotext .maxwidth {
width: 48.25%;
max-width: 600px;
margin-left: auto;
}
.herocoltwo-block .hero.hero-textright figure {
right: auto;
left: 0;
}
@media screen and (max-width: 767px) {
	.herocoltwo-block .herotext {
	padding: 30px 0;
	}
	.herocoltwo-block .herotext .maxwidth,
	.herocoltwo-block .hero.hero-textright .herotext .maxwidth {
	width: 100%;
	}
	.herocoltwo-block figure {
	position: relative;
	top: auto;
	right: auto;
	width: 100%;
	height: auto;
	}
}

/* Background images */
.herocoltwo-block .bg-shdw {
position: absolute;
top: -750px;
right: 90px;
width: 1920px;
height: 1920px;
background-position: 0 0;
background-repeat: no-repeat;
background-size: 1920px 1920px;
z-index: 0;
}
.herocoltwo-block .bg-shdw {
top: 0;
right: 22.5%;
background-position: 0 -390px;
margin-right: calc(25% - 275px);
}
/* Background images - Text aligned right */
.herocoltwo-block .hero.hero-textright .bg-shdw {
right: auto;
left: 22.5%;
margin-left: calc(25% - 275px);
margin-right: 0;
}
@media screen and (max-width: 767px) {
	.herocoltwo-block .bg-shdw {
	top: auto;
	bottom: 100px;
	right: -500px;
	background-position: 100px 50px;
	rotate: 90deg;
	margin-bottom: calc(55% - 150px);
	}
	/* Outer glow on outer right shdw cuts off on mobile, so tweak it to avoid issue */
	.herocoltwo-block .bg-shdw.shdw-right-outer {
	bottom: -120px;
	rotate: -90deg;
	}
	/* Background images - Text aligned right */
	.herocoltwo-block .hero.hero-textright .bg-shdw {
	right: auto;
	left: 25%;
	margin-left: -750px;
	margin-right: 0;
	bottom: auto;
	top: calc(100% - 675px);
	}
}

/* Masked images */
.herocoltwo-block .hero.framed figure {
z-index: 1;
display: flex;
align-items: center;
}
.herocoltwo-block .hero.framed figure img {
max-width: 500px;
min-width: 500px;
height: auto !important;
display: block;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
mask-position: 50% 50%;
-webkit-mask-position: 50% 50%;
mask-image: url(../../images/shield-mask.svg);
-webkit-mask-image: url(../../images/shield-mask.svg);
}
.herocoltwo-block .hero.framed .bg-shdw {
top: 0;
left: 51.5%;
width: 48.5%;
min-width: 500px;
max-width: 500px;
height: 100%;
margin: 0;
background-size: 500px auto;
background-position: 50% 50%;
transform: scale(2);
opacity: 0.8;
}
/* Masked images - Text aligned right */
.herocoltwo-block .hero.hero-textright.framed .bg-shdw {
left: auto;
right: 51.5%;
}
.herocoltwo-block .hero.hero-textright.framed figure {
justify-content: flex-end;
}
.herocoltwo-block .hero.hero-textright.framed figure img {
margin-left: auto;
}
@media screen and (max-width: 1023px) {
	.herocoltwo-block .hero.framed .bg-shdw {
	transform: scale(1.25);
	}
}
@media screen and (max-width: 767px) {
	.herocoltwo-block .hero.framed {
	padding-bottom: 400px;
	}
	.herocoltwo-block .hero.framed figure {
	display: block;
	position: absolute;
	left: 50%;
	top: auto;
	bottom: 0;
	width: 550px;
	height: 400px;
	margin: 0 0 0 -275px;
	}
	.herocoltwo-block .hero.framed figure img,
	.herocoltwo-block .hero.hero-textright.framed figure img {
	max-width: 800px;
	min-width: 0;
	mask-size: 550px auto;
	-webkit-mask-size: 550px auto;
	mask-position: top center;
	-webkit-mask-position: top center;
	transform: scale(1);
	}
	.herocoltwo-block .hero.framed .bg-shdw,
	.herocoltwo-block .hero.hero-textright.framed .bg-shdw {
	top: auto;
	left: auto;
	bottom: 0;
	right: 0;
	width: 100%;
	max-width: 800px;
	min-width: 0;
	height: 100%;
	margin: 0;
	background-size: 900px auto;
	background-position: 50% calc(100% + 525px);
	rotate: 0deg;
	transform: scale(1);
	}
}

/* Bespoke rules for single blog post pages */
@media screen and (max-width: 767px) {
	body.single-post .herocoltwo-block figure {
	display: none;
	}
	body.single-post .herocoltwo-block .herotext {
	padding: 30px 10px;
	}
	body.single-post .herocoltwo-block .herotext h2 {
	margin: 0;
	}
}