html{ font-size:100%; width:100%; height:100% }
body{
    font-family:helvetica;
    color:#000;
    position:relative;
    background-color: #e7f1d8;
    overflow-x:hidden;
    background-repeat: no-repeat;
    background-image:url('/assets/conso-enquete/img/macaron/bg.jpg');
    background-size:cover;
    background-position:center top;
}
body#enquete #header, body#vitrine #header {
    position:inherit;
    background-color:#FFF;
    margin-bottom:50px;
}
#header {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    transition: all 0.4s ease;
}
#header.fixe {
    background-color:#FFF;
    z-index:10;
}
#header .logo{
    float:left;
    padding:10px 10px;
}
#header .infos {
    float: right;
    margin-top: 14px;
    background-color: #FFF;
    padding: 10px;
}
.col {
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
}
.col .nb p{
    color:#b12043;
    font-size:20px;
    display:inline-block;
    vertical-align:middle 
}
.col .nb span{
    display:inline-block;
    width:30px;
    height:30px;
    background: url('/assets/conso-enquete/img/macaron/picto-head.png') 0 0 no-repeat;
    vertical-align:middle 
}
.col .nb.livraison span{ background-position : 0 -30px }
.landing-wrapper {
    min-height:1200px;
}
.laduree {
    padding:20px 0;
}
.logo-bloc {
    position:relative;
}
.logo-bloc img.paris {
    position: absolute;
    z-index: 4;
    top: -40px;
}
.logo-bloc img.eiffel {
    position: absolute;
    z-index: 4;
    top: -112px;
    right: 130px;
}
p.title {
    font-family: 'greatvibes';
    color: #000000;
    font-size: 3em;
    text-align: center;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 40px 0;
}
p.title span {
    font-family: 'bernard';
}
.bg-cream {
    background: url('/assets/conso-enquete/img/macaron/chantilly.png') 0 0 no-repeat;
    width:444px;
    height:25px;
    margin:auto;
}
p.mentions{ font-size:11px; color:#aaa;padding: 0 15px }

.form-wrapper {
    width: 100%;
}

.bloc-form {
    background-color: #FFF;
    padding: 25px 0;
    margin: 10px 100px 0 100px;
    border-radius: 10px;
    position: relative;
}


.text-form{
    font-size:16px;
    text-align:center;
    padding:0 15px 10px 15px;
}
.text-form span{
    font-size:24px;
    letter-spacing:2px
}

/*.form_elem{
    display:inline-block;
    margin-right:2%;
    width:45%;
    vertical-align:middle;
    position:relative;
}
.form_elem#id_gender{ display:block }
.form_elem#cityBlock div.selector.fixedWidth, 
.form_elem#cityBlock div.selector.fixedWidth span{ width:100%; max-width:none; }
*/
.form_date,
#id_gender .bloc-radio label{
    border-radius:10px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.4);
}
#wrapper .form_date div.selector, #wrapper .form_date div.selector span,
#wrapper .form_date div.selector.fixedWidth span{
    height:38px !important;
    line-height:38px !important
}

input[type=text], textarea{
    height:40px;
    background-color:#fff;
    border:1px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.4);
    padding: 0 10px;
    font-family:helvetica;
    font-size:15px;
    border-radius:10px;
    width:100%;
    margin-bottom:12px;
}

textarea{ height:200px; }
/*

.form_elem label{ 
    display:inline-block;
    width:30%;
    font-size:14px
}
#landing .form_elem input, 
#landing #wrapper div.selector.fixedWidth{
    width:68%
}
#landing #wrapper div.selector.fixedWidth{
    display: inline-block
}
.form_elem#first_name{
    clear:both;
}*/

#bloc-btn-fb{ padding-left:160px }
#create_customer{ padding-right:60px }

#create_customer button,
#contact .btnSmall input, 
#desinscription .btnSmall input{
    border:4px solid #FFF;
    background-color:#a61236;
    display:inline-block;
    width:100%;
    font-size: 2em;
    color:#fff;
    text-align:center;
    text-transform:uppercase;
    padding: 15px 0;
    font-weight:bold; 
    cursor: pointer;
    letter-spacing:3px;
    transition-property: background-color, color ;
    transition-duration: 0.5s;
    font-family:"bernard";
    -webkit-box-shadow: 0px 0px 0px 2px rgba(166,18,54,1);
    -moz-box-shadow: 0px 0px 0px 2px rgba(166,18,54,1);
    box-shadow: 0px 0px 0px 2px rgba(166,18,54,1);
}
#bloc-btn-fb, #create_customer {
    text-align:center;
}
#create_customer button{ width:49%; margin: 0 auto }
@media screen and (max-width:768px) {
    #create_customer button{ width:100%; margin: 0 auto }
}

