/* Florian */

/* Forgot password reset password page */
#forgotPasswordReset {position:absolute; width:500px; z-index:102; padding: 1% 2% 2%; background-color:white; left:50%; top:30%; margin : 0 0 0 -18%; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:15px;}
#forgotPasswordReset h2:first-line {color: #FDC300;}
#forgotPasswordReset h2 {text-align: center; font-family: 'wonderblah', 'Oswald', Helvetica, Verdana, sans-serif; color: #82CFF0; font-size: 1.4em;}
#forgotPasswordReset input {width: 98%;padding: 2% 0 2% 2%;font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-size: 0.9em; margin: 4% 0;}

#closeForgotMailReset {
    position: absolute;
    top: 28px;
    margin-left: 500px;
    left: 0%;
    width: 20px;
    height: 20px;
    cursor: pointer;
}


#cacheOverlay2 {
    position:fixed;
    width:100%;
    height:100%;
    background-color:#4e4949;
    opacity:0.7;
    z-index:120;
}

/* Fin Florian */

/***** GENERAL *****/
.couleurBleu{color:#82CFF0;}
#cacheOverlay {position:fixed; z-index:101; width:100%; height:100%; background: rgba(0, 0, 0, 0.5);}

/*** ALERT NOT OPTIMISED ***/
#alertNotOptimised{
  position:absolute;
  width:100%;
  text-align: center;
  z-index:152;
}
#alertNotOptimised img {
  height: auto;
  margin: 5% auto;
  width: 70%;
}

/*** LOG IN ***/
#logIn{position:absolute; width:500px; background-color:white; z-index:152; left:50%;top: 50%;left: 50%;transform: translate(-50%, -50%); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:15px;}
/* Forgot password */
#forgotMail {position:absolute; float: left; z-index:102; width:500px; padding: 1% 2% 2%;top: 50%;left: 50%;transform: translate(-50%, -50%); background-color:white; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:15px;}
#forgotMail h2:first-line {color: #FDC300;}
#forgotMail h2 {text-align: center; font-family: 'wonderblah', 'Oswald', Helvetica, Verdana, sans-serif; color: #82CFF0; font-size: 1.4em; letter-spacing: 0.5px; word-spacing: 3px;}
#forgotMail input {width: 98%;padding: 2% 0 2% 2%;font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-size: 0.9em; margin: 4% 0;}
#err-return-forgotMail {font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-size: 1em; font-weight: 300;margin: 0 0 2% 0;}
#boutonEnvoieForgotMail button {text-align: center; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 500; font-size: 18px; background-color:#82CFF0; color:#FFF; width:45%; padding: 3px 25px 6px; cursor:pointer; border: 0; float: left; margin: 2% 28% 0 28%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#boutonEnvoieForgotMail button:active {background-color:#FDC300;  margin: 2.5% 28% -0.5% 28%;}

/* Croix Forgot password */
#closeForgotMail {position:relative; float: right; margin:0 -7px 0 0; width:20px; cursor:pointer;}

