@font-face {
  font-family: 'craie';
  src: url(../fonts/chalkduster-webfont.woff) format('woff'),
       url(../fonts/chalkduster-webfont.eot) format('eot'),
       url(../fonts/chalkduster-webfont.svg) format('svg'),
       url(../fonts/chalkduster-webfont.ttf) format('ttf');
}

body { background-image: url(../img/fond.jpg); background-position: top center; background-repeat: no-repeat; overflow: hidden; }

/* MISE EN PAGE */

#christophe { display: block; position: absolute; bottom: 566px; left: 50%; margin-left: -150px; height: 225px; width: 300px; background-image: url(../img/tete.png); }
#content { position: absolute; bottom: 0; left: 50%; margin-left: -473px; display: block; height: 650px; width: 947px; background-image: url(../img/tableau.png); padding: 50px 250px; overflow: hidden; color: #fff; }
#tableau h1 {     position: absolute;
    bottom: 640px;
    left: 50%;
    margin-left: -400px;
    display: block;
    width: 210px;
    height: 210px;
    background-image: url(../img/logo.png);
    cursor: pointer;
    background-repeat: no-repeat; }
@media only screen and (max-width : 768px) { #tableau h1 { margin-left: -350px; } }
@media only screen and (max-height : 820px) { #tableau h1 {width: 208px;
    height: 212px;
    bottom: 520px;
    margin-left: -514px;
    background-image: url(../img/logo.mini.png); } }

#tableau h1 span { display: none; }

/* ELEMENTS DE BASE */

h2 { font-family: craie; font-size: 39px; margin-bottom: 30px; text-align: center; }
h3 { font-family: craie; }

a { color: #fff; text-decoration: underline; }
a:hover { color: #fff; }

/* FORMULAIRE DE JEU */

.label { text-align: right; font-family: craie; }
.label label { font-size: 20px; font-weight: normal; }

.champs { margin: 10px 0; }
.champs input { background: transparent; width: 100%; border: 0 #fff solid; border-bottom-width: 1px; }
.fa { font-size: 20px; }
.fa-check { color: #3ec400; }
.fa-close { color: #cc0003; }

.code-ticket { text-align: center; margin-top: 30px; }
.code-ticket input { display: block; background: url(../img/ticket.png); text-transform: uppercase; border-width: 0; width: 200px; height: 50px; text-align: center; color: #000; font-weight: bold; font-size: 20px; }

.checkboxes { font-size: 12px; margin-top: 20px; line-height: 20px; }

/* BOUTONS */

input[type=submit] { font-family: craie; font-size: 35px; background: transparent url(../img/arrow.png); background-position: center left; background-repeat: no-repeat; padding-left: 60px; border-width: 0; margin-top: 20px; }
.replay-line { text-align: center; }
input.replay { background: transparent url(../img/reload.png); background-position: center right; padding-left: 0px; padding-right: 35px; background-repeat: no-repeat; }

/* PERDU */

.perdu h3, .gagne h3 { font-size: 20px; }
.perdu, .gagne { padding: 0 55px; text-align: center; }

/* LIEN VERS LE SITE */

.visit { text-align: center; margin-top: 50px; }
.visit a { background: transparent url(../img/arrow.png); background-position: center left;
background-repeat: no-repeat; font-family: craie; text-decoration: none; font-size: 18px; padding-left: 70px; }

/* ALERTE */

h4#myModalLabel { color: #531E2D; font-weight: bold; }
.modal-body { color: #000; }

/* MENTIONS LEGALES */

.scrollpane { dispay: block; height: 485px; padding-right: 20px; overflow: auto; }

/* AFFICHAGE TEL PORTABLE */

@media only screen and (max-width : 528px), only screen and (max-height : 595px) {

    body { background-image: url(../img/fond_mobile.jpg); overflow: auto; background-size: cover; background-attachment: fixed; }
    #christophe { display: none; }
    #tableau h1 { position:relative; padding: 0; left: 0; margin-left: 0; width: 100%; background-position: center center; background-repeat: no-repeat; bottom: inherit; background-image: url(../img/logo.mini.png); }
    h2 { font-size: 27px; }
    #content { background-image: none; height: auto; width: 100%; position:relative; padding: 0; left: 0; margin-left: 0; }
    .scrollpane { height: auto; margin-left: 20px; }

}