.apercu_personnage_rar{
    position:relative;
    display:none;/* Masqué pour éviter d'afficher le json dans la page */

}

.colore_vert {
    filter: hue-rotate(80deg);
}
.colore_bleu {
    filter: hue-rotate(200deg);
}
.colore_violet {
    filter: hue-rotate(290deg);
}

.apercu_personnage_rar__mini{
    width:135px;
    height:135px;
    overflow:hidden;
}

.apercu_personnage_rar__homme > canvas{
    left: -70px;
}

.apercu_personnage_rar__femme > canvas{
    left: -75px;
    top: -25px;
}

.apercu_personnage_rar__mini>canvas.apercu_personnage_rar__slotFond {
	display: none;
}

.apercu_personnage_rar__affiche{
    display:block;
    margin: auto;
}

.apercu_personnage_rar__calque{
    width: 256px;
    height: 512px;
    position:absolute;
    top:0;
    left:0;
}

.popupCreationPersonnage_wrapper,
.popupGeneriqueNouvelle_wrapper{
    background: rgba(0,0,0,0.5);
    position: fixed;
    left:0;
    bottom: 0;
    right:0;
    top:0;
    margin:auto;
    z-index: 3000000;
}

.popupGeneriqueNouvelle_wrapper {
    display: grid;
    align-items: center;
    justify-items: center;
}

