.ResidentialProcessPage #main-wrapper {
    background-color: #f5efe4;
}
.heading-panel {
    margin-bottom: 26px !important;
}
.main.content {
    padding-bottom: 60px;
}
.diagram {
    position: relative;
}
.square {
    width: 175px; height: 150px;
    position: absolute;
    box-sizing: border-box;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}
.square img {
    width: 175px; height: 150px;
}
.square-spacer {
    width: 175px; height: 150px;
}
@media screen and (max-width: 481px) {
    .heading-panel {
        padding-left: 22px !important;
    }
    .main.content {
        margin-left: 22px !important;
    }
}
.square::before {
    content: '';
    display: block;
    padding-top: 150px;
}
.square .content {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; 
}
.square .content a {
    width: 100%; height: 100%;
    display: block;
}
.square .text {
    width: 75%; height: 100%;
    position: absolute; left: 25%; top: 0; z-index: 30;
}
.number {
    margin: 8px 0 4px 0;
    font-family: "LatoWebThin", "LatoWeb", sans-serif;
    font-size: 50px; font-weight: 100; color: #FFF;
}
.title {
    font-family: "LatoWeb", sans-serif;
    font-size: 16px; line-height: 18px; font-weight: 400; color: #FFF;
}
.active,
.square .content:hover .hex {
    display: none;
}
.square .content:hover .active {
    display: block;
}
.square.hex1 {
    left: 0px;
    top: 0px;
}
.square.hex2 {
    left: 130px;
    top: 75px;
}
.square.hex3 {
    left: 130px;
    top: 225px;
}
.square.hex4 {
    left: 260px;
    top: 300px;
}
.square.hex5 {
    left: 260px;
    top: 450px;
}
.square.hex6 {
    left: 390px;
    top: 525px;
}
.square.hex7 {
    left: 520px;
    top: 600px;
}
@media screen and (max-width: 801px) {
    .square.hex1 {
        left: 0px;
        top: 0px;
    }
    .square.hex2 {
        left: 130px;
        top: 75px;
    }
    .square.hex3 {
        left: 260px;
        top: 150px;
    }
    .square.hex4 {
        left: 260px;
        top: 300px;
    }
    .square.hex5 {
        left: 130px;
        top: 375px;
    }
    .square.hex6 {
        left: 0px;
        top: 450px;
    }
    .square.hex7 {
        left: 130px;
        top: 525px;
    }
}
@media screen and (max-width: 601px) {
    .square.hex1 {
        left: 0px;
        top: 0px;
    }
    .square.hex2 {
        left: 0px;
        top: 150px;
    }
    .square.hex3 {
        left: 130px;
        top: 225px;
    }
    .square.hex4 {
        left: 130px;
        top: 375px;
    }
    .square.hex5 {
        left: 0px;
        top: 450px;
    }
    .square.hex6 {
        left: 0px;
        top: 600px;
    }
    .square.hex7 {
        left: 130px;
        top: 675px;
    }
}