/***********************************************************************************
 *	RUG BUILDER PAGE
 ***********************************************************************************/

#mmar-cobrand {
    background-color: #ffffff
}

#mmar-cobrand .mmar-cobrand-header {
    align-items: center;
    background-image: url(../../assets/images/alternative/mobile_banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
margin-top:60px;
    display: flex;
    height: 750px;
    justify-content: center
}

@media print,screen and (min-width: 41.6875em) {
    #mmar-cobrand .mmar-cobrand-header {
        background-image:url(../../assets/images/alternative/banner.jpg);
        height: 600px
margin-top:30px;
    }

}

#mmar-cobrand .mmar-cobrand-header .logo {
    height: 350px;
    margin-top: 0;
    text-align: center;
    width: unset
}

#mmar-cobrand span.brush {
    align-items: center;
    background-image: url(../../assets/images/alternative/green_brush_button.svg);
    background-repeat: no-repeat;
    background-size: 100% 56px;
    display: flex;
    height: 56px;
    justify-content: center;
    margin-top: 2rem
}

#mmar-cobrand span.brush a {
    color: #fff;
    display: block;
    font-family: Matter,helvetica,arial,sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: .625rem 2rem;
    text-align: center;
    text-decoration: none
}

#mmar-cobrand span.brush.large {
    background-image: url(../../assets/images/alternative/lrg_green_brush_button.svg);
    background-size: 100% 82px;
    height: 82px
}

#mmar-cobrand span.brush.large a {
    font-size: 1.125rem
}

#mmar-cobrand .block {
    margin-bottom: 1.5rem;
    text-align: center
}

#mmar-cobrand .block.bottom {
    margin-bottom: 8rem;
    margin-top: 1rem
}

#mmar-cobrand .block h2 {
    color: #424242;
    display: inline-block;
    font-family: rollerscript-smooth,sans-serif;
    font-size: 3rem;
    font-weight: 400;
    margin: 3rem 0;
    position: relative
}

#mmar-cobrand .block h2:after {
    background-image: url(../../assets/images/alternative/underline.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    bottom: -4px;
    content: "";
    height: .2em;
    left: -2.5rem;
    position: absolute;
    right: -2.5rem;
    z-index: -1
}

#mmar-cobrand .block p {
    font-size: 1.25rem
}

#mmar-cobrand .block p.hilight {
    font-weight: 500
}

#mmar-cobrand .steps .step {
    align-items: center;
    background-size: cover;
    border: 1rem solid #ffffff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin: 0;
    position: relative
}

@media print,screen and (min-width: 59.375em) {
    #mmar-cobrand .steps .step {
        border:.5rem solid #ffffff
    }
}

@media screen and (min-width: 75.0625em) {
    #mmar-cobrand .steps .step {
        border:1rem solid #ffffff
    }
}

#mmar-cobrand .steps .step:after {
    content: "";
    display: block;
    padding-bottom: 100%
}

#mmar-cobrand .steps .step .splodge {
    align-items: center;
    background-repeat: no-repeat;
    color: #fff;
    display: flex;
    font-family: rollerscript-smooth,sans-serif;
    font-size: 1.875rem;
    height: 119px;
    justify-content: center;
    margin-bottom: 3rem;
    width: 119px
}

#mmar-cobrand .steps .step p {
    color: #fff;
    font-family: Matter,helvetica,arial,sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    left: 11%;
    position: absolute;
    right: 11%;
    text-align: center;
    top: 68%
}

#mmar-cobrand .steps .step.one {
    background-image: url(../../assets/images/alternative/step1_bg.jpg)
}

#mmar-cobrand .steps .step.one .splodge {
    background-image: url(../../assets/images/alternative/orange_circle.svg)
}

#mmar-cobrand .steps .step.two {
    background-image: url(../../assets/images/alternative/step2_bg.jpg)
}

#mmar-cobrand .steps .step.two .splodge {
    background-image: url(../../assets/images/alternative/light_circle.svg)
}

#mmar-cobrand .steps .step.three {
    background-image: url(../../assets/images/alternative/step3_bg.jpg)
}

#mmar-cobrand .steps .step.three .splodge {
    background-image: url(../../assets/images/alternative/brown_circle.svg)
}

#mmar-cobrand .steps .step.four {
    background-image: url(../../assets/images/alternative/step4_bg.jpg)
}

#mmar-cobrand .steps .step.four .splodge {
    background-image: url(../../assets/images/alternative/grey_circle.svg)
}