/* Florian */


/* HashBlahs */
.hashBlahsCaBCheck {margin: 0 2% 0 0; font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; font-weight: 300; font-size: 0.9em; color: #525252;}
.hashBlahsCaBCheck:before {content: '#'; font-family: 'FontAwesome'; color: #FDC300;font-weight: bold; font-size: 1.3em;}


.searchmyliblahry-img {
    height: 100%;
    padding: 1% 0 0 0;
}

.displaySpinner {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8;
    display: none;
}

.wrapSpinner {
    display: table;
    width: 100%;
    height: 100%;
}

.wrapSpinner > div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
}

.displaySpinner img {
    margin: auto;
}

@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-50px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-50px); }
    10%, 90% { -moz-transform: translateY(0px); }
}



.popup-webcam, .popup-webcamSignUp{
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup-webcam .popuptext {
    visibility: hidden;
    width: 500px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 100px;
    margin-left: -80px;
}

/* Popup arrow */
.popup-webcam .popuptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 35%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

/* The actual popup */
.popup-webcamSignUp .popuptextSignUp {
    visibility: hidden;
    width: 500px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    top: 200px;
    left: -400px;
}

/* Popup arrow */
.popup-webcamSignUp .popuptextSignUp::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 35%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

/* Toggle this class - hide and show the popup */
.popup-webcam .show, .popup-webcamSignUp .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}


.open-file-modale-img {
    width: 50%;
}

/* Popup container */
.popup {
    position: relative;
    display: inline-block;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    height: 200px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
    overflow: auto;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeIn {from {opacity: 0;} to {opacity:1 ;}}





/* Fin Florian */

/****** gestion Global ******/
body{margin: 0;background-color: #fff;-webkit-font-smoothing: antialiased; overflow-x: hidden;}
#global{float: left;width: 100%;}

/* Avatar no connect */
#logInYvonne {position: absolute; z-index: 152; left: 50%; width: 30%; margin: 7.2% 0 0 -15%; padding: 0 4% 1%; background-color: #FFF; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}
#logInYvonneClose {cursor: pointer; position: relative; top: 10px; left: -45px;}
#logInYvonne #imgYvonneLogIn {width: 100%; position: relative; margin: 2% 0; text-align: center;}
#CTAYvonneSignUp {cursor:pointer; float: left; width:20%; margin: 2% 35% 2% 34%; padding: 3px 25px 7px; background-color:#82CFF0; border: 0; color:#FFF; text-align: center; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 500; font-size: 18px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#CTAYvonneSignUp:hover {background-color:#FDC300;}
#CTAYvonneSignUp:active {background-color:#FDC300; margin: 3% 35% 1% 36%;}

/***** Pop Up Connect *****/
#wrapConnection_LogIn {padding: 10%; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}
#wrapConnection_LogIn h1 {font-family:'wonderblah', Verdana, Arial, Helvetica, sans-serif; font-weight: 700; margin: 0 0 20px 0 !important; color: #FDC300;}
#wrapConnection_LogIn p {font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; font-weight: 700; margin: 20px 0 0 0 !important;}
.form-group {float:left; width: 100%; margin-bottom: 10px !important; font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; font-weight: 300;}
#wrapConnection_LogIn .form-group input {float: right;}
#wrapConnection_LogIn .form-group input.form-control, #wrapConnection_LogIn .form-group input[name=motDePasse] {font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; font-weight: 300; width: 35%;}
#wrapConnection_LogIn .form-group label {float: left;}
#wrapConnection_LogIn form input[name=remember] {float: left; margin-top: 8px; margin-right: 7px}
#wrapConnection_LogIn form input[name=remember] ~ p {font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; font-weight: 300; float: left;  margin: 0 !important;}
#wrapConnection_LogIn form input:checked[name=remember] ~ p {font-weight: 700;}
#wrapConnection_LogIn button {cursor: pointer; background-color: #82cff0; color: #FFF; width: 100%;
    font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 2em;
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border:none;
    -webkit-box-shadow: 0px 2px 0px 1px #656565;
    -moz-box-shadow: 0px 2px 0px 1px #656565;
    -o-box-shadow: 0px 2px 0px 1px #656565;
    box-shadow: 0px 2px 0px 1px #656565;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=0);}
#wrapConnection_LogIn button:hover {background-color: #FDC300; color: #FFF;
    -webkit-box-shadow: 0px 2px 0px 1px #656565;
    -moz-box-shadow: 0px 2px 0px 1px #656565;
    -o-box-shadow: 0px 2px 0px 1px #656565;
    box-shadow: 0px 2px 0px 1px #656565;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=0);}
#wrapConnection_LogIn button:active {background-color: #FDC300; color: #FFF;
    -webkit-box-shadow: inset 0px 2px 0px 1px #656565;
    -moz-box-shadow: inset 0px 2px 0px 1px #656565;
    -o-box-shadow: inset 0px 2px 0px 1px #656565;
    box-shadow: inset 0px 2px 0px 1px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=0);}



