html{ font-size:100%; width:100%; height:100% }
body{
    font-family:helvetica;
    color:#000;
    width:100%;
    position:relative;
    background-color: #ffffff;
    overflow-x:hidden;
    background-repeat: no-repeat;
    background-position: center top;
}
.landing-wrapper {
    background-image:url('/assets/conso-enquete/img/jouetsnoel2/bg-jouets.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size:cover;
}
#header {
    background-image: url(/assets/conso-enquete/img/jouetsnoel2/header.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    height: 172px;
    position: relative;
}
#header .logo{
    text-align:left;
}
#header .bloc-nb .col{
    padding:0;
    float:right;
    padding: 0 15px
}
.bg-fond {
    background:url('/assets/conso-enquete/img/jouetsnoel2/bg-fond.png') 0 0;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    bottom:0;
    right:0;
}
.z-index {
    position:relative;
    z-index:20;
}
#header .bloc-nb{ margin-top:12px }
.bloc-nb .nb p{
    color:#fff;
    font-size:20px;
    display:inline-block;
    vertical-align:middle 
}
.bloc-nb .nb span{
    display:inline-block;
    width:52px;
    height:52px;
    background: url('/assets/conso-enquete/img/chocolat/picto-head.png') 0 0 no-repeat;
    vertical-align:middle 
}
.bloc-nb .nb.livraison span{ background-position : 0 -52px }
.top-title {
    width:100%;
    text-align:center;
}
.top-title p {
    font-family: 'orangejuice';
    text-align: center;
    color: #000;
    font-size: 3.5em;
    background: #ff5db1;
    background: -moz-linear-gradient(left, #ff5db1 0%, #004b8c 100%);
    background: -webkit-linear-gradient(left, #ff5db1 0%,#004b8c 100%);
    background: linear-gradient(to right, #ff5db1 0%,#004b8c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 20px 0;
    letter-spacing: 5px;
}
.top-bloc{
    background: url(/assets/conso-enquete/img/jouetsnoel2/bg-gradient.png) center top no-repeat;
    text-align:center;
    text-transform:uppercase;
    width: 790px; 
    padding: 20px 0;
    margin: 0 auto;
    -webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.26);
    box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.26);
    z-index: 3;
}
.top-bloc .title {
    font-family: helvetica;
    color: #403e3e;
    font-size: 33px;
    text-align: center;     
    font-weight: 600;
    letter-spacing: 2px;
}
.top-bloc .title span {
    font-size:20px;
}
.top-bloc .choice {
    width:70%;
    margin:auto;
    padding-top:10px;
}
.top-bloc .item {
    border: 2px solid #eaeaea;
    border-radius: 20px;
    cursor: pointer;
    padding: 15px;
    width: 45%;
    display: inline-block;
    margin: 10px;
}
.top-bloc .item:hover {
    background-color: #fdf9f9;
    color: #eaeaea;
}
.top-bloc .item.active {
    background-color: #eaeaea;
    color: #eaeaea;
}
.top-bloc .item .toy-choice {
    background: url(/assets/conso-enquete/img/jouetsnoel2/toys-radio.png) center top no-repeat;
    width:221px;
    height:100px;
    margin:auto;
}
.top-bloc .item input {
    display:none;
}
.top-bloc .item .toy-choice.barbie {
    background-position:0 0;
}
.top-bloc .item .toy-choice.playmobil {
    background-position:0 -200px;
}
.top-bloc .item.active .toy-choice.barbie {
    background-position:0 -101px;
}
.top-bloc .item.active .toy-choice.playmobil {
    background-position:0 -300px;
}
p.mentions{ font-size:11px; color:#aaa;padding: 0 15px }

.form-wrapper {
    width: 100%;
    padding-top: 40px;
}

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


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



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, .form_date,.bloc-radio{
    width:68%;
     display: inline-block
}
#landing #wrapper div.selector.fixedWidth{
    display: inline-block
}
.form_elem#first_name{
    clear:both;
}*/

/*#bloc-btn-fb, #create_customer {
    display:inline-block;
    width:49%;
    vertical-align:middle
}*/
#bloc-btn-fb{ padding-left:160px }
#create_customer{ padding-right:60px }

#create_customer button,
#contact .btnSmall input, 
#desinscription .btnSmall input{
    border:none;
    background-color:#876abc;
    display:inline-block;
    width:100%;
    font-size: 45px;
    color:#fff;
    text-align:center;
    text-transform:uppercase;
    padding: 7px 0;
    font-weight:bold; 
    cursor: pointer;
    letter-spacing:3px;
    border-radius :50px;
    transition-property: background-color, color ;
    transition-duration: 0.5s;
    font-family:"ar_cenaregular", helvetica;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff5db1+0,ef017c+100;Pink+3D+%231 */
    background: #ff5db1; /* Old browsers */
    background: -moz-linear-gradient(top,  #ff5db1 0%, #ef017c 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ff5db1 0%,#ef017c 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ff5db1 0%,#ef017c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=0 ); /* IE6-9 */

}

#form_accueil_v2 .form_elem{
    display:inline-block;
    margin-right:2%;
    width:45%;
    vertical-align:middle;
    position:relative;
}
.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
}

#form_accueil_v2 .form_elem#id_gender{ width:17% }
#form_accueil_v2 .form_elem#firstname, .form_elem#lastname{ width:35% }
.form_elem#cityBlock div.selector.fixedWidth span{ max-width:none }
#form_accueil_v2 .form_elem#pcode{width:180px}
#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{
    color:#ff85c5;
}

#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; }

#footer{ }
.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 }
#form-right{
    padding:25px 0
}

.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: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%;
    }

    #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, .form_date{ width:100% }
    .form_elem label{
        margin: 0 10px 5px 10px
    }
    #landing #wrapper .form_date div.selector.fixedWidth{
        width:32%;
    }

    #landing #wrapper .form_date div.selector.fixedWidth:nth-child(1){
        width:24%;
        border:none;
    }
    #landing #wrapper .form_date div.selector.fixedWidth:nth-child(2){
        width:40%;
    }
    #create_customer{ text-align:center; }


}
@media screen and (max-width:900px) { 
    .top-bloc {
        width:98%;
    }
    .top-bloc .item {
        width:95%;
        text-align:center;
    }
}
@media screen and (max-width:400px) { 
    .text-form span{ font-size:18px }
    .top-bloc .item .toy-choice {
        background-size:cover;
    }
}