/* RESET */
    
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }
    
    body {
        line-height: 1;
    }
    
    ol,
    ul {
        list-style: none;
    }
    
    blockquote,
    q {
        quotes: none;
    }
    
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    /* IMPORTS */
    
    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
    /* CSS START */
    
    body {
        font-family: 'Roboto', sans-serif;
    }
    
    body * {
        font-family: 'Roboto', sans-serif;
        -webkit-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
        -webkit-font-smoothing: antialiased !important;
    }
    
    .center {
        text-align: center;
    }
    
    .content {
        position: relative;
        max-width: 1200px;
        width: 100%;
        min-width: 400px;
        margin: 0 0;
    }
    
    #maincontainer {
        position: relative;
        max-width: 1200px;
        min-width: 400px;
        width: 100%;
        margin: 0 auto;
        min-height: 100vh;
    }
    
    #firstpart {
        float: left;
        position: relative;
        max-width: 100vw;
        min-width: 400px;
        width: 100%;
        min-height: 783px;
        height: auto;
        margin: 0 auto;
        background-image: url('../../images/bgcpf.png'), url('../../images/headercpf.png'), url('../../images/bg.png');
        background-position: center 10px, left 60px, top left;
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-color: #FFFFFF;
        border-bottom: 10px solid #37332f;
    }
    
    #secondpart {
        float: left;
        position: relative;
        max-width: 100vw;
        min-width: 400px;
        width: 100%;
        min-height: 166px;
        margin: 0 auto;
        background-color: #FFFFFF;
    }
    
    #thirdpart {
        float: left;
        position: relative;
        max-width: 100vw;
        min-width: 400px;
        width: 100%;
        min-height: 40px;
        margin: 0 auto;
        background-color: #FFFFFF;
    }
    
    #thirdpart .content {
        max-width: 990px;
    }
    
    .cleft {
        position: relative;
        float: left;
        max-width: 662px;
        width: 100%;
        min-height: 783px;
        height: auto;
    }
    
    .cleft img {
        width: 100%;
        margin-top: 162px;
    }
    
    .cright {
        position: relative;
        float: left;
        max-width: 380px;
    }
    
    h1 {
        font-size: 36px;
        line-height: 40px;
        color: #FFFFFF;
        font-weight: 900;
        text-align: center;
        margin: 0 0 0 0;
    }
    
    h1 span {
        color: #ffd600;
    }
    
    .cright h1 img {
        width: 100%;
        max-width: 314px;
        margin-top: 20px;
    }
    
    #formcontainer {
        float: left;
        position: relative;
        width: 390px;
        min-height: 434px;
        background: transparent;
        margin-right: 0;
        margin-left: 0;
        margin-top: 113px;
    }
    
    #formcontainer>div {
        float: left;
        position: relative;
        max-width: 90%;
        width: 100%;
        min-height: 505px;
        margin: 20px 5% 0 5%;
        border: 6px solid #74bbc7;
        background-image: url('../../images/bgform.png');
    }
    
    label {
        color: #37332f;
        font-size: 16px;
        font-weight: 400;
        display: block;
        margin: 30px 0 10px 0;
        clear: both;
        display: inline-block;
        width: 90%;
        margin-left: 5%;
        line-height: 20px;
        text-align: left;
    }
    
    .btn-selector {
        color: #546060;
        background-image: url('../../images/bgcheckbox.png');
        background-position: center left;
        background-repeat: no-repeat;
        font-size: 14px;
        font-weight: 900;
        text-transform: uppercase;
        display: inline-block;
        height: 40px;
        width: auto;
        text-decoration: none;
        text-align: left;
        text-indent: 30px;
        line-height: 40px;
        margin-left: 5%;
        margin-top: 10px;
        overflow: hidden;
        position: relative;
    }
    
    .spacer {
        border-top: 2px solid #007396;
        width: 100%;
        margin: 40px 0 0 0;
    }
    
    .btn-selector.last {
        margin-right: 0;
    }
    
    .btn-selector.jncp {
        font-size: 12px;
        line-height: 15px;
    }
    
    .btn-selector.p4 {
        width: 150px;
    }
    
    .btn-selector.newline {
        margin-left: 38%;
        text-transform: none;
        font-size: 18px;
        line-height: normal;
    }
    
    .btn-selector.p4.newline {
        margin-left: 27%;
    }
    
    .btn-selector.visu {
        background-color: transparent;
        line-height: normal;
        border: 0;
        height: 110px;
        padding: 10px 0;
    }
    
    .btn-selector:hover::after,
    .btn-selector.selected::after {
        content: '✓';
        position: absolute;
        left: -25px;
        color: #007396;
        font-size: 16px;
        line-height: 40px;
    }
    
    .btn-selector.nb {
        color: #FFFFFF;
        font-size: 13px;
        font-weight: 400;
        text-transform: uppercase;
        display: inline-block;
        border: 1px solid #7db6d4;
        box-shadow: 0 0 5px 1px rgba(122, 126, 126, 0.69);
        background-color: #8cbbd7;
        padding: 5px 10px;
        text-decoration: none;
        margin: 5px 10px 0 0;
    }
    
    .btn-selector.nb:hover,
    .btn-selector.nb.selected {
        background-color: #FFFFFF;
        color: #7db6d4;
    }
    
    .btn-selector.nb.last {
        margin-right: 0;
    }
    
    #formcontainer p {
        float: left;
        width: 100%;
        margin: 30px 0 0 0;
    }
    
    #bloc1,
    #bloc2,
    #bloc3,
    #bloc4 {
        display: block;
        float: left;
        width: 28%;
        margin: 5px 0;
        text-align: center;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        height: 136px;
    }
    
    #bloc1,
    #bloc4 {
        width: 49%;
    }
    
    #bloc1,
    #bloc2,
    #bloc3 {
        margin-top: 30px;
    }
    
    h2 {
        font-size: 24px;
        font-weight: 900;
        color: #FFFFFF;
        line-height: 1.3em;
        text-transform: uppercase;
        text-align: right;
        width: 90%;
    }
    
    #bloc1 h2 {
        margin-top: 28px;
        color: #000000;
        font-size: 18px;
        font-weight: 700;
    }
    
    .bloc p {
        width: 90%;
        margin: 0 auto;
        text-align: justify;
        font-size: 14px;
        line-height: 16px;
        color: #211000;
    }
    
    .bloc p span {
        font-size: 16px;
        line-height: 18px;
        font-weight: 800;
    }
    
    #thirdpart .content {
        text-align: center;
    }
    
    #thirdpart .content img {
        margin: 30px 0 0 0;
    }
    
    #thirdpart p {
        font-size: 12px;
    }
    
    #thirdpart a {
        color: #999999;
    }
    
    .hide {
        display: none;
    }
    
    #formcontainer p.line {
        margin: 3px 0;
    }
    
    #formcontainer p.line span {
        display: inline-block;
        float: left;
        width: 35%;
        color: #8cbbd7;
        font-size: 14px;
        font-weight: 300;
    }
    
    #formcontainer p.line input,
    #formcontainer p.line select {
        display: inline-block;
        float: none;
        margin: 3px 0 0 34px;
        width: 284px;
        border: 1px solid #879093;
        background-color: #FFFFFF;
        line-height: 36px;
        text-indent: 10px;
        color: #316b86;
        -webkit-appearance: none;
        -ms-box-sizing: content-box;
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }
    
    #formcontainer p.line select {
        cursor: pointer;
    }
    
    #formcontainer p.line input.error,
    #formcontainer p.line select.error {
        box-shadow: 0 0 5px 1px rgba(255, 56, 56, 0.69);
        border: 1px solid rgba(255, 56, 56);
    }
    
    .disabled {
        cursor: not-allowed;
    }
    
    .disabled img {
        opacity: 1;
    }
    
    #step4 p {
        color: #316b86;
        font-size: 16px;
        width: 90%;
        margin-left: 5%;
        margin-bottom: 20px;
    }
    
    #thirdpart img {
        max-width: 651px;
        width: 100%;
    }
    
    #step3 {
        height: 513px;
    }
    
    .logocpf {
        max-width: 306px;
        width: 90%;
        position: absolute;
        bottom: 15px;
        left: 712px;
    }
    
    #ctasubmit {
        position: relative;
        width: 100%;
        display: inline-block;
        text-align: center;
        margin-bottom: 20px;
        margin-top: 40px;
    }
    
    #ctasubmitp1 {
        position: absolute;
        width: 100%;
        display: inline-block;
        text-align: center;
        bottom: -37px;
        left: 0;
    }
    
    .btn-selector.visu {
        color: #FFFFFF;
        font-size: 20px;
        font-weight: 400;
        background-image: none;
        text-transform: uppercase;
        display: inline-block;
        height: 80px;
        width: 111px;
        text-indent: 0;
        text-decoration: none;
        text-align: center;
        line-height: 80px;
        margin-left: 10%;
        margin-top: 20px;
    }
    
    .btn-selector.visu:hover,
    .btn-selector.visu.selected {
        background-color: #74bbc7;
    }
    
    .btn-selector.visu::after {
        display: none;
    }
    
    @media screen and (max-width: 1030px) {
        #firstpart {
            background-image: url('../../images/bgcpf.png'), url('../../images/headercpf.png'), url('../../images/bg.png');
            background-position: center 10px, left 60px, top left;
            background-repeat: no-repeat, no-repeat, no-repeat;
        }
        .logocpf {
            position: relative;
            top: auto;
            left: auto;
            max-width: 468px;
            width: 90%;
            position: relative;
            margin-left: 20px;
            margin-bottom: 20px;
        }
        .cright h1 {
            margin-top: 0;
        }
        .cleft,
        .cright {
            float: none;
            height: 630px;
            margin-left: auto;
            margin-right: auto;
        }
        .cright {
            padding-bottom: 20px;
            height: 630px;
        }
        #formcontainer {
            width: 100%;
            margin-right: 0;
            margin-left: 0;
            margin-top: 40px;
        }
        #bloc1,
        #bloc2 {
            width: 100%;
            text-align: center;
            border: none;
        }
        h2 {
            width: 100%;
            text-align: center;
        }
        #secondpart {
            height: auto;
            padding-bottom: 20px;
        }
        #bloc1,
        #bloc2,
        #bloc3,
        #bloc4 {
            height: auto;
            margin-top: 15px;
        }
    }
    
    @media screen and (max-width: 870px) {
        #firstpart {
            background-image: url('../../images/bgcpf.png'), url('../../images/headercpf.png'), url('../../images/bg.png');
            background-position: center 10px, -150px 60px, -50px 50px;
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-size: auto, 850px, 800px;
        }
        #maincontainer {
            max-width: 400px;
        }
        .cleft {
            height: 483px;
            min-height: 383px;
        }
        .cleft img {
            width: 100%;
        }
        .cright {
            width: 100%;
            max-width: 100%;
        }
        .cright>img {
            margin-left: 20px;
            margin-top: 50px;
        }
        #bloc2,
        #bloc3 {
            width: 100%;
            text-align: center;
            border: none;
        }
    }
    
    .remodal h1 {
        color: #316b86;
        -webkit-text-stroke: 1px #316b86;
        -webkit-text-fill-color: #316b86;
    }
    
    .remodal p {
        text-align: justify;
    }
    
    .remodal p a {
        text-align: justify;
        color: #316b86;
    }
    
    #loader {
        float: left;
        width: 100%;
        height: 400px;
        background-image: url('../../images/25.gif');
        background-position: center center;
        background-repeat: no-repeat;
    }
    
    h2.ml-h2 {
        color: #316b86;
        text-align: left;
        margin: 15px 0;
    }