body {
    margin:0;
    padding:0;
    font-family:Arial, sans-serif;
    font-size:62.5%;
    background-color:#FFFFFF;
}
body.start {
    -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
    -ms-transition-property: background-color;
    -o-transition-property: background-color;
  transition-property: background-color;
  transition-duration:20s;
  -moz-transition-duration:20s;
  -webkit-transition-duration:20s;
    -ms-transition-duration:20s;
    -o-transition-duration:20s;
}
body.start {
    background-color:#c9e4fe;
}

#hide {
    position:fixed;
    top:0;
    left:0;
    width:50%;
    height:100%;
    background-color:#FFF;
}
.vertical #hide {
    width:100%;
    height:50%;
}
canvas {
    display:block;
    position:fixed;
    top:0;
    left:0;
    cursor:pointer;
}
#logo {
    width:8%;
    min-width:50px;
    max-width:90px;
    position:fixed;
    top:20px;
    right:20px;
    display:block;
}
.vertical #logo {
    right:auto;
    left:10px;
    top:10px;
}
.container {
    color:#5886DB;
    text-transform:uppercase;
  pointer-events: none;
    cursor:pointer;
    display:none;
    top:50%;
    /*left:75%;*/
    width:35%;
    position:fixed;
    margin-top:-300px;
    margin-left:57.5%;
    z-index:100;
  height:600px;
  line-height:600px;
  text-align:center; /* centrage horizontal */
}
.vertical .container {
    top:75%;
    left:0;
    margin-left:15%;
    width:70%;
}
#message a, #message a:hover, #message a:focus {
    color:#000;
}

#help {
    font-size:1.8em;
    color:#888;
    position:absolute;
    bottom:10px;
    width:50%;
    margin-left:50%;
    text-align:center;
    cursor:pointer;
}
#credits {
    position:fixed;
    bottom:0px;
    right:20px;
    padding:2px;
    font-size:1.5em;
    color:#888;
}
#credits-box {
    cursor:pointer;
    width:890px;
    color:#888;
    display:block;
    text-decoration:none;
    position:fixed;
    padding:2px;
    bottom:0;
    right:-892px;
    /*background:#c9e4fe;*/
    font-size:1.5em;
    -webkit-transition-property: right;
  -moz-transition-property: right;
    -ms-transition-property: right;
    -o-transition-property: right;
  transition-property: right;
  transition-duration:1s;
  -moz-transition-duration:1s;
  -webkit-transition-duration:1s;
    -ms-transition-duration:1s;
    -o-transition-duration:1s;
}

#credits-box.open {
    right:0px;
}
.vertical #help {
    width:auto;
    margin-left:10px;
    bottom:0px;
}
p {
    display:none;
    text-align:center;
    cursor:pointer;
}
.vertical #message {
    font-size:1.5em;
}
#message {
    font-size:2em;
    cursor:pointer;
  vertical-align:middle;
  display:inline-block;
  line-height:normal; /* on rétablit le line-height */
  text-align:left; /* ... et l'alignement du texte */
}

.no-cvs .container {
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-300px;
    margin-left:-400px;
    background:#FFF url(../img/alternative.png) left top no-repeat;
    padding:0 0 0 400px;
    width:400px;
    height:600px;
}
.no-cvs #message p {
    display:block;
}

@media only screen 
and (min-device-width : 481px) 
and (max-device-width : 767px) {
    .container {
        /*width: 300px;
        margin-left: -150px;*/
        font-size: 0.6em;
    }
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    /* Styles */
    #credits-box {
        width:300px;
        right:-302px;
        background-color:rgba(255, 255, 255, 0.6);
        text-align:right;
    }
    .container {
        /* width: 200px;
        margin-left: -100px;*/
        font-size: 0.8em;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
    /* Styles */

}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
    /* Styles */
    .vertical .container {
        /*width:300px;
        margin-left:-150px; */
        font-size:0.7em;
    }
    #help {
        font-size:1.2em;
        width:70%;
        margin:0 15%;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    /* Styles */

}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    .vertical .container {
        /*width: 400px;
        margin-left: -200px; */
        font-size: 1.2em;
    }
    /* Styles */
    #help {
        font-size:1.2em;
        width:70%;
        margin:0 15%;
    }
    #credits-box {
        width:500px;
        right:-502px;
    }
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
    /* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    /* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
}