/* Message info */
input#forgotEmailField:hover ~ span.msgForgotMail {display: block;}
.msgForgotMail {display: none; width: 215px; position: absolute; margin: -120px 0 0 -53px; padding: 15px 0; background: #82CFF0; font-family: 'Oswald', Helvetica, Verdana, sans-serif;  font-size: 15px; line-height: 17px; font-weight: 300; text-align: center; color: #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 1px 2px 1px #666666;
    -moz-box-shadow: 0px 1px 2px 1px #666666;
    -o-box-shadow: 0px 1px 2px 1px #666666;
    box-shadow: 0px 1px 2px 1px #666666;}
.msgForgotMail:after {z-index:5; content: ''; position: absolute; bottom: -4px; left: 48%; width: 0; height: 0; border-right: 12px solid #82CFF0; border-top: 20px solid #82CFF0;
-webkit-transform: scale(1) rotateZ(45deg);
-moz-transform: scale(1) rotate(45deg);
-ms-transform: scale(1) rotateZ(45deg);
-o-transform: scale(1) rotate(45deg);
transform: scale(1) rotateZ(-90deg);}
.msgForgotMail:before {z-index:4;content: ''; position: absolute; bottom: -4px; left: 49%; width: 0; height: 0; border-right: 10px solid #82CFF0; border-top: 10px solid transparent;
-webkit-transform: scale(1) rotateZ(45deg);
-moz-transform: scale(1) rotate(45deg);
-ms-transform: scale(1) rotateZ(45deg);
-o-transform: scale(1) rotate(45deg);
transform: scale(1) rotateZ(45deg);
-webkit-box-shadow: 0px 1px 2px 1px #666666;
-moz-box-shadow: 0px 1px 2px 1px #666666;
-o-box-shadow: 0px 1px 2px 1px #666666;
box-shadow: 0px 1px 2px 1px #666666;}

/* Logo motto close */
#title-login{float: left; width: 100%; text-align: center; font-family: 'wonderblah', 'Oswald', Helvetica, Verdana, sans-serif; color: #FDC300; margin: -50px 0; letter-spacing: 1px;}
#closeLogIn {position:absolute; top:28px; margin-left:450px; left:0%; width:20px; height:20px; cursor:pointer;}

/* E-mail - Pasword */
.inputLogIn{color:#82CFF0; font-size: 16px; height: 30px; width:280px; padding: 4px 6px; border: 2px solid #FDC300; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; box-shadow: none; display: block !important; margin: 20px auto 0 !important;}
#caseCocherRemember {margin-left:105px;}
.wrapChkbxRembr {float: left;}
#caseCocherRemember .wrapChkbxRembr input {float: left; margin-top: 20px;}
.caseRemember{float: left; color:#9a9a9d; font-size:16px; margin: 13px 0 0 6px; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 300;}
#caseCocherRemember .wrapChkbxRembr input:checked[name=caseRemember] ~ p.caseRemember {font-weight: 400; color:#FDC300; letter-spacing: -1px;}
#contact-logIn a:link{text-decoration:none;}

.mdpOublier{float: left; color:#9a9a9d; font-size:16px; margin-left:90px; cursor:pointer; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 300;}
.mdpOublier:hover{color:#FDC300;s}


input.inputPasswordLogin, input.inputPasswordLogin ~ span {position: absolute;top: 176px;left: 367px;}
input.inputPasswordLogin {opacity: 0; width: 25px !important; height: 16px; margin: 0 !important; z-index: 11;}
input.inputPasswordLogin ~ span {margin: -6px 0 0; z-index: 10;}
input.inputPasswordLogin ~ span:after {content: "\f070"; font-family: 'FontAwesome'; font-size: 1.5em; color:#82CFF0;}
input.inputPasswordLogin:checked ~ span:after {content: "\f06e"; color: #FDC300;}


/* Bouton Log in */
#envoieLogin{width: 100%; float: left; text-align: center;}
/* #envoieLogin button {border: 0px; background-color: white; cursor: pointer; margin-right: 11px;} OLD Max */
#envoieLogin button {width: 100px; height: 100px; background: #82CFF0; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; border: none; cursor: pointer;}
#envoieLogin button span.virgule:before {content: ''; position: absolute; top: 322px; left: 183px; border-right: 40px solid #82CFF0; border-top: 20px solid transparent;
-webkit-transform: scale(1) rotateZ(-16deg); -moz-transform: scale(1) rotate(-16deg); -ms-transform: scale(1) rotateZ(-16deg); -o-transform: scale(1) rotate(-16deg); transform: scale(1) rotateZ(-16deg);}
.txtLogin {font-family: 'wonderblah', 'Oswald', Helvetica, Verdana, sans-serif; color: #FFF; text-align: center; font-size: 20px; letter-spacing: 1px;}
#envoieLogin button:hover {background: #FDC300;}
#envoieLogin button:hover span.virgule:before  {border-right: 40px solid #FDC300;}

/* phrase */
#connexionAccountReseauxSociaux{display: none; width:100%; float: left; text-align:center; color:#82CFF0; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 400; font-size:17px;}


/* Boutons reseaux */
.signUpReseauxSociaux{height:45px; margin: 0 5px; cursor:pointer;text-decoration: none;font-family: 'wonderblah_elmt', Helvetica, Verdana, sans-serif;font-size: 50px;color: #FDC300; opacity: 0.5;}
.signUpReseauxSociaux:hover {opacity: 1;}

/* phrase sign up */
#signUpLogIn2{text-align:center; color:#9a9a9d; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 300; float: left; width: 100%;}
#lienSignUp{color:#82CFF0; cursor:pointer; font-weight: 400;}
#lienSignUp:hover {color:#FDC300; cursor:pointer;  font-weight: 400;}



/*** SIGN IN et UP ***/
#signUp {position: absolute; float: left; width: 500px; left: 50%; top: 50%;transform: translate(-50%, -50%); background-color: white; z-index: 102; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}

/* motto */
#logoWonderblahSignUp{position:absolute; top:20px; margin-left:20px; width:11%;}
/* motto */
#createAccount {cursor: default; margin-top:60px; text-align:center; line-height: 1.1em; font-family: 'wonderblah', 'Oswald', Helvetica, Verdana, sans-serif; color: #FDC300; letter-spacing: 1px;}

/* croix */
#closeSignUp {position:absolute; top:28px; margin-left:450px; left:0%; width:20px; height:20px; cursor:pointer;}

/* champs */
#emailSignUp,
#passwordInput,
#usernameSignUp,
#usernameSignUp2 {display: block !important; width:280px; height: 30px; margin: 12px auto 5px !important; color:#82CFF0; font-size: 16px; line-height: 26px; padding: 4px 6px; border: 2px solid #FDC300; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}

#usernameSignUp,
#usernameSignUp2 {width:202px; margin-left: 180px !important;}
#wondernameTakenMessage {z-index: 11; position: absolute; width: 202px; margin: -8px 0 0 180px; padding: 4px 8px; background: #FDC300; font-family: 'Oswald', Helvetica, Verdana, sans-serif; text-align: center; font-weight: 300; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;}
#verifieMotDePasse {position:absolute; width:100px; left:50%; margin: -99px 0 0 159px; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-size: 16px; font-weight: 700;}

/* phrase pop up */
#idWonder {float: left; margin: -40px 0 0 110px; color: #FDC300; font-family:'Oswald', Helvetica, Verdana, sans-serif;}
#idWonder:hover {cursor: default;}
#usernameSignUp:hover ~ .msgWonder {display:block;}
#usernameSignUp2:hover ~ .msgWonder {display:block;}
.msgWonder {display: none; background: #82CFF0; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-size: 15px; line-height: 17px; font-weight: 300; text-align: justify; color:#000; position:absolute;  margin: -101px 0 0 179px !important; padding: 15px 25px; width: 172px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
    -webkit-box-shadow: 0px 1px 2px 1px #666666;
    -moz-box-shadow: 0px 1px 2px 1px #666666;
    -o-box-shadow: 0px 1px 2px 1px #666666;
    box-shadow: 0px 1px 2px 1px #666666;}
.msgWonder:after {z-index:5; content: ''; position: absolute; bottom: -4px; left: 48%; width: 0; height: 0; border-right: 12px solid #82CFF0; border-top: 20px solid #82CFF0;
    -webkit-transform: scale(1) rotateZ(45deg);
    -moz-transform: scale(1) rotate(45deg);
    -ms-transform: scale(1) rotateZ(45deg);
    -o-transform: scale(1) rotate(45deg);
    transform: scale(1) rotateZ(-90deg);}
.msgWonder:before {z-index:4; content: ''; position: absolute; bottom: -4px; left: 49%; width: 0; height: 0; border-right: 10px solid #82CFF0; border-top: 10px solid transparent;
    -webkit-transform: scale(1) rotateZ(45deg);
    -moz-transform: scale(1) rotate(45deg);
    -ms-transform: scale(1) rotateZ(45deg);
    -o-transform: scale(1) rotate(45deg);
    transform: scale(1) rotateZ(45deg);
    -webkit-box-shadow: 0px 1px 2px 1px #666666;
    -moz-box-shadow: 0px 1px 2px 1px #666666;
    -o-box-shadow: 0px 1px 2px 1px #666666;
    box-shadow: 0px 1px 2px 1px #666666;}

.msgAvatar {display: none; width: 172px; position:absolute; margin: 126px 0 0 -412px !important; padding: 15px 25px; background: #82CFF0; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-size: 15px; line-height: 17px; font-weight: 300; text-align: justify; color:#000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
    -webkit-box-shadow: 0px 1px 2px 1px #666666;
    -moz-box-shadow: 0px 1px 2px 1px #666666;
    -o-box-shadow: 0px 1px 2px 1px #666666;
    box-shadow: 0px 1px 2px 1px #666666;}
.msgAvatar:after {z-index:5; content: ''; position: absolute; bottom: -4px; left: 48%; width: 0; height: 0; border-right: 12px solid #82CFF0; border-top: 20px solid #82CFF0;
    -webkit-transform: scale(1) rotateZ(45deg);
    -moz-transform: scale(1) rotate(45deg);
    -ms-transform: scale(1) rotateZ(45deg);
    -o-transform: scale(1) rotate(45deg);
    transform: scale(1) rotateZ(-90deg);}
.msgAvatar:before {z-index:4; content: ''; position: absolute; bottom: -4px; left: 49%; width: 0; height: 0; border-right: 10px solid #82CFF0; border-top: 10px solid transparent;
    -webkit-transform: scale(1) rotateZ(45deg);
    -moz-transform: scale(1) rotate(45deg);
    -ms-transform: scale(1) rotateZ(45deg);
    -o-transform: scale(1) rotate(45deg);
    transform: scale(1) rotateZ(45deg);
    -webkit-box-shadow: 0px 1px 2px 1px #666666;
    -moz-box-shadow: 0px 1px 2px 1px #666666;
    -o-box-shadow: 0px 1px 2px 1px #666666;
    box-shadow: 0px 1px 2px 1px #666666;}

.msgBlahtegoriesSignUp {display: none; width: 41%; position:absolute; top: 86.5%; left: 23%; padding: 15px 25px; background: #82CFF0; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-size: 15px; line-height: 17px; font-weight: 300; text-align: justify; color:#000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
    -webkit-box-shadow: 0px 1px 2px 1px #666666;
    -moz-box-shadow: 0px 1px 2px 1px #666666;
    -o-box-shadow: 0px 1px 2px 1px #666666;
    box-shadow: 0px 1px 2px 1px #666666;}
.msgBlahtegoriesSignUp:after {z-index:5; content: ''; position: absolute; bottom: -4px; left: 48%; width: 0; height: 0; border-right: 12px solid #82CFF0; border-top: 20px solid #82CFF0;
    -webkit-transform: scale(1) rotateZ(45deg);
    -moz-transform: scale(1) rotate(45deg);
    -ms-transform: scale(1) rotateZ(45deg);
    -o-transform: scale(1) rotate(45deg);
    transform: scale(1) rotateZ(-90deg);}
.msgBlahtegoriesSignUp:before {z-index:4; content: ''; position: absolute; bottom: -4px; left: 49%; width: 0; height: 0; border-right: 10px solid #82CFF0; border-top: 10px solid transparent;
    -webkit-transform: scale(1) rotateZ(45deg);
    -moz-transform: scale(1) rotate(45deg);
    -ms-transform: scale(1) rotateZ(45deg);
    -o-transform: scale(1) rotate(45deg);
    transform: scale(1) rotateZ(45deg);
    -webkit-box-shadow: 0px 1px 2px 1px #666666;
    -moz-box-shadow: 0px 1px 2px 1px #666666;
    -o-box-shadow: 0px 1px 2px 1px #666666;
    box-shadow: 0px 1px 2px 1px #666666;}

/* show password */
/*#show-password {float: left; margin: 8px 0 0 105px;}
input#show-password ~ p:first-of-type {float: left; font-family: 'Oswald', Helvetica, Verdana, sans-serif; width: 53%; margin: 0 0 10px 11px; font-weight: 300; font-size: 16px;}
input#show-password:checked ~ p:first-of-type {font-weight: 700 !important;} OLD Max */
input.inputPasswordSignUp, input.inputPasswordSignUp + span {position: absolute;top: 227px;left: 367px;}
input.inputPasswordSignUp {opacity: 0; width: 25px !important; height: 16px; margin: 0 !important; z-index: 11;}
input.inputPasswordSignUp + span {margin: -6px 0 0; z-index: 10;}
input.inputPasswordSignUp + span:after {content: "\f070"; font-family: 'FontAwesome'; font-size: 1.5em; color:#82CFF0;}
input.inputPasswordSignUp:checked + span:after {content: "\f06e"; color: #FDC300;}


/* CGU */
#signUpCGU{margin: 10px 105px 0; font-size:12px; text-align:justify; color:#9a9a9d; font-family: 'Oswald', Helvetica, Verdana, sans-serif; cursor: default;}
#signUpCGU a{color:#82CFF0;}
#signUpCGU a:hover{color:#FDC300;}

/* bouton envoi */
#boutonEnvoieSignUp {float: left; margin: 1% 33% 0%;}
.button-signup {width: 170px; height: 60px; margin: 9% 0 0; background-color: #82CFF0; border: none; cursor: pointer; color: #fff; font-size: 18px; line-height: 23px; font-family: 'Oswald', Helvetica, Verdana, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.button-signup:hover {background-color: #FDC300;}
.button-signup:active {margin: 11% 0 -2%;  padding: 0;}
#verifChampInscription {display: none;}

/* recaptcha */
#recaptcha{float: left; margin: 3% 98px 0;}

/* wrap boutons reseaux sociaux */
#createAccountReseauxSociaux {display: none; width:100%; float: left; text-align: center; color: #82CFF0; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 400; font-size: 17px;}
#createAccountReseauxSociaux p{cursor: default;}

/* phrase sign up */
#signUpLogIn1 {text-align:center; color:#9a9a9d; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 300; float: left; width: 100%; cursor: default;}
#lienLogIn {color:#82CFF0; cursor:pointer; font-weight: 400;}
#lienLogIn:hover {color:#FDC300; cursor:pointer;  font-weight: 400;}


/*** SIGN UP 02 ***/
/* wrap Sign Up + Blah demo */
    #wrapSignUpBlahDemo {position: absolute; z-index: 150; width: 75%; margin: 10% 0 0 17%;}
    #etape2Inscription{position:relative; float: left; width:500px; background-color:white; z-index:105; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:15px;}
    /* Blah Demo */
    #blahDemo {display: none; z-index: 40; position: relative; float: left; width: 40.5%; margin: 0 0 0 2%;}
    #blahDemo img {width: 100%;}
/* Logo */
#logoWonderblahSignUp2{position:absolute; top:20px; margin:0 0 0 20px; width:11%;}
/* motto */
#etape2Inscription h2{margin-top:30px; margin-bottom:-10px; text-align:center; line-height: 30px; font-size: 16px; font-family: 'wonderblah', 'Oswald', Helvetica, Verdana, sans-serif; color: #82CFF0; letter-spacing: 1px;}
#etape2Inscription h2 .titreSignUp2-2, #etape2Inscription h2 .titreSignUp2-3 {font-size:15px; color: #FDC300; line-height: 30px;}
/* croix */
#closeSignUp2 {position:absolute; top:28px; margin-left:450px; left:0%; width:20px; height:20px; cursor:pointer;}

/*** Conteneur gauche ***/
#contenuGaucheEtape2{float: left; width: 120px; height: 319px; text-align: right; padding: 0 10px 0 0;}
/* Texte correspondance champs */
#contenuGaucheEtape2 p{color:#82CFF0; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 500; margin: 25px 0 0; float: right; width: 100%;}

/*** Conteneur Droit ***/
#contenuDroiteEtape2 {width: 340px; float: left; height: auto; margin: 0 0 4%; padding: 0 0 0 10px;}
/* Texte champs */
.prenomEtape2{color:#82CFF0; display: inline-block; font-size: 14px; height: 28px; width:220px; padding: 4px 6px; border: 2px solid #FDC300; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight:300; letter-spacing: 1px;float: left;margin: 19px 95px 0 0;}
.nomEtape2{float: left; margin: 10px 95px 10px 0; color:#82CFF0; font-size: 14px; height: 28px; width:220px; line-height: 26px; padding: 4px 6px; border: 2px solid #FDC300; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight:300; letter-spacing: 1px;}
#user_age {float: left; width: 235px; height: 37px; margin: 0 125px 20px 0;  padding: 6px 6px; border: 2px solid #FDC300; text-align: center; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 300; letter-spacing: 1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
#femme, #homme, #pirat, #princess, #other {font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 400; font-size:14px; margin: 0;float: left;margin: 0px 14px 0 0px;}
#caseFemme, #caseHomme, #casePirat, #casePrincess, #caseOther {float:left;margin: 4px 2px 0 0;}
#dateNaissance{float:left; margin: 2% 66% 8% 0;font-family: 'Oswald', Helvetica, Verdana, sans-serif;border: 2px solid #FDC300;color: rgb(142, 117, 117);border-radius: 4px;font-weight: 300;letter-spacing: 1px;font-size: 14px;padding: 4px 6px;}
#formulaireEtape2 #contenuDroiteEtape2 .croppie-container {top: 0; width: 100%; left: 100%; margin: 0 0 0 -50%;
-moz-box-shadow: 0px 0px 10px 10px #666666;
-webkit-box-shadow: 0px 0px 10px 10px #666666;
-o-box-shadow: 0px 0px 10px 10px #666666;
box-shadow: 0px 0px 10px 10px #666666;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666, Direction=NaN, Strength=10);}
#formulaireEtape2 #contenuDroiteEtape2 .croppie-container .popuptextSignUp #my_cameraSignUp {margin: 0 auto;}
#formulaireEtape2 #contenuDroiteEtape2 .croppie-container .popuptextSignUp input#takeSnapshotSignUp {cursor: pointer; width: 50%; height: 40%; margin: 5% 25%; background-color: #82cff0; text-align: center; color: #FFFFFF; font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif; line-height: 2.5em; font-weight: 500; letter-spacing: 1px; border: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#formulaireEtape2 #contenuDroiteEtape2 .croppie-container .popuptextSignUp input#takeSnapshotSignUp:hover {background: #FDC300;}
#formulaireEtape2 #contenuDroiteEtape2 .croppie-container .popuptextSignUp input#takeSnapshotSignUp:active {background: #FDC300; margin: 5.5% 25% 4.5%;}


/* Pays */
#user_country {float: left; width: 235px; height: 37px; margin: 20px 75px 20px 0; padding: 6px 0 6px 2px; background-color: #fff; border: 2px solid #FDC300; color:#82CFF0; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 300; font-size: 14px; letter-spacing: 1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
#user_state_us {float: left; width: 235px; height: 37px; margin: -10px 75px 20px 0; padding: 6px 0 6px 2px; background-color: #fff; border: 2px solid #FDC300; color:#82CFF0; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 300; font-size: 14px; letter-spacing: 1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
/* Avy */
#iconeUploadAvatarSignUp, #contenuDroiteEtape2 #iconeWebcam {cursor:pointer; color: #82CFF0; font-size: 25px; float: left; margin: 0 27px 0; padding: 0 !important;}
#iconeUploadAvatarSignUp:hover, #contenuDroiteEtape2 #iconeWebcam:hover {color: #FDC300;}
#textImportImage{font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 500; color:#ccc;float: left;margin: 0 30px;}
/* Bouton next */
#nextEtape2{font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 500; font-size: 18px;background-color:#82CFF0; color:#FFF; width:100px; padding: 3px 25px; cursor:pointer; border: 0; float: left; margin: 15px 200px 0 60px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#nextEtape2:active {background-color:#FDC300; margin: 17px 60px -2px;}


/*** SIGN UP WONDERNAME ***/
#etapeWonderInscription{padding:2%; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 400; font-size: 15px; background-color:#FFF; color:#82CFF0; margin-top:10%; position:absolute; width:38%; left:29%; z-index:105; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:15px;}


/*** SIGN UP 03 ***/
#formulaireEtape3 {position:absolute; margin: 10% 0 0; width:38%; left:29%; z-index:105; background-color:white; padding:2%; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 400; font-size: 15px; background-color:#FFF; color:#82CFF0;  -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:15px;}
#form-signUp3 input:checked[type=checkbox] + label {color:#FDC300;}
/* Logo */
#logoWonderblahSignUp3{position:absolute; top:24px; margin-left:4px; width:11%;}
/* motto */
#formulaireEtape3 h2 {padding: 0 0 0 13%; margin:30px 0 -10px; text-align:center; font-size:20px; font-family: 'wonderblah'; color: #82CFF0; letter-spacing: 1px; line-height: 43px;}
/* croix */
#closeSignUp3 {position:absolute; margin-left:580px; width:20px; cursor:pointer;}
/* form */
#form-signUp3 {margin: 10% 40px 0;}
/* OLD #contact-signIn {margin-top:30px;} */
.colG-signUp3, .colD-signUp3 {width: 50%; float: left; margin: 0 0 15px;}
.wrapListInputLabel {float: left; width: 100%; margin: 0 0 3% -7px; padding: 0 0 0 7px;z-index:1000; cursor:pointer;}
.wrapListInputLabel:hover {background: #82CFF0; color: #FFF;}
.wrapListInputLabel input {margin:0 7px 0 0;}
.wrapListInputLabel label {cursor: pointer;}
/* #form-signUp3 button {margin: 0 40%;} */
/* bouton validate */
#validateCategories{float: left; width: 40%; margin: 5% 0 5% 30%; padding: 3px 25px 3px 21px; cursor:pointer; border: 0; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 500; font-size: 18px; background-color:#82CFF0; color:#FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#validateCategories:active {background-color:#FDC300; margin: 6% 0 4% 30%;}




#titreEtape3{
    margin-top:50px;
    margin:auto;
    width:500px;
    height:50px;
    text-align:center;
    margin-top:20px;
    color:#25c6ee;
    font-size:24px;
}



form {/*! margin-bottom: 0; */}
#formulaireLogIn {margin-top:100px;}

#contact-logIn {margin-top:30px;}

#messageValidationSignUp{
    position:absolute;
    left:50%;
    margin-left:-200px;
    width:400px;
    height:50px;
    color:blue;
    margin-top:60px;
    font-size:14px;
    color:#f9a8ad;
    text-align:justify;
}

#boutonEnvoieLogIn{
    position:absolute;
    left:50%;
    margin-left:-50px;
    margin-top:20px;
}


#boutonEnvoieLogIn{
    width: 125px;
    height:95px;
}





#signUpFacebook2{
    position:absolute;
    /*margin-top:-67px;
    margin-left:-232px;*/
    margin-top:0px;
    margin-left:-384px;
    width:85px;
    height:65px;
    cursor:pointer;
}

#signUpFacebook3{
    position:absolute;
    margin-top:0px;
    margin-left:-384px;
    width:85px;
    height:65px;
    cursor:pointer;
}

#signUpGooglePlus2{
    position:absolute;
    margin-top:0px;
    margin-left:-284px;
    width:85px;
    height:65px;
    cursor:pointer;
}

#signUpGooglePlus3{
    position:absolute;
    margin-top:0px;
    margin-left:-284px;
    width:85px;
    height:65px;
    cursor:pointer;
}

#signUpTwitter2{
    position:absolute;
    margin-top:0px;
    margin-left:-184px;
    width:85px;
    height:65px;
    cursor:pointer;
}

#signUpTwitter3{
    position:absolute;
    margin-top:0px;
    margin-left:-184px;
    width:85px;
    height:65px;
    cursor:pointer;
}





/*fin animation bulles */


#suite {
    height:100%;
    width:100%;
    background-color:white;
    position:absolute;
    top:100%;
    z-index:4;
}

#erreurInscription{
    position:fixed;
    z-index:202;
    width:480px;
    height:515px;
    left:50%;
    margin-top:-250px;
    margin-left:-240px;
    /*color:#f9a8ad;*/
    color:#25c6ee;
    top:50%;
    text-align:center;
    font-size:16px;
    background-color:white;
    -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:15px;
}

#erreurInscription p{

}

.erreurNerd1{
    position:absolute;
    margin-top:148px;
    margin-left:117px;
    color:black;
    font-family: Helvetica;
    letter-spacing:1.5px;
    width:232px;
}

.erreurNerd2{
    position:absolute;
    margin-top:150px;
    margin-left:87px;
    color:black;
    width:286px;
    height:121px;
    font-family: Helvetica;
    font-size:14px;
}



#imageNerd{
    position:absolute;
    width:400px;
    height:422px;
    margin-top:37px;
    margin-left:-200px;
}

#erreurInscription span{
    color:#f9a8ad;
}
#closeErreurInscription{
    position:absolute;
    margin-top:467px;
    margin-left:220px;
    width:50px;
    height:40px;
    -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:15px;
    background-color:#f9a8ad;
    color:white;
    text-align:center;
    line-height:40px;
    cursor:pointer;
}



#erreurConnexion{
    position:fixed;
    z-index:202;
    width:480px;
    height:515px;
    left:50%;
    margin-top:-250px;
    margin-left:-240px;
    /*color:#f9a8ad;*/
    color:#25c6ee;
    top:50%;
    text-align:center;
    font-size:16px;
    background-color:white;
    -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:15px;
}

#loginEtMdpVide{
    cursor:pointer;
}

#erreurConnexion p{
    margin-top:150px;
}

#erreurConnexion p span{
    color:#f9a8ad;
}

#closeErreurLogIn{
    position:absolute;
    margin-top:467px;
    margin-left:220px;
    width:50px;
    height:40px;
    -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:15px;
    background-color:#f9a8ad;
    color:white;
    text-align:center;
    line-height:40px;
    cursor:pointer;
}

