/**** FONTS ****/
/*  url('../fonts/wonderblahfont-webfont.woff2') format('woff2'), */
@font-face {
    font-family: 'wonderblah';
    src: url('../fonts/wonderblahfont-webfont.eot');
    src: url('../fonts/wonderblahfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/wonderblahfont-webfont.woff') format('woff'),
         url('../fonts/wonderblahfont-webfont.ttf') format('truetype'),
         url('../fonts/wonderblahfont-webfont.svg#wonderblahfontregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'wonderblah_elmt';
    src: url('../fonts/wonderblahfont_elmt-webfont.eot');
    src: url('../fonts/wonderblahfont_elmt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/wonderblahfont_elmt-webfont.woff2') format('woff2'),
         url('../fonts/wonderblahfont_elmt-webfont.woff') format('woff'),
         url('../fonts/wonderblahfont_elmt-webfont.ttf') format('truetype'),
         url('../fonts/wonderblahfont_elmt-webfont.svg#wonderblahfontregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*** Message Notification ***/
.cssanimations.csstransforms #notification {
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
    -moz-transform:    translateY(-50px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;}
.cssanimations.csstransforms #notification {display: none;}
#notification {position: fixed; z-index: 101; top: 0;  left: 0; right: 0; background: #FDC300; text-align: center; line-height: 2.5; overflow: hidden; padding: 2.2% 0;
    font-family: 'Oswald', Verdana, Helvetica, sans-serif; color: #000; font-size: 19px; font-weight: 300; 
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow:    0 0 5px #000;
    box-shadow:         0 0 5px #000;}
#closeNotification, #closeNotificationSmall {cursor: pointer; font-family: 'wonderblah', 'Oswald', Verdana, Helvetica, sans-serif; color: #000; font-size: 50px; line-height: 0; margin: 2% 0 0 0.5%; position: absolute;}
#closeNotification:hover, #closeNotificationSmall:hover {color: #FFF;}

/****** GENERAL ******/
.colorOverlay {background: rgba(225, 231, 232, 1) !important;}


/****** MENU ******/
#menu {width: 100%; min-height: 110px; float: left; margin-bottom: 2px;
-moz-box-shadow: 0px 1px 0px 0px #FDC300, 0px 2px 0px 0px #FDC300;
-webkit-box-shadow: 0px 1px 0px 0px #FDC300, 0px 2px 0px 0px #FDC300;
-o-box-shadow: 0px 1px 0px 0px #FDC300, 0px 2px 0px 0px #FDC300;
box-shadow: 0px 1px 0px 0px #FDC300, 0px 2px 0px 0px #FDC300;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#FDC300, Direction=180, Strength=0);} 

    /*Logo et Motto WonderBlah (gauche)*/
    #logoMotto{height: 100%; float: left; width: 33%; margin-top: 0.5%;}
    #logo{height: 100%; float: left; width: 25%;}
    #logoMenu{height: 100%; float: left; width: 25%;}
    #wrapSVGMenu {float: right;}
    #logoWonderblah{width: 50%;float: right;}
    #motto{height: 100%; float: left; width: 75%;}
    #mottoWonderBlah{cursor: default; width: 100%; margin: 10% 0 0 5%; font-family: 'wonderblah_elmt'; color: #FDC300; letter-spacing: -2px; font-size: 1.4em;}

    /*CTA et Avatar centraux*/
    #CTAAvatar{float: left;width: 34%;height: 100%; margin-top: 0.2%;}
    #CTA1 {float: left; width: 33%; height: 100%;}
    #boutonCTA1 {cursor: pointer; width: 80%; height: 40%; margin: 20% auto; text-align: center; color: white; font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; background-color: #82cff0; line-height: 2.5em; font-weight: 500; letter-spacing: 1px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
    #boutonCTA1:hover {background-color:#FDC300;}
    #boutonCTA1:active {background-color:#FDC300; margin: 37px 0 0 19px;}
    #avatar {float: left; width: 18%; height: 100%; margin: 2px 7%;}
    #boutonAvatar {height: 100px;}
    #userAvatar {z-index: 2; width: 98%; position: relative; margin: -100% 0 0 1%; float: left;}
    #userCircleAvatar {z-index: 3; width:100%;position: relative;margin: 0;float: left;cursor: pointer;}
    #CTA2 {float: left; width: 33%; height: 100%;}
    #boutonCTA2 {cursor: pointer; width: 80%; height: 40%; margin: 20% auto; text-align: center; color: white; font-family:'Oswald', Verdana, Arial, Helvetica, sans-serif; background-color: #82cff0; line-height: 2.5em; font-weight: 500; letter-spacing: 1px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
    #boutonCTA2:hover {background-color:#FDC300;}
    #boutonCTA2:active {background-color:#FDC300; margin: 37px 0 0 19px;}

    /*connection (droite) */
    /* Connect Landing Page*/
    #btnConnect a {font-family: 'wonderblah', 'Oswald', Verdana, Helvetica, sans-serif; color: #FDC300; text-decoration: none; font-size: 23px; float: right; margin: 24px 0 0; cursor: pointer;}
    #btnConnect a:hover {color: #82CFF0;}
    #btnDisconnect {display: none;}
    #connection a {font-family: 'wonderblah', 'Oswald', Verdana, Helvetica, sans-serif; color: #FDC300; text-decoration: none; font-size: 23px; float: right; margin: 24px 0 0; cursor: pointer;}
    #connection a:hover {color: #82CFF0;}
    .btnPictoConnect {font-family: 'wonderblah_elmt', 'Oswald', Verdana, Helvetica, sans-serif !important; font-size: 35px !important; float: right !important;margin-top: -18px;}
    
    #connectionCaB, #connectionSaB, #connectionBlahvo, #connectionLiblahry, #connectionMyBlah, #connectionSettings {margin: 32px 0 0 0;}
    #connectionCaB a, #connectionSaB a, #connectionBlahvo a, #connectionLiblahry a, #connectionMyBlah a, #connectionSettings a, #connectionIndex a {font-family: 'wonderblah', 'Oswald', Helvetica, Verdana, sans-serif; color: #82CFF0; text-decoration: none; font-size: 20px; float: right; margin: 24px 0 0; cursor: pointer;}
    #connectionCaB a:hover, #connectionSaB a:hover, #connectionBlahvo a:hover, #connectionLiblahry a:hover, #connectionMyBlah a:hover, #connectionSettings a:hover, #connectionIndex a:hover {color: #FDC300;}
    #wrapConnect{width: 33%;float: left;height: 100%;}
    #connect {width: 76%; height: 100%; margin: 0 auto;}
    #connectText{float: left; width: 50%;}
    #spanConnect a {display: block; width: 140px; height: 30px; margin-top: 15.7%; float: right; cursor: pointer;
    background-image: url("../images/menu/BoutonsConnect.png");
    background-repeat: no-repeat; background-position: 0 -36px; background-size: 100%;}
    #spanConnect  a:hover {background-position: 0 0.48px;}
/****** FIN MENU ******/

/* Avatar + pop up avatar */
#menu-avatar-popup {display: none;}
#menu-avatar-popup:hover, #userCircleAvatar:hover ~ #menu-avatar-popup {z-index: 10000; background: #E8EDEB; width: 250px; height: 150px; margin: auto; top: 50px; position: relative; left: -70px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
    -webkit-box-shadow: 0px 0px 0px 1px #FDC300;
    -moz-box-shadow: 0px 0px 0px 1px #FDC300;
    -o-box-shadow: 0px 0px 0px 1px #FDC300;
    box-shadow: 0px 0px 0px 1px #FDC300;
    display: block;}
#menu-avatar-popup:after {z-index:10005; content: ''; position: absolute; bottom: 134px; left: 48.8%; width: 0; height: 0; border-right: 12px solid #E8EDEB; border-top: 20px solid #E8EDEB;
    -webkit-transform: scale(1) rotateZ(-90deg);
    -moz-transform: scale(1) rotate(-90deg);
    -ms-transform: scale(1) rotateZ(-90deg);
    -o-transform: scale(1) rotate(-90deg);
    transform: scale(1) rotateZ(-90deg);}
