#en-tete {display: flex; margin-left: auto; margin-right: auto; width: 800px;}
#ent-logo   {width: 40%;}
#ent-dates, #ent-gignac {width: 30%; padding: 4em;}


img {max-width: 100%; margin: 0 auto;}

input, textarea, button, select, option {border-radius: 3px;
padding: 10px;
background: #FFF;
border: none;
color: #000;
}

input:focus,
textarea:focus,
button:focus,
select:focus
 {box-shadow: 0 0 50px #008F9A;}


button{cursor: pointer;}

.preferences {
    float: left;
    width: 300px;
    padding-left: 40px;
}

table {margin-bottom: 3em;}

td input {width: 94%; border-radius: 3px; border: none; margin: 3%}

.form {clear: both; display: none; position: relative;}
.vis {display: block}

label , .label{width: 700px; display: block; min-height: 35px; clear: both; vertical-align: top; padding-top: 1.5em;}

label input[type=text], label input[type=file],label input[type=tel], label select, label textarea{float: right; width: 200px}

label select#mois-naissance, label select#jour-naissance, label select#annee-naissance {float: none; width:auto;}

label input[type=radio] {float: left; clear: none}
label.b {width: 60px; float: right; clear: none;	}

label:after, .label:after {display: table; content:""; width: 90%; height: 20px;}

#DATE_DE_NAISSANCE.err {height: 1px; display: block !important; padding: 0}

#message-date {width: 100%; clear: both; padding: 2em 0; color: orange; text-align: center}

#TAILLE_T_SHIRT.label:after {height: 1px;}

label textarea{float: right; width: 400px; height: 200px;}


h2 {border: none; margin: 15px 0 25px 0; padding: 0 0 0 20px; background: url(../img/layout/triangle-rouge.png) 5px 10px no-repeat; cursor: pointer;}
h2.open {background: url(../img/layout/triangle-rouge-bas.png) 5px 10px no-repeat}

h2:after {content: ""; width: 150px; height: 5px; background: #FFF; 
position: absolute; bottom: -15px; left: 15px}

h2, h1 {position: relative; margin-bottom: 40px; color: #FFF}

h1:after {content: ""; height: 5px; background: #FFF; 
 margin: 0 35%; display: block; margin-top: 10px}

p.c {text-align: center;}




#preferences label {width: 100%; height: auto;}
#preferences label input[type=text] {float: right; width: 20px; margin: 0 40px 0 0}


#preferences {margin-bottom: 4em}

#preferences select {margin-right: 5em}

.preferences {max-width: 500px; float: none; width: auto; }

#preferences label input[type="text"] {width: 200px; margin-bottom: 4em}

#preferences .preferences:nth-child(3) label {float: left; width: 100px; clear: none; margin-right: 1em;}













button {clear: both; float: none; color: #000; font-weight: bold;}

td {padding: .5em 0; text-align: center;}

td.gris input {background: #d5d5d5;}
span.gris {background: #d5d5d5; height: 20px; width: 30px; display: block; float: left; margin: 0 10px 0 0; border-radius: 3px;}

#commentaires label {height: 110px; width: 900px}
#commentaires textarea {width: 600px; height: 100px; float: right;}


#message_coordonnees, #message_email_doublon {width: 100%;  padding: 20px; border: 3px solid red; 
    border-radius: 10px; display: none; margin: 1em auto;}
    
#message_preferences {width: 600px;  padding: 20px; border: 3px solid red; border-radius: 10px; display: none; position: relative; margin-bottom: 20px;}
#message_disponibilites {width: 600px;  padding: 20px; border: 3px solid red; border-radius: 10px; display: none; position: relative; margin: 0 20px 40px 20px;}
#message_charte {width: 600px;  padding: 20px; border: 3px solid red; border-radius: 10px; display: none; position: relative; margin: 0 20px 40px 20px;}


.err {border: 3px solid red; border-radius: 5px;}
.err2 {border: 3px solid orange}

.petit {font-size: 10px; line-height: 10px; display: block;}
.date-petit {width: 50px;}
#date-morceaux {float: right;}

#labelsite {display: none;}

#retour {color: #FFF; font-size: 18px; font-weight: bold;}

/*iframe {display: none;}*/



/*
#box-photo {width: 400px;}
#box-photo-permis {width: 400px;}*/

#place-form-photo {height: 0; width: 100%}
#place-form-photo-permis {height: 0; width: 100%}
/**/





#box-photo button {float: right;}
#box-photo-permis button {float: right;}

#label-photo {position: relative;}
#label-photo-permis {position: relative;}

#photo {position: absolute; right: 0; opacity: 0}
#photo-permis {position: absolute; right: 0; opacity: 0}

.progressBar span {height: 20px; background: red;}
.progressBar-permis span {height: 20px; background: red;}

#uploadResult img {max-width: 300px; width: auto; height: auto; max-height: 300px; margin-bottom: 2em}
#uploadResult-permis img {max-width: 300px; width: auto; height: auto; max-height: 300px; margin-bottom: 2em}

#uploadResult, #uploadResult div {width: 100%; text-align: right;}
#uploadResult-permis div {width: 100%; text-align: right;}

#LABEL_QUEL_POSTE {display: none;}



#choix-action {display: flex; justify-content: space-around; align-items: center; margin: 4em 0}
#choix-action > div {width: 25%;  border: 1px solid; height: 200px; text-align: center; 
  }


#choix-action p {margin: 0; height: 100%; display: flex; align-items: center;}
#choix-action a {display: block;  height: 100%; 
    line-height: 2em;
  font-weight: bold;  
  text-decoration: none; padding: 4em 1em 1em 1em; text-transform: uppercase; color: #FFF}


#choix-action > div :hover{color: #000; background: #FFF}

footer {min-height: 5em;}


#form-connection {display: none;}

.form-auth {width: 300px; margin: 0 auto; border: 1px solid; padding: 1em 2em}

.form-auth h3 { text-align: left; color: #FFF; font-family: 'Duru Sans',"Trebuchet MS", Arial, helvetica, sans-serif;}

.form-auth label {margin-top: 2em;  height: 1.5em; min-height: 1.5em}




.ID, #NOM4, #PRENOM4, .label-id {opacity: .7; display: none;}

#PRENOM {text-transform : capitalize;}




.jour-dispo {width: 100%; display: flex; flex-wrap: wrap; border: 1px solid #FFF; padding: 1em 1em 2em 1em; margin-bottom: 1em}

.jour-dispo.festival {border-color: orange;}
.jour-dispo h4 {width: 100%; color: #FFF; margin: .5em 0 0 0}
.jour-dispo > div {width: 50%}
.jour-dispo .dp-n {display: none}


.jour-dispo label {width: 100%}

.jour-dispo input {float: left}