.popupCreationPersonnage,
.popupGeneriqueNouvelle{
    background: url(../images/carteFiligrane.png) center top no-repeat;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1a587d+0,0b2637+100 */
    background: url(../images/carteFiligrane.png) center top no-repeat, rgb(26,88,125); /* Old browsers */
    background: url(../images/carteFiligrane.png) center top no-repeat, -moz-linear-gradient(top,  rgba(26,88,125,1) 0%, rgba(11,38,55,1) 100%); /* FF3.6-15 */
    background: url(../images/carteFiligrane.png) center top no-repeat,  -webkit-linear-gradient(top,  rgba(26,88,125,1) 0%,rgba(11,38,55,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background:  url(../images/carteFiligrane.png) center top no-repeat, linear-gradient(to bottom,  rgba(26,88,125,1) 0%,rgba(11,38,55,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    box-shadow: inset 0 0 10px #0b2637;
    width: 880px;
    height: 580px;
    border-radius: 5px;
    border:2px solid #2a6b93;
     position: absolute;
    left:0;
    bottom: 0;
    right:0;
    top:0;
    margin:auto;
}

.popupGeneriqueNouvelle{
    width: 90%;
    max-width: 600px;
    max-height: 90%;
    text-align: center;
    height: auto;
    position: relative;
}

#popup_inscription .popupGeneriqueNouvelle{
    max-height: inherit;
}

#popup_inscription .rc-anchor-normal{
    height: 54px;
    width: 350px;
}

.popupGeneriqueNouvelle .container{
	max-height:inherit;
	overflow: auto;
}

.popupCreationPersonnage .zoneEdition_onglets,
.popupCreationPersonnage .zoneEdition_choix,
.popupCreationPersonnage .zoneEdition_personnage{
    width: 80px;
    height: 100%;
    float: left;
    padding: 0;
    margin: 0;
}


.popupCreationPersonnage .zoneEdition_choix{
    width: 320px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4989b9+0,4989b9+100&0.5+0,0+100 */
    background: -moz-linear-gradient(left,  rgba(73,137,185,0.5) 0%, rgba(73,137,185,0) 100%); /* FF3.6-15 */
    background: linear-gradient(left,  rgba(73,137,185,0.5) 0%,rgba(73,137,185,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(73,137,185,0.5) 0%,rgba(73,137,185,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#804989b9', endColorstr='#004989b9',GradientType=1 ); /* IE6-9 */
}

.popupCreationPersonnage .zoneEdition_personnage{
    width: 475px;
    background: url(../images/personnages_midas_creation/creaPerso_haloBleu.png) bottom center;
    background-size: 100%;
}
.zoneEdition_femme li[data-onglet="barbe"]{
    display: none;
}

.popupCreationPersonnage .zoneEdition_onglets li{
    width: 100%;
    box-sizing: border-box;
    height: 14.2%;
    background: url(../images/personnages_midas_creation/creationPerso_separateur.png) no-repeat center bottom;
}
.popupCreationPersonnage.zoneEdition_homme .zoneEdition_onglets li{
    height: 12.5%;
    list-style: none;

}
.popupCreationPersonnage .zoneEdition_onglets li.actif{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#60dcf2+0,4989b9+36,4989b9+100&1+0,0.5+100 */
background: -moz-linear-gradient(left,  rgba(96,220,242,1) 0%, rgba(73,137,185,0.82) 36%, rgba(73,137,185,0.5) 100%); /* FF3.6-15 */
background: linear-gradient(left,  rgba(96,220,242,1) 0%,rgba(73,137,185,0.82) 36%,rgba(73,137,185,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(96,220,242,1) 0%,rgba(73,137,185,0.82) 36%,rgba(73,137,185,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border-radius:4px 0 0px 4px;
   }
.popupCreationPersonnage .zoneEdition_onglets li:last-of-type{
    background: none;
}

.popupCreationPersonnage .zoneEdition_onglets li a{
    width: 100%;
    height: 100%;
     background:no-repeat center;
     display: block;
    transition: background-color 0.15s ease-in-out;
    float: left;
}

.zoneEdition_onglets li a.editerVisage{
    background-image: url(../images/personnages_midas_creation/ui_icone_editerVisage_@2X.png);
}

.zoneEdition_onglets li a.editerYeux{
    background-image: url(../images/personnages_midas_creation/ui_icone_editerYeux_@2X.png);
}
.zoneEdition_onglets li a.editerSourcils{
    background-image: url(../images/personnages_midas_creation/ui_icone_editerSourcils_@2X.png);
}
.zoneEdition_onglets li a.editerCheveux{
    background-image: url(../images/personnages_midas_creation/ui_icone_editerCheveux_@2X.png);
}
.zoneEdition_onglets li a.editerBarbe{
    background-image: url(../images/personnages_midas_creation/ui_icone_editerBarbe_@2X.png);
}
.zoneEdition_onglets li a.editerBouche{
    background-image: url(../images/personnages_midas_creation/ui_icone_editerBouche@2X.png);
}
.zoneEdition_onglets li a.editerNez{
    background-image: url(../images/personnages_midas_creation/ui_icone_editerNez_@2X.png);
}
.zoneEdition_onglets li a.editerMarque{
    background-image: url(../images/personnages_midas_creation/ui_icone_editerMarque_@2X.png);
}

.zoneEdition_choix .editionChoix{
    display: none;
    padding: 12px;
    box-sizing: border-box;
    height: 100%;
}

.zoneEdition_choix .contenuPage_sousPage{
    height: 100%;
}

.zoneEdition_choix .editionChoix.apparition_sousPage{
    display: block;
}


.optionWrapper{
    height: 50%;
    display: block;
}

.optionWrapper.optionWrapper_couleur{
    height: auto;
}


.optionWrapper a{
    width: 80px;
    height: 80px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 80px;
    background-color:rgba(73,137,185,0.5);
    border-top:1px solid #47b4dc;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    position: relative;
    margin: 5px;
    transition: all 0.15s ease-in-out;

}
.popupCreationPersonnage .zoneEdition_onglets li{

    transition: all 0.15s ease-in-out;
    list-style: none;
}

.optionWrapper a:hover,
.optionWrapper a.actif,
.popupCreationPersonnage .zoneEdition_onglets li:hover{
    background-color:rgba(96,220,242,0.6);
}
.optionWrapper a:hover,
.optionWrapper a.actif{

    box-shadow: 0 1px 0 rgba(255,255,255,1);}

.optionWrapper a.actif{
 background:rgba(96,220,242,1);
}

.optionWrapper a span{
    width: 90px;
    height: 90px;
    position: absolute;
    left:-5px;
    right: -5px;
    top: -5px;
    bottom: -5px;
    background:center no-repeat;
  }

  .ligneCouleur{
    margin-top: 10px;
  }


  /* ELEMENTS HOMME */

 /* visages*/
.optionWrapper a span.visage_0{
background-image: url(../images/personnages_midas_creation/hommes/corps/visage_0_p2.png);

}
.optionWrapper a span.visage_1{

background-image: url(../images/personnages_midas_creation/hommes/corps/visage_1_p2.png);
}
.optionWrapper a span.visage_2{

background-image: url(../images/personnages_midas_creation/hommes/corps/visage_2_p2.png);
}
.optionWrapper a span.visage_3{

background-image: url(../images/personnages_midas_creation/hommes/corps/visage_3_p2.png);
}
.optionWrapper a span.visage_4{

background-image: url(../images/personnages_midas_creation/hommes/corps/visage_4_p2.png);
}
.optionWrapper a span.visage_5{

background-image: url(../images/personnages_midas_creation/hommes/corps/visage_5_p2.png);
}
.optionWrapper a span.visage_6{

background-image: url(../images/personnages_midas_creation/hommes/corps/visage_6_p2.png);
}
.optionWrapper a span.visage_7{

background-image: url(../images/personnages_midas_creation/hommes/corps/visage_7_p2.png);
}


 /* peau*/
.optionWrapper a span.couleurPeau_0{
background-image: url(../images/personnages_midas_creation/hommes/corps/couleurPeau_0.png);

}
.optionWrapper a span.couleurPeau_1{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurPeau_1.png);
}
.optionWrapper a span.couleurPeau_2{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurPeau_2.png);
}
.optionWrapper a span.couleurPeau_3{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurPeau_3.png);
}
.optionWrapper a span.couleurPeau_4{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurPeau_4.png);
}

 /*yeux*/
.optionWrapper a span.yeux_0{
background-image: url(../images/personnages_midas_creation/hommes/corps/yeux_0_p2_e0.png);

}
.optionWrapper a span.yeux_1{

background-image: url(../images/personnages_midas_creation/hommes/corps/yeux_1_p2_e0.png);
}
.optionWrapper a span.yeux_2{

background-image: url(../images/personnages_midas_creation/hommes/corps/yeux_2_p2_e0.png);
}
.optionWrapper a span.yeux_3{

background-image: url(../images/personnages_midas_creation/hommes/corps/yeux_3_p2_e0.png);
}
.optionWrapper a span.yeux_4{

background-image: url(../images/personnages_midas_creation/hommes/corps/yeux_4_p2_e0.png);
}
.optionWrapper a span.yeux_5{

background-image: url(../images/personnages_midas_creation/hommes/corps/yeux_5_p2_e0.png);
}
.optionWrapper a span.yeux_6{

background-image: url(../images/personnages_midas_creation/hommes/corps/yeux_6_p2_e0.png);
}
.optionWrapper a span.yeux_7{

background-image: url(../images/personnages_midas_creation/hommes/corps/yeux_7_p2_e0.png);
}


/*couleur des yeux*/
.optionWrapper a span.couleurYeux_0{
background-image: url(../images/personnages_midas_creation/hommes/corps/couleurYeux_0.png);

}
.optionWrapper a span.couleurYeux_1{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurYeux_1.png);
}
.optionWrapper a span.couleurYeux_2{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurYeux_2.png);
}
.optionWrapper a span.couleurYeux_3{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurYeux_3.png);
}
.optionWrapper a span.couleurYeux_4{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurYeux_4.png);
}

 /* sourcils*/
