/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
@media (max-width: 640px) {

    .course-payment-buy-course * {
        text-align: left !important;
    }
}

@media (max-width: 570px) {

    .course-payment-buy-course .course-payment-buy-course-inner form label {
        width: 100%;
    }

    .course-payment-buy-course .course-payment-buy-course-inner form .controls {
        width: 100%;
        margin-bottom: 10px;
    }
}

.course-payment-buy-course-inner {
    width: 100%;
    max-width: 670px;
    margin: 0 auto;
}

.course-payment-buy-course form .controls input:focus, .course-payment-buy-course form .controls textarea:focus {
    border: 2px solid #00a98e;
}

.course-payment-buy-course form label {
    color: #00a98e;
    display: block;
    float: left;
    width: 40%;
    font-weight: normal;
    line-height: 50px;
}

.course-payment-buy-course form .controls {
    display: block;
    float: left;
    width: 60%;
    margin-bottom: 15px;
}

.course-payment-buy-course form .controls input, .course-payment-buy-course form .controls textarea {
    display: inline-block;
    width: 100%;
    height: 50px;
    border: 2px solid rgba(0, 169, 142, 0.46);
    outline: none;
    line-height: 50px;
    padding: 0 15px;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    font-family: 'BrownStd-Light';
    color: #999899;
    font-size: 15px;
    font-size: 1.5rem;
}

.course-payment-buy-course .course-payment-buy-course-inner form .total-cost {
    display: block;
    width: 100%;
    margin-bottom: 40px;
}

.course-payment-buy-course .course-payment-buy-course-inner form .total-cost span:first-child {

}

.course-payment-buy-course .course-payment-buy-course-inner form .total-cost h5 {
    text-align: center;
}

.course-payment-buy-course .course-payment-buy-course-inner form .form-heading {
    color: #000;
    font-family: 'BrownStd-Bold';
    padding-bottom: 5px;
    border-bottom: 1px solid #fff;
    margin-bottom: 15px;
}

.course-payment-buy-course .course-payment-buy-course-inner form .green-box {
    background: #00a98e;
    color: #fff;
    display: block;
    width: 100%;
    padding: 10px 15px;
}

.course-payment-buy-course .course-payment-buy-course-inner form span.white-box {
    font-size: 20px;
    display: block;
    width: 100%;
    padding: 10px 15px;
    border-left: 1px solid #999899;
    border-right: 1px solid #999899;
    border-bottom: 1px solid #999899;
}

.course-payment-buy-course .course-payment-buy-course-inner h2 {
    font-size: 3rem;
    color: #000;
}

.course-payment-buy-course .course-payment-buy-course-inner .pay-now-btn {
    text-align: center !important;
    cursor: pointer;
    width: 100%;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    background: #00a98e;
    color: #fff;
    font-family: 'BrownStd-Light';
    border: none;
    outline: none;
    text-align: left;
    font-size: 20px;
    font-size: 2rem;
}