.steps-container {
	counter-reset: step-counter 0;
}

.step {
	position: relative;
	counter-increment: step-counter;
}
.step::before {
	content: counter(step-counter);
  left: -4rem;
  position: absolute;
  width: 3rem;
  height: 3rem;
  background-color: #0091e8;
  border-radius: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  top: -0.5rem;
  bottom: 0;
  margin: auto .5rem auto 0;
}

.step::after {
	background-repeat: no-repeat;
	position: absolute;
	content: '';
}
.step-1::after {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU1IiBoZWlnaHQ9IjI5MCIgdmlld0JveD0iMCAwIDE1NSAyOTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJtMTU0LjQxNy0uMDU3LjQ4Ljg3OEM3MS4zNCA0Ni4zOTkgMzEuNDU2IDkxLjU5IDM1LjEzMiAxMzYuMzM1Yy43ODUgOS41NTIgMi44NDcgMTcuNTcgNS45MjYgMjQuMDE1bC4wNzguMTU5LjMxOC0uMjMzYTE0NS4xNjYgMTQ1LjE2NiAwIDAgMSA2LjU0Mi00LjUxNWwuODQtLjU0M2MxMi4yMjUtNy44MzYgMjQuNTktMTMuMDA1IDM0LjI2Mi0xNC4yOTkgMTAuMzkyLTEuMzkgMTcuMTE0IDEuNzUgMTguNDg5IDkuNDMgMi43MDggMTUuMTMtMTEuODMzIDI5LjMxNi0yOS41MzggMzAuNDQ4LTEzLjIzOC44NDctMjQuNDMtNS41My0zMS4yMjctMTguNjkzbC0uMDQzLS4wODQtLjI4NS4yMTNDMTcuNjc3IDE3OS40MTIgMi4xMTcgMjAyLjAyMSAxLjc3IDIyMi45M2wtLjAwNi43MTJjMCAzMi44OSAyMi40NTUgNTMuMTIgNjcuNTMzIDYwLjcyNWwxLjM3My4yMjYgNS45NjYuODU0LTUuNzY3LTQuNDI2LjYxLS43OTMgNy4yOCA1LjU4OC43MDYuNTQxLS44MjkuMzIyLTguNTU2IDMuMzIxLS4zNjItLjkzMiA2Ljc3Ni0yLjYzMS01Ljk3NC0uODU1QzI0LjA3NyAyNzguMDg0Ljc2NCAyNTcuNDI0Ljc2NCAyMjMuNjQxYzAtMjEuNDcgMTUuODE0LTQ0LjY1IDM5LjExLTYyLjE5MWwuNDUxLS4zMzktLjEwOC0uMjIyYy0zLjA2Ny02LjM3Ni01LjE0OC0xNC4yNDYtNi4wMDEtMjMuNTY1bC0uMDgtLjkwN0MzMC40MTkgOTEuMTYzIDcwLjU1IDQ1LjY5MSAxNTQuNDE4LS4wNTd6TTgzLjIzMiAxNDEuOTExYy05LjUxIDEuMjcxLTIxLjc0MyA2LjM4Ni0zMy44NTUgMTQuMTQ5YTE0NC4yNTQgMTQ0LjI1NCAwIDAgMC03LjMxNSA1LjAxbC0uNDc0LjM0OS4wNi4xMmM2LjUxMSAxMi42OTQgMTcuMTUzIDE4Ljg5MyAyOS43NTUgMTguMjkzbC41ODMtLjAzM2MxNy4xNjItMS4wOTggMzEuMjA4LTE0LjggMjguNjE3LTI5LjI3NS0xLjI2Mi03LjA1Mi03LjQ0OC05Ljk0LTE3LjM3MS04LjYxM3oiIGZpbGw9IiMwMDkxRTgiIGZpbGwtcnVsZT0ibm9uemVybyIvPgo8L3N2Zz4K");
	width: 155px;
	height: 290px;
	left: -70%;
	top: 1rem;
}
.step-2::after {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTg4IiBoZWlnaHQ9IjIzMyIgdmlld0JveD0iMCAwIDE4OCAyMzMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJtMTg2LjcyLjEuOTk2LjA4MkMxNzYuNjk2IDEzMy42OCAxMTguMzM4IDIwOS40IDEyLjY4MyAyMjcuMmwtMy4yMTYuNTIyLTUuOTY4Ljg0OCA2Ljc3NSAyLjYzNy0uMzYyLjkzMi04LjU1NC0zLjMzLS44MjgtLjMyMi43MDUtLjU0IDcuMjg3LTUuNTgyLjYwOS43OTQtNS43NzIgNC40MjEgNS45Ni0uODQ3QzExNi41MDcgMjEwLjAxMiAxNzUuNjI0IDEzNC41MTcgMTg2LjcyLjF6IiBmaWxsPSIjMDA5MUU4IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KPC9zdmc+Cg==");
	width: 188px;
  height: 233px;
  left: -51%;
  top: 4rem;
}


@media screen and (max-width: 768px) {
	.step::before {
		position: relative;
		top: 0;
		left: 0;
	}

	.step::after {
		background-image: none;
	}
}