.optionWrapper a span.sourcils_0{
background-image: url(../images/personnages_midas_creation/hommes/corps/sourcils_0_c1_e0.png);

}
.optionWrapper a span.sourcils_1{

background-image: url(../images/personnages_midas_creation/hommes/corps/sourcils_1_c1_e0.png);
}
.optionWrapper a span.sourcils_2{

background-image: url(../images/personnages_midas_creation/hommes/corps/sourcils_2_c1_e0.png);
}
.optionWrapper a span.sourcils_3{

background-image: url(../images/personnages_midas_creation/hommes/corps/sourcils_3_c1_e0.png);
}
.optionWrapper a span.sourcils_4{

background-image: url(../images/personnages_midas_creation/hommes/corps/sourcils_4_c1_e0.png);
}
.optionWrapper a span.sourcils_5{

background-image: url(../images/personnages_midas_creation/hommes/corps/sourcils_5_c1_e0.png);
}
.optionWrapper a span.sourcils_6{

background-image: url(../images/personnages_midas_creation/hommes/corps/sourcils_6_c1_e0.png);
}
.optionWrapper a span.sourcils_7{

background-image: url(../images/personnages_midas_creation/hommes/corps/sourcils_7_c1_e0.png);
}


 /* couleurCheveux*/
.optionWrapper a span.couleurCheveux_0{
background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_0.png);

}
.optionWrapper a span.couleurCheveux_1{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_1.png);
}
.optionWrapper a span.couleurCheveux_2{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_2.png);
}
.optionWrapper a span.couleurCheveux_3{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_3.png);
}
.optionWrapper a span.couleurCheveux_4{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_4.png);
}
.optionWrapper a span.couleurCheveux_5{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_5.png);
}
.optionWrapper a span.couleurCheveux_6{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_6.png);
}
.optionWrapper a span.couleurCheveux_7{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_7.png);
}

 /* couleurBarbe*/
.optionWrapper a span.couleurBarbe_0{
background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_3.png);

}
.optionWrapper a span.couleurBarbe_1{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_5.png);
}
.optionWrapper a span.couleurBarbe_2{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_4.png);
}
.optionWrapper a span.couleurBarbe_3{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_6.png);
}
.optionWrapper a span.couleurBarbe_4{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_7.png);
}
.optionWrapper a span.couleurBarbe_5{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_2.png);
}
.optionWrapper a span.couleurBarbe_6{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_6.png);
}
.optionWrapper a span.couleurBarbe_7{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_7.png);
}


 /* couleurCheveux*/