#menu-avatar-popup:before {z-index:10004; content: ''; position: absolute; bottom: 144px; left: 49%; width: 0; height: 0; border-right: 10px solid #FDC300; border-top: 10px solid transparent;
    -webkit-transform: scale(1) rotateZ(225deg);
    -moz-transform: scale(1) rotate(225deg);
    -ms-transform: scale(1) rotateZ(225deg);
    -o-transform: scale(1) rotate(225deg);
    transform: scale(1) rotateZ(225deg);}
#menu-popup-user-wondername {cursor: default; float: left; position: absolute; width: 100%; margin: 10px 0; font-family: 'Oswald', Verdana, Helvetica, sans-serif; text-align: center; font-size: 1.2em; font-weight: 700; color: #FDC300;}
.colG-Avy, .colD-Avy {position: absolute; width: 50%; margin: 15% 0 0; text-align: center; font-family: 'Oswald', Verdana, Helvetica, sans-serif;}
.colG-Avy ul, .colD-Avy ul {padding: 0;}
.colG-Avy ul li, .colD-Avy ul li {list-style: none; margin: 20px 0;}
.colG-Avy ul li a, .colD-Avy ul li a {text-decoration: none; color: #82CFF0;}
.colG-Avy ul li a:hover, .colD-Avy ul li a:hover {color: #FDC300;}
.colG-Avy {float: left;}
.colD-Avy {float: right; left: 50%;}




/*** FOOTER ***/
#footer{float: left;width: 100%; background-color: #82cff0; margin-top: 2%; padding: 0.3% 0;}
#wrapFooter, #wrapFooter a {width: 100%; margin: 0 auto; color: #FFFFFF; text-decoration: none; font-family: Verdana, Helvetica, sans-serif; font-size: 10px; text-align: center;}
#wrapFooter a:hover {color: #FDC300;}