#cacherRedirectionCreateBlah{
    left:0;
    top:0;
    position:fixed;
    width:100%;
    height:100%;
    background-color:#4e4949;
    opacity:0.7;
    z-index:201;
}
#validerRedirectionCreateBlah{
    position:fixed;
    z-index:202;
    width:500px;
    height:550px;
    left:50%;
    margin-top:-250px;
    margin-left:-190px;
    /*color:#f9a8ad;*/
    color:#25c6ee;
    top:50%;
    text-align:center;
    font-size:16px;
    background-color:white;
    -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:15px;
}

/*#validerRedirectionCreateBlah p{
    margin-top:55px;
    margin-left:10px;
    margin-right:10px;
}*/

#blahValidationCreationCompte{
    position:absolute;
    margin-left:-200px;
    margin-top:30px;
}

#messageBlahValidationCreationCompte{
    position: absolute;
    font-family: Helvetica;
    margin-left: 90px;
    margin-top: 139px;
    width: 300px;
    color: black;
}

#cliqueValidationCreateBlah{
    margin-top:495px;
    margin-left:230px;
    width:50px;
    height:40px;
    -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:15px;
    background-color:#f9a8ad;
    color:white;
    text-align:center;
    line-height:40px;
    cursor:pointer;
}

#closeRedirectionCreateBlah{
    position:absolute;
    top:15px;
    margin-left:465px;
    left:0%;
    width:20px;
    height:20px;
    cursor:pointer;
}