.optionWrapper a span.couleurSourcils_0{
background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_3.png);

}
.optionWrapper a span.couleurSourcils_1{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_1.png);
}
.optionWrapper a span.couleurSourcils_2{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_4.png);
}
.optionWrapper a span.couleurSourcils_3{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_6.png);
}
.optionWrapper a span.couleurSourcils_4{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_7.png);
}
.optionWrapper a span.couleurSourcils_5{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_2.png);
}
.optionWrapper a span.couleurSourcils_6{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_6.png);
}
.optionWrapper a span.couleurSourcils_7{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurCheveux_7.png);
}

 /* cheveux*/
.optionWrapper a span.cheveux_0{
background-image: url(../images/personnages_midas_creation/hommes/corps/cheveuxAvants_0_c1.png);

}
.optionWrapper a span.cheveux_1{

background-image: url(../images/personnages_midas_creation/hommes/corps/cheveuxAvants_1_c1.png);
}
.optionWrapper a span.cheveux_2{

background-image: url(../images/personnages_midas_creation/hommes/corps/cheveuxAvants_2_c1.png);
}
.optionWrapper a span.cheveux_3{

background-image: url(../images/personnages_midas_creation/hommes/corps/cheveuxAvants_3_c1.png);
}
.optionWrapper a span.cheveux_4{

background-image: url(../images/personnages_midas_creation/hommes/corps/cheveuxAvants_4_c1.png);
}
.optionWrapper a span.cheveux_5{

background-image: url(../images/personnages_midas_creation/hommes/corps/cheveuxAvants_5_c1.png);
}
.optionWrapper a span.cheveux_6{

background-image: url(../images/personnages_midas_creation/hommes/corps/cheveuxAvants_6_c1.png);
}
.optionWrapper a span.cheveux_7{

background-image: url(../images/personnages_midas_creation/hommes/corps/cheveuxAvants_7_c1.png);
}
 /* barbe*/
.optionWrapper a span.barbe_0{
background-image: url(../images/personnages_midas_creation/hommes/corps/barbe_0_c2.png);
background-position: 12px center;

}
.optionWrapper a span.barbe_1{

background-image: url(../images/personnages_midas_creation/hommes/corps/barbe_1_c2.png);
background-position: 12px center;
}
.optionWrapper a span.barbe_2{

background-image: url(../images/personnages_midas_creation/hommes/corps/barbe_2_c2.png);
background-position: 12px center;
}
.optionWrapper a span.barbe_3{

background-image: url(../images/personnages_midas_creation/hommes/corps/barbe_3_c2.png);
background-position: 12px center;
}
.optionWrapper a span.barbe_4{

background-image: url(../images/personnages_midas_creation/hommes/corps/barbe_4_c2.png);
background-position: 12px center;
}
.optionWrapper a span.barbe_5{

background-image: url(../images/personnages_midas_creation/hommes/corps/barbe_5_c2.png);
background-position: 12px center;
}
.optionWrapper a span.barbe_6{

background-image: url(../images/personnages_midas_creation/hommes/corps/barbe_6_c2.png);
background-position: 12px center;
}
.optionWrapper a span.barbe_7{

background-image: url(../images/personnages_midas_creation/hommes/corps/barbe_7_c2.png);
background-position: 12px center;
}
.optionWrapper a span.barbe_8{

background-image: url(../images/personnages_midas_creation/hommes/corps/barbe_8_c2.png);
background-position: 12px center;
}

/*bouche*/

.optionWrapper a span.bouche_0{
background-image: url(../images/personnages_midas_creation/hommes/corps/bouche_0_c0_p2_e0.png);
background-position: 4px -5px;

}
.optionWrapper a span.bouche_1{

background-image: url(../images/personnages_midas_creation/hommes/corps/bouche_1_c0_p2_e0.png);
background-position: 4px -5px;
}
.optionWrapper a span.bouche_2{

background-image: url(../images/personnages_midas_creation/hommes/corps/bouche_2_c0_p2_e0.png);
background-position: 4px -5px;
}
.optionWrapper a span.bouche_3{

background-image: url(../images/personnages_midas_creation/hommes/corps/bouche_3_c0_p2_e0.png);
background-position: 4px -5px;
}
.optionWrapper a span.bouche_4{

background-image: url(../images/personnages_midas_creation/hommes/corps/bouche_4_c0_p2_e0.png);
background-position: 4px -5px;
}
.optionWrapper a span.bouche_5{

background-image: url(../images/personnages_midas_creation/hommes/corps/bouche_5_c0_p2_e0.png);
background-position: 4px -5px;
}
.optionWrapper a span.bouche_6{

background-image: url(../images/personnages_midas_creation/hommes/corps/bouche_6_c0_p2_e0.png);
background-position: 4px -5px;
}
.optionWrapper a span.bouche_7{

background-image: url(../images/personnages_midas_creation/hommes/corps/bouche_7_c0_p2_e0.png);
background-position: 4px -5px;
}

 /* couleur bouche*/
