/* STYLISATION DE BARRE */
.content{
    display: none;
}

/************************** logo chargement ***********************************/

/*-- orientation  landscape  message pour tourner la tablette ou iphone --*/
@media only screen and (orientation:landscape) and (max-height:800px){
    .bar{
        font-size: 20px;
        width: 150px;
        height: 25px;
        /*border: 3px solid #eaeaea;*/
        margin: 100px auto;
        /*border-radius: 7px;*/
        position: relative;
        background: rgba(255,255,255,0.6);
        margin-top: 110px;
    }
}

/*-- iphone 4 -> iphone 6 plus  orientation  portrait  --*/
@media only screen and (max-width:414px) and (orientation:portrait){
    .bar{
        font-size: 20px;
        width: 200px;
        height: 25px;
        /*border: 3px solid #eaeaea;*/
        margin: 100px auto;
        /*border-radius: 7px;*/
        position: relative;
        background: rgba(255,255,255,0.6);
        margin-top: 170px;
    }
}

/*-- ipad orientation portrait --*/
@media only screen and (min-width:768px) and (max-height:1024px) and (orientation:portrait){
    .bar{
        font-size: 20px;
        width: 200px;
        height: 25px;
        /*border: 3px solid #eaeaea;*/
        margin: 100px auto;
        /*border-radius: 7px;*/
        position: relative;
        background: rgba(255,255,255,0.6);
        margin-top: 400px;
    }
}

/*-- ipad pro orientation portrait --*/
@media only screen and (min-width:1024px) and (max-height:1366px) and (orientation:portrait){
    .bar{
        font-size: 20px;
        width: 200px;
        height: 25px;
        /*border: 3px solid #eaeaea;*/
        margin: 100px auto;
        /*border-radius: 7px;*/
        position: relative;
        background: rgba(255,255,255,0.6);
        margin-top: 600px;
    }
}

/*-- Samsung note 10.1 orientation portrait --*/
@media only screen and (min-width:800px) and (max-height:1280px) and (orientation:portrait){
    .bar{
        font-size: 20px;
        width: 200px;
        height: 25px;
        /*border: 3px solid #eaeaea;*/
        margin: 100px auto;
        /*border-radius: 7px;*/
        position: relative;
        background: rgba(255,255,255,0.6);
        margin-top: 500px;
    }
}

/*-- pc standard orientation portrait --*/
@media only screen and (min-device-width:1280px)  {
    .bar{
        font-size: 20px;
        width: 200px;
        height: 25px;
        /*border: 3px solid #eaeaea;*/
        margin: 100px auto;
        /*border-radius: 7px;*/
        position: relative;
        background: rgba(255,255,255,0.6);
        margin-top: 320px;
    }  
}

/*-- pc large --*/
@media only screen and (min-width:1920px){
    .bar{
        font-size: 20px;
        width: 200px;
        height: 25px;
        /*border: 3px solid #eaeaea;*/
        margin: 100px auto;
        /*border-radius: 7px;*/
        position: relative;
        background: rgba(255,255,255,0.6);
        margin-top: 420px;
    } 
}

/*****************************************************************************/

/* RAJOUT DU PETIT TEXTE EXPLICATIF "Loading...*/
.bar:after{
    margin-top: 3em;
    content: "Chargement...";
    font-family: Verdana;
    position: absolute;
    left: 15%;
    top: 150%;
}

.bar .sphere{
    margin-top: 60px;	
    display: block;
    width: 24px;
    height: 100%;
    background: #eaeaea;
    border-radius: 50%;
    -moz-animation: slide 1.75s infinite ease-in-out alternate;
    -webkit-animation: slide 1.75s infinite ease-in-out alternate;
    -ms-animation: slide 1.75s infinite ease-in-out alternate;
    -o-animation: slide 1.75s infinite ease-in-out alternate;
    animation: slide 1.75s infinite ease-in-out alternate;
}

/* Utilisation des keyframes pour la gestion de l'animation */
@-moz-keyframes slide{
    to { margin-left: 90%; }
}

@-webkit-keyframes slide{
    to { margin-left: 90%; }
}

@-ms-keyframes slide{
    to { margin-left: 90%; }
}

@-o-keyframes slide{
    to { margin-left: 90%; }
}

@keyframes slide{
    to { margin-left: 90%; }
}

/* END OF STYLIZATION :) ****************************************************************************/