#create_customer button:hover,
#contact .btnSmall input:hover, 
#desinscription .btnSmall input:hover{
    background-color:#FFF;
    color:#a61236;
}

#desinscription .btnSmall input{
    padding:5px 0;
    margin-top:0;
}


#contact .btnSmall input{
    width: 30%;
    float:right;
}

.form div .error{
    position:absolute;
    width:279px;
    height:29px;
    background: url('/assets/conso-enquete/img/error.png') 0 0 no-repeat;
    font-size:12px;
    color:#fff;
    top:-27px;
    padding-left:30px;
    line-height:22px;
    left:0;
    z-index:3
}	
.form_elem#firstname .error{ left:65px }

.court{ width:160px; }
.moyen{ width:250px; }
.long{ width:340px; }
img.lampadaire {
    padding-top:20px;
    margin:auto;
}
img.macarons {
    position: absolute;
    top: 170px;
    right: -28%;
}
#footer {
    background-color: #FFF;
    border-top: 2px dotted #b3b3b3;
}
.footer{ text-align:center; padding: 15px 0; }
.footer a{ font-size:15px; color:#000; margin : 0 10px }

#form-left, #form-right{
    width:100%;
    position:relative;
    z-index:3
}
#form-right{ padding-top:0; }
#form-left{ padding-left:60px }

.bloc-milka{
    position:relative;
}
.bloc-milka img{ position:absolute; margin:auto; display:block; height: auto; max-width:100% }
#logo-milka{ top:-250px; left:calc(50% - 180px); z-index:2}
#chocomix{ left:-50px; top:-406px }
#milkini{ left:-156px; top:-156px }
#poudre{ left:175px; top:-308px }
#oreo-splouch{ left:-258px; top:-62px; z-index:2 }
#triple-car{ right:80px; top:-330px }
#caramel{ right:-37px; top:-330px }
#triple-choco{ right:-175px; top:-330px }
#coeur-droite{ right:-175px; top:110px }
#coeur-left{ left:-10px; top:220px }


/* Responsive ****************************/


@media screen and (max-width:970px) {
    .bloc-form{ margin-left:10px; margin-right:10px }
    .top-bloc .title{
        background:#fff;
        font-size:24px;
        padding:15px;
        height:auto;
        width:100%;
        margin-top:0;
    }
    .top-bloc{ height:auto }
    #chocomix,
    #milkini,
    #poudre,
    #oreo-splouch,
    #triple-car,
    #caramel,
    #triple-choco{ display:none }


    #logo-milka{ top:-190px} 

}

@media screen and (min-width:1800px) {
    body, .form-wrapper{
        background-size: 100% auto;
    }

}
@media screen and (max-width:1100px) {
    #header {
        position:inherit;
    }
    img.eiffel, img.paris {
        display:none;
    }
    p.title {
        font-size:2em;
        padding:20px 0;
    }
}
@media screen and (max-width:768px) {
    .text-form strong{ font-size:18px }
    #header .logo{
        text-align:center;
    }
    .top-bloc .logo-nespresso{ top:0px  }
    #bloc-btn-fb, #create_customer {
        display:block;
        width:100%;
    }
    img.macarons {
        display:none;
    }

    #bloc-btn-fb{ padding-left:0 }
    #form-right{ background:none; padding-top:0 }
    #create_customer{ padding-right:10px }
    #form-left{ padding-left:10px }

    .form_elem label,
    #landing .form_elem input, 
    #landing #wrapper div.selector.fixedWidth{ width:100% }
    .form_elem label{
        margin: 0 10px 5px 10px
    }
    #create_customer{ text-align:center; }


}
@media screen and (max-width:900px) {
    #header {
        position:inherit;
    }
    .top-bloc {
        width:98%;
    }
    .top-bloc .item {
        width:95%;
        text-align:center;
    }
}
@media screen and (max-width:620px) { 
    #header .infos {
        display:none;
    }
    #header {
        text-align:center;
    }
    #header .logo {
        float:none;
    }
}
@media screen and (max-width:400px) { 
    .text-form span{ font-size:18px }
    .top-bloc .item .toy-choice {
        background-size:cover;
    }
}