.optionWrapper a span.couleurBouche_0{
background-image: url(../images/personnages_midas_creation/hommes/corps/couleurBouche_0.png);

}
.optionWrapper a span.couleurBouche_1{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurBouche_1.png);
}
.optionWrapper a span.couleurBouche_2{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurBouche_2.png);
}
.optionWrapper a span.couleurBouche_3{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurBouche_3.png);
}
.optionWrapper a span.couleurBouche_4{

background-image: url(../images/personnages_midas_creation/hommes/corps/couleurBouche_4.png);
}



/*nez*/
 /* cheveux*/
.optionWrapper a span.nez_0{
background-image: url(../images/personnages_midas_creation/hommes/corps/nez_0_p2_e0.png);
background-position: 10px 5px;

}
.optionWrapper a span.nez_1{

background-image: url(../images/personnages_midas_creation/hommes/corps/nez_1_p2_e0.png);
background-position: 15px 11px;
}
.optionWrapper a span.nez_2{

background-image: url(../images/personnages_midas_creation/hommes/corps/nez_2_p2_e0.png);
background-position: 10px 5px;
}
.optionWrapper a span.nez_3{

background-image: url(../images/personnages_midas_creation/hommes/corps/nez_3_p2_e0.png);
background-position: 10px 11px;
}
.optionWrapper a span.nez_4{

background-image: url(../images/personnages_midas_creation/hommes/corps/nez_4_p2_e0.png);
background-position: 10px 5px;
}
.optionWrapper a span.nez_5{

background-image: url(../images/personnages_midas_creation/hommes/corps/nez_5_p2_e0.png);
background-position: 10px 5px;
}
.optionWrapper a span.nez_6{

background-image: url(../images/personnages_midas_creation/hommes/corps/nez_6_p2_e0.png);
background-position: 10px 15px;
}
.optionWrapper a span.nez_7{

background-image: url(../images/personnages_midas_creation/hommes/corps/nez_7_p2_e0.png);
background-position: 10px 5px;
}

/*marques*/
 /* couleurCheveux*/
.optionWrapper a span.marques_0{
background-image: url(../images/personnages_midas_creation/hommes/corps/marques_0_p2.png);

}
.optionWrapper a span.marques_1{

background-image: url(../images/personnages_midas_creation/hommes/corps/marques_1_p2.png);
}
.optionWrapper a span.marques_2{

background-image: url(../images/personnages_midas_creation/hommes/corps/marques_2_p2.png);
}
.optionWrapper a span.marques_3{

background-image: url(../images/personnages_midas_creation/hommes/corps/marques_3_p2.png);
}
.optionWrapper a span.marques_4{

background-image: url(../images/personnages_midas_creation/hommes/corps/marques_4_p2.png);
}
.optionWrapper a span.marques_5{

background-image: url(../images/personnages_midas_creation/hommes/corps/marques_5_p2.png);
}
.optionWrapper a span.marques_6{

background-image: url(../images/personnages_midas_creation/hommes/corps/marques_6_p2.png);
}
.optionWrapper a span.marques_7{

background-image: url(../images/personnages_midas_creation/hommes/corps/marques_7_p2.png);
background-position: 0px center;
}



  /* ELEMENTS FEMME */

 /* visages*/
.zoneEdition_femme .optionWrapper a span.visage_0{
background-image: url(../images/personnages_midas_creation/femmes/corps/visage_0_p2.png);

}
.zoneEdition_femme .optionWrapper a span.visage_1{

background-image: url(../images/personnages_midas_creation/femmes/corps/visage_1_p2.png);
}
.zoneEdition_femme .optionWrapper a span.visage_2{

background-image: url(../images/personnages_midas_creation/femmes/corps/visage_2_p2.png);
}
.zoneEdition_femme .optionWrapper a span.visage_3{

background-image: url(../images/personnages_midas_creation/femmes/corps/visage_3_p2.png);
}
.zoneEdition_femme .optionWrapper a span.visage_4{

background-image: url(../images/personnages_midas_creation/femmes/corps/visage_4_p2.png);
}
.zoneEdition_femme .optionWrapper a span.visage_5{

background-image: url(../images/personnages_midas_creation/femmes/corps/visage_5_p2.png);
}
.zoneEdition_femme .optionWrapper a span.visage_6{

background-image: url(../images/personnages_midas_creation/femmes/corps/visage_6_p2.png);
}
.zoneEdition_femme .optionWrapper a span.visage_7{

background-image: url(../images/personnages_midas_creation/femmes/corps/visage_7_p2.png);
}


 /*yeux*/
