@media screen and (max-width: 365px){

textarea#message{
margin-left: auto;
margin-right: auto;
width: auto;


padding-left: 0px;

}

div.formulaire {


min-height:700px;

height: auto;
}	

}



@media screen and (max-width: 650px){
	div.formulaire {

width: 80%;
min-height:700px;

margin-left: 20px;
padding-left: 0px;
height: auto;
}	
	

	
div.contact-carte {
width: 88%;
padding-bottom: 30px;
}


div.contact-message-titre{
   margin: 8px;

     width: 100%;
}

label.nom-texte, label.email-texte, label.sujet-texte, label.message-texte{
  margin: 0px 10px;
}

label.nom-texte, label.email-texte, label.sujet-texte{
  margin: 0px 10px;

}

label.message-texte{
  margin: 0px 10px;

}

label.civilite-texte{
  width: 70px;
  margin:8px 10px 15px 10px;

}


input#nom, input#email, input#sujet, select#civilite{
  margin: 5px 10px 20px 10px;

}

input#nom, input#email, input#sujet{
  width: 200px;
    height: 12px;
}

select#civilite{
  width: 90px;
}

textarea#message{
margin-left: 40px;

}

.contact-envoi-message {
   margin-right: 20px;
}
	
}




@media screen and (max-width: 1200px) and (min-width: 650px) {
	
div.formulaire {
width: 85%;
min-height:700px;
margin-left: auto;
margin-right: auto;
float: none;
}	

textarea#message {
     margin: 10px 12% 20px 0px;
  width: 55%;

}


div.contact-carte {
width: 97%;
padding-bottom: 30px;
border: none;
float: none;
margin-left: auto;
margin-right: auto;
}


div.contact-carte img{
   width: 93%;
margin-left: 4%;
float: none;

}

input#nom, input#email, input#sujet, select#civilite{

  width: 200px;
  
}
}



@media screen and (max-width: 649x){
	
div.formulaire {
width: 85%;
min-height:700px;
margin-left: auto;
margin-right: auto;
float: none;
}	

textarea#message {
   min-height: 350px;
   margin-left: 8%;
   background-color: blue;
}


div.contact-carte {
width: 97%;
padding-bottom: 30px;
border: none;
float: none;
margin-left: auto;
margin-right: auto;
}


div.contact-carte img{
   width: 93%;

}

input#nom, input#email, input#sujet, select#civilite{

  width: 200px;
  
}


}






/*  design form base ---------------------------------------------------------------------------- */


.formulaire-contact-titre{
   margin-bottom: 25px;
   background-color: white;
   border-radius: 7px;
   width: 90%;
   margin-left: auto;
   margin-right: auto;
}


.formulaire-contact-titre h1{
	padding-top: 30px;
margin-left: 70px;
}

.formulaire-contact-titre h3{
padding-bottom: 20px;
}

.formulaire-contact-titre p{
margin-left: 50px;
padding-bottom: 20px;
}




.formulaire {
position: relative;
margin-bottom: 50px;
width: 50%;
height:650px;
background-color: beige;
margin-left: 30px;
float: left;
  border-radius: 7px;
  padding: 20px;
}




.contact-message-titre{
   margin: 15px;
   float: left;
   clear: left;
}

#nom, #email, #sujet, #civilite{
   margin: 15px 0px 15px 15px;
   float: left;
 clear: right;
 /*  margin-top: 0px;
  margin-bottom: 16px;*/
    padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 80%;
  max-width: 300px;
}


#civilite{
background-color: white;
}


.nom-texte, .email-texte, .sujet-texte, .message-texte, .civilite-texte, input[type=submit]{
   margin: 15px 15px 15px 0px;
font-weight: bold;
/*  margin-top: 6px;
  margin-bottom: 16px;*/
    padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90px;
 /* max-width: 300px;*/
 
}

.nom-texte, .email-texte, .sujet-texte, .message-texte, .civilite-texte{
   float: left;
 clear: left;

}



.contact-message-envoi {
   margin: 35px 15px 0 25px;
  /*height: auto;*/

  background-color:grey;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  clear: right;
 position: relative;
 float: right;
   width: 200px;
  float: right;
   margin-right: 5%;
}



input[type=submit]:hover {
  background-color: darkgrey;
  float: right;
}


input[type=submit] {
clear: right;
  float: right;
  margin-right: 85px;
}


#message {
   width: 65%;
 /* margin-left: 200px;*/
   min-height: 200px;
   min-width: 230px;
   height: 250px;
   border-color: #0f0f0f;
   float: right;
   margin: 10px 4% 20px 0px;

}


.contact-carte {
	position: relative;
width: 40%;
   float: right;
margin-right: 30px;
border-left: dotted;

}

.contact-carte img{
   width: 95%;
border-radius: 7px;
margin-left: 20px;
}

/* Complement information */

.complement-info label, .complement-info p, .complement-info input {
display: none;
/*visibility: hidden;*/
color: orange;
border-color: black;
border-style: solid;
border-width: 2px;
}






/* Form */