/* ==================================================================================================== */
/*                                                                         Progressive Enhancement CSS  */
/* ==================================================================================================== */
/* Layout Starting @ 600px Wide                       */
/* ================================================== */



/* ==================================================================================================== */
/*                                                                                       Shared Classes */
/* ==================================================================================================== */
.ambassadorTitle {
    font-size: 36px;
}





/* ==================================================================================================== */
/*                                                                                      Layout & Design */
/* ==================================================================================================== */

/* ==================================================================================================== */
/*                                                                                               Header */
/* ==================================================================================================== */





/* ==================================================================================================== */
/*                                                                                              Content */
/* ==================================================================================================== */

/* ================================================== */
/* Ambassador                                         */
/* ================================================== */
.topBanner.ambassador {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 540px;
    justify-content: center;
}

    .topBanner.ambassador .ambassadorTitle {
        font-size: 52px;
        margin: 0;
    }
    
    .topBanner.ambassador .ambassadorTitle + span {
        margin: 30px 0 40px 0;
    }

.ambassadorCommitted {
    padding: 60px 10px;
}

    .ambassadorCommitted .ambassadorTitle {
        max-width: 810px;
        margin: 0 auto;
    }
    
        .ambassadorCommittedPoints {
            display: flex;
            justify-content: center;
        }
        
            .ambassadorCommittedPoints div {
                flex: 0 1 33%;
                margin: 30px 10px 0 10px;
                max-width: 280px;
            }

.ambassadorHow {
    padding: 60px 10px;
}
    
    .ambassadorHow div::before {
        content: '';
        height: 74px;
        left: 0;
        position: absolute;
        width: 74px;
        z-index: 1;
    }
    
    .ambassadorHow div {
        margin: 60px auto 0 auto;
        max-width: 970px;
        padding-left: 140px;
        position: relative;
    }
    
    .ambassadorHow div::after {
        border-left: 1px dashed white;
        content: '';
        height: 100%;
        left: 38px;
        position: absolute;
        top: 60px;
    }
    
        .ambassadorHowSign::before {
            background: url('../images/ic_pen.svg') no-repeat;
        }
        
        .ambassadorHowShare::before {
            background: url('../images/ic_chain.svg') no-repeat;
        }
    
        .ambassadorHowEarn::before {
            background: url('../images/ic_money.svg') no-repeat;
        }
        
        .ambassadorHow .ambassadorHowEarn::after {
            border: none;
        }

.ambassadorBenefits {
    padding: 60px 10px;
    text-align: left;
}

    .ambassadorBenefits div,
    .ambassadorBenefits div:last-child {
        align-items: center;
        display: flex;
        max-width: 780px;
        margin: auto;
        padding: 20px;
    }
    
        .ambassadorBenefits img {
            margin-right: 40px;
        }

.ambassadorMeet {
    padding: 60px 10px;
}

    .ambassadorList {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: auto;
        max-width: 970px;
    }
    
        .ambassadorList a {
            flex: 0 1 25%;
        }
        
.ambassadorWindow {
    max-width: 600px;
    text-align: left;
}

    .ambassadorWindow img {
        float: left;
        margin-right: 20px;
    }
    
    .ambassadorWindowCompany {
        margin-top: 0;
    }

.ambassadorFaq {
    margin: auto;
    max-width: 970px;
    padding: 60px 10px;
}

.ambassadorLearn {
    margin-top: 60px;
    overflow-x: clip;
    text-align: left;
}

    .ambassadorLearnWrapper {
        position: relative;
        margin: auto;
        max-width: 970px;
    }
    
        .ambassadorLearn p {
            font-size: 32px;
            max-width: 410px;
        }
    
            .ambassadorLearn .btnTanOutlined {
                display: block;
                text-align: center;
                width: 280px;
            }

        .ambassadorLearn img {
            bottom: -50px;
            display: block;
            left: 300px;
            position: absolute;
        }



/* ================================================== */
/* Ambassador Form                                    */
/* ================================================== */
#ambassadorFormWindow {
    max-width: 900px;
}

    #ambassadorFormWindow .btnRed {
        clear: both;
        float: right;
        width: 48%;
    }
        
        .ambassadorFormContainer {
            border-bottom: 1px solid #E0D2C1;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 10px;
        }
        
            .ambassadorFormContainer input,
            .ambassadorFormContainer select {
                flex: 0 1 auto;
                width: 48%;
            }
            
            .ambassadorFormContainer textarea {
                width: 100%;
            }
            
            .ambassadorFormContainer + label {
                float: right;
                min-width: 300px;
                width: 48%;
            }



/* ================================================== */
/* Badges                                             */
/* ================================================== */
.topBanner.badges {
    background-size: auto;
}

    .topBanner.badges p {
        margin-left: auto;
        margin-right: auto;
        max-width: 560px;
    }

.badgesWrapper img {
    display: inline-block;
    margin: 0 15px 30px 15px;
}





/* ==================================================================================================== */
/*                                                                                               Footer */
/* ==================================================================================================== */
footer {
    text-align: left;
}

    .footerWrapper {
        display: flex;
        margin: auto;
        max-width: 970px;
    }

        .footerWrapper > div {
            flex: 1;
            padding: 0 20px;
        }
        
        .footerWrapper > div:last-child {
            align-items: flex-end;
            flex: 0;
            display: flex;
        }