.zoneEdition_femme .optionWrapper a span.yeux_0{
background-image: url(../images/personnages_midas_creation/femmes/corps/yeux_0_p2_e0.png);

}
.zoneEdition_femme .optionWrapper a span.yeux_1{

background-image: url(../images/personnages_midas_creation/femmes/corps/yeux_1_p2_e0.png);
}
.zoneEdition_femme .optionWrapper a span.yeux_2{

background-image: url(../images/personnages_midas_creation/femmes/corps/yeux_2_p2_e0.png);
}
.zoneEdition_femme .optionWrapper a span.yeux_3{

background-image: url(../images/personnages_midas_creation/femmes/corps/yeux_3_p2_e0.png);
}
.zoneEdition_femme .optionWrapper a span.yeux_4{

background-image: url(../images/personnages_midas_creation/femmes/corps/yeux_4_p2_e0.png);
}
.zoneEdition_femme .optionWrapper a span.yeux_5{

background-image: url(../images/personnages_midas_creation/femmes/corps/yeux_5_p2_e0.png);
}
.zoneEdition_femme .optionWrapper a span.yeux_6{

background-image: url(../images/personnages_midas_creation/femmes/corps/yeux_6_p2_e0.png);
}
.zoneEdition_femme .optionWrapper a span.yeux_7{

background-image: url(../images/personnages_midas_creation/femmes/corps/yeux_7_p2_e0.png);
}


 /* sourcils*/
.zoneEdition_femme .optionWrapper a span.sourcils_0{
background-image: url(../images/personnages_midas_creation/femmes/corps/sourcils_0_c1_e0.png);

}
.zoneEdition_femme .optionWrapper a span.sourcils_1{

background-image: url(../images/personnages_midas_creation/femmes/corps/sourcils_1_c1_e0.png);
}
.zoneEdition_femme .optionWrapper a span.sourcils_2{

background-image: url(../images/personnages_midas_creation/femmes/corps/sourcils_2_c1_e0.png);
}
.zoneEdition_femme .optionWrapper a span.sourcils_3{

background-image: url(../images/personnages_midas_creation/femmes/corps/sourcils_3_c1_e0.png);
}
.zoneEdition_femme .optionWrapper a span.sourcils_4{

background-image: url(../images/personnages_midas_creation/femmes/corps/sourcils_4_c1_e0.png);
}
.zoneEdition_femme .optionWrapper a span.sourcils_5{

background-image: url(../images/personnages_midas_creation/femmes/corps/sourcils_5_c1_e0.png);
}
.zoneEdition_femme .optionWrapper a span.sourcils_6{

background-image: url(../images/personnages_midas_creation/femmes/corps/sourcils_6_c1_e0.png);
}
.zoneEdition_femme .optionWrapper a span.sourcils_7{

background-image: url(../images/personnages_midas_creation/femmes/corps/sourcils_7_c1_e0.png);
}


 /* cheveux*/
.zoneEdition_femme .optionWrapper a span.cheveux_0{
background-image: url(../images/personnages_midas_creation/femmes/corps/cheveuxAvants_0_c1.png);

}
.zoneEdition_femme .optionWrapper a span.cheveux_1{

background-image: url(../images/personnages_midas_creation/femmes/corps/cheveuxAvants_1_c1.png);
}
.zoneEdition_femme .optionWrapper a span.cheveux_2{

background-image: url(../images/personnages_midas_creation/femmes/corps/cheveuxAvants_2_c1.png);
}
.zoneEdition_femme .optionWrapper a span.cheveux_3{

background-image: url(../images/personnages_midas_creation/femmes/corps/cheveuxAvants_3_c1.png);
}
.zoneEdition_femme .optionWrapper a span.cheveux_4{

background-image: url(../images/personnages_midas_creation/femmes/corps/cheveuxAvants_4_c1.png);
}
.zoneEdition_femme .optionWrapper a span.cheveux_5{

background-image: url(../images/personnages_midas_creation/femmes/corps/cheveuxAvants_5_c1.png);
}
.zoneEdition_femme .optionWrapper a span.cheveux_6{

background-image: url(../images/personnages_midas_creation/femmes/corps/cheveuxAvants_6_c1.png);
}
.zoneEdition_femme .optionWrapper a span.cheveux_7{

background-image: url(../images/personnages_midas_creation/femmes/corps/cheveuxAvants_7_c1.png);
}


/*bouche*/

