.STEPS {
	max-width: 970rem;
	margin: 0 auto;
	position: relative;
	z-index: 0;
}

.STEPS::before,
.STEPS::after {
	content: "";
	display: block;
	overflow: hidden;
}

.STEPS .nav {
	margin: 0 auto 60rem;
}

.STEPS .nav-cell {
	width: 170rem;
	margin-right: 30rem;
	cursor: pointer;
	box-sizing: border-box;
    flex: 0 0 auto;
	background-color: unset;
	color: unset;
	padding: unset;
	border: none;
	font-size: unset;
}

.STEPS .nav-cell:focus {
	border: 2px solid blue;
}

.STEPS .nav-cell:last-child {
	margin-right: 0;
}

.STEPS .nav-cell:not(.is-selected) {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 0.5;
}

.STEPS .nav-cell h4 {
	color: var(--dark-blue);
	line-height: 1.3;
	padding-bottom: 20rem;
}

.STEPS .nav-cell h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--border-radius);
} 

.STEPS .nav-cell:nth-child(4n+1) h4::after {background: var(--orange);}
.STEPS .nav-cell:nth-child(4n+2) h4::after {background: var(--yellow);}
.STEPS .nav-cell:nth-child(4n+3) h4::after {background: var(--green);}
.STEPS .nav-cell:nth-child(4n+4) h4::after {background: var(--bright-blue);}

.STEPS .step {
	width: 100%;
}

.STEPS .step .b-columns .b-column:last-child{
	padding-right: 0;
}

.STEPS .image {
	position: relative;
	margin-bottom: 5rem;
}

.STEPS .image .circle {
	position: absolute;
	z-index: -1;
	width: 150rem;
	height: 150rem;
	border: 10px solid var(--blue);
	border-radius: 100%;
	bottom: 30rem;
	left: 30rem;
}

.STEPS .links {
	margin-top: 30rem;
}

.STEPS .links .b-button:first-child {
	margin-right: 30rem;
}

.STEPS .tip {
	margin-top: 40rem;
	background: var(--white);
	padding: 25rem;
	border-radius: var(--border-radius);
}

.STEPS .tip img {
	display: inline;
	width: 15rem;
	height: 22rem;
	margin: 3rem 3rem 0 0;
}

.STEPS .tip p {
	display: inline;
	margin-bottom: 1em;
}

.STEPS .tip li {
	margin-bottom: 7rem;
}

@media screen and (min-width:961px){
	.STEPS .nav-cell h4.mobile {display: none;}
	.STEPS .nav-cell h4.desktop {display: block;}
	.STEPS .flickity-prev-next-button.previous {left: -95rem;}
	.STEPS .flickity-prev-next-button.next {right: -95rem;}
}

@media screen and (max-width:960px){
	.STEPS .nav-cell {width: 30rem; margin: 0 30rem;}
	.STEPS .nav-cell h4.mobile {display: block;}
	.STEPS .nav-cell h4.desktop {display: none;}
	.STEPS .links .b-button {display: table;}
	.STEPS .links .b-button:first-child {margin-bottom: 15rem;}
}

@media screen and (max-width: 960px) and (min-width: 576px) {
	.STEPS .flickity-prev-next-button.previous {transform: translateX(-80%);}
	.STEPS .flickity-prev-next-button.next {transform: translateX(80%);}
	.STEPS .flickity-prev-next-button.previous svg {left: 25%;}
	.STEPS .flickity-prev-next-button.next svg {right: 25%;}
}

@media screen and (max-width: 575px) {
	.STEPS .flickity-prev-next-button.previous {transform: translateX(-85%);}
	.STEPS .flickity-prev-next-button.next {transform: translateX(85%);}
}

@media screen and (max-width: 475px) {
	.STEPS .image .circle {width: 70rem; height: 70rem; bottom: 0; left: 0;}
}

@media screen and (max-width:450px){
	.STEPS .nav-cell {width: 30rem; margin: 0 15rem;}
}

.STEPS .nav-cell:first-child {margin-left: 0;}
.STEPS .nav-cell:last-child {margin-right: 0;}