html {
    margin: 0;
    padding: 0;
    background: #1da4ba;
    background: -webkit-linear-gradient(left top,#045391, #1da4ba, #d0e7d6); 
    background: -o-linear-gradient(bottom right,#045391, #1da4ba, #d0e7d6);
    background: -moz-linear-gradient(bottom right,#045391, #1da4ba, #d0e7d6);
    background: linear-gradient(to bottom right,#045391, #1da4ba, #d0e7d6);
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
    min-height: 100%;
}
body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    background: transparent;/*#f6f6f6;*/
    color: #333;
    /*font-family: 'QuicksandBook-Regular';*/
    width: 100%;
}
body.mobile {
    position: absolute;
    height: 100%;
    min-height: 100%;
}
html.loading {
    /* Replace #333 with the background-color of your choice */
    /* Replace loading.gif with the loading image of your choice 
    background: #f6f6f6 url('../img/wait_loading.gif') no-repeat 50% 50%;*/

    /* Ensures that the transition only runs in one direction */
    -webkit-transition: background-color 0;
    transition: background-color 0;
}
#root {
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
html.loading body {
    background: transparent url(../img/logo_small.png) no-repeat center 35%;
    width: 100%;
    position: absolute;
    background-size: 90%;
}
@media screen and (min-width:520px){
    body {
        font-family: 'QuicksandBook-Regular';
    }
    html.loading body {
        background-size: 30%;    
    }
}
html.loading #root{
    opacity: 0;
    -webkit-transition: opacity 0;
    transition: opacity 0;
}
h1,h2{
    letter-spacing: 1px;
    text-align:center;
    color:#76cdf3;
    font-weight: bold;
}
textarea {
    -webkit-transform: translate3d(0,0,0);
}
.espace-label{
    color:#76cdf3;
    font-weight: bold;
}
#espace-wait-block{
    display:block;
    width:200px;
    padding:15px;
    position: fixed;
    left: 50%;
    background: white;
    z-index: 1000;
    border-radius: 30px;
    box-shadow: 2px 2px 4px #dda;
    top: 50%;
    margin-top: -150px;
    margin-left: -107px;
    color:#76cdf3;
}
.packageloader, .joofsynchro, .ajaxloader{
    display: none !important;
}
.packageloader{
    display:inline-block;
    width:60px;
    height:14px;
    line-height: 14px;
    padding: 03px;
    position: fixed;
    bottom:2px;
    right:2px;
    background:#eaeaff;
    border: none;
    color:white;
    text-align: center;
    font-size: 11px;
}
.joofsynchro {
    display:block;
    width:14px;
    height:14px;
    border-radius: 7px;
    background: greenyellow;
    position: fixed;
    right:1px;
    bottom: 1px;
    z-index: 5000;
}
.joofsynchro.offline {
    background: orangered;
    -webkit-animation-name: synchroanim;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    animation-name: synchroanim;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}
#ESPACE_WAIT div {
    width: 30px;
    height: 30px;
    border-radius:15px;
    margin:0px 10px;
    background: #76cdf3;
    position: relative;
    display:inline-block;
    -webkit-animation-name: espacewaitanim;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    animation-name: espacewaitanim;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}
#ESPACE_WAIT div.espace-wait-1{
    -webkit-animation-delay: 0.5s;
}
#ESPACE_WAIT div.espace-wait-2{
    -webkit-animation-delay: 1s;
}
#ESPACE_WAIT div.espace-wait-3{
    -webkit-animation-delay: 1.5s;
}
#ESPACE_WAIT div.espace-wait-4{
    -webkit-animation-delay: 2s;
}
@-webkit-keyframes espacewaitanim {
    0%   {opacity:1; left:0px; top:0px;}
    33%  {opacity:0.8; left:0px; top:4px;}
    66%  {opacity:0.2; left:0px; top:-4px;}
    100% {opacity:1; left:0px; top:0px;}
}
@keyframes espacewaitanim {
    0%   {opacity:1; left:0px; top:0px;}
    50%  {opacity:0; left:4px; top:0px;}
    100% {opacity:1; left:0px; top:0px;}
}
@-webkit-keyframes synchroanim {
    0%   {opacity:1; width:14px; height:14px;}
    33%  {opacity:0.8; width:16px; height:16px;}
    66%  {opacity:0.4; width:18px; height:18px;}
    100% {opacity:1; width:14px; height:14px;}
}
@keyframes synchroanim {
    0%   {opacity:1; width:14px; height:14px;}
    33%  {opacity:0.8; width:16px; height:16px;}
    66%  {opacity:0.4; width:18px; height:18px;}
    100% {opacity:1; width:14px; height:14px;}
}