@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
@import url('https://fonts.googleapis.com/css?family=Varela+Round');

body {
    font-family: 'Roboto', sans-serif;
    background: #0e4896;
    padding: 0;
    margin: 0;
}


 
#wrapper {
    margin: auto;
    min-height: 800px;
    max-width: 1024px;
    overflow: hidden;
    position: relative;
    background: #142477  url("../images/png/bg_mouled.png") top center no-repeat;
    background-size: contain;

}

.content_wrapper{
	margin-top:17%;
    position:relative;
    padding-top:200px;
    text-align:center
}
.logo_wrapper{
margin: 0 2%; overflow:hidden
	
}
.logo_wrapper img.lilas_extra{
 position:absolute; left: 26%;
    top: 14%; max-width:40%
	
}.logo_wrapper img.logo_lilas{
 position:absolute; right : 26%; top:0 ; max-width:40%
	
}
.mouled_special{ display:inline-block; margin-bottom: 20px; max-width:90%}
.date_mouled{ display:inline-block;   max-width:90%}
.coin_bas {
    background: url("../img/coin_bas.png") left top no-repeat;
    width: 234px;
    height: 173px;
    position: absolute;
    left: -240px;
    bottom: 0;
    display: inline-block;
    z-index: 999;
}
.coin_haut {
    background: url("../img/coin_haut.png") left top no-repeat;
    width: 241px;
    height: 178px;
    text-align: right;
    position: absolute;
    right: -250px;
    top: 0;
    display: inline-block;
    z-index: 999;
}

.container_logos_home {
    position: relative;
    top: 120px;
    left: 0;
    z-index: 999;
    width: 100%;
}
.logo {
    position: absolute;
    left: calc(50% - 370px);
    z-index: 999;
    max-width: 100%;
    height: auto;
}
.logo_left {
    position: absolute;
    top:210px;
    left: 40px;
    z-index: 999;
    max-width: 100%;
    height: auto;
}
.logo_right {
    position: absolute;
    top:252px;
    right: 35px;
    z-index: 999;
    max-width: 100%;
    height: auto;
}
.logo_home{
    position: absolute;
    top:10px;
    left:50%;
    transform: translateX(-50%);
    z-index: 3;
    max-width: 100%;
    height: auto;
}
.logo_bottom{
    position: absolute;
    top: 109px;
    left: calc(50% - 130px);
    z-index: 99;
    max-width: 100%;
    height: auto;
}
.logo_home_2{

    position: absolute;
    left:50%;

    transform: translateX(-50%);
    bottom: 150px;
    z-index: 3;
    max-width: 100%;
    height: auto;
}

