.HowItWorks,
.ContactUs
{
    padding          : 3rem 0 5rem 0;
    background-color : #F1F3F4;
}

.HowItWorksDiv,
.ContactUsDiv
{
    display         : flex;
    align-items     : center;
    flex-direction  : column;
    justify-content : space-between;
}

.HowItWorksDiv h1,
.ContactUsDiv h1
{
    margin-top : -1rem;
    font-size  : 3.1rem;
}

/* h1 and h2 styling are in AboutAppStyle.css to avoid duplicate code */

/* The 3 steps that are in row display
   Class name = Steps (With capital 'S') */

.Steps
{
    display         : flex;
    flex-direction  : row;
    justify-content : space-evenly;
    width           : 80%;
}

/* A single bubble from the steps
   Class name = step (Singular and with small 's')*/

.step
{
    display         : flex;
    align-items     : center;
    flex-direction  : column;
    justify-content : flex-start;
    width           : 30%;
    height          : 14rem;
    margin-top      : 4rem;
    padding-bottom  : 1rem;
    border          : 1px solid #707070;
    border-radius   : 0.3rem;
}

/*.step i*/
/*{*/
/*    display          : flex;*/
/*    align-items      : center;*/
/*    justify-content  : center;*/
/*    width            : 4rem;*/
/*    height           : 4rem;*/
/*    margin-top       : -5rem;*/
/*    padding          : 0.6rem;*/
/*    font-size        : 2.5rem;*/
/*    color            : #E2E3E4;*/
/*    border-radius    : 5rem;*/
/*    background-color : #2C3181;*/
/*    box-shadow       : 0 0 5px 2px rgba(44, 49, 129, 0.21);*/
/*}*/

.step img
{
    width         : 8rem;
    height        : 8rem;
    margin-top    : -3rem;
    margin-bottom : -1rem;
    margin-left   : -1.5rem;
}

.step span
{
    width            : 5rem;
    height           : 5rem;
    margin-top       : -1rem;
    border-radius    : 5rem;
    background-color : #F4F4F9;
}

.step h5
{
    margin-bottom : 1.3rem;
    font-size     : 1.2rem;
    color         : #2C3181;
}

.step p
{
    width         : 20rem;
    margin-top    : 0;
    margin-bottom : 2rem;
    font-size     : 1rem;
    line-height   : 1.5rem;
    text-align    : center;
    color         : grey;
}

@media (max-width : 1250px)
{
    .step
    {
        width        : 50%;
        margin-right : 1rem;
    }
}

@media (max-width : 978px)
{
    .Steps
    {
        align-items    : center;
        flex-direction : column;
        width          : 100%;
    }

    .step
    {
        width         : 80%;
        height        : 14rem;
        margin-top    : 5rem;
        margin-bottom : 1rem;
    }
}