header {
    position : relative;
}

main.content {
    padding-top : 0;
}

section.main {
    margin-top : 0;
}

#subscription-title h1 {
    font-family : 'Arial Black', sans-serif;
    margin      : 15px 0 0 0;
}

#subscription-title h1,
#subscription-title h1 span {
    font-size : 25px;
}

#subscription-title h2,
#subscription-title h2 span {
    font-size : 18px;
    margin    : 0;
}

section.main {
    background-color : #ffffff;
}

section.steps > div.container,
section.main > div.container {
    max-width : 900px;
}

.steps-container {
    display         : flex;
    justify-content : space-around;
    margin          : 10px 0 20px 0;
    background      : url('/bundles/tamtamfpwebsite/img/subscription-header-bg.jpg') repeat-x center center;
    padding         : 0;
}

.step {
    margin-right   : 20px;
    line-height    : 22px;
    vertical-align : middle;
    color          : #cccccc;
}

.step:last-child {
    margin-right : 0;
}

.step span {
    background-color : #ffffff;
    padding-right    : 4px;
}

.step-text:before {
    content          : attr(data-step-number);
    display          : inline-block;
    width            : 22px;
    height           : 22px;
    border-radius    : 100%;
    border           : solid 1px #cccccc;
    margin-right     : 4px;
    font-family      : Arial, sans-serif;
    font-weight      : bold;
    font-size        : 16px;
    line-height      : 22px;
    text-align       : center;
    vertical-align   : middle;
    background-color : #ffffff;
}

.step.passed a span {
    color : #888888;
}

.step.active .step-text:before {
    border-color : #888888;
}

.step.active {
    font-weight : bold;
    color       : #5d5d5d;
}

.step.active .step-text:before {
    border-color : #5d5d5d;
}

.subscription-form {
    width         : 100%;
    padding-left  : 15px;
    padding-right : 15px;
}

.subscription-form-container {
    width          : 100%;
    float          : left;
    border         : 1px solid #ccc;
    border-radius  : 4px;
    padding-top    : 30px;
    padding-bottom : 20px;
}

.second-form {
    margin-top : 25px;
}

form.subscription-form .form-error .alert {
    margin-bottom : 50px;
}

form.subscription-form-with-title .form-error .alert {
    margin-bottom : 25px;
}

form.subscription-form h4 {
    margin-top : 0;
}

form.subscription-form > div h5 {
    margin-top : 0;
}

form.subscription-form .input-block {
    margin-bottom : 25px;
}

form.subscription-form h5 {
    font-weight    : bold;
    font-size      : 13px;
    line-height    : 16px;
    border-bottom  : 2px solid #5d5d5d;
    padding-bottom : 2px;
    margin-bottom  : 2.3rem;
    margin-top     : 1.3rem;
}

form.subscription-form .children-header {
    margin-top : 4rem;
}

form.subscription-form .required-field-mention {
    font-size   : 10px;
    padding-top : 20px;
}

form.subscription-form input[type=submit] + a,
form.subscription-form i.btn + a {
    margin-top : 15px;
}

.profil-photo {
    text-align : center;
}

.profil-photo img {
    border-radius : 8px;
}

input.fake-password {
    font-family : arial;
}

@media (min-width : 992px) {
    #logo-fp {
        margin-left : 0;
    }
}

@media (min-width : 768px) {
    section.main > div.container > div.row > div {
        padding : 0;
    }

    form.subscription-form .input-container-half-even,
    form.subscription-form .input-container-half:nth-of-type(even) {
        border-right  : 2px solid #f2f2f2;
        margin-left   : 1px;
        padding-right : 25px;
    }

    form.subscription-form .input-container-half-odd,
    form.subscription-form .input-container-half:nth-of-type(odd) {
        border-left  : 2px solid #f2f2f2;
        margin-left  : -2px;
        padding-left : 25px;
    }

    form.subscription-form h5:first-child {
        margin-top : 0;
    }

    form.subscription-form div.input-field:last-child input:not(.error) {
        margin-bottom : 0;
    }

    form.subscription-form div.input-field:last-child input.error {
        transition : margin-bottom linear 0s;
    }

    .birthdate-field {
        padding-top : 60px;
    }

    .birthdate-field select {
        display : block;
    }
}

@media (max-width : 767px) {
    section.steps,
    section.main,
    .step span {
        background-color : #f4f3f3;
    }

    #subscription-title h2 {
        margin-top : 10px;
    }

    .steps-container {
        display         : inline-block;
        justify-content : initial;
        background      : none;
        margin          : 10px 0;
    }

    .step {
        display : none;
    }

    .step.active {
        display   : inline-block;
        width     : 100%;
        font-size : 18px;
        margin    : 5px 0 5px 0;
    }

    .step.active .step-text {
        white-space : initial;
    }

    .subscription-form-container {
        background-color : #ffffff;
        margin-bottom    : 20px;
    }

    form.subscription-form .form-error .alert {
        margin-bottom : 25px;
    }

    form.subscription-form .input-block {
        margin-bottom : 15px;
    }
}

@media (max-width : 400px) {
    .skip-subscription-form .btn {
        font-size     : 12px;
        padding-left  : 8px;
        padding-right : 8px;
    }
}