.stepper-block {
position: relative;
padding: 90px 0;
overflow: hidden;
}
.stepper-block .center {
position: relative;
z-index: 1;
}
.stepper-block p:last-child {
margin: 0;
}

.stepper-block-alongside .maxwidth {
max-width: 600px;
}
.stepper-block-alongside .step {
position: relative;
padding: 0 0 0 50px;
margin: 0 0 50px 0;
}
.stepper-block-alongside .step:last-child {
margin: 0;
}
.stepper-block-alongside .step i {
position: absolute;
top: 2px;
left: 0;
display: inline-block;
vertical-align: middle;
background-image: url(../../images/icons/tick-box-white.svg);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 24px 24px;
width: 24px;
height: 24px;
}
.stepper-block-alongside.orange-bg-color .step i,
.stepper-block-alongside.yellow-bg-color .step i {
background-image: url(../../images/icons/tick-box.svg);
}
.stepper-block-alongside .step h4 {
margin-bottom: 15px;
}

.stepper-block-below .maxwidth {
max-width: 700px;
text-align: center;
margin: 0 auto 80px auto;
}
.stepper-block-below .steps {
max-width: 700px;
margin: 0 auto;
}
.stepper-block-below .step {
display: flex;
position: relative;
padding: 0 0 120px 0;
}
.stepper-block-below .step i {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
border-radius: 50%;
margin: 0 0 0 -12px;
background: #fff;
}
.stepper-block-below .step:after {
content: '';
position: absolute;
top: 30px;
left: 50%;
width: 4px;
height: calc(100% - 36px);
margin: 0 0 0 -2px;
background: #fff;
}
.stepper-block-below.orange-bg-color .step i,
.stepper-block-below.yellow-bg-color .step i,
.stepper-block-below.orange-bg-color .step:after,
.stepper-block-below.yellow-bg-color .step:after {
background: #002A42;
}
.stepper-block-below.navy-bg-color .step i,
.stepper-block-below.navy-bg-color .step:after {
background: #fbcb21;
}
.stepper-block-below .step h4 {
flex: 0 0 50%;
text-align: right;
box-sizing: border-box;
padding: 0 40px 0 0;
margin: 0;
}
.stepper-block-below .step p {
flex: 0 0 50%;
text-align: left;
box-sizing: border-box;
padding: 0 0 0 40px;
margin: 0;
}

@media screen and (max-width: 767px) {
	.stepper-block {
	padding: 60px 0;
	}
	.stepper-block-below .step {
	display: block;
	padding: 0 0 80px 0;
	}
	.stepper-block-below .step h4,
	.stepper-block-below .step p {
	text-align: left;
	padding: 0 0 0 50px;
	margin: 0 0 15px 0;
	}
	.stepper-block-below .step i {
	left: 10px;
	margin: 0;
	}
	.stepper-block-below .step:after {
	left: 20px;
	margin: 0;
	}
}

/* Background images */
.stepper-block .bg-shdw {
position: absolute;
top: 400px;
left: 50%;
width: 1000px;
height: 1276px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0 0 0 -500px;
z-index: 0;
transform: scale(2);
}
.stepper-block.stepper-block-alongside .bg-shdw.shdw-left-inner {
top: -100px;
left: 700px;
rotate: -45deg;
}
.stepper-block.stepper-block-alongside .bg-shdw.shdw-right-inner {
top: -100px;
left: auto;
right: 200px;
rotate: 45deg;
}