.zoneEdition_femme .optionWrapper a span.bouche_0{
background-image: url(../images/personnages_midas_creation/femmes/corps/bouche_0_c0_p2_e0.png);
background-position: 4px -5px;

}
.zoneEdition_femme .optionWrapper a span.bouche_1{

background-image: url(../images/personnages_midas_creation/femmes/corps/bouche_1_c0_p2_e0.png);
background-position: 4px -5px;
}
.zoneEdition_femme .optionWrapper a span.bouche_2{

background-image: url(../images/personnages_midas_creation/femmes/corps/bouche_2_c0_p2_e0.png);
background-position: 4px -5px;
}
.zoneEdition_femme .optionWrapper a span.bouche_3{

background-image: url(../images/personnages_midas_creation/femmes/corps/bouche_3_c0_p2_e0.png);
background-position: 4px -5px;
}
.zoneEdition_femme .optionWrapper a span.bouche_4{

background-image: url(../images/personnages_midas_creation/femmes/corps/bouche_4_c0_p2_e0.png);
background-position: 4px -5px;
}
.zoneEdition_femme .optionWrapper a span.bouche_5{

background-image: url(../images/personnages_midas_creation/femmes/corps/bouche_5_c0_p2_e0.png);
background-position: 4px -5px;
}
.zoneEdition_femme .optionWrapper a span.bouche_6{

background-image: url(../images/personnages_midas_creation/femmes/corps/bouche_6_c0_p2_e0.png);
background-position: 4px -5px;
}
.zoneEdition_femme .optionWrapper a span.bouche_7{

background-image: url(../images/personnages_midas_creation/femmes/corps/bouche_7_c0_p2_e0.png);
background-position: 4px -5px;
}
 /* couleur bouche*/
.zoneEdition_femme .optionWrapper a span.couleurBouche_0{
background-image: url(../images/personnages_midas_creation/femmes/corps/couleurBouche_0.png);

}
.zoneEdition_femme .optionWrapper a span.couleurBouche_1{

background-image: url(../images/personnages_midas_creation/femmes/corps/couleurBouche_1.png);
}
.zoneEdition_femme .optionWrapper a span.couleurBouche_2{

background-image: url(../images/personnages_midas_creation/femmes/corps/couleurBouche_2.png);
}
.zoneEdition_femme .optionWrapper a span.couleurBouche_3{

background-image: url(../images/personnages_midas_creation/femmes/corps/couleurBouche_3.png);
}
.zoneEdition_femme .optionWrapper a span.couleurBouche_4{

background-image: url(../images/personnages_midas_creation/femmes/corps/couleurBouche_4.png);
}

 /* nez */
.zoneEdition_femme .optionWrapper a span.nez_0{
background-image: url(../images/personnages_midas_creation/femmes/corps/nez_0_p2_e0.png);
background-position: 10px 5px;

}
.zoneEdition_femme .optionWrapper a span.nez_1{

background-image: url(../images/personnages_midas_creation/femmes/corps/nez_1_p2_e0.png);
background-position: 15px 11px;
}
.zoneEdition_femme .optionWrapper a span.nez_2{

background-image: url(../images/personnages_midas_creation/femmes/corps/nez_2_p2_e0.png);
background-position: 10px 5px;
}
.zoneEdition_femme .optionWrapper a span.nez_3{

background-image: url(../images/personnages_midas_creation/femmes/corps/nez_3_p2_e0.png);
background-position: 10px 11px;
}
.zoneEdition_femme .optionWrapper a span.nez_4{

background-image: url(../images/personnages_midas_creation/femmes/corps/nez_4_p2_e0.png);
background-position: 10px 5px;
}
.zoneEdition_femme .optionWrapper a span.nez_5{

background-image: url(../images/personnages_midas_creation/femmes/corps/nez_5_p2_e0.png);
background-position: 10px 5px;
}
.zoneEdition_femme .optionWrapper a span.nez_6{

background-image: url(../images/personnages_midas_creation/femmes/corps/nez_6_p2_e0.png);
background-position: 10px 15px;
}
.zoneEdition_femme .optionWrapper a span.nez_7{

background-image: url(../images/personnages_midas_creation/femmes/corps/nez_7_p2_e0.png);
background-position: 10px 5px;
}

.popupCreationPersonnage_wrapper .apercu_personnage_rar__calque {
       width: 1024px;
    height: 2048px;
    left: -100%;
    right: -70%;
    top: -28%;
    margin: auto;
}

.popupCreationPersonnage_wrapper .apercu_personnage_rar__homme .apercu_personnage_rar__calque{
    top: -62px;
    right: -85%;
}