@-webkit-keyframes spaceboots {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake {
    -webkit-animation-name: spaceboots;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    transition: all .4s ease;
}
.btn_commancer.shake:hover {
    -webkit-animation-name: none;
    transform: scale(1.1);
}
.merci {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    z-index: 999;
    width: 493px;
}
.text {
    position: absolute;
    top: 480px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    z-index: 999;
    max-width: 100%;
    height: auto;
}
.text_merci {
    font-family: 'Roboto', sans-serif;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    z-index: 999;
    text-align: center;
    width: 530px;
}
.page_title.echec{
    color: #f81919;
}

.text_merci .page_title{
    margin-bottom: 80px;}
.text_merci .text_comment{ font-family: "Varela Round" ,sans-serif; padding: 0 20px; font-weight: 300; font-size: 26px; color: #6F6D6D; margin-bottom: 50px; line-height: 1.5}
.text_merci .text_comment a{  font-weight: 700;  color: #000000; }
.text_merci .text_comment a:hover{  color: #462c9b; text-decoration: none }
.text_merci .text_prop{font-weight: 200; font-size: 20px; color: #313131; margin-bottom: 20px;line-height: 1}

.text_merci h2 {
    font-family: 'Roboto', sans-serif;
    color: #313131;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 35px;
}
.text_merci p {
    font-family: 'Roboto', sans-serif;
    color: #5e7283;
    font-size: 16px;
}
.text_merci p a,
.text_merci p a:hover,
.text_merci p a:focus {
    color: #f05276;
}
.produits {
    position: absolute;
    top: 606px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    z-index: 999;
}
#port {
    margin: 0px auto;
    overflow: hidden;
    position: relative;
    height: 800px;
    z-index: 2;
}
.btn_commancer {
    height: 45px;
    width: 175px;
    line-height: 45px;
    font-size: 18px;
    color: #fff;
    background: #76bd56;
    overflow: hidden;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-decoration: none;
    border-radius: 100px;
    border: none;
    display: block;
    outline: none !important;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
#wrapper > .btn_commancer {
    position: absolute;
    bottom: 30px;
    right: -200px;
    z-index: 999;
}
.btn_commancer:hover,
.btn_commancer:focus,
.btn_commancer:active {
    color: #fff;
    background: #558a3e;
    text-decoration: none;
}
.btn_commancer > span {
    display: inline-block
}
.btn_commancer.hideRightShowLeft:hover > span {
    -webkit-animation: hideRightShowLeft 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: hideRightShowLeft 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}



@-webkit-keyframes hideLeftShowRight {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); }

    49% {
        -webkit-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        transform: translateX(-200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    50% {
        -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
        transform: translateX(200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); } }

@-moz-keyframes hideLeftShowRight {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); }

    49% {
        -webkit-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        transform: translateX(-200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    50% {
        -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
        transform: translateX(200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); }
}

@-o-keyframes hideLeftShowRight {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); }

    49% {
        -webkit-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        transform: translateY(-200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    50% {
        -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
        transform: translateX(200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); }
}

@keyframes hideLeftShowRight {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); }

    49% {
        -webkit-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        transform: translateX(-200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    50% {
        -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
        transform: translateX(200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); }
}



@-webkit-keyframes hideRightShowLeft {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); }

    49% {
        -webkit-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        transform: translateX(-200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    50% {
        -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
        transform: translateX(200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); } }

@-moz-keyframes hideRightShowLeft {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); }

    49% {
        -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
        transform: translateX(200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    50% {
        -webkit-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        transform: translateX(-200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); }
}

@-o-keyframes hideRightShowLeft {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); }

    49% {
        -webkit-transform: translateY(200%);
        -ms-transform: translateY(200%);
        transform: translateY(200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    50% {
        -webkit-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        transform: translateX(-200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); }
}

@keyframes hideRightShowLeft {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); }

    49% {
        -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
        transform: translateX(200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    50% {
        -webkit-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        transform: translateX(-200%);
        opacity: 0;
        filter: alpha(opacity=0); }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100); }
}
.wrap_btn a {
    position: absolute;
    bottom: 30px;
    right: 30px;
}
.my_icons {
    display: inline-block;
    vertical-align: middle;
}
.icon_fleche {
    background: url("../img/fleche.png") left top no-repeat;
    width: 13px;
    height: 12px;
    margin-left: 5px;
}
.icon_pdf {
    background: url("../img/pdf.png") left top no-repeat;
    width: 14px;
    height: 17px;
    margin-right: 5px;
    margin-top: -4px;
}
.btn_reglement {
    font-size: 18px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    margin-top: 12px;
    margin-right: 19px;
    display: inline-block;
    outline: none;
}
.btn_reglement:hover,
.btn_reglement:focus {
    color: #fff;
}
.logo_2 {
    display: block;
    margin: 20px auto 0px auto;
    padding: 0;
}
.separateur {
    margin: 20px auto 27px auto;
    display: block;
}
.titre_page {
    padding: 0;
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
}
#content {
    -webkit-transform: matrix(0, 0, 0, 0, 0, 0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
}
#content_index {
    width: 1024px;
    height: 800px;
    opacity: 0;
    z-index: 9;
}
/************ place holder *********/
div.wrapper_holdsname {
    width: 100%;
    height: 45px;
    margin-right: 0px;
    margin-left: 0px;
    display: inline-block;
    position: relative;
}
div.wrapper_holdsname:last-of-type{margin-bottom: 15px}
div.holdsname {
    height: 45px;
    position: relative;
    text-align: left;
    width: 425px;
}
div.holdsname span.holder {
    position: absolute;
    margin-top: 23px;
    margin-left: 18px;
    color: #b4bec0;
    cursor: auto;
    font-size: 16px;
    z-index: 1;
    font-family: 'Roboto', sans-serif;
}

div.holdsname input {
    font-size: 16px;
    color: #000;
    padding-left: 120px;
    padding-right: 50px;
    /*background: url("../img/bg_input.png") left top no-repeat;*/
    width: 425px;
    height: 45px;
    line-height: 67px;
    border: 2px solid #d02e26;
    outline: none;
    font-family: 'Roboto', sans-serif;
    border-radius: 5px;
}

.type_select{ padding: 0;
    margin: 0;

    overflow: hidden;

    font-family: 'Roboto', sans-serif;
    height: 45px;
    line-height: 45px;
    border: 2px solid #d02e26;
    border-radius: 5px;


    background-image: url('../img/picto_select.png');
    background-repeat: no-repeat;
    background-position: 385px center;
}
.holdsname.type_select label{
    left: -3px;
    height: 42px;

}
.type_select select{

    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 270px;
    margin-left: 150px;
    text-align: left;
    padding-left: 10px;
    font-size: 16px;


}
.type_select select:focus {
    outline: none;
}
.relative_date{ position: relative; margin-left: 160px; z-index: 1; }
div.holdsname.type2 input{padding-left: 15px;  max-width: 100%}
div.holdsname.type1 input{padding-left: 170px}
div.holdsname input:focus {
    background-position: left bottom;
}
/************ /place holder *********/
.icon_nom {
    background: url("../img/icon_1.png") left top no-repeat;
    width: 25px;
    height: 24px;
}
.icon_date_naissance {
    background: url("../img/icon_2.png") left top no-repeat;
    width: 24px;
    height: 24px;
}
.icon_tel {
    background: url("../img/icon_3.png") left top no-repeat;
    width: 24px;
    height: 24px;
}
.icon_email {
    background: url("../img/icon_4.png") left top no-repeat;
    width: 24px;
    height: 18px;
}
.icon_cin {
    background: url("../img/icon_5.png") left top no-repeat;
    width: 21px;
    height: 25px;
}
div.holdsname .my_icons {
    position: absolute;
    top: 10px;
    right: 18px;
}
div.wrapper_holdsname {
    margin-bottom: 20px;
    vertical-align: top;
}
.champ_obligatoire {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}
.champ_obligatoire > sub {
    color: #ef2828;
    font-size: 25px;
}
/************ chekbox *********/
.checkboxes {
    font-size: 16px;
    color: #5f8297;
    width: 284px;
    height: 25px;
    line-height: 20px;
    position: relative;
    font-family: 'Roboto', sans-serif;
    margin-left: 0;
}
.checkboxes label       { display: block; cursor: pointer; text-align: left; font-weight: normal;}
.radios     { padding-top: 18px; background: url(divider.png) repeat-x 0 0; }
.label_check input,
.label_radio input  { margin-right: 15px; }
.has-js .label_check,
.has-js .label_radio    { padding-left: 45px; }
.has-js .label_radio    { background: url(../img/radio-off.png) no-repeat 0px 5px; }
.has-js .label_check    { background: url(../img/check-off.png) no-repeat 12px; }
.has-js label.c_on      { background: url(../img/check-on.png) no-repeat 12px; }
.has-js label.r_on      { background: url(../img/radio-on.png) no-repeat 0px 5px; }
.has-js .label_check input,
.has-js .label_radio input  { position: absolute; left: -9999px; }
/************ /chekbox *********/
.holdsname label.error, .holdsname.type2 label.error {
    position: absolute;
    color: #f2641e;
    right: 30px;
    left: auto;
    background: none;
    width: auto;
    top: 72%;
}
.label_check label.error {
    font-size: 14px;
    color: #e34d0a;
    top: 18px;
    position: absolute;
    font-weight: 400;
    left: 40px;
}
.wrap_message {

}
.wrap_question .wrap_messages{
    color: #e34d0a;
    font-size: 21px;
    font-family: 'Roboto', sans-serif;
}
.wrap_messages + .my_radios{
    margin-top: 15px;
}
.wrap_message p {
    color: #e34d0a;
    font-size: 21px;
    font-family: 'Roboto', sans-serif;
}
.wrap_message p span {
    font-weight: 700;
}
.blue {
    color: #0079bd;
}
.rose {
    color: #f0466c;
}
.vert {
    color: #76bd56;
}
.wrap_message p.text_invitation {
    font-size: 18px;
    font-weight: 300;
    margin: 25px auto;
    text-align: center;
}
.icon_amis {
    background: url("../img/amis.png") left top no-repeat;
    width: 34px;
    height: 25px;
    margin-right: 10px;
    margin-top: -4px;
}
.icon_facebook {
    background: url("../img/facebook.png") left top no-repeat;
    width: 8px;
    height: 16px;
    margin-right: 10px;
    margin-top: -4px;
}
.btn_invitation {
    height: 45px;
    width: 100%;
    max-width: 370px;
    line-height: 45px;
    font-size: 18px;
    color: #fff;
    background: #ee4b61;
    overflow: hidden;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-decoration: none;
    border-radius: 100px;
    border: none;
    display: block;
    outline: none !important;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    margin: 10px auto;
    position: relative;
}
.btn_invitation:before{content: ""; position: absolute; left: 45px; top: 50%; transform: translateY(-50%); background: url("../img/picto_invite.png")center no-repeat; width: 33px; height: 24px}
.btn_invitation:hover,
.btn_invitation:focus,
.btn_invitation:active {
    color: #fff;
    background: #cf2e26;
    text-decoration: none;
}
.btn_partage {
    height: 45px;
    width: 100%;
    max-width: 370px;
    line-height: 45px;
    font-size: 18px;
    color: #fff;
    background: #354ea4;
    overflow: hidden;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-decoration: none;
    border-radius: 100px;
    border: none;
    display: block;
    outline: none !important;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    margin: 10px auto;
    position: relative;
}
.btn_partage:before {content: ""; position: absolute; left: 55px; top: 50%; transform: translateY(-50%); background: url("../img/picto_fb.png")center no-repeat;width: 7px; height: 15px }
.btn_partage:hover,
.btn_partage:focus,
.btn_partage:active {
    color: #fff;
    background: #184198;
    text-decoration: none;
}

.btn_replay {
    height: 45px;
    width: 100%;
    max-width: 370px;
    line-height: 45px;
    font-size: 18px;
    color: #fff;
    background: #669f29;
    overflow: hidden;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-decoration: none;
    border-radius: 100px;
    border: none;
    display: block;
    outline: none !important;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    margin: 10px auto;
    position: relative;
}
.btn_replay:before {content: ""; position: absolute; left: 50px; top: 50%; transform: translateY(-50%);
    background: url("../img/picto_replay.png")center no-repeat;
    width: 21px;
    height: 26px}
.btn_replay:hover,
.btn_replay:focus,
.btn_replay:active {
    color: #fff;
    background: #98c43a;
    text-decoration: none;
}
.bg_pdt{position: absolute; bottom: 0;    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto; }

.wrap_question {
    width: 420px;
    height: 350px;
    padding: 25px 0 0;
    margin: auto;
}
.title_question{

    margin-bottom: 90px;
}
.title_page{
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    color: #d02e26;
    font-size: 26px;
    font-weight: 700;
    font-family: 'Varela Round', sans-serif;
}

.nbr_question, .page_title{
    color: #d02e26;
    font-size: 32px;
    font-weight: 700;
    font-family: 'Varela Round', sans-serif;


}
.bloc_result .page_title{
    font-size: 28px;


}
.wrap_question p {
    color: #5e7283;
    font-size: 21px;
    font-family: 'Roboto', sans-serif;

}
ul.liste_etape {
    list-style-type: none;
    margin: auto;
    width: 600px;
    padding: 0;
    text-align: center;
    position: absolute;
    bottom: 195px;
    left:50%;
    transform: translateX(-50%);
    z-index: 999;
}
ul.liste_etape > li {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 34px;
    color: #455a64;
    font-size: 12px;
    border-radius: 100%;
    margin: 0 20px 10px 0;

    border: 1px solid #fff;
    text-align: center;
    position: relative;
    background: #ffffff;

}

ul.liste_etape > li:last-child {
    margin-bottom: 0;
}
ul.liste_etape > li::after {
    content: "";
    background: #ffffff;
    display: block;
    width: 27px;
    height: 3px;
    border-left: 1px solid #fff;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto;
}
ul.liste_etape > li.vrai::after {
    background: #57cb42;
}
ul.liste_etape > li.faux::after {
    background: #f41918
}

ul.liste_etape > li:last-child::after {
    display: none;
}

ul.liste_etape > li.vrai {
    background: #57cb42
}
ul.liste_etape > li.faux {
    background: #f41918
}
.icon_vrai {
    background: url("../img/v.png") left top no-repeat;
    width: 15px;
    height: 10px;
    margin-top: -2px;
}
.icon_faux {
    background: url("../img/x.png") left top no-repeat;
    width: 11px;
    margin-top: -2px;
    height: 10px;
}
.form_question p {
    color: #313131;
    font-weight: 500;
    font-size: 20px;
}
.label_radio {
    display: block;
    text-align: left;
    cursor: pointer;
    margin-left: 78px;
    margin-bottom: 50px;
    padding-left: 60px;
    max-width: 450px;
}
.my_radios {
    margin-top: 30px;
}
.my_label input {
    display: none;
}
.my_label {
    display: block;
    max-width: 425px;
    min-height: 44px;
    line-height: 22px;
    color: #6a6c6e;
    font-size: 16px;
    background: #f2f2f2;
    font-family: 'Roboto', sans-serif;
    padding: 8px 0;
    border-radius: 15px;
    text-transform: uppercase;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    cursor: pointer;
    margin: 7px auto;
    border: 4px solid #f2f2f2;
    font-weight: 500;
}
.my_label:hover,
.my_label.selected,
.my_label:focus {
    color: #fff;
    background: #1460a6;
    border: 4px solid #1460a6;
}
.respnosive {
    display: none;
    padding: 10px;
    margin-top: 70px;
    text-align: center;
}
.respnosive > img {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.respnosive .btn_commancer {
    margin: 20px auto;
}
.respnosive h2,
.respnosive h3 {
    color: #fff;
    text-align: center;
}
.respnosive h2 {
    font-size: 18px;
}
.respnosive h3 {
    font-size: 16px;
}
.respnosive .btn_reglement {
    margin: 20px auto;
    display: inline-block;
}
.link_default {color: #4e2f8a}
.link_default:hover {color: #f2681e;}
.my_btn {
    background: #ffed00;
    width: 254px;
    height: 61px;
    border-radius: 28px;
    position: absolute;
    right:46px;
    bottom: 38px;
    z-index: 999;
    text-align: center;
    overflow: hidden;
}
.my_btn > span{
    display: inline-block;
    font-size: 30px;
    text-transform: uppercase;
    line-height: 63px;
    font-weight: 900;
    color: #d02e26;
    webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;




}
.my_btn.hideRightShowLeft:hover > span {
    -webkit-animation: hideRightShowLeft 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: hideRightShowLeft 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}



.btn_info {
    background: url("../img/info.png") left top no-repeat;
    width: 50px;
    height: 51px;
    position: absolute;
    top: 25px;
    left: -300px;
    outline: none;
    font-size: 0;
    z-index: 999;
}
.btn_info:hover {
    background-position: left bottom;
}
.lien_right_header {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 999;
}
.lien_left_header {
    position: absolute;
    bottom: 150px;
    right: 32px;
    z-index: 999
}
.lien_left_bis_header {
    position: absolute;
    bottom: 150px;
    left: 10px;
    z-index: 999
}
.lien_center_header{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}
.img_top_header{
    position: absolute;
    top: 140px;
    right: 185px;
    z-index: 999;
    max-width: 100%;
    height: auto;
}
.img_center_header{
    position: absolute;
    top: 180px;
    right: 28px;
    z-index: 999;
    max-width: 100%;
    height: auto;
}
.img_bottom_header{
    position: absolute;
    top: 400px;
    right: 96px;
    z-index: 999;
    max-width: 100%;
    height: auto;
}
.lien_bottom_header{
    position: absolute;
    top: -25px;
    left: -10px;
    z-index: 999;
    max-width: 100%;
    height: auto;
}
.img_bottom_footer{
    position: absolute;
    bottom: 94px;
    left: calc(50% - 290px);
    z-index: 999;
    max-width: 100%;
    height: auto;
}
.my_form.quest_page{background: url("../img/question.png") center top no-repeat; padding: 0; margin-top: 95px;}
.my_form {
    background: url("../img/inscription.png") center top no-repeat;
    /*width: 764px;*/
    height: 661px;
    margin-left: auto;
    padding : 100px 0 0 300px ;
    margin-top: 65px;
    text-align: center;
    position: relative;
}
.holdsname label
{
    position: absolute;
    left: 0;
    top: 0;
    height: 45px;
    line-height: 45px;
    background: #d02e26;
    color: #ffffff;
    width: 100px;
    padding: 0 15px;
    border-radius: 5px;
    font-weight: 400;
    font-size: 14px;

}
/*.phone_row .holdsname label
{
    background: #7ac835;

}
.phone_row  div.holdsname input {
    border: 2px solid #7ac835;
}*/
.holdsname.error .name_lab{background:#f2641e    }
div.holdsname input.error{border: 2px solid #f2641e;}
.holdsname.type1 label{width: 150px;}
.holdsname.type_select label{width: 150px;}
.holdsname.type2 label{width: 170px;}
.cols {
    display: block;
    /*width: 244px;*/
    /*margin:8px;*/
}
.btn_submit {
    background: url("../img/valider.png") left top no-repeat;
    width: 175px;
    height: 51px;
    position: absolute;
    bottom: 20px;
    right: 248px;
    outline: none;
    border: none;
    font-size: 0;
    z-index: 999;
}
.btn_submit:hover {
    background-position: left bottom;
}

.btn_suivant {
    background: url("../img/suivant.png") center top no-repeat;
    width: 175px;
    height: 53px;
    position: absolute;
    bottom: 130px;
    right: 249px;
    outline: none;
    border: none;
    z-index: 999;
}

.btn_suivant:hover {
    background-position: 0 -57px;
}

.picto_inscri{position: absolute; right: 15px ;top: 50%; transform: translateY(-50%); z-index: 3; cursor: pointer}
.picto_inscri_fg{position: absolute; right: 15px ;top: 50%; transform: translateY(-50%); z-index: 3; cursor: pointer}
.bloc_result{
    background: url("../img/bg_result.png") center top no-repeat;
    padding: 0;
    margin: 95px auto 0;
    width: 667px;
    height: 535px;
    position: relative;
    z-index: 1;

}

.bg_grattage{
    background: url("../img/bg_grettage.png") center top no-repeat; padding: 0; margin: 95px auto 0; width: 645px; height: 595px;
}

.wrap_grattage{

    width: 500px;
    height: 500px;
    padding: 25px 0 0;
    margin: auto;
    text-align: center;
    position: relative;

}
.msg_achat{ position: absolute;
    bottom: 20px;
    left: 35%;
    transform: translateX(-35%);
    display: inline-block;

}
.desc_sms{
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;

}

#scratchcard { display: block; width: 396px; height: 79px; margin: 115px auto 40px; }
#counter{display: none}
#input_nom-error{width:auto}
.desc_condition{color: #FFFFFF; font-size: 14px; width: 25%; position: absolute; bottom: 30px; left: 40px;
    text-align: center;}