body.process a#process {
    color: rgb(30, 81, 59);
}

/* 
    Process 
*/

body.process  {
    background-color: rgb(70,186,133);
    color: rgb(30, 81, 59);
}

.process-steps {
	display: grid;
	grid-template-columns: repeat(6, 96px);
    grid-auto-rows: 96px;
    justify-content: space-between;
    
    width: 100%;
}

.process-steps>a {    
    border-radius: 50%;
    background-color: white;
        
    color: rgb(70,186,133);
    font-family: "museo-slab", serif; 
    font-weight: 900;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center; /* Centers text horizontally. */
    
    /* Center text vertically. */
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    flex-direction: column; 
    -webkit-flex-direction: column;

    transition: color, background-color 350ms ease-in-out;
    -webkit-transition: color, background-color 350ms ease-in-out;
}


@media (max-width: 814px) {
	.process-steps {
		grid-template-columns: repeat(3, 118px);
	    grid-auto-rows: 118px;
		grid-gap: 16px;
		justify-content: start;
	}
}

@media (max-width: 415px) {
	.process-steps {
		grid-template-columns: repeat(3, 96px);
	    grid-auto-rows: 96px;
		grid-gap: 16px;
	}
}

@media (max-width: 349px) {
	.process-steps {
		grid-template-columns: repeat(3, 90px);
	    grid-auto-rows: 90px;
		grid-gap: 10px;
	}
}

.process-steps a:hover {
    background-color: rgb(0, 255, 0);
}

.process-steps a.blt-active {
    background-color: rgb(0, 255, 0);
}

.process-details .rich-text {
    font-size: 24px;
    line-height: 34px;
    font-weight: 300;
    margin: 16px 0px 0px 0px;
    color: rgb(0, 255, 0);
}

.process-details>article {
    display: none;
}

.process-details>article.blt-active {
    display: block;
}