.popupCreationPersonnage_wrapper .apercu_personnage_rar__affiche{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.popupCreationPersonnage_wrapper .apercu_personnage_rar__affiche:after{
    content: "";
    width: 100%;
    height: 200px;
    background:url(../images/personnages_midas_creation/creaPerso_fondDegrade.png) bottom center no-repeat;
    z-index: 30000;
    position: absolute;
    bottom: 0;
    left: 0;
}

.popupCreationPersonnage_wrapper button{
    border: none;

}

button.popupCreationPersonnage_btnFermer,
.popupGeneriqueNouvelle_btnFermer{
background:url(../images/personnages_midas_creation/creaPerso_btnFermer.png) no-repeat transparent;
height: 52px;
width: 48px;
position: absolute;
right: -26px;
top: -10px;
outline: none !important;
}

.popupCreationPersonnage_wrapper .zoneBoutons{
    position: absolute;
    bottom: 10px;
    right: 15px;
    z-index: 300000;
}
button.popupCreationPersonnage_btnReload,
button.popupCreationPersonnage_btnValider{
    background:url(../images/personnages_midas_creation/creaPerso_btnReload.png) no-repeat transparent;
height: 78px;
width: 83px;
margin: 0;

outline: none !important;
}
button.popupCreationPersonnage_btnValider{
    background:url(../images/personnages_midas_creation/creaPerso_btnValidation.png) no-repeat transparent;
}

button.popupCreationPersonnage_btnValider.editionPayante{

    background:url(../images/personnages_midas_creation/creaPerso_btnAchat.png) no-repeat transparent center top;
        font-weight: bold !important;
    color: #fff !important;
    width: 149px;
    padding-right: 30px !important;
    text-align: center;
    font-size: 20px;
    padding: 0;
    font-family: tahoma;
    align-items: start;
    text-shadow: 0 0 5px #000;

}
button.popupCreationPersonnage_btnValider.editionPayante:after{
content: "";
display: inline-block;
vertical-align: middle;
margin-left: 3px;
width: 18px;
    height: 22px;
    background: url(https://lesroyaumes.cdn.oxv.fr/images/boutons/iconeToken.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    vertical-align: middle;
}

/* animation*/
.popupCreationPersonnage_wrapper,
.popupGeneriqueNouvelle_wrapper
{
    animation: 0.5s popupCreationPersonnage_fadeIn forwards;
    overflow: hidden;
}
.popupCreationPersonnage,
.popupGeneriqueNouvelle
{
    opacity: 0;
    animation: 0.35s popupCreationPersonnage_fadeInDown forwards 0.15s;
}

.popupCreationPersonnage .zoneEdition_onglets{
    opacity: 0;
    animation: 0.2s popupCreationPersonnage_fadeInLeft forwards 0.3s;
}
.popupCreationPersonnage .zoneEdition_choix{
    overflow: hidden;
}

.popupCreationPersonnage .editionChoix{

}

.popupCreationPersonnage .zoneBoutons{

    opacity: 0;
    animation: 0.25s popupCreationPersonnage_fadeInUp forwards 0.4s;
}

.popupCreationPersonnage .apercu_personnage_rar__affiche{

    opacity: 0;
    animation: 0.35s popupCreationPersonnage_fadeInRight forwards 0.4s;
}

.editionChoix.apparition_sousPage{

    opacity: 0;
    animation: 0.15s popupCreationPersonnage_fadeIn forwards;
}

.editionChoix.apparition_sousPage  .optionWrapper{

    opacity: 0;
    animation:0.4s popupCreationPersonnage_fadeInLeft forwards;
}
.editionChoix.apparition_sousPage  .optionWrapper:nth-child(1){
    animation-delay: 0.05s;
}
.editionChoix.apparition_sousPage  .optionWrapper:nth-child(2){
    animation-delay: 0.10s;
}

.popupCreationPersonnage button:active,
.popupCreationPersonnage a:active,
.popupGeneriqueNouvelle button:active,
.popupGeneriqueNouvelle a:active{
    animation: 0.2s popupCreationPersonnage_auClic ease-in-out;
    background-color: transparent;
}
button.popupCreationPersonnage_btnReload,
button.popupCreationPersonnage_btnValider,
button.popupCreationPersonnage_btnFermer,
button.popupGeneriqueNouvelle_btnFermer{
    transition: 0.2s transform ease-in-out;
    cursor: pointer;
    z-index: 100;
}
button.popupCreationPersonnage_btnReload:hover,
button.popupCreationPersonnage_btnValider:hover,
button.popupGeneriqueNouvelle_btnFermer:hover{

        transform: scale3d(0.95, 0.95, 0.95);
}


@keyframes popupCreationPersonnage_fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes popupCreationPersonnage_bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes popupCreationPersonnage_fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-10%, 0, 0);
        transform: translate3d(-10%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
        transform: none;
    }
}

@keyframes popupCreationPersonnage_fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(10%, 0, 0);
        transform: translate3d(10%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
        transform: none;
    }
}
@keyframes popupCreationPersonnage_fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, 10%, 0);
        transform: translate3d(0, -10%, 0);
    }

    to {
        opacity: 1;
        transform: none;
        transform: none;
    }
}

@keyframes popupCreationPersonnage_fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0);
    }

    to {
        opacity: 1;
        transform: none;
        transform: none;
    }
}

@keyframes  popupCreationPersonnage_auClic {
    from {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50% {
        transform: scale3d(1.12, 1.12, 1.12);

    }

    to {
        transform: scale3d(1, 1, 1);
    }
}