html, body { min-height: 100%; }
body { padding: 0; margin: 0; }
#container {
background: rgba(220,220,220,1);
background: -moz-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(173,173,173,1) 38%, rgba(173,173,173,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(220,220,220,1)), color-stop(38%, rgba(173,173,173,1)), color-stop(100%, rgba(173,173,173,1)));
background: -webkit-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(173,173,173,1) 38%, rgba(173,173,173,1) 100%);
background: -o-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(173,173,173,1) 38%, rgba(173,173,173,1) 100%);
background: -ms-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(173,173,173,1) 38%, rgba(173,173,173,1) 100%);
background: linear-gradient(to bottom, rgba(220,220,220,1) 0%, rgba(173,173,173,1) 38%, rgba(173,173,173,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#adadad', GradientType=0 );
position:absolute; min-height:100%; width:100%;}
#wrap { max-width: 920px !important; margin:0 auto; padding:10px;}
#main_content { background-image: url("https://www.savoirmaigrir.fr/img_aj/jmc/bilan-minceur/white_background.png"); padding: 10px; box-shadow: 0 0 5px 0 #606060; border-radius: 20px; border: solid 2px #ffffff; }
#main_content h1 {font: bold 23px arial; color:#000; text-align:center; margin:30px 0 40px 0;}
div.vid_container{max-width:676px; margin:0 auto; box-shadow:0 0 4px 0 #606060; border:none;}
.minisite-vid-l2 { margin: 20px auto 0 auto; position: relative; text-align: center; }
.minisite-vid-l2 .vid-shaper { display: block; width: 100%; }
.minisite-vid-l2 .l2-vids, .minisite-vid-l2 > iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2; }
p.registerstep { text-align: center;  }
p.registerstep img { width: 100%; max-width: 679px; margin: 0 auto; }
#questions { border-radius: 10px; box-shadow: 0 0 3px 0 #606060; margin: 0 auto; padding: 0; max-width:676px; }
#questions h2 { margin:0; font: bold 18px arial; color: #ffffff; padding: 10px; background: #f38900 none repeat scroll 0 0; border-top-left-radius: 10px; border-top-right-radius: 10px; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); }
.question_list{background:#ffffff; padding:10px 20px 20px 20px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.question_list h3 { font: bold 18px arial; color: #000000; }
.question_list p {font: normal 16px arial; }
.question_list b { font: bold 16px arial; }
.question_list p span.filloutform { display: block; float: left; font-size: 14px; font-weight: bold; padding-top: 2px !important; width: 45%; text-align:right; padding-right:5%; }
.bmbig { background-color: white; border: 1px solid #b8b7b7; color: #5f4f4e; font: 14px Arial; height: 18px; margin-right: 5px; width: 56px; }
.bmbig-select { background-color: white; border: 1px solid #b8b7b7; color: #5f4f4e; font: 14px Arial; margin-right: 2px; width: 56px; }
.fset { border: medium none; display: block; margin: 0; padding: 0; }
ul.multichoice { margin: 0px; padding: 0; position:relative;}
ul.multichoice li { padding: 0px 0px 0px 20px; list-style: none; font:normal 16px arial; vertical-align: middle; color: #292929; }
ul.multichoice li.choice-over { background-color: #f1f1ed; color: #000000; }
ul.multichoice li label { display: block; padding: 3px 0px 3px 0px; }
ul.multichoice li label img { line-height: 1em; vertical-align: middle; }
ul.multichoice li span { padding-left: 15px; }
.profil-test { height: 16px; opacity: 0; position: absolute; width: 16px; filter: alpha(opacity=0); margin: 0; }
.je-continue { background: url(/img/payment/button_je-continue.png) no-repeat; }
.je-continue-over { background: url(/img/payment/button_je-continue.png) no-repeat; }
.je-finish { background: url(/img/payment/button_je-termine-mon-bilan.png) no-repeat; }
.je-finish-over { background: url(/img/payment/button_je-termine-mon-bilan.png) no-repeat; } ul.body_parts li { float: left; position: relative; width: 23%; }
span.question_choices{display:inline-block; width:80%; vertical-align:top; margin-left:0;}
.hidden-question {display:none;}
.profil-test { height: 16px; margin: 0; opacity: 100; position: relative; width: 16px;}

div.floatright {text-align:right; margin:10px 0px;}
.backtoprevious {font: normal 12px arial; color:#f38900; padding:5px 8px; text-decoration:underline; /*box-shadow: 0 0 5px 0 #d6d4d4;*/ }

 div#bilanform-top div.formwrap label { display: inline-block; color: #58585a; font: bold 14px arial; }
        .hce-ff { text-align: center; }
            .hce-ff .vfHolder { color: #000; text-align: left; width: 75%; font: bold 16px arial; }
            .hce-ff > span { display: inline-block; }
        .labelHolder { font: bold 16px arial; color: #232222; }
        .labelHolder2 { font: bold 16px arial; color: #232222; display: block; float: left; padding-right: 5%; text-align: right; padding-top: 2px !important; width: 30%; }
        .hce-textInput { float: left; position: relative; background-color: white; border: 1px solid #bdbdbd; font: normal 14px arial; color: #4d4c4c; outline: 0 none; padding: 0; transition: all 0.2s linear 0s; width: 220px; }
        div#bilanform-top div.formwrap { top: 80px; }
        .funnel { position: absolute; left: 10%; top: 0; }
        .funnelmobile { display: none; }
        .sticker_2016 { vertical-align: middle; position: absolute; top: -8px; width: 100px; left:10px; }
        .jmc_2016 { vertical-align: middle; position: absolute; top: 10px; width: 103px; right:10px; }
        
        .mobQ { display: none; }


        ul.multichoice.gen li { float: left; width: 50%; text-align: center; background-image: none !important; padding: 0 !important; border-top: 0px none !important; -webkit-tap-highlight-color: rgba(0,0,0,0); }
            ul.multichoice.gen li .profil-test { opacity: 0 !important; }
            ul.multichoice.gen li.choice-over { background-color: transparent !important; }
        .genderMobile { display: block; width: 85%; margin: -10px auto 20px auto; border: 2px solid #d7d7d7; border-radius: 15px; padding: 110px 0px 8px 0px !important; max-width: 160px; font-size: 14px; background-repeat: no-repeat; background-position: center 12px; background-size: 82px auto; }
            .genderMobile.male { background-image: url(/img/2016/genMale-gray.png); }
            .genderMobile.female { background-image: url(/img/2016/genFemale-gray.png); }
        ul.multichoice.gen li.choice-over .genderMobile.male { background-image: url(/img/2016/genMale-orange.png); }
        ul.multichoice.gen li.choice-over .genderMobile.female { background-image: url(/img/2016/genFemale-orange.png); }

        .navMobileTop { width: 100%; position: relative; text-align: center; height: 44px; background-color: #f8f8f8; display: none; }
            .navMobileTop span { font: bold 18px Arial; color: #000000; display: inline-block; margin: 0px auto; line-height: 44px; }
            .navMobileTop .mobileBack { position: absolute; width: 44px; height: 44px; top: 0; left: 0; background: transparent url(/img/2016/nav-arrow-dp.png) no-repeat center center; background-size: 11px 20px; display: none; }
        .question_list p span.filloutform { width: 50%; }
        #professionField, #otherProfessionField, #notifyMeVia { display: block; }
        .cboxen { font: normal 14px Arial; color: #585858; padding: 8px 8px 8px 25px; position: relative; }
            .cboxen input[type="checkbox"] { position: absolute; left: 3px; top: 6px; }

        .viperso { max-width: 450px; margin: 0px auto; padding-top: 10px; }
            .viperso h3 { text-align: center; margin: 0 0 5px 0 !important; padding: 10px 0 0 0 !important; font: bold 20px arial; color: #ff9a00 !important; }
            .viperso p { margin: 0 0 8px 0 !important; }
            .viperso .vpinput { width: 95%; font: normal 14px Arial; color: #5f4f4e; border-radius: 3px; padding: 5px; border: 1px solid #b8b7b7; display: inline-block; }
        .shortLabel { font: normal 12px Arial; color: #5a5a5a; font-style: oblique; display: block; padding-top: 3px; }
        .cboxen2 { font: bold 12px Arial; color: #333333; padding: 8px 8px 8px 15px; position: relative; display: inline-block; }
            .cboxen2 input[type="checkbox"] { position: absolute; left: 0px; top: 4px; margin-left: 0 !important; }

        .counter { text-align: center; padding: 25px 0; max-width: 450px; margin: 0px auto; }
        .xprogressbar { position: relative; height: 26px; border-radius: 13px; border: 2px solid #feb535; border-top: 2px solid #d98801; background-color: #a94300; overflow: hidden; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); }
        .xprogressmeter { position: absolute; height: 100%; top: 0; left: 0; width: 0; z-index: 2; background: #ffcc93; /* Old browsers */ background: -moz-linear-gradient(top, #ffcc93 0%, #f7921a 50%, #ea7502 51%, #f9a634 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffcc93 0%,#f7921a 50%,#ea7502 51%,#f9a634 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffcc93 0%,#f7921a 50%,#ea7502 51%,#f9a634 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc93', endColorstr='#f9a634',GradientType=0 ); /* IE6-9 */ }
        .xprogressbar span { position: absolute; width: 100%; text-align: center; font: normal 14px Arial; left: 0; top: 5px; text-shadow: 0px -1px 0px rgba(0,0,0,0.3); z-index: 5; color: #ffffff; }

        .processingAlert { font: bold 12px Arial; color: #ff0000; display: block; padding: 3px 0; border-top: 1px solid #ffffff; width: 95%; display: none; }
        .inputError { border: 1px solid #ff0000; background-color: #FFCECE; }

        #main_content h1.hidden-on-xs { display: block; }
        #main_content h1.for-xs-only { display: none;}

        .promises{background:#222; padding: 20px; text-align:center; max-width:636px; margin:0 auto;}
        .arrowdown{text-align:center; max-width:100%; }
        #question0{display: block; background: url('/img/2016/big_orange_arrow.png') no-repeat center left;}
           .for-ipad-only{display:none;}

        @media only screen and (max-width: 1840px) {
            .funnel { position: absolute; left: 20px; top: 0; }

                .funnel img { width: 100%; margin-top: 20%; }
        }

        @media only screen and (max-width: 1515px) {
            .funnel { position: absolute; left: 20px; top: 0; }
                .funnel img { width: 80%; margin-top: 20%; }
        }

        @media only screen and (max-width: 1370px) {
            .funnel { position: absolute; left: 0; top: 0; }
                .funnel img { width: 70%; margin-top: 20%; }
        }

        @media only screen and (max-width: 1280px) {
            .funnel { position: absolute; left: 0; top: 0; }
                .funnel img { width: 60%; margin-top: 20%; }
        }

        @media only screen and (max-width: 1200px) {
            .funnelmobile { display: block; text-align: center; position: relative; }
                .funnelmobile img { margin: 10px auto; max-width: 100%; }
            .funnel { display: none; }
        }
        @media only screen and (max-width: 768px) {
    #questions {width: 100%; }
                .sticker_2016 { top: -8px; }
                .for-ipad-only{display:block;}
                .hide-on-ipad{display:none!important;}

                #main_content h1 {margin:20px 0 30px 0;}
}

        @media only screen and (max-width: 767px) {
            .for-ipad-only{display:none;}
            .navMobileTop { display: block; }
            .funnelmobile { display: none; }
            #container { background-image: none !important; background-color: #f8f8f8 !important; }
            #wrap { padding: 0; }
            .sticker_2016 { display: none; }
            #main_content { background: transparent none !important; border: 0px none !important; padding: 0 !important; box-shadow: 0 0 0 rgba(0,0,0,0); }
                #main_content > h1 { padding: 8px !important; text-align: center; background-color: #ff7200; color: #ffffff; font: bold 16px Arial; margin: 0px; border-bottom: 2px solid white; }
            .registerstep { display: none; }
            div.vid_container { max-width: 100% !important; box-shadow: 0 0 0 rgba(0,0,0,0); }
            .minisite-vid-l2 { margin: 0 !important; }
            #questions { border-radius: 0; box-shadow: 0 0 0 rgba(0,0,0,0); border-radius: 0px; }
                #questions h2 { display: none; }
            .question_list { padding: 0; }
                .question_list > div h3 { padding: 8px 10px; margin: 0; color: #2d2d2d; }
            ul.multichoice { border-bottom: 1px solid #ececec; }
                ul.multichoice li { padding: 5px 8px 3px 8px !important; border-top: 1px solid #ececec; color: #585858; background: transparent url(/img/2016/arrow-dp-gray.png) no-repeat 10px center; background-size: auto 10px; }
                    ul.multichoice li span { font-size: 14px; }
            .profil-test { opacity: 0 !important; top: 2px; }
            ul.multichoice li.choice-over { background-color: #fff1de; color: #000000; background-image: url(/img/2016/arrow-dp-orange.png); }
            .webQ, .question_choices.genderWeb { display: none; }
            .mobQ { display: block; }s
            span.question_choices { font-size: 14px; padding-left: 0 !important; width: 90%; }
            .question_list p span.filloutform { text-align: left; display: inline-block; width: 65%; padding-right: 5px; }
            #question11 > p { text-align: left !important; margin: 0; padding: 5px 8px; border-bottom: 1px solid #ececec; line-height: 20px; }
                #question11 > p > label > b { font-weight: normal; color: #818181; }
                #question11 > p input, #question11 > p select { border-radius: 3px; padding: 2px 0px; }


            .viperso { width: 95%; }
                .viperso p { text-align: left; }
            .xprogressbar { border-radius: 0; border-width: 1px !important; }
                .xprogressbar span { font-size: 12px; top: 6px; }
                    .promises{background:#222; padding: 10px; text-align:center; max-width:100%; margin:0 auto;}
                     .promises img{width:100%; margin:0 auto;}
        .arrowdown{text-align:center; max-width:100%; }
        #question0{display: block; background: url('/img/2016/big_orange_arrow.png') no-repeat center left; background-size: 15px 26px; }

        }

                @media only screen and (max-width: 736px) {
            #main_content h1.hidden-on-xs { display: none; }
            #main_content h1.for-xs-only { display: block; text-align: center; }
             .mobQ { display: block; padding-left:10px;}
        }


        @media only screen and (max-width: 480px) {
            #main_content > h1 { font-size: 16px; }


            #questions h2 {font: bold 16px arial;}
            .question_list p span.filloutform {text-align: center; width: 100%;}
            .question_list p {font: 14px arial;text-align: center; }
            .question_list h3 { color: #000000; font: bold 16px arial; }
            ul.multichoice li {padding: 0;}
            ul.body_parts li{width: 45%; float: left; position: relative;}
            .question_list p {font: normal 14px arial; }
            .question_list b { font: bold 14px arial; }
            #gotoQuestions img {width:100%;}
            .webQ, .question_choices.genderWeb { display: none; }
           
            ul.multichoice.gen{margin-left:10%;}
            ul.multichoice.gen li{width:45%;}
            #question11 > p { text-align: center !important;  }

        }