/****** PAGE *******/
#content{float: left; width: 100%; height: 100%; margin: 0 0 15%;}

/* Gestion Panneau toolBox */
.accordion {margin: 0; padding: 0; background: #ffffe5; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.accordion ul {float: left; width: 100%; margin: 0; padding: 0; background-color: #E8EDEB;}
.accordion li {display: block;}
.accordion label {cursor: pointer; display: block; padding: 0.7em 1em; overflow: hidden; background-color: #fff; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2); border-style: solid; border-width: 1px 1px 0px 1px; font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; font-size: 15px; color: #696763; border-color: #FDC300;}
.accordion label:hover {border-color: #FDC300; background-color: #FDC300; color: #fff;}
.accordion label:hover:after {color: #fff;}
.accordion input[type="radio"],.accordion input[type="checkbox"] {display: none;}
.accordion .sub > li {float: left; width: 50%; cursor: pointer; overflow: hidden; height: 0; margin: 0; opacity: 0; font-size: 0.875em; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.accordion .sub > li:hover {background: rgba(0, 0, 0, 0.1);}
.accordion input:checked ~.sub > li {height: 100%; opacity: 1;}
.accordion input:checked ~.sub > li#li-shareBlahLink {margin: 3% 0 3% 3%; padding: 4% 0;}
.accordion input:checked + label {background-color:#FDC300;color: #fff;}
.accordion label:after{content: '\002B'; color: #777; font-weight: bold; float: right; margin: 3px 0 0 0; font-family: 'FontAwesome';}
.accordion input:checked + label:after {content: "\2212"; color: #fff;}

.positif, .negatif {padding: 4% 0;}
.positif{background-color: #E1E7E8; width: 100%;height: 100%;float: left;}
.negatif{background-color: #E1E7E8; width: 100%;height: 100%;float: left;}
.textLabel{margin-left: 5%;float: left;}
.fa{float: left;}
i[class="fa fa-paint-brush"]{width: 18%;}
i[class="fa fa-bars"]{width: 18%;}

.top-Radius{border-radius: 5px 5px 0px 0px;}
.bottom-Radius{border-radius: 0px 0px 5px 5px; border-width: 1px 1px 1px 1px !important;}


    /* TOOLBOX Gauche */
    #wrapToolboxGauche{float: left; height: 100%;width: 25%;}
    #toolboxGauche{margin: 0 auto;width: 80%;height: 100%; margin-top: 11%;
    -webkit-box-shadow: 10px 10px 20px 0px #777777;
    -moz-box-shadow: 10px 10px 20px 0px #777777;
    -o-box-shadow: 10px 10px 20px 0px #777777;
    box-shadow: 10px 10px 20px 0px #777777;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#777777, Direction=134, Strength=20);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;}
    .picto{width: 13%;margin-right: 5%;}

    /*Logo*/
    .LogoBefore::before {content: 'w'; font-family: 'wonderblah', 'Oswald', Verdana, Arial, Helvetica, sans-serif; margin-right: 10px; line-height: 0px;}
    .logoClickAndChange{width: 22%;margin: 0 auto;display: block;margin: 0 auto;margin-top: 2%; cursor: pointer;}

    /*Motto*/
    .MottoBefore::before {content: '!'; font-family: 'wonderblah', 'Oswald', Verdana, Arial, Helvetica, sans-serif; margin-right: 10px; line-height: 0px;}
    .mottoClickAndChange{width: 75%;display: block; margin: 3% auto; cursor: pointer;}
    .accordion input:checked ~.sub > li[class="liMotto"] {height: 100%; opacity: 1;}
    .accordion .sub > li[class="liMotto"]{float: none;width: 100%;}

    /*color*/
    .ColorBefore::before {content: '\f1fc'; font-family: 'FontAwesome'; margin-right: 10px;}
    .accordion li[class="liColor"]{width: 16.6666666%;}/*Si la classe de .accordion li =licolor alors*/
    .accordion input:checked ~.sub > li[class="liColor"] {height: 12em;opacity: 1;}
    .blockCouleur{width: 100%; height: 100%;}
    .chooseColor{display: block;height: 20%;text-align: center;}

    #blue1{background-color: #1d2043;}
    #blue2{background-color: #173c8c;}
    #blue3{background-color: #5e65ab;}
    #blue4{background-color: #129ad7;}
    #blue5{background-color: #80cde8;}

    #red1{background-color: #802428;}
    #red2{background-color: #be032f;}
    #red3{background-color: #e10319;}
    #red4{background-color: #e794bc;}
    #red5{background-color: #f4c6db;}

    #yellow1{background-color: #c59401;}
    #yellow2{background-color: #de8435;}
    #yellow3{background-color: #f6c5a4;}
    #yellow4{background-color: #ffe204;}
    #yellow5{background-color: #f4ed9e;}

    #green1{background-color: #006f42;}
    #green2{background-color: #59a932;}
    #green3{background-color: #99c23c;}
    #green4{background-color: #aacc6c;}
    #green5{background-color: #bbdcbb;}

    #purple1{background-color: #44185b;}
    #purple2{background-color: #622654;}
    #purple3{background-color: #8e3083;}
    #purple4{background-color: #b36f9c;}
    #purple5{background-color: #cea8cd;}

    #orange1{background-color: #807f7f;}
    #orange2{background-color: #047a7f;}
    #orange3{background-color: #7e5908;}
    #orange4{background-color: #7e740e;}
    #orange5{background-color: #000000;}

    /*select your Bubble*/
    .accordion input:checked ~.sub > li[class="liBubble"] {height: 6em;}
    .BubbleBefore::before {content: '\f086'; font-family: 'FontAwesome'; margin-right: 10px;}
    .bulleParler1{width: 85%; display: block; margin: 5% auto; cursor: pointer;}

     /*Create my Avatar*/
    .AvatarBefore::before {content: '\f2b9'; font-family: 'FontAwesome'; margin-right: 10px;}
    #toolboxGauche .accordion ul li {background: none; cursor: default;}
    #iconeUpload, #iconeWebcam {cursor: pointer; color: #82CFF0; font-size: 34px; margin: 0 38%; text-align: center; padding: 6% 0;}
    #iconeUpload:hover, #iconeWebcam:hover {color: #FDC300;}
    #iconeWebcam:hover {color: #FDC300;}
    /*#upload-modal {position: absolute; margin: 100px 41%; width: 0; display: none;}*/
    /*#upload-modal:before {content: ""; position: absolute; top: -29px; left: 0; border-bottom: 29px solid #fdc400; border-left: 29px solid transparent; border-right: 29px solid transparent; min-width: 81%; height: 0;}
    #upload-modal:after {content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid #fdc400; border-left: 29px solid transparent; border-right: 29px solid transparent; min-width: 81% !important; height: 0; top: 270px;z-index: 0;max-width: 81% !important;}*/
    #my_camera {margin: 0 auto;}
    #takeSnapshot {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;}
    #takeSnapshot:hover {background: #FDC300;}
    #takeSnapshot:active {background: #FDC300; margin: 5.5% 25% 4.5%;}

    /* Camera */
    #CTACroppieOK, #CTACroppieOKSignUp {position: absolute; bottom: 2%; width: 100%;}
    #boutonCTACroppieOK, #boutonCTACroppieOKSignUp {cursor: pointer; margin: 0 auto; width: 50%; text-align: center; border-radius: 10px; color: white; font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; background-color: #82cff0;line-height: 2.5em; font-weight: bold;}
    #boutonCTACroppieOK, #boutonCTACroppieOKSignUp:hover{background-color:#FDC300; }
    #boutonCTACroppieOK, #boutonCTACroppieOKSignUp:active {background: #FDC300; margin: 0 auto -0.5%;}

    /*create a BLah*/
    #wrapBlah{float: left; height: 100%;width: 50%;}
    #blah{margin: 0 auto; background-color: red; width: 85%;margin-top: 2%;}
    #canvas{display: none;}/*ne pas afficher le canvas mais afficher une vision du canvas*/

    #supportElement{float: left;width: 100%;background-color: #82cff0;}

    #imgAngleCanvas{float: left;width: 100%;}
    #imgLogoCanvas{float: left;width: 18.1%; margin-top: -97.3%; margin-left: 6.9%;}
    #imgMottoCanvas{float: left;width: 61.1%; margin-top: -84.9%; margin-left: 32.2%;}
    #imgAvatarCanvas{float: left;width: 30.5%; margin-top: -38%; margin-left: 12%;}
    #imgLanguetteCanvas{float: left;width: 32%; margin-top: -39%; margin-left: 11%;}
    #imgLanguetteCanvas:hover{cursor: pointer;}
    #imgBulleCanvas{float: left;width: 85.2%; margin-top: -68%; margin-left: 8%;}
    #TextareaBubble{height: 80px; padding-top:15px; float: left; overflow: hidden; color:#82cff0; font-size: 18px; font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; text-align: center; z-index: 2;resize: none;border: none;text-align: center;margin-top: -64%;margin-left: 19%;width: 63%;}
    #TextareaCaption{float: left; font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; font-size: 18px;margin-top: -19%; margin-left: 48.5%; width: 42%; resize: none;color: #82cff0;border-radius: 5px;border: none;overflow: hidden;text-align: left;}

    /* iPad */
@media all and (min-width: 769px) and (max-width: 1199px) {
  #TextareaCaption {
    margin-top: -21%;
  }
}

    textarea::-o-input-placeholder {color:#82cff0;}
    textarea::-ms-input-placeholder {color:#82cff0;}
    textarea::-moz-input-placeholder {color:#82cff0;}
    textarea::-khtml-input-placeholder {color:#82cff0;}
    textarea::-webkit-input-placeholder {color:#82cff0;}
    [placeholder]:focus::-webkit-input-placeholder {transition: opacity 0.2s 0.2s ease; opacity: 0;}


    /* TOOLBOX Droite */
    #wrapToolboxDroite{float: left; height: 100%; width: 25%;}
    #toolboxDroite{margin: 0 auto; width: 80%;height: 100%;margin-top: 11%;
    -webkit-box-shadow: -10px 10px 20px 0px #777777;
    -moz-box-shadow: -10px 10px 20px 0px #777777;
    -o-box-shadow: -10px 10px 20px 0px #777777;
    box-shadow: -10px 10px 20px 0px #777777;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#777777, Direction=224, Strength=20);
    -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

    /*Add my HashBlah*/
    .accordion input:checked[type="radio"] ~ #ul-inputAddHashBlah .centpercent, .accordion input:checked[type="checkbox"] ~ #ul-inputAddHashBlah .centpercent {height: 26px !important; padding: 2% 0 2% 2%;}
    #ul-inputAddHashBlah .centpercent {width: 48%; font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif; font-weight: 300;}
    #ul-inputAddHashBlah .centpercent input {width: 88%; border: 1px solid #FDC300; font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif;}
    #ul-inputAddHashBlah .centpercent button {margin: 0 10%; width: 75%; background: #82CFF0; border: none; padding: 2px; color: #FFF; font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
    #ul-inputAddHashBlah .centpercent button:hover {background: #FDC300;}
    #ul-inputAddHashBlah .centpercent button:active {background: #FDC300; opacity: 0.5; margin: 2px 0 0 16px;}
    .hashblah-value {font-size: 0.72em;}
    .hashblah-value::first-letter {font-weight: 400;}
    .hashblah-delete {font-family: 'wonderblah', 'Oswald', Verdana, Arial, Helvetica, sans-serif; font-weight: 300; color: #fc0000; font-size: 7px; cursor: pointer; margin: 0 3px; }
    .accordion .sub > li.centpercent p {width: 100%; font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif; color: #777; margin: 10%; float: left;}
    .accordion .sub > li:hover.centpercent {background: none; cursor: default;}
    .HashBlahBefore::before {content: '\f292'; font-family: 'FontAwesome'; margin-right: 10px;}
    .msgHashblah  {display:none;}
    #inputAddHashBlah:hover ~ .msgHashblah, .ajax-popup-Blahtegory:hover ~ .msgBlahtegories {display:block;}
    .msgHashblah {display: none; position:absolute;  margin:-95px 0 0 -53px;padding: 15px 25px; width: 220px; 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;}
    .msgBlahtegories {display: none; position:absolute;  margin:-95px 0 0 -53px; padding: 15px 0; width: 220px; background: #82CFF0; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-size: 15px; text-align: center; line-height: 17px; font-weight: 300; 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;}
    .msgHashblah:after, .msgBlahtegories: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);}
    .msgHashblah:before, .msgBlahtegories: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;}
    #err-maxHashBlah {color: #000000; font-weight: bold;}

    /*Share my Blah*/
    .ShareBefore::before {content: '\f1e0'; font-family: 'FontAwesome'; margin-right: 10px;}
    #shareFacebook, #shareGooglePlus, #shareTwitter, #shareLinkedin, #sharePinterest {float: left; height: auto; margin: 0 2%; cursor: pointer; text-decoration: none; line-height: 30px; font-family: 'wonderblah_elmt', Helvetica, Verdana, sans-serif; font-size: 3.5em; color: #FDC300; opacity: 0.5;}
    #shareFacebook:hover, #shareGooglePlus:hover, #shareTwitter:hover, #shareLinkedin:hover, #sharePinterest:hover {opacity: 1;}
    .accordion .sub > li#li-shareBlahLink:hover {background: none; cursor: default;}
    #li-shareBlahLink {width: 97%; text-align: center; font-size: 0.5em;}

    /*Blahtegories*/
    .BlahtegoriesBefore::before {content: '\f0c9'; font-family: 'FontAwesome'; margin-right: 10px;}
    .checkbox-blahtegories {text-align: center; height: 21px !important; font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif; padding: 0 0 4px;}
    input#menuBlahtegories ~ ul.sub {display: none;}
    input#menuBlahtegories:checked ~ ul.sub {display: block;}
    .checkbox-blahtegories span {font-size: 0.8em;}
    input#menuBlahtegories ~ ul.sub > li:hover {background: #82CFF0;}

    /*Search my LiBlahry*/
    .LiBlahryBefore::before {content: '\f002'; font-family: 'FontAwesome'; margin-right: 10px;}
    .liblahry-img {width: 50%; height: 100%;}
    .accordion input:checked ~ ul#ul-myLiblahry.sub > li {height: 80px; opacity: 1; text-align: center;}
    .accordion ul#ul-myLiblahry.sub > li:hover {background: #82CFF0;}
    .lb-dataContainer {margin: -646px auto 0px;} /* close button */
    .lb-data .lb-details {display: none !important;} /* nbre img */

    /* bouton more */
    #moreLiblahryButtonLi {width:100% !important; cursor: default;}
    #moreLiblahryButtonLi:hover {background-color: #E8EDEB!important;}
    #moreLiblahryButtonDiv {text-align:center; margin: 3% 0 0;}
    #moreLiblahryButton {cursor: pointer; width: 50%; height: 40%; margin: 5% auto; background-color: #82cff0; text-align: center; color: white; font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif; line-height: 2.5em; font-weight: 500; letter-spacing: 1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;border: 0;}
    #moreLiblahryButton:active {background-color: #FDC300; margin: 6% auto -1%;}


    /*CHeck my Blah*/
    .CheckBefore::before {content: '\f1c5'; font-family: 'FontAwesome'; margin-right: 10px;}
    .popup-with-zoom-anim::after {content: '\f138' !important; font-family: 'FontAwesome'; color: #777; font-weight: bold; float: right; margin: 0 0 -3px 0 !important; font-size: 1.4em;}

        /* Pop UP Visuel Blah */
        #closeBlah, #closeContinueOrNewBlah {
          display: block;
          cursor: pointer;
          position: relative;
          width: 23px;
          top: 22px;
          color: #fff;
          font-family: 'wonderblah', 'Oswald', Verdana, Arial, Helvetica, sans-serif;
          text-decoration: none;
          padding-top: 7px;
        }
        @media all and (min-width: 769px) and (max-width: 1199px) {
          #closeBlah, #closeContinueOrNewBlah {
            margin-bottom: -20px;
            position: relative;
            width: auto;
            font-size: 14px;
            top: 14px;
            left: -5px;
          }
        }


        .mfp-close {position: relative !important; left: -34px !important;}
        #visualisationBlah{width: 64%;height: 0; margin: 5% auto 0;}
        #visuelInfo{margin: 0 auto;}
        #visuelBlah{width: 60%; float: left;}
        #imgFinalBlah {width: 100%;}

        /*-- Cartouche droite du blah --*/
        #informationBlah{width: 33%; float: left; margin-left: 3%; padding: 2%; float: right; background: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
        .titrePopUp {font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; font-weight: 700; color:#FDC300; font-size: 32px;}
        .couleurBlah {color: #82CFF0; font-family: 'wonderblah', 'Oswald', Verdana, Arial, Helvetica, sans-serif; letter-spacing: 1px;}
        .sousTitrePopUpB, .sousTitrePopUpY {float: left; margin: 16px 0 0; font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1.3em;}
        .sousTitrePopUpB {width: 100%; color: #82CFF0;}
        .sousTitrePopUpY {width: 100%; color: #FDC300;}
        input#uploadBlah {outline: none !important; border: 0 !important; margin: 7% 14.2% 0; padding: 3% 9%; color: #FFF; font-size: 1em;}
        #uploadBlah {background: #82CFF0; border: none; padding: 3px 13px; font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; outline: none !important; border: 0 !important;}
        #uploadBlah:hover {background: #FDC300; outline: none !important; border: 0 !important;}
        #uploadBlah:active {background: #FDC300; opacity: 0.5; outline: none !important; border: 0 !important; margin: 8% 14.2% -1%;}

        /* HashBlah */
        #sousTitreHashBlahs {float: left; width: 100%; height: auto; margin: 0;}
        #sousTitreHashBlahs span {float: left; margin: 1px 6px 0 0;}


        /* Blahtegories */
        .BlahtegoriesCaBCheck {float: left; margin: 0 2% 0 0; white-space: nowrap; font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; font-weight: 300; font-size: 0.9em; color: #525252;}
        .BlahtegoriesCaBCheck:before {content: '\f054'; font-family: 'FontAwesome'; color: #FDC300;}
        #sousTitreBlahtegories {float: left; width: 100%; margin: 0;}

        /* SHARE */
        /* shared */
        #li-shareBlahCheckLink {list-style-type: none;}
        #shareCheckFacebook, #shareCheckGooglePlus, #shareCheckTwitter, #shareCheckLinkedin, #shareCheckPinterest {height: 45px; margin: 0 2%; cursor: pointer; text-decoration: none; font-family: 'wonderblah_elmt', Helvetica, Verdana, sans-serif; font-size: 2.5em; color: #82CFF0; opacity: 0.5;}
        #shareCheckFacebook:hover, #shareCheckGooglePlus:hover, #shareCheckTwitter:hover, #shareCheckLinkedin:hover, #shareCheckPinterest:hover {opacity: 1;}
        /*no shared */
        #li-noshareBlahCheckLink {list-style-type: none;}
        #noshareCheckFacebook, #noshareCheckGooglePlus, #noshareCheckTwitter, #noshareCheckLinkedin, #noshareCheckPinterest {height: 45px; margin: 0 2%; cursor: pointer; text-decoration: none; font-family: 'wonderblah_elmt', Helvetica, Verdana, sans-serif; font-size: 2.5em; color: #FDC300; opacity: 0.5;}
        #noshareCheckFacebook:hover, #noshareCheckGooglePlus:hover, #noshareCheckTwitter:hover, #noshareCheckLinkedin:hover, #noshareCheckPinterest:hover {opacity: 1;}

        /* Save blah */
        .tittleBlahSaved{background: #82CFF0; margin: -21px -20px 30px; padding: 4% 0; text-align: center; font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif; font-size: 1.5em; -webkit-border-radius: 15px 15px 0 0; -moz-border-radius: 15px 15px 0 0; border-radius: 15px 15px 0 0;}
        #continueOrNewBlah {position: absolute; width: 37%; background-color: white; z-index: 105; margin: 5% 0 0 30.2%; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 20px;}
        #continueOrNewBlah h3:first-of-type {color: #FDC300; font-family: 'wonderblah', 'Oswald', Verdana, Arial, Helvetica, sans-serif; letter-spacing: 2px; text-align: center;}
        #continueOrNewBlah h3 {color: #82CFF0; font-family: 'wonderblah', 'Oswald', Verdana, Arial, Helvetica, sans-serif; letter-spacing: 2px; text-align: center; font-size: 1.5em; line-height: 100%;}
        #continueOrNewBlah #CTA3 {text-align: center; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 500; font-size: 18px; background-color:#82CFF0; color:#FFF; width:20%; padding: 3px 25px; cursor:pointer; border: 0; float: left; margin: 2% 35% 2% 36%;
        -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
        #continueOrNewBlah #CTA3:hover {background-color:#FDC300;}
        #continueOrNewBlah #CTA3:active {background-color:#FDC300; margin: 3% 35% 1% 36%;}
        #continueOrNewBlah #CTA4 {text-align: center; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 500; font-size: 18px; background-color:#82CFF0; color:#FFF; width:20%; padding: 3px 25px; cursor:pointer; border: 0; float: left; margin: 2% 35% 2% 36%;
        -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
        #continueOrNewBlah #CTA4:hover {background-color:#FDC300;}
        #continueOrNewBlah #CTA4:active {background-color:#FDC300; margin: 3% 35% 1% 36%;}
        #continueOrNewBlah #CTA5 {text-align: center; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 500; font-size: 18px; background-color:#82CFF0; color:#FFF; width:20%; padding: 3px 25px; cursor:pointer; border: 0; float: left; margin: 2% 35% 2% 36%;
        -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
        #continueOrNewBlah #CTA5:hover {background-color:#FDC300;}
        #continueOrNewBlah #CTA5:active {background-color:#FDC300; margin: 3% 35% 1% 36%;}
        #continueOrNewBlah #CTA6 {text-align: center; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 500; font-size: 18px; background-color:#82CFF0; color:#FFF; width:35%; padding: 3px 25px; cursor:pointer; border: 0; float: left; margin: 2% 28% 2% 28%;
        -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
        #continueOrNewBlah #CTA6:hover {background-color:#FDC300;}
        #continueOrNewBlah #CTA6:active {background-color:#FDC300; margin: 3% 28% 1% 28%;}

        #continueOrNewBlah #EXBLAH {text-align: center; font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 500; font-size: 18px; background-color:#82CFF0; color:#FFF; width:20%; padding: 3px 25px; cursor:pointer; border: 0; float: left; margin: 2% 35% 2% 36%;
        -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
        #continueOrNewBlah #EXBLAH:hover {background-color:#FDC300;}
        #continueOrNewBlah #EXBLAH:active {background-color:#FDC300; margin: 3% 35% 1% 36%;}
        #closeContinueOrNewBlah {position:absolute; top:28px; margin-left:20px; left:0%; width:32px; height:32px; cursor:pointer;}


        #continueOrNewBlah span {font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 500; font-size: 16px; color: #000;}
        #continueOrNewBlah span::before {content: '\f054'; font-family: 'FontAwesome'; color: #82CFF0; font-size: 19px;}
        #continueOrNewBlah p {font-family: 'Oswald', Helvetica, Verdana, sans-serif; font-weight: 300; font-size: 17px; text-align: justify; color: #696763; margin: 7px 0 25px 0;}


        /*Bubble & Avatar*/
        #bullesavatar{display: block;}
        #avatar1{margin-top: 12%; max-width: 80%;margin-left: 6%;}
        #avatar2{max-width: 80%;margin-top: 10%;margin-left:14%}
/****** FIN PAGE *******/