#valideInscription {
    position:fixed;
    z-index:202;
    width:480px;
    height:515px;
    left:50%;
    margin-top:-250px;
    margin-left:-240px;
    /*color:#f9a8ad;*/
    color:#25c6ee;
    top:50%;
    text-align:center;
    font-size:16px;
    background-color:white;
    -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius:15px;
}

#valideInscription  p{
    position:absolute;
    margin-top:150px;
    /*font-size:20px;*/
}

#nextEtapeInscription{
    position:absolute;
    width:60px;
    left:50%;
    height:30px;
    line-height:30px;
    color:white;
    margin-left:-40px;
    cursor:pointer;
    background-color:#f9a8ad;
    border:1px solid #f9a8ad;
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius:10px;
    text-align:center;
    margin-top:470px;
}





#closeValidation {
    position:absolute;
    top:15px;
    margin-left:450px;
    left:0%;
    width:20px;
    height:20px;
    cursor:pointer;
}

#closeSignUpErreur{
    position:absolute;
    top:15px;
    margin-left:440px;
    left:0%;
    width:20px;
    height:20px;
    cursor:pointer;
    z-index:202;
}
#closeLogInErreur{
    position:absolute;
    top:15px;
    margin-left:445px;
    left:0%;
    width:20px;
    height:20px;
    cursor:pointer;
    z-index:202;
}




