@import url(global.css);
@import url(header2.css);
@import url(footer.css);

/*BODY*/

#contact{
width: 90%;
margin: auto;
margin-top: 5%;
}

#voir:hover{
cursor : pointer;
}

#numero{
display: none;
}

#bl-contact{
width: 220px;
float: left;
margin: 10px 50px 10px 50px;
border: thin #ccc dotted;
border-radius: 10px;
box-shadow: 2px 2px 2px #ccc;
}

#tel, #mailto{
text-align: center;
margin: 10px 0px 10px 0px;
}

#bl-contact img{
display: block;
width: 100px;
margin: auto;
}

#mailto a, #tel a{
color: #000;
}

#formulaire{
width: 65%;
margin-left: 30%;
margin-bottom: 5%;
padding: 15px;
border-radius: 10px;
border: thin #ccc solid;
box-shadow: 1px 1px 5px #ccc;
color: #333;
}

#formulaire h2{
font-size: 170%;
color: #555;
font-weight: 400;
letter-spacing: 1px;
}

#formulaire  input, textarea{
width: 55%;
margin-right: 25%;
float: right;
}

textarea{
min-height: 100px;
}

#spamcode{
clear: both;
}

#spamcode input{
width: 50px;
float: none;
}

#spamcode img{
margin: 0px 10px 0px 10px;
position: relative;
top: 10px;
border: thin #ccc solid;
}

.g-recaptcha{
margin-top: 25px;
}

#valid input{
width: 100px; 
height: 30px;
}

#formulaire input:focus{
border: thin #222 solid;
}

.message{
font-family: sans-serif;
padding: 50px 0px 50px 0px; 
color: #333;
text-align: center;
width: 100%;
}

.message img{
position: relative;
top: 10px;
}

@media all and (max-width: 1087px){

#formulaire{
width: 55%;
margin-left: 40%;
}

#formulaire  input, textarea{
margin-right: 15%;
}

#spamcode input{
width: 50px;
float: none;
}

}

@media all and (max-width: 800px){

#bl-contact{
width: 220px;
float: left;
margin: 0px;
border: thin #ccc dotted;
border-radius: 10px;
box-shadow: 2px 2px 2px #222;
}

}

@media all and (max-width: 680px){

#bl-contact{
width: 95%;
margin: auto;
float: none;
}

h1{
font-size: 140%;
}

#tel, #mailto{
width: 45%;
display: inline-block;
text-align: center;
}

#formulaire{
clear: both;
width: 90%;
margin: auto;
padding: 15px;
margin-top: 25px;
margin-bottom: 20px;
}

#formulaire h2{
font-size: 170%;
color: #555;
font-weight: 400;
letter-spacing: 1px;
}

}

@media all and (max-width: 480px){

h1{
font-size: 140%;
}

#formulaire h2{
font-size: 140%;
}

#formulaire  input, textarea{
width: 90%;
float: none;
margin-left: 0%;
}

#spamcode input{
width: 50px;
float: none;
}

#valid input{
width: 100px; 
}

}