#contenuDesBulles{
    margin-top:10px;
}
#contenuDesBulles div{
    cursor:pointer;
}

.categories{
    width:160px;
    height:160px;
    float:left;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius:10px;
}

.categories img{
    width:140px;
    height:100px;
    margin-top:30px;
    margin-left:10px;
}

.categories h3{

}

.categorie1ligne{
    width:130px;
    font-size:16px;
    margin-top:-76px;
    margin-left:15px;
    text-align:center;
    font-family: "miriad";
    color:#75736f;
}
.categorie2ligne{
    width:130px;
    font-size:16px;
    margin-top:-88px;
    margin-left:15px;
    text-align:center;
    font-family: "miriad";
    color:#75736f
}
.categorie3ligne{
    width:130px;
    font-size:16px;
    margin-top:-95px;
    margin-left:15px;
    text-align:center;
    font-family: "miriad";
    color:#75736f
}

#categorie1{
    background-color:#25C6EE;
    margin-left:60px;
}
#categorie2{
    background-color:#F9A8AD;
}
#categorie3{
    background-color:#FCB827;
}
#categorie4{
    background-color:#62BB47;
}
#categorie5{
    background-color:#E03A3E;
}
#categorie6{
    margin-left:60px;
    background-color:#C3C6CD;
}
#categorie7{
    background-color:#F88421;
}
#categorie8{
    background-color:#973D95;
}
#categorie9{
    background-color:#474A51;
}
#categorie10{
    background-color:#0000FF;
}
#categorie11{
    background-color:#BC2328;
    margin-left:60px;
}
#categorie12{
    background-color:#134710;
}
#categorie13{
    background-color:#FFFF6F;
}
#categorie14{
    background-color:#1573B1;
}
#categorie15{
    background-color:#111111;
}
#categorie16{
    margin-left:60px;
    background-color:#0D0842;
}
#categorie17{
    background-color:#D478CD;
}
#categorie18{
    background-color:#8011C6;
}
#categorie19{
    background-color:#FA8D55;
}
#categorie20{
    background-color:#DEF4FA;
}

#categorie21{
    background-color:#D8936C;
    margin-left:60px;
}
#categorie22{
    background-color:#E0E4CC;
}
#categorie23{
    background-color:#3F042B;
}
#categorie24{
    background-color:#83AF9B;
}
#categorie25{
    background-color:#655643;
}
#categorie26{
    margin-left:60px;
    background-color:#3FB094;
}
#categorie27{
    background-color:#F4DD51;
}
#categorie28{
    background-color:#7D6A66;
}
#categorie29{
    background-color:#CC883A;
}
#categorie30{
    background-color:#F8ECC2;
}

#validerEtape3{
    position:absolute;
    left:50%;
    width:100px;
    height:35px;
    background-color:#25C6EE;
    color:white;
    margin-left:-50px;
    text-align:center;
    line-height:35px;
    -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius:4px;
    margin-top:1110px;
    cursor:pointer;
}

.caseValider1 img{
    position:absolute;
    width:130px;
    height:90px;
    margin-top:-55px;
    margin-left:13px;
    opacity:0.91;
}

.caseValider2 img{
    position:absolute;
    width:130px;
    height:90px;
    margin-top:-65px;
    margin-left:13px;
    opacity:0.91;
}
.caseValider3 img{
    position:absolute;
    width:130px;
    height:90px;
    margin-top:-77px;
    margin-left:13px;
    opacity:0.91;
}

.case1valider{
    position:absolute;
    width:130px;
    height:90px;
    margin-top:-55px;
    margin-left:13px;
    opacity:0.91;
}
.case2valider{
    position:absolute;
    width:130px;
    height:90px;
    margin-top:-55px;
    margin-left:13px;
    opacity:0.91;
}

.case3valider{
    position:absolute;
    width:130px;
    height:90px;
    margin-top:47px;
    margin-left:-517px;
    opacity:0.91;
}

#choixDesCategories{
    position:absolute;
    margin-top:-40px;
}

#caseCategorie1{
    left:0;
}

#TestSession{
    position:absolute;
    top:0;
    left:10px;
    z-index:9999;
}




#FenetreuploadByComputer{
    background-color: white;
    -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
    height: 500px;
    left: 50%;
    margin-left: -450px;
    position: fixed;
    top: 100px;
    width: 900px;
    z-index: 1002;
}

/*FENETRE upload */

#titre1UploadByComputer{
    position:absolute;
    margin-top:85px;
    left:50%;
    margin-left:-465px;
    width:500px;
    text-align:center;
    color:#F9A8AD;
    margin-top:85px;
    margin-bottom:30px;
    font-size:19px;
}

#titre2UploadByComputer{
    position:absolute;
    margin-top:85px;
    left:50%;
    margin-left:-10px;
    width:500px;
    text-align:center;
    color:#F9A8AD;
    margin-top:85px;
    margin-bottom:30px